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

「ACF」で追加したコンテンツをWebサイト上に反映させる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「ACF」で追加したコンテンツをテンプレートにプログラムを記述し、Webサイト上に反映させる方法について、「ACF」のドキュメントのご紹介と、「ACF」独自のPHP関数の使い方、「style.css」へのスタイル追記方法などについて解説していきます。
講師:
07:34

字幕

このレッスンでは Advanced Custom Fields略して「 ACF 」で追加したコンテンツをテンプレートの中で出力させる方法について解説していきます。それではまず画面をみてみましょう。こちらの画面は投稿の編集画面ですね。こちらの画面の下の方には前回までのレッスンで作成したカスタムフィールドが表示されていてそのに実際に内容が入力された状態となっています。今回これらの情報を実際にウェブサイトの方へ反映させる方法について見ていきたいと思います。それではエディタに移ります。はいこれが前回のレッスンで作成した子テーマの「 content.php 」とそしてこちらの「 style.css 」をエディタで開いた状態となっています。今回は実際にこれらのファイルに対して出力するプログラムを記述していきます。Advanced Custom Fields で追加された情報を実際にウェブサイト表示させる為にはAdvanced Custom Fields で用意されている独自の PHP 関数を利用する必要があります。その独自の関数の利用の仕方はAdvanced Custom Fields のウェブサイトにそのマニュアルが載っています。 それではそのウェブサイトをみてみましょう。はいこれが Advanced Custom Fields のウェブサイトとなっています。こちらの「 Documentation 」というボタンをクリックしますとこのようにこの Advanced Custom Fields の使い方 マニュアルですね。そのページに遷移してきます。コードのサンプルがこちらの「 Code Examples 」というページに記載されていますのでそちらに覗いて見ましょう。はいこちらが「 Code Examples 」のページとなっています。この部分にこのようにフィールドの値を表示したければ「 the_field 」という関数を使って下さい。やフィールドの値を変数として引き出すにはということでこちらには「 get_field 」という関数の使い方が載っていますね。こういった関数を利用しながら実際にウェブサイトの方に値を表示させていきます。それではエディタに戻りましょう。はいエディタの方に戻ってきました。それではまずはこちらの「 content.php 」の方を見ていきたいと思います。今回注目していただきたい部分はこちらの下の部分丁度この「補足情報」と書かれている部分となります。 こちらの部分で先程確認したAdvanced Custom Fields の独自の PHP 関数を使って処理を記述しています。それでは順番にみていってみましょう。まずはこのように if 文を使って処理を大きく囲んでいます。そしてこの if 文の中には「 get_field 」。そしてこの「 get_field 」のかっこの引数には「 info_title 」という文字列を与えています。これはこの「 info_title 」っていうカスタムフィールドの中に値が入っていればこの if 文の中の処理を実行するという意味になります。この「 get_field 」の中に入っているこの「 info_title 」これは値を取得したいカスタムフィールド名となります。念の為 WordPress の管理画面で確認してみます。はいこちらが WordPress のフィールドグループの編集画面となります。先程指定していたこちらの「 info_title 」ですね。それはこの「補足タイトル」のカスタムフィールド名となっています。これを指定してあげているわけです。それではエディタに戻ります。はいエディタに戻ってきました。 それでは次にこちらの「 get_field 」についてみていきます。「 get_field 」とはAdvanced Custom Fields の独自の PHP 関数でこの引数に指定されたカスタムフィールドの中の値を引き出してくるという意味になります。こうして引き出された内容に値が有るか無いかを判別するのはこちらの if となっているわけですね。ではこちらの if 文の中をみていきましょう。まず補足情報を表示する為の html タグを記述していきます。今回「 dl 」タグと「 dt 」タグと「 dd 」タグを使っています。そしてこの「 dt 」タグのところには補足情報のタイトルをそしてこの「 dd 」タグの中には補足情報の本文を出力するようにしています。ではまずこちらの方からみてみましょう。「 the_field 」と書いて( ) と書いていますね。そしてこちらの引数には先程と同じく「 info_title 」というカスタムフィールド名を与えています。そしてこちらの「 the_field 」ですがこれはこちらの引数で与えられたカスタムフィールドの値を取得してそのまま表示するという関数になります。 従ってこうすることによって「 info_title 」に入力された内容がそのまま html に出力されるといった処理になります。そして次にこちらも確認しておきます。こちらも全く同じですね。こちらの引数のみだけが違う形になっています。今回は「 info_body 」を指定していますね。これは補足情報の本文を指し示すカスタムフィールド名になっています。要するにこのように「 the_field 」を使って「 info_body 」を引数として指定してあげることで補足情報の本文をそのまま取得して html 上に反映させるといった命令になります。それではこの状態で一度ウェブサイトの方を確認してみたいと思います。はいウェブサイトを表示してみました。こちらのこの「カピバラ」の中の下の方ですね。はいこちらの部分です。このようにカスタムフィールドに入力された内容が表示されてることが分かるかと思います。ただこの状態ですとちょっと見た目的に味気がないのでこの部分に対して CSS でスタイルを定義してあげましょう。それではエディタの方に戻ります。そして次にこちらの「 style.css 」を開きます。そしてこの .css ファイルの一番下の部分にこのように先程追加した補足情報に対するスタイルの定義を行ってあげます。 このようにすることで先程ウェブサイト上で確認した際に少し味気なかった補足情報の表示部分にデザインを定義してあげることができます。それではこの状態でウェブサイトの方を再度確認してみましょう。はいウェブサイトの方に戻ってきました。では先程の補足情報の部分を確認してみたいと思います。こちらの「カピバラ」の少し下ですね。このように先程と違ってデザインが適応されているのが分かるかと思います。これでカスタムフィールドをウェブサイト上に反映して表示させる手順が完了となります。以上でレッスンは終了です。今回は Advanced Custom Fieldsで追加したコンテンツをテンプレートの中で出力させる方法について解説致しました。

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

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

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

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

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

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