前回のカスタムフィールド設定編からの続き。

子テーマを作る:子テーマフォルダの作成

さて、ここまでで、データを入れる箱を作ってきましたが、今後はサイトに表示させるために、データを呼びだす記述をテンプレートに付け加えます。

ちなみに、わたくしphpはなんとなくしかわかってないので、間違ってたらごめんなさい!!!導入は自己責任でよろしく!!

今回は、新しくテンプレートを探すのもめんどくさかったので、WPデフォルトのtwentyfourteenを使いました。

親テンプレートをそのまま使うと、更新した時に中身が消えちまうので、子テンプレートを作ります。

FTPソフトで、子テンプレート用のフォルダを、ワードプレスのthemesフォルダ内に作ります。

140714custom_field21

WPフォルダ > wp-content > themes > 

と、たどっていけば、twentyfourteenフォルダが見つかると思うので、同じ階層に子テーマ用のフォルダを作ります。

今回は、「twentyfourteen_customize」という名前にしました。

子テーマを作る:sytleCSSの作成

子テーマフォルダを作ったら、そのフォルダ内にstyleCSSの空ファイルを作ります。

140714custom_field22

作った空ファイルを、管理画面から確認します。

外観 > テーマ編集 > 右上の編集するテーマを選択 > 今作ったテーマ

と見ていくと、

140714custom_field23

テーマ壊れとるで!!とメッセージが表示されますが、これは、きちんとCSSを記述すれば、表示されなくなるので、気にせず、CSSを書きます。

画像は、解説用に作ったので、ちょっとテーマの名前が違いますが、こんな感じです。

記述する内容は、

です。

子テーマを選択

ここまで書いたら、子テーマを選択します。

140714custom_field24

管理画面の

外観 > テーマ

で、twentyfourteen_customizeというテーマが見つかると思うので、それにマウスオンすると、「有効化」という青いボタンが表示されますので、クリック!

これで、子テーマが有効化されました。

今回はすでに、有効化されているので、元のtwentyfourteenにマウスオンしてみます。

140714custom_field25

マウスオンしないと有効化ボタンが出て来ないので、慌てないでね。

テンプレートに出力させる内容を記述する:twentyfourteen

では、いよいよテンプレートに出力させる内容を記述させていきます。

表示させるイメージはこちら。

メタボ食事記録サイトイメージ

管理画面デフォルトの本文記事部分に、その日の総評を記述し、その下に、カスタムフィールドに入力した値を表示させます。

twentyfourteenの場合、記事本文直下にカスタムフィールドの値を表示させるには、content.phpをカスタマイズします。

の次に、次のタグを付け加える。

記述の中で、field(○○)とある、○○の部分に表示させたいフィールド名を記述します。

単一記事のみに表示させる

conten.phpをさっくり見てみたところ、どうやら、単一記事だけようではなく、カテゴリなどにも共通で使われているテンプレートのようです。

なので、単一記事の時のみ表示されるようにif分を追加しました。

最初と最後の

がそうです。

入力値のない入力項目は表示させない

画像については、入力がある場合のみ表示させました。

それが、

の記述です。

画像1が表示されない場合は、画像部分を全て非表示
画像2以降が表示されない場合は、それぞれの画像を非表示

になるように記述しました。

この表示は、GoogleChromeなどでは、ブラウザ側で見えないように処理してくれるので、最初if文で制御しなくてもいいかなと思ったのですが、FireFoxだと、入力がされてない部分もブラウザに表示されて、見ている人がとまどう旨お友達に指摘されて修正しました。

カスタムフィールド表示部分を真ん中よせ

あとは、適当にCSSで表示を修正。

カスタムフィールド表示部分を真ん中に寄せました。

投稿画面から入力

で、投稿画面はこんな感じです。

140714custom_field26

入力必須には赤米がつきます。

行動計画のセレクトボックスは、プルダウンメニューから選択。

140714custom_field27

コメントはテキスト入力。

画像は「画像を追加する」から追加できますが、わたしは、画面上の「メディアを追加」から、その日の食事写真を一括アップロードし、カスタムフィールドの「画像を追加する」で選択しています。

ただ、このカスタムフィールドの画像を追加するは、画像のサイズは選択できないので、あらかじめ、300pxにサイズダウンした画像を登録しています。

140714custom_field28

ちょっとわたしは技術がないのでできないのですが、もしかすると、ここらへんどうにかしたら、アップロードして登録する時に、リサイズしたサムネイルを登録できるようになったりせんのかな、と思ったり。

完成したサイト

ということで、完成したサイトがこちら。

<<2015/12/11:もうメタボ脱出したので、サイトは閉鎖しました!>>

恥ずかしいので、ハンドルネームが「ちょび」と別人になってますが、わたしですw (あ、公開しちゃった。ハンドルネーム変えた意味あるのか・・・。)

CSSとかもめんどくさいので、ほぼカスタマイズしていません。

もし万が一アクセスが増えるようなことでもあれば、収益化しようかなと思うけど、テキスト少ないし、検索にはひっかからなそうな気がする。

とりあえず、こういうサイトもできますよ、という例でした!

参考までに!

今回参考にさせていただいたサイト

カスタムフィールドを使うのは、初めてだったので、こちらのサイトを参考にさせていただきました!

大変助かりました!ありがとうございます!

 【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法
 WordPressのカスタムフィールドを使いやすくするプラグイン「Advanced Custom Fields」
 WordPress|カスタムフィールドで値無記入の場合、項目非表示。
 条件分岐タグとは