ワードプレスカスタムフィールドカスタム投稿表示されない　対処法

by rio on 2016年5月18日 in webデザイン, wordpress, プラグイン • 9,091 Comments

下記URLで解決。

念のため引用

通常の個別投稿ページはテンプレートフォルダ内の「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のエンコードでの保存とかに難がありますので、サクラエディタ等を利用して編集して下さい。

サクラエディタ 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(); ?>」を探して下さい。
この部分で記事を出力しています。
カスタムフィールドは記事の前後に出力することになると思いますので、この付近に書くのが良いのかな、と。

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

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

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

フィールド順序フィールドラベルフィールド名フィールドタイプ

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」をコピペして自分専用のカスタムフィールド表示テンプレートファイルを作ってあげましょう(^-^)/