「Advanced Custom Fieldsを使って絵日記用カスタムフィールドを作ってみた」というblogを書いたときに続きをすぐに書こうと思ったのですが、気づいたらずいぶん経ってました。いくつも「次はこの部分を！」といいつつ、忘れてしまっていてすみません。
Advanced Custom Fieldsはまだまだたくさん機能がるので、それを使って絵日記投稿タイプで使う便利な投稿画面を作ってみましたのでそれについて書きます(^^)/
絵日記投稿タイプに必要なカスタムフィールドの確認
前回までに完成しているカスタムフィールドは、
背景の色:
今日の絵:
までです。普通にコーディングしたらとても面倒くさそうなこれらの項目もAdvanced Custom Fieldsを使うととても簡単に項目を指定することができました。
あと、予定していた項目はこんな感じです
本文の色:指定できる
天気:選ぶ(天気に合わせたアイコンが表示される)
今日の一言:1行でなにか入力
この項目をAdvanced Custom Fieldsで作成して、カスタム投稿タイプの表示するphpを修正して表示させることについて書きます。
カラーピッカーで本文の色を指定できるようにカスタムフィールドを追加する
カラーピッカーで本文の色を指定できるようにします。
ダッシュボード カスタムフィールド＞カスタムフィールド をクリック
絵日記 というフィールドグループに追加するので 絵日記 の下の 編集 をクリックします
+フィールドを追加 をクリック
こんな感じで指定しました。前回の背景の色を指定したときとほぼ同じですが、今回はデフォルト値として #000000(黒) を入れてみました。
フィールドを追加したら必ず右ブロックにある
更新をクリックします。
これで絵日記の新規追加を見ると
こんな感じで、黒が選ばれた状態で表示されます。
ラジオボタンで天気を指定できるようにカスタムフィールドを追加する
天気:選ぶ(天気に合わせたアイコンが表示される)
を追加します。
+フィールドを追加 をクリック
ラジオボタンの指定をします。選択し(選択肢、のことですね(^_^;)のところに天気の種類を羅列します。今回は選んだときに受け渡される値をそのまま表示する時のアイコンの名前にしたかったので、表示する文字とは別に指定しました。
hare : 晴れ
だと hare という値が受け渡されます。このとき注意したいのがこの : の前後には半角スペースを1文字ずつ入れるということです。ご注意ください。
あと、天気の種類がこれで全部かどうか分からなかったので、選択肢「その他」を追加するにチェックしました。
この状態で絵日記の新規追加を見ると、
こんな感じに天気がラジオボタンで表示されました。その他もあります。
その他 をクリックするとその他用のテキスト入力が表示されます。
テキストで今日の一言が入力できるようにカスタムフィールドを追加する
+フィールドを追加 をクリック
こんな感じに入力しました。絵日記の新規追加で見てみると、
こんな感じで追加されていました。説明文は上に出るんですね。
これで全部の項目が追加できました。
カスタムフィールドはそれぞれの項目のフィールド順序、あたりをドラッグしてドロップすると変えることができます。
カスタム投稿タイプにカスタムフィールドの表示を入れる
これで項目は追加できたので、次は 絵日記カスタム投稿タイプ の時にその項目を表示するようにカスタマイズします。
絵日記カスタム投稿タイプのコンテンツを表示しているところは、子テーマにあるcontent-ryus_enikki.phpです。
(「カスタム投稿タイプを使って、絵日記投稿タイプを作ってみた」参照)
ここで今回追加したカスタムフィールドを使って表示してみたいと思います。
enikki-tenki に入っている名前の画像を表示する
天気はアイコンで表示したいです。フリー素材サイト「かわいいフリー素材集いらすとや」さんの素材を使わせていただきました。
天気の選択肢で入力してあった hare : 晴れ の hare.png が 晴れのマークになるようにしました。それを子テーマのimagesというフォルダに置いてあります。
天気の種類分の画像を作ってあります。
表示するためには、content-ryus_enikki.phpで、
<?php
$tenki_array = array('hare', 'hare_kumori', 'kumori_hare', 'kumori', 'kumori_ame', 'ame');
$enikki_tenki = get_field('enikki-tenki');
if ($enikki_tenki != '') {
if (array_search($enikki_tenki, $tenki_array) === false){
// その他
?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/sonota.png">
<?php
echo $enikki_tenki;
} else {
?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/<?php echo $enikki_tenki; ?>.png">
<?php
}
}
?>
$enikki_tenki = get_field(‘enikki-tenki’);
で、この絵日記の 天気 tenikki-tenki の値を受け取っています。
$tenki_array = array(‘hare’, ‘hare_kumori’, ‘kumori_hare’, ‘kumori’, ‘kumori_ame’, ‘ame’);
で、選択肢に指定した受け取りたい文字列を配列で定義しておきます。これは その他 で指定したときに $enikki_tenki から受けとる値が入力した文字になってしまうためにその他を認識するためです。その他に例えば 嵐 と入力すると受けとる値が 嵐 になるためです。
if (array_search($enikki_tenki, $tenki_array) === false){
に該当するときは その他 なので、その他用の画像と、受け取った文字を表示、
その他以外の時は 受け取った文字.png の画像を表示します。
本文の色を変更する
content-ryus_enikki.phpのコンテンツを表示している divに
</header><!-- .entry-header -->
<div class="entry-content" style="color:<?php the_field('enikki-sentence-color'); ?>">
文字色を指定する color:<?php the_field(‘enikki-sentence-color’); ?> を追加しました。
これで、
文字の色が変わりました。
今日の一言を表示する
今日の一言はスタイルシートで罫線を引いたりちょっと目立つようにしたいと思います。本文の下に、
<div style="margin-top:20px;padding:20px;font-weight:bold;border:2px dotted #006400;color:#333">
<div style="font-size:0.9rem">今日の一言:</div>
<?php the_field('enikki-today-sentence'); ?>
</div>
ドット罫線で囲んだ中に 今日の一言: という見出しを付けて the_field(‘enikki-today-sentence’) で今日の一言を表示します。これで、
こんな感じに表示されました
完成した入力部分と全体表示
これでAdvanced Custom Fieldsによるカスタムフィールドの追加と表示のカスタマイズが終わりました。
通常のタイトルと本文の入力の下に
こんな感じのカスタムフィールドが追加されました。これで表示をすると
こんな感じです！これで絵日記投稿タイプと絵日記投稿タイプ用カスタムフィールドは完成しました。
まとめ:Advanced Custom Fieldsを使うととても簡単に高機能な項目が追加できる
デフォルトでもカスタムフィールドは追加できますが、使い勝手があまり良くありません。Advanced Custom Fieldsを使うととても簡単にしかも高機能な項目が追加できます。
入力するときの種類を決める フィールドタイプ にはGoogleMapとか気になる種類がいくつもあり、もっとすごいことができるなじゃないか？と思いました。
また、機会があったらAdvanced Custom Fieldsのもっとすごい機能を使って面白いカスタム投稿タイプを作ってみたいと思っています(^^)/
[amazon_searchlink search=”WordPress”]
コメント