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

「ユーザー」フィールドの内容をWebサイト上に反映させる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「ユーザー」フィールドで選択したユーザー情報をテンプレートの中にプログラムを記述し、Webサイト上へ反映させる方法について、解説していきます。
講師:
08:21

字幕

このレッスンでは Advanced Custom Fields略して「 ACF 」で作成したユーザーフィールドの内容をテンプレートの中で表示する方法について解説していきます。それではまず画面の方をみてみましょう。こちらの画面には前回までのレッスンで作成したユーザーフィールド「補足情報の筆者」ですね。こちらのフィールドが表示されてる状態となっています。今回はここで選択された内容をウェブサイトに表示させる方法についてみていきます。それではエディタの方に画面を移します。はいエディタ画面に移ってきました。今回こちらのエディタには「 twentyfifteen_child 」の中に含まれている「 content.php 」と「 style.css 」を開いた状態になっています。これらのファイルは前回までのレッスンで作成した「 twentyfifteen 」の子テーマである「 twentyfifteen_child 」のファイルですね。ではまずこちらの「 content.php 」ファイルの方をみていきましょう。さて今回こちらのファイルで注目しておきたい部分はこちらの部分となります。こちらの部分は前回までのレッスンで作成した補足情報のタイトルや補足情報の本文を出力する為のPHP のプログラムが書かれた部分となります。 今回はこちらの部分に更に「補足情報の筆者」を出力する為の枠を作って実際に出力していきたいと思います。その部分が丁度こちらの部分となります。それでは順番にみていきましょう。まずその筆者 投稿者の名前を出力する為の枠を作っています。それはこちらの「 dd 」タグですね。そしてこちらの「 dd 」タグに「情報投稿者:」と書いてその後に実際にその筆者の名前を出力する為のPHP プログラムを書いています。まずこちらの部分です。こちらの部分では変数「 author 」を作ってその変数に「 get_field() 」そしてその中に「 info_author 」というカスタムフィールドの中にある値を、こちらの変数「 author 」に格納しています。この「 get_field 」というのはAdvanced Custom Fields の独自の PHP 関数でこの引数に与えられたカスタムフィールドの中の値を取得してくる処理となります。見た様な関数で以前のレッスンで登場してきたこちらの「the_field 」というものがありますね。この「 the_field 」と「 get_field 」の違いですが、「 the_field 」がこちらの引数に与えられたカスタムフィールドの値を取得してきてそのまま表示する。 という処理に対してこちらの「 get_field 」はこちらの引数に与えられたカスタムフィールドの値を取得してくるだけとなります。例えば取得してきた値を更になにかしら加工する場合などにこちらの「 get_field 」を利用すると良いでしょう。今回はこちらの変数「 author 」に代入する形を取っていますね。それでは次にこちらの部分をみてみましょう。こちらの部分では変数「 author_name 」というものを作って、そしてその変数の中に先程の変数「 author 」を使ってそのカスタムフィールドで指定された筆者 要するにユーザーですね。ユーザーのラストネームとファーストネームを文字列で結合して代入するような形を取っています。この変数「 author 」の中に含まれてる情報は 配列情報となっていて様々な情報が一つの変数の中に格納されています。今回その配列にアクセスしてそのユーザーの名字やそのユーザーの名前を取得してきて一つの名前に結合してそしてこの変数に入れている形となります。そして最後にこちらで「 echo 」と記述してその引数に「 author_name 」を指定しています。こうすることによって実際に html 上に出力するという形を取っています。 以上でユーザーフィールドから値を取得してそれをウェブサイト上に反映するという処理は完了となりますが、補足で一点解説を付け加えておきたいと思います。それがこちらの部分となります。こちらの部分では「 user_lastname 」や「 user_firstname 」を指定してそのユーザーの名前などを取得してきていますがこれらの値をどのようにして知りえたかというの疑問に思う方もいらっしゃるかもしりません。その方法をご紹介したいと思います。こちらの配列のキーとなる「 user_lastname 」や「 user_firstname 」を知る方法はこちらの変数「 author 」の中身を覗き見ることでその存在を知ることがでます。では試にやってみましょう。まずこちらの部分にこのように「 var_dump 」と記載します。そしてこちらの引数の中に先程の変数「 author 」を入力してあげます。そしてこの指示の前後にプレタグを出力してあげます。このようにしてそしてこの処理の後ろにも「プレタグ閉じる」を入れてあげます。このようにした状態でこの「 content.php 」を保存してあげます。そしてこの状態でウェブサイトを確認してあげましょう。 はいウェブサイトに移ってきました。さて先程の該当仮象を確認してみるとこのように表示されてる部分があります。これが先程の変数「 author 」の中身となっています。変数「 author 」は配列の形式を取っていてそして先程利用していた「 user_firstname 」やこちらの「 user_lastname 」のところにユーザーの名前が格納されているのか分かりますね。このようにして変数の中に格納されている自分のほしい情報を見つけてくるといった形になります。それではエディタに戻ります。ではこちらの部分を削除してそしてこの状態で保存しておきます。そしてこの状態で再度ウェブサイトの方を確認してみましょう。はいこれがそのウェブサイトが表示した状態です。先程の該当箇所がこっちの部分となります。このようにユーザーフィールドで指定した内容をウェブサイト上に反-映することができました。最後に「 style.css 」にこちらの部分のスタイルを定義して見た目を整えてあげましょう。それではエディタの方に戻ります。はいエディタの方に戻ったら次は「 style.css 」の方を開きます。そして補足情報ですね。 前回までのレッスンで定義していたスタイルのところに今回追加した部分のスタイルを定義してあげます。はいこれが追加した状態となっています。それではこの状態で再度ウェブサイトを確認してみましょう。はいこれがその状態を反映したウェブサイトです。こちらの補足情報の部分の下の方を見てみるとこのように「情報投稿者」という形でユーザーフィールドに投稿された人物の名前が表示されている状態そしてスタイルが当たっている状態となっています。以上でユーザーフィールドで選択された情報をウェブサイト上に反映する方法となります。以上でレッスンは終了です。今回はユーザーフィールドの内容をテンプレートの中で表示する方法について解説致しました。

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

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

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

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

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

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