カスタム投稿タイプの投稿記事だけカスタムフィールドを表示させる

  • カスタム投稿タイプを作るプラグイン CPT UI
  • カスタムフィールドを作るプラグイン ACF
  • 開発環境:Local
  • 使用エディタ:VisualStudioCode
  • 使用テーマKoji 
  • 子テーマ Koji-co(と言う名前をつけましたw)

ポートフォリオサイトにて実績紹介のための投稿タイプを作ろうと、カスタム投稿タイプと、カスタムフィールドを追加しました。

今回追加したカスタム投稿タイプの名前は「works」

追加したカスタムフィールドは「フィールドクループWORKS」を作り、グループ内に3つの項目を作りました。以下の通りです。

テンプレートファイルを調べる

カスタム投稿タイプでテスト投稿(スラッグ:wordpress1)して、Query monitorで使用されているテンプレートファイルを調べます。

使用されているファイルは singular.php

「テンプレート階層」では探しにいくテンプレートが上から順番に記載されています。

single-works-wordpress1.php、single-works.php、single.phpが無いためsingular.phpに行きついています。singular.phpがなければindex.phpが使われます。

通常投稿タイプの記事を表示して、ここをチェックするとこちらもsingular.phpです。

フォルダを見てみると、single-works-wordpress1.php、single-works.php、single.phpが無く、singular.phpがあるのが分かります。

カスタム投稿タイプ記事用のテンプレートファイルを作る

今回、カスタムフィールドはカスタム投稿タイプの記事だけに表示させたいため、カスタム投稿タイプの記事を表示させるためのテンプレートファイルを子テーマに作ります。

single-works.php を作れば、singular.phpより優先され、そのテンプレートを使ってくれそうです。

まずは、singular.phpの複製を子テーマに貼り付けて、さらに名前をsingle-works.phpにします。

この状態で、カスタム投稿タイプの記事を表示し、QueryMonitorでみてみると、作ったテンプレートファイルが使われています!

テンプレートファイルに出力のための記述をする、その前に。

ではテンプレートファイルの中身を見てみましょう!

記事ページはタイトルやサムネイルが表示されているので、get_titleとかあるかなと思ったらありませんね。 get_template_part でさらにテンプレートファイルを呼び出しているようです。contentとあります。

先ほどのQueryMonitorをみると「テンプレートパーツ」のところで使われているテンプレートファイルが分かります。content.phpがありますね。

content.phpの中身を見てみましょう!

私も全て読めるわけでは無いので、知った単語で当たりをつけていきます。この投稿記事は最初にサムネイル、次にタイトル、本文、となっているので、そのような順番で記述してあることを確認します。

content.phpが投稿内容出力を担っているファイルだと確信!

content.phpを複製して、子テーマに貼り付けます。

そして、子テーマにあるcontet.phpにカスタムフィールドを出力するためのコードを書きます!

カスタムフィールドでそれぞれフィールド名を英字で設定しているので、それを使います。

<?php echo get_field('フィールド名');?>
または
<?php the_field('フィールド名');?>

(参考:ACF get_field() )

無事、出力されました!

疑問

これだと、通常投稿にも子テーマのcontent.phpが当たります。エラーが出なければ良いのか?それとも、single-works.phpでだけ使われるように、設定するにはどうしたら良いか?既に答えはsingle-works.php書いてありました。

これは先ほど、contentと名前のつくphpファイルを呼び出している、と解読しましたが get_post_type() の記載もあります。

phpの書き方として、$slug-$name.php と言うファイル名は ( $slug,$name )と表記します。つまり、content-カスタム投稿タイプ名.php のファイルがあれば、それを読み込んでくれるのです。

codexの記事が参考になりました。

<?php get_template_part( $slug, $name ); ?>

テーマの $slug で指定したテンプレートパーツをインクルードします。$name が指定された場合は、そのパーツの個別版をインクルードします。テーマに {$slug}.php ファイルがなければ何もインクルードしません。

$name パラメータの値は、例えばファイル “{slug}-special.php” をインクルードしたければ “special” にします。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_part

と言うわけで、子テーマに複製していたcontent.phpをcontent-works.phpに変更し。カスタム投稿タイプworksの時にcontent-works.phpが採用されるようになりました!

次の課題は、出力されたフィールド周りの装飾です。

まとめ

  1. カスタム投稿タイプの投稿記事が、どのテンプレートファイルを使用しているか、また最優先で使用するテンプレートファイル名はどれか調べる(QueryMonitor)
  2. 更にテンプレートファイルがどのテンプレートパーツを呼び出しているか確認する
  3. カスタム投稿タイプ用に、使用中のテンプレートファイルを複製し、最優先で使用するテンプレートファイル名に変更する
  4. カスタムフィールドを表示するためのコードを記述する