WordPressのカスタムフィールド
先日からWordPressのカスタム投稿タイプやカスタムフィールドを使って、独自の内容を投稿する方法を追っていました。
前回の記事までではカスタム投稿タイプとカスタムフィールドをプラグインで追加して、カスタム投稿を実際に行った所までやってみました。
ですが、残念ながら投稿したカスタム投稿は表示されたのですが、カスタムフィールドは表示されず中途半端な内容で終わってしまいました。
で、本日はそのカスタムフィールドを実際に表示する事に挑戦してみたいと思います(^-^)/
ちなみに先に書いておきますが、前回まではプラグインの追加で良かったですが、今回はPHPソースの修正が必要になりますので、開発言語PHPの改変スキルが必要になりますので、あしからず(^-^;
個別投稿ページ
通常の個別投稿ページはテンプレートフォルダ内の「single.php」ファイルが担っています。
テンプレートフォルダは「[WordPressルートフォルダ]/wp-content/themes/[自分の使っているテーマ]」内にあります。
自分の使っているテーマのフォルダを開いてください。
大抵はこんな感じになっているのかな、と。
上記ファイル一覧では下から2番目にあるのが「single.php」になります。
これをコピペして別名ファイルを作ります。
ファイル名は下記の様になります。
「single-[Post Type Slug].php」
今回私が作ったカスタム投稿タイプの「Post Type Slug」は「item」になります。
ですので、ファイル名は「single-item.php」に設定します。
これで、個別投稿ページを読み込む時に「single.php」ではなく「single-item.php」が優先されて表示される様になります。
もし何かの拍子に「single-item.php」が消えた場合には「single.php」が適用されて表示されます。
前回の記事の時には「single-item.php」は存在しなかったので「single.php」が適用されてしまって、カスタムフィールドが表示されなかったという事になります。
で、こちらの「single-item.php」をエディターで開いて編集します。
Windows標準のメモ帳だとUTF-8のエンコードでの保存とかに難がありますので、サクラエディタ等を利用して編集して下さい。
さて、簡単な関数のお勉強をします。
プラグインの「Advanced Custom Field」をインストールしている前提で書きますので、まだ「Advanced Custom Field」をインストールしていない方は前記事を参考にインストールして下さい。
投稿したカスタムフィールドを表示する関数「the_field」
<?php the_field($field_name) // $field_name：カスタムフィールド名 ?>
続いて、表示ではなく値だけを取得したい場合には「get_field」関数を利用します。
投稿したカスタムフィールドの値を取得する関数「get_field」
<?php get_field($field_name) // $field_name：カスタムフィールド名 ?>
と、上記の2つの関数を使うだけで簡単にカスタムフィールドの値を取得して表示することが可能です！
実際のソースコード
では、今回私が利用しているテーマのソースコードを見ていきます。
元の「single.php」ソース
<?php <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> <?php endwhile; ?> <?php endif; ?> ?>
大分省略していますが、ソースコード内の「the_content(); ?>」を探して下さい。
この部分で記事を出力しています。
カスタムフィールドは記事の前後に出力することになると思いますので、この付近に書くのが良いのかな、と。
で、実際に表示した内容はこちら。
カスタムフィールドで登録した内容がスッポリと抜け落ちています。
ここにカスタムフィールドを表示するコードを追加していきます。
私が追加したカスタムフィールドは下記になります。
| フィールド順序 | フィールドラベル | フィールド名 | フィールドタイプ |
|---|---|---|---|
| 1 | 商品名 | name | テキスト |
| 2 | 画像 | picture | 画像 |
| 3 | 価格 | price | 数値 |
| 4 | メーカー | maker | テキスト |
それではこれらの項目を表示してみましょう！
まずは簡単なテキストから表示します。
「商品名」を表示してみましょう。
商品名を追加した「single-item.php」ソース
<?php <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> 商品名：<?php the_field('name'); ?> <?php endwhile; ?> <?php endif; ?> ?>
商品名を追加しました。
で、実際に表示してみると・・・
記事本文の下に商品名が表示されました！！！
これさえ出来れば百人力です!(^^)!
商品画像はちょっと複雑ですが下記の様な感じ。
商品画像を追加した「single-item.php」ソース
<?php <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> 商品名：<?php the_field('name'); ?> <?php $image = get_field('picture'); $url = $image['sizes']['medium']; $width = $image['sizes']['medium-width']; $height = $image['sizes']['medium-height']; ?> <img src="<?php echo $url ?>" width="<?php echo $width ?>" height="<?php echo $height ?>" /><br /> <?php endwhile; ?> <?php endif; ?> ?>
商品画像はget_field関数で配列で取得した内容を変数で受けてimgタグに割り当てています。
実際に表示すると・・・
出た～♪
画像が中くらいサイズで表示することが出来ました(^-^)w
じゃあ後は一気に価格とメーカーも表示してみましょう！
商品画像を追加した「single-item.php」ソース
<?php <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> 商品名：<?php the_field('name'); ?><br /> <?php $image = get_field('picture'); $url = $image['sizes']['medium']; $width = $image['sizes']['medium-width']; $height = $image['sizes']['medium-height']; ?> <img src="<?php echo $url ?>" width="<?php echo $width ?>" height="<?php echo $height ?>" /><br /> 価格：<?php echo number_format(get_field('price')); ?>円<br /> メーカー：<?php the_field('maker'); ?><br /> <?php endwhile; ?> <?php endif; ?> ?>
さぁどうなるか？
表示出来た(^-^)w
という感じで独自の「single-item.php」を作り、カスタムフィールドの内容を表示出来るようにPHPソースの改変をしてあげる事で簡単にカスタムフィールドを表示する事が出来ました(^-^)w
結局今回追加したソースコードで増えた表示部分は下記になります。
自分の気に入ったテーマの「single.php」をコピペして自分専用のカスタムフィールド表示テンプレートファイルを作ってあげましょう(^-^)/
まとめ
- カスタムフィールドを表示するためには「single.php」をコピペして、カスタム投稿フィールドの[Post Type Slug]をファイル名に追加して「single-[Post Type Slug].php」ファイルを作成する
- 記事本文を出力している「the_content()」関数を検索し、その付近にコードを追加する
- プラグイン「Advanced Custom Field」の関数「the_field」と「get_field」を利用してカスタムフィールドの内容を表示する
