シェアする

カスタムフィールドを使った投稿が便利! WordPressプラグイン Advanced Custom Fieldsの使い方【出力編】

Lumix / Pixabay

先日書いた設定編に続き、出力編となります。

WordPressテーマを編集することになりますが、コピペでできるのでやってみてください。

今回は、「投稿テンプレートを作る」という目的で設定していきます。

カスタムフィールドを使った投稿が便利!  WordPressプラグイン Advanced Custom Fieldsの使い方【設定編】
Wordpressで投稿をするときに、「投稿テンプレートとかあったらいいのにな~」とか、「一つのエディタにたくさん書いていくとぐちゃぐちゃに...
スポンサーリンク

出力タグ

基本

基本的には、get_field(‘フィールド名’) で出力できます。

前後をHTMLやPHPで装飾してやることで、それっぽくなります。

下に書いてくもの以外の時は、基本的にはこれでいけます。

画像(返り値が画像URL)

get_field(”)で、画像URLが返ってくるので、画像として表示させるには、周りを img src=” “で囲ってあげるだけです。

画像(返り値が画像ID)

画像IDが返ってくるので、wp_get_attachment_image_src() で、IDに相当する「URL」「width」「height」を配列で取得し、<img>内にそれぞれ配置してやるだけです。画像サイズはお好みでどうぞ。(今回はfull)

チェックボックス(セレクトボックス 複数選択可 の時)

セレクトボックスを複数選択可にした場合、チェックボックスと同じ、配列で出力されるので、 foreachを使います。

真/偽

真/偽そのものを表示することはほとんど無いと思うので、上記のようになります。

ページリンク

選択したページのURLが配列として取得できます。

投稿オブジェクト

選択したページのオブジェクト全体が取得できます。

タクソノミー(返り値がTerm Object)

オブジェクト型で返ってきます。また、配列です。

ユーザー(セレクトボックス)

マルチの場合は、配列処理となりますが、あまり使わないので割愛します。

Google Map

Google Mapの住所/経度/緯度を配列で取得できます。

それらを、GoogleMap APIと共に組み込むと、地図を表示させることが出来ます。

以上の出力タグを、それぞれを表示したい場所へ記述するだけです。

実際に出力してみる

前回の「せあせあ」を実際に出力してみようと思います。

カスタムフィールドを使った投稿が便利!  WordPressプラグイン Advanced Custom Fieldsの使い方【設定編】
Wordpressで投稿をするときに、「投稿テンプレートとかあったらいいのにな~」とか、「一つのエディタにたくさん書いていくとぐちゃぐちゃに...

目標: 「ペンギンさんの一言」の下に「せあせあ」を表示させる。

1-1

まずは、「外観」→「テーマの編集」に行きましょう。

2

そして、個別投稿(single.php)にいきます。(右の一覧から探してください)

このブログのテーマは、「Simplicity2」を利用させていただいています。

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

「Simplicity2」では、「entry-body.php」内に記述しているようなので、「entry-body.php」に行きます。

(ご自分の利用されているテーマ内で表示したい場所を探してください。)

【豆知識】Google Chromeを使って、相当する場所を簡単に探す

5

調べたいページを開いて、「調べたい要素」を右クリックして「検証」をすると、デベロッパーツールが起動し、相当する場所のHTMLを表示してくれます。

「ペンギンさんの一言」の場合、「main」→「post」→「article」→「footer」内にあるということがわかりますね!

参考

初心者でもWeb制作が簡単に! GoogleChrome デベロッパーツールのススメ
「このサイトってどんな風にHTML書いてるんだろう……」とか「ココの部分をちょっと参考にしたいな」とか思ったことはありませんか? 知識...

3

「entry-body.php」に来ました。

赤枠で囲ってある場所が、記事本文を表示させている場所です。

そして、青枠が「footer」その下に「ペンギンさんの一言」があります。

Google Chromeで確認したとおりの順番になっていますね。

では、その下にコードを書いていきましょう。

4

こんな感じですね。if で囲うことで未入力時には<h4>せあせあ</h4>を表示しないようにしています。また、<div id=”seasea”></div>で囲うことで、cssを後々編集できるようにしています。

6

表示を確認してみましょう。しっかりと表示したい場所に表示できていますね。

このような感じで、出力コードを記載していきます。

周りを他のコードで囲んでやることで、簡単にいろいろなものを実装できますね!

このプラグインだけで本当にいろんな事ができそうです。

ペンギンさんの一言

今回は、カスタムフィールドを投稿テンプレートとして使ってるけど、他にもいろいろな使い方ができるね! 時間があったら解説するよ。

スポンサーリンク

シェアする

フォローする

スポンサーリンク
Top