WordPressプラグインで入稿画面をカスタマイズする

「関連」フィールドの内容を「関連する情報リスト」として表示する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「関連」フィールドの内容を「関連する情報リスト」として、テンプレート内にプログラムを記述し、Webサイト上に表示する方法について、解説していきます。
講師:
06:58

字幕

このレッスンでは Advanced Custom Fieldsで作成した関連フィールドの内容を関連する情報リストとして表示する方法について解説していきます。まずは画面の方をみてみましょう。画面の方では前回までのレッスンで作成した関連情報のフィールドグループそしてその中には関連ページのカスタムフィールドが表示されてる状態になっていますね。今回は実際にここで選択した関連ページの情報をウェブサイトの方に反映させる方法についてみていきたいと思います。ここからは実際に WordPress のテンプレートファイルの中に実際に出力するプログラムを書き込んでいきたいと思います。それではエディタの方に移ります。はいエディタの方を表示してきました。このエディタでは「 twentyfifteen_child 」という「 twentyfifteen 」の子テーマの中に入っている「 content.php 」と「 style.css 」を開いた状態となっています。今回はこれらのファイルに対して実際に記述を行っていきます。それではまずは「 content.php 」の方をみていきましょう。今回注目していただきたい部分はこちらの「補足情報」の下にあるこちらの部分です。 「関連情報」と書かれている部分ですね。こちらの部分で実際に関連フィールドで入力された内容を引き出してウェブサイト上に表示するプログラムを書いています。それでは順番にみていきましょう。まずはこちらの部分変数「 pages 」というものを作ってそしてその中に「 relational_pages 」の値を「 get_field 」で引き出してそしてこちらの変数に格納しています。こちらの「 relational_pages 」というのは前回までのレッスンで作成した関連フィールドの名前でしたね。こちらをこのかっこの中の引数にして、そして「 get_field 」で値を引き出しています。そして次にこちらの部分です if 文ですね。if と書いて先程の変数「 $pages 」を書いています。こうすることによってこの「 relational_pages 」に値が入っていればこの if 文の中の処理を実行するといった内容になっています。それではこちらの if 文の中の処理をみていきましょう。まず関連情報を表示させる為のhtml タグを書いています。今回は「 dl 」「 dt 」「 dd 」タグそして「 a 」タグを使って構成しています。 そしてまずは「 dt 」タグのところにその項目のタイトルを書いてあげています。「関連情報」と書いていますね。そしてその下こちらの部分ですね、この下の部分で「 dd 」タグを使ってその選択された関連ページを選択された分だけ表示させるようにしています。それを実現するのはこちらの「 foreach 」という命令になります。「 foreach 」と書いてそしてかっこの中にまずは先程の変数「 pages 」を書いてその後に「 as 」そして新たに「 p 」という変数を作ってあげています。これはこちらの「 pages 」という変数の中に入っている配列やオブジェクトのデータを順番に繰り返して処理をするといった内容になっています。なのでこちらの「 pages 」の中に三つのデータが入っていればこれは三回繰り返されるという形になります。そしてこちらの変数「 p 」に関してはこちらの「 foreach 」の中でその個々のデータにアクセスする為に使えます。ではこちらの「 foreach 」の中をみていきましょう。まず繰り返す為の「 dd 」があってその中にリンクとなる「 a 」タグを書いていますね。そしてこちらの「 a 」タグの「 href 」の中にこのように「 get_permalink 」そしてその引数に「 $p 」変数「 p 」ですね。 そして「 -ID 」と書いています。これは個々の投稿の「 ID 」を「 get_permalink 」に与えてあげてそしてその投稿の「 permalink」要するに URL ですね。それを取得して最後「 echo 」表示させるといった形になってこの「 a 」タグ部分はそのページへのリンクを形成する形になります。そしてその「 a 」タグの中にはこちら「 echo 」と書いて「 get_the_title() 」そしてこの引数の部分には先程と同じ様に変数「 p-ID 」これで各投稿の ID を取得して「 get_the_title 」の引数に与えることでその個々の投稿のタイトルを引き出してそして最後「 echo 」これで html 上に反映させるといった形になります。それではこの状態で一度ウェブサイトの方を確認してみましょう。はいこちらがそのウェブサイトになります。それでは該当箇所を確認してみましょう。下の方にいきますとこちらに「補足情報」があって、更に下ですね。はいこちらの部分に「関連情報」が生成されているが分かるかと思います。そしてここで表示されているものというのは管理画面、こちらの部分ですね。 こちらの部分で選択されているものと同じであることが分かりますね。これで関連フィールドに入力された内容をウェブサイト上に反映させる処理は完了です。最後に「 style.css 」にこちらの関連情報に対するスタイルを定義してあげてデザインを整いてあげれば完了です。それではエディタに戻ります。そして次はこちらの「 style.css 」ファイルを開いてあげます。そしてこちらの .css ファイルの中の一番下の部分にこのように関連情報に対してのスタイルを定義してあげます。こうすることによって先程のウェブサイトの関連情報部分にデザインを適応することが可能になります。それではこの状態で再度ウェブサイトの方を確認してみましょう。はいこちらがその CSS を適応した状態の関連情報部分となっています。このように表示できれば一連の実装は完了という形になります。以上でレッスンは終了です。今回は関連フィールドの内容を関連する情報リストとして表示する方法について解説致しました。

WordPressプラグインで入稿画面をカスタマイズする

WordPressは世界中で使われている無料のWeb制作ソフト/CMSです。その機能を拡張してさらに便利にしてくれるのがAdvanced Custom Fieldsです。このコースではその機能の紹介からプラグインの入手先やインストール方法、さらにはフィールドグループの作成やサイトへの出力まで詳しく紹介します。

1時間36分 (19 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 1,990
発売日:2016年01月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。