【Simplicity2】カスタム投稿タイプ向けの投稿テンプレートを作ってみたときの備忘録|Knowledge Base

公開日：2015(平成27)年12月14日／最終更新日： 2019(令和元)年7月19日

至って我流なので間違っているかもしれませんが、今使っている「Simplicity2」でカスタム投稿タイプ向けの投稿テンプレートを作ってみたときの備忘録です。

カスタム投稿用のテンプレートを作るには

　せっかくカスタム投稿を作るのですから、それを表示するためのテンプレートをオリジナルで作りたいですよね。特にカスタムフィールドなどを使ってフロントエンドから入力した内容を表示させるにはカスタム投稿用のテンプレートを使う必要性が出てきます。
　特別な動作をするテーマ以外では、投稿された記事は「single.php」を通してHTMLに変換されてブラウザに表示されるようになっています。カスタム投稿タイプも「投稿」ですから同じ動作をするわけです。これをカスタム投稿タイプ用に新しく「single.php」を作るのが今回のテーマです。

通常の投稿→「single.php」→HTMLに変換されてブラウザに表示
カスタム投稿→「カスタム投稿用のsingle.php」→HTMLに変換されてブラウザに表示

そして、「カスタム投稿用のsingle.php」はカスタム投稿タイプ名を付けて
「single-カスタム投稿名.php」とすることで、「これは○○というカスタム投稿タイプ用のテンプレートだな」と認識するようになっています。
要するに上記のように通過してHTMLにする部分を変えてやるわけです。これはどのテーマでも共通なので、知っておいて損はないと思います。

そして、もう一つ必要なのが記事一覧を表示するためのアーカイブテンプレートです。通常は「archive.php」というファイル名がついています。これもsingle.phpと同様「archive-カスタム投稿名.php」とすることで、「これは○○というカスタム投稿タイプ用の記事一覧テンプレートだな」と認識するようになっています。
「archive.php」経由で記事一覧を作る場合には、カスタム投稿タイプの設定項目で標準では「”has_archive” => fasle,」となっている箇所を「”has_archive” => true,」にする必要があります。
「Custom Post Type UI」プラグインを使っている場合で私の配布する日本語化ファイルを適用している場合には、カスタム投稿タイプの編集画面右側にある「特別な一覧を作る」という項目を「はい」に変更する必要があります。

カスタム投稿タイプやカスタムタクソノミー（分類）を簡単に作るプラグイン「Custom Post Type UI」

「Simplicity2」の投稿テンプレートのファイル構造

さて、本題に戻って「Simplicity2」でのカスタマイズ方法です。
通常のテーマでは「single.php」にすべてのコードが入っているのですが、「Simplicity2」の場合はコードの流れを見ると、
本文の構造を持つ「entry-body」を「single.php」から呼び出すようになっています

そして、アーカイブ表示用のテンプレートは「archive.php」ではなく「list.php」という名前になっています。さらに「list.php」には、一覧をカード表示するために「entry-card」と「entry-card-large」という２つのテンプレートから呼び出す構造になっています。

カスタム投稿用のテンプレートを作るためにはここに出て来た

「single.php」
「entry-body」
「list.php」
「entry-card」
「entry-card-large」

をそれぞれカスタム投稿タイプ用に作る必要がありそうです。とはいえすべてを一から作るのは大変だし、コード知識が必要になりますので手っ取り早くコピーしてしまいます。

FTPを使ってこれらのファイルをダウンロードするか、「Simplicity2」をダウンロードしなおすかして、上記のファイルにそれぞれ「-カスタム投稿名」を付けてコピーしていきます。例）「single-カスタム投稿名.php」など
出来たファイルは「Simplicity2」のフォルダ内へアップロードしておきましょう。

以下の加工はすべて「外観」→「テーマの編集」から行います
そして、説明を簡単にするためにカスタム投稿タイプ名は「test」とします

「single.php」ファイル内にある「entry-body」と書かれた項目を探して「entry-body-test」に変更します
「list.php」ファイル内にある「entry-body」「entry-card」「entry-card-large」と書かれた項目をそれぞれ「entry-body-test」、「entry-card-test」、「entry-card-large-test」へ変更します

この作業でtestというカスタム投稿タイプへ書かれた記事はすべて専用のテンプレートを通してブラウザにHTML出力されるようになります。

ここまでの作業をしても見た目は全く変化ありません。まだコピーして道を作っただけですから。
通常の投稿ページと見た目は変わりませんが一応テストをしておきましょう

カスタム投稿タイプで作った記事は一覧から「表示」をクリックすると表示されます
記事一覧は「http://貴方のサイトのURL/カスタム投稿名/」で表示されます

上手く表示されないときは記事の先頭に戻ってチェックしてください。

単一記事テンプレートの編集

先ほど「Simplicity2」の場合はコードの流れを見ると、本文の構造を持つ「entry-body」を「single.php」から呼び出すようになっていますと説明した通り、記事の出力内容をカスタマイズするには「entry-body-test」を編集する必要があります。

「entry-body-test」を開くと

<?php //記事本文の表示
the_content( get_theme_text_read_more() ); //デフォルト：続きを読む?>

という部分がありますので、これを削除して、テンプレートとして表示したい内容を記述します。
このthe_contentというテンプレートタグは記事の本文を表示しつつmoreタグがあった場合は「続きを読む」という表示をするものなので、記事本文を表示したい場合にはそのまま残して上下にテンプレート化したいコードを記述します。

例えば文字を表示する場合は

<p>～</p>

の「～」部分に表示したい文字を入力すればいいので、何かしら作ってみてください
また、カスタムフィールドの値を取得するには

<?php the_field("カスタムフィールドの「フィールド名」", $post->ID); ?>

で表示できるようになりますのでこちらもテスト的に作ってみてください

作ったらテンプレートを保存して実際に単一の記事を表示してみてください。

まとめ

分かりやすく書いたつもりですが、だらだらになってしまったので、再度まとめると、

まずはカスタム投稿タイプの設定項目で標準では「”has_archive” => fasle,」となっている箇所を「”has_archive” => true,」にする

そして、

「single.php」
「entry-body」
「list.php」
「entry-card」
「entry-card-large」

をコピーしてそれぞれカスタム投稿タイプ名（例として「test」というカスタム投稿名なら「-test」）を付けたファイルを作り、

「single.php」ファイル内にある「entry-body」と書かれた項目を探して「entry-body-test」に変更します
「list.php」ファイル内にある「entry-body」「entry-card」「entry-card-large」と書かれた項目をそれぞれ「entry-body-test」、「entry-card-test」、「entry-card-large-test」へ変更します

の作業をしたうえで、
「entry-body-test」を開くと

<?php //記事本文の表示
the_content( get_theme_text_read_more() ); //デフォルト：続きを読む?>

テストサイトを使用して作りながらこの記事を書いていますのでおそらく大丈夫だと思いますが、環境によっては上手く動作しないこともあるかもしれませんので、自己責任でやってみてください

phpファイルを編集するときは、WordPressのテーマ編集から行うことが多いと思いますが不具合があった場合には画面が真っ白になって何もできなくなってしまうこともあります。カスタマイズは必ず元のファイルをFTPを使ってパソコン（ローカル環境）にダウンロードしておくようにしましょう。また、ファイルの編集をパソコン上で行う場合には「メモ帳」を使用せず、専用のテキストエディタを使用しましょう。
おすすめの無料テキストエディタは「TeraPad」です