マネー報道 MoneyReport

マネーにまつわる報道を取り上げ、自分の切り口で切り取り、噛み砕いてお伝えします。

WordPressのカスタムフィールドを表示する!「single.php」のソース改編で実現!

スポンサーリンク
あとで読む

WordPressのカスタムフィールド

先日からWordPressのカスタム投稿タイプカスタムフィールドを使って、独自の内容を投稿する方法を追っていました。

前回の記事までではカスタム投稿タイプカスタムフィールドをプラグインで追加して、カスタム投稿を実際に行った所までやってみました。
ですが、残念ながら投稿したカスタム投稿は表示されたのですが、カスタムフィールドは表示されず中途半端な内容で終わってしまいました。

で、本日はそのカスタムフィールドを実際に表示する事に挑戦してみたいと思います(^-^)/

ちなみに先に書いておきますが、前回まではプラグインの追加で良かったですが、今回はPHPソースの修正が必要になりますので、開発言語PHPの改変スキルが必要になりますので、あしからず(^-^;

個別投稿ページ

通常の個別投稿ページはテンプレートフォルダ内の「single.php」ファイルが担っています。
テンプレートフォルダは「[WordPressルートフォルダ]/wp-content/themes/[自分の使っているテーマ]」内にあります。
自分の使っているテーマのフォルダを開いてください。

大抵はこんな感じになっているのかな、と。

f:id:MoneyReport:20151020133852j:plain

上記ファイル一覧では下から2番目にあるのが「single.php」になります。
これをコピペして別名ファイルを作ります。

ファイル名は下記の様になります。

「single-[Post Type Slug].php」

今回私が作ったカスタム投稿タイプの「Post Type Slug」は「item」になります。

f:id:MoneyReport:20151020134147j:plain

ですので、ファイル名は「single-item.php」に設定します。
これで、個別投稿ページを読み込む時に「single.php」ではなく「single-item.php」が優先されて表示される様になります。
もし何かの拍子に「single-item.php」が消えた場合には「single.php」が適用されて表示されます。

前回の記事の時には「single-item.php」は存在しなかったので「single.php」が適用されてしまって、カスタムフィールドが表示されなかったという事になります。

で、こちらの「single-item.php」をエディターで開いて編集します。
Windows標準のメモ帳だとUTF-8のエンコードでの保存とかに難がありますので、サクラエディタ等を利用して編集して下さい。

サクラエディタ Download

さて、簡単な関数のお勉強をします。
プラグインの「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(); ?>」を探して下さい。
この部分で記事を出力しています。
カスタムフィールドは記事の前後に出力することになると思いますので、この付近に書くのが良いのかな、と。

で、実際に表示した内容はこちら。

f:id:MoneyReport:20151020141739j:plain

カスタムフィールドで登録した内容がスッポリと抜け落ちています。

ここにカスタムフィールドを表示するコードを追加していきます。
私が追加したカスタムフィールドは下記になります。

f:id:MoneyReport:20151020140624j:plain

フィールド順序 フィールドラベル フィールド名 フィールドタイプ
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; ?>
?>

商品名を追加しました。
で、実際に表示してみると・・・

f:id:MoneyReport:20151020141857j:plain

記事本文の下に商品名が表示されました!!!
これさえ出来れば百人力です!(^^)!

商品画像はちょっと複雑ですが下記の様な感じ。

商品画像を追加した「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タグに割り当てています。
実際に表示すると・・・

f:id:MoneyReport:20151020142344j:plain

出た~♪
画像が中くらいサイズで表示することが出来ました(^-^)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; ?>
?>

さぁどうなるか?

f:id:MoneyReport:20151020142928j:plain

表示出来た(^-^)w

という感じで独自の「single-item.php」を作り、カスタムフィールドの内容を表示出来るようにPHPソースの改変をしてあげる事で簡単にカスタムフィールドを表示する事が出来ました(^-^)w

結局今回追加したソースコードで増えた表示部分は下記になります。

f:id:MoneyReport:20151020143920j:plain

自分の気に入ったテーマの「single.php」をコピペして自分専用のカスタムフィールド表示テンプレートファイルを作ってあげましょう(^-^)/

まとめ

  • カスタムフィールドを表示するためには「single.php」をコピペして、カスタム投稿フィールドの[Post Type Slug]をファイル名に追加して「single-[Post Type Slug].php」ファイルを作成する
  • 記事本文を出力している「the_content()」関数を検索し、その付近にコードを追加する
  • プラグイン「Advanced Custom Field」の関数「the_field」と「get_field」を利用してカスタムフィールドの内容を表示する