「カスタム投稿タイプを使って、絵日記投稿タイプを作ってみた」で、絵日記用のカスタム投稿タイプを作りました。絵日記には専用の入力項目を作りたいと思うのでカスタムフィールドを作ってみます。カスタムフィールドは便利なプラグインがあるということで、Advanced Custom Fields(略してACF)というものが人気があるようですのでこちらを使ってどんな感じになるか試してみました。
Advanced Custom Fieldsのインストール
ダッシュボード プラグイン＞新規追加 で Advanced Custom Fields と入力してリターン
このプラグインが出てくるので いますぐインストール をクリック
プラグインを有効化 をクリック。これでインストール終了です。
絵日記用カスタムフィールドを作る
ダッシュボード左ブロックに追加された
カスタムフィールドというメニューをクリック
このような画面が表示されます。複数のフィールド(項目)をまとめて登録するようです。今回の場合だと絵日記グループということになりますね。
絵日記に必要な項目とその指定方法は、
背景の色:指定できる
本文の色:指定できる
天気:選ぶ(天気に合わせたアイコンが表示される)
今日の絵:画像アップロード
今日の一言:1行でなにか入力
こんな感じで構想しています。いい感じにカスタムフィールドににできるでしょうか？
フィールドグループ の横の 新規追加 をクリック。
このような画面になりますので、
グループ名として 絵日記 と入力して フィールドを追加 をクリックします。
１つのフィールドに対してたくさんの指定があるようです。まずは 背景の色:指定できる を作ります。
フィールドラベル は表示されるときの名前、フィールド名 は一意になるような英文の名前を付けます。
* 一意とはユニークの、固有のというような意味で他の名前と重複しないという意味です
フィールドタイプ の ▼ をクリックすると
たくさんのタイプが出て来ます。色を指定したいので、
カラーピッカー を選びます。他の項目はとりあえずそのままで
フィールドを閉じる をクリック
今入力した項目が １ という行に表示されました。もう１つ項目を追加してみます。今度は 今日の絵:画像アップロード を追加してみたいと思います。
フィールドを追加 をクリックして
こんな感じに指定して フィールドを閉じる をクリック。
2つのフィールドができました。この時点でちょっとどのように出るのか見てみたいと思うのですが、その前に
ここで、絵日記のときだけ表示する用に指定します。Show this field group if のところに 投稿タイプ 等しい となっているので、一番右の▼ をクリックして
先日作ったカスタム投稿タイプ、ryus_enikki を選択します。これでこのグループは 投稿タイプがryus_enikki だったときに表示されるようになります。
このあと忘れずに、右ブロックにある 公開 をクリックします。これでカスタムフィールドグループが登録されました。
絵日記投稿タイプでの表示と入力の確認
これで絵日記投稿タイプの時に専用のフィールドが出るかどうかを見てみます。
絵日記＞新規追加 をクリック
背景の色と今日の絵という項目が追加されていました(^^)/
色を選択 をクリック
カラーピッカーが表示されました。適当な色を選びます。
今日の絵 をアップロードします。画像を追加する をクリックして
画像をアップロードして、選択をクリックします。
今日の絵がアップロードされました。
カスタム投稿タイプにカスタムフィールドの表示を入れる
カスタムフィールドを追加してもこのままだと表示は、
このように前回カスタム投稿タイプ用に修正した表示のままになってしまいます。カスタムフィールドを表示するように修正します。
カスタムフィールドの表示は主に以下の2つを使うようです
get_field 値をそのまま持ってくる
と
the_field 値を表示する(phpでいうとecho 値)
です。とういことでまず背景の色カスタムフィールドに値があったらその色をそうでなければ決まった色を指定するというコードに変更します。
前回、カスタム投稿タイプの背景色を
\wp-content\themes\twentyfifteen-ryus\single-ryus_enikki.php
で、指定していました。ソースは
<div id="primary" class="content-area"> <main id="main" class="site-main" role="main" style="background-color:#7fffd4">
このように #7fffd4 という色にしました。これを
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main" style="background-color:<?php echo (get_field('enikki-background-color') ? the_field('enikki-background-color') :'#7fffd4');?>">
このように書き換えてみました。enikki-background-color に値が入っていればその値を、そうでなければ #7fffd4 を背景色にするようにしています。
これで表示すると、
このように背景の色は先ほど指定した色になりました。背景の色を指定していない絵日記は、
このように決まった背景色で表示されています。
今日の絵を表示します。コンテンツ部分は
\wp-content\themes\twentyfifteen-ryus\content-ryus_enikki.php
で指定していました。
<div class="entry-content">
<?php
if (get_field('enikki-today-picture')) {
?>
<img src="the_field('enikki-today-picture')">
<?php
}
こんな感じに書いてみたのですが、
画像が表示されません。このフィールド enikki-today-pictureを var_dump してみると
array(10) {
["id"]=>
int(17)
["alt"]=>
string(0) ""
["title"]=>
string(19) "2015-07-12 18.39.44"
["caption"]=>
string(0) ""
["description"]=>
string(0) ""
["mime_type"]=>
string(10) "image/jpeg"
["url"]=>
string(77) "http://localhost/wordpress/wp-content/uploads/2015/07/2015-07-12-18.39.44.jpg"
["width"]=>
int(3264)
["height"]=>
int(2448)
["sizes"]=>
array(12) {
["thumbnail"]=>
string(85) "http://localhost/wordpress/wp-content/uploads/2015/07/2015-07-12-18.39.44-150x150.jpg"
["thumbnail-width"]=>
int(150)
["thumbnail-height"]=>
int(150)
["medium"]=>
string(85) "http://localhost/wordpress/wp-content/uploads/2015/07/2015-07-12-18.39.44-300x225.jpg"
["medium-width"]=>
int(300)
["medium-height"]=>
int(225)
["large"]=>
string(86) "http://localhost/wordpress/wp-content/uploads/2015/07/2015-07-12-18.39.44-1024x768.jpg"
["large-width"]=>
int(660)
["large-height"]=>
int(495)
["post-thumbnail"]=>
string(85) "http://localhost/wordpress/wp-content/uploads/2015/07/2015-07-12-18.39.44-825x510.jpg"
["post-thumbnail-width"]=>
int(825)
["post-thumbnail-height"]=>
int(510)
}
}
こんな感じに配列(ARRAY)で色々情報が入ってました。画像のURLはurlという連想配列に入っています。
<div class="entry-content">
<?php
$enikki_today_picture = get_field('enikki-today-picture');
if ($enikki_today_picture) {
?>
<img src="<?php echo $enikki_today_picture['url']; ?>">
<?php
}
このように書き換えてみました。表示すると、
今日の画像が表示されました。画像の指定がない絵日記は、
何も表示されません。編集でもカスタムフィールドは使えるので、編集画面で
このように追加すれば、
画像が表示されるようになります(^^)/
まとめ:Advanced Custom Fieldsは簡単でとても便利なプラグインですね
blogを書き始めたときに何も考えずインストールして、進めましたがほとんど問題なく使うことができました。1時間ぐらいでblogを書きながらフィールドの作成から入力、表示のカスタマイズまで確認できたのでとても簡単で使いやすいと思います。
また、今回考えているその他のフィールドを入力して表示出来るようにしたり、Advanced Custom Fieldsの機能をもっと知ってみたい気持ちになったので続きはまた別の回のblogで書いてみたいと思います(^^)/
コメント