前回の記事ではカスタム投稿タイプ＋カスタムフィールドを使って記事を書く方法をご紹介しました。今回は使っているテーマの記事テンプレートを作って投稿された記事がいつも同じ内容とレイアウトで自動的に表示される環境を作ります。
ちなみに前回の記事はこちら
初心者でもできる「カスタム投稿タイプ（カスタムポストタイプ）」の設定方法と使い方②
カスタム投稿タイプを作るという動機を持つ方は、
- WordPress標準搭載の記事の集まりである「投稿」と同じ機能を持つ記事の集まりを作りたい
- １の記事をいつも同じレイアウトと同じデザインで記事を表示したい
- 多数の人で記事を投稿するようなサイトを作りたい
- できれば管理画面を使わずフロントエンドから記事を投稿させ、入力した項目をいつも同じレイアウトで表示させたい
と考えていたり、必要に迫られているのではないでしょうか？今回は自分の勉強も兼ねてできるだけ分かりやすく解説しようと思います。
WordPressが記事を表示する仕組み
まずこれが理解できないと先に進めません。簡単に流れを説明すると・・・
単一の記事（表示されるページに１つの投稿が表示される画面）では
「記事の投稿内容」→テーマの中の「single.php」ファイルでHTMLに変換→インターネットブラウザで表示
という流れになります。
記事のアーカイブ（記事のタイトルと簡単な抜粋などが一覧表示される画面）では
「記事の集まり」→テーマの中の「archive.php」ファイルでHTMLに変換→インターネットブラウザで表示
となっています。
使っているテーマによってはファイル名称が違う場合もありますし、ファイルの中で別のファイルから内容を参照するようになっているものもありますので単純に「これ」と言えないのが歯がゆい感じですが、基本は上記のようになっています。
ですから、表示する内容を変えようと思ったらこの２つのファイルをカスタマイズすれば、単純にオリジナルな投稿テンプレートが作れるという訳です。
WordPressがカスタム投稿タイプを表示する仕組み
上記の流れが分った方はちょっと進んで、今度はカスタム投稿タイプの記事を表示する流れは・・・
単一の記事（表示されるページに１つの投稿が表示される画面）では
「記事の投稿内容」→テーマの中の「single-カスタム投稿タイプ名.php」ファイルでHTMLに変換→インターネットブラウザで表示
という流れになります。
記事のアーカイブ（記事のタイトルと簡単な抜粋などが一覧表示される画面）では
「記事の集まり」→テーマの中の「archive-カスタム投稿タイプ名.php」ファイルでHTMLに変換→インターネットブラウザで表示
という流れになります。
要するに、カスタム投稿タイプに付けた半角英数字の「カスタム投稿タイプ名」を半角ハイフン「-」を付けることで、同一の名前のカスタム投稿タイプ用の投稿テンプレートなのでそちらを通して表示しなさいとWordPressが判断するようになっているのです。
逆に、カスタム投稿タイプ用テンプレートが存在しなければ通常のテンプレートを使って出力されるようになっているのです。サイト内の記事すべてが同一の投稿形態なのであれば、「single.php」「archive.php」をそのままカスタマイズすれば済みますが通常は別にしたいのではないかと思いますので、次の項以降で解説します。
単一の記事テンプレートをカスタム投稿タイプ用にカスタマイズする
「single.php」には本文の内容の他にもいろいろな要素が含まれていますので、最初から作るのは大変です。簡単にカスタム投稿タイプ用のテンプレートとして使うには、
「single.php」をコピーして「single-カスタム投稿タイプ名.php」という名前のファイルを作ります。
そして、「single-カスタム投稿タイプ名.php」を開いてカスタマイズをしていきます。
具体的な手順
ファイルの中にループ処理をする宣言コードが必ずあります
while (have_posts()) : the_post();というコードです。
この後に書かれているのが記事をブラウザで表示させるためのコードになり、
endwhile;
までの一連が記事の表示に使われる要素になります。
基本的には記事の本文を実際表示したい内容へ変更したいわけですから、
上記のコードの間にある
the_contentというコードを見つけます
the_contentというのは投稿の本文を表示しなさいという意味で
中には
the_content( get_theme_text_read_more() );
というふうに、「more」タグが本文の中に含まれる時には「つづきを読む」などのテキストを表示しなさい
と書かれていることもあります。
カスタム投稿タイプで記事の本文の内容を全く表示させないようにするには、the_contentの記述を削除して、表示させたいコードを書いていくだけです。
例えば文字を表示する場合は段落タグを使って
<p>～</p>の「～」部分に表示したい文字を入力すればいいので、何かしら作ってみてください
また、カスタムフィールドの値を取得するには
<?php the_field("カスタムフィールドの「フィールド名」", $post->ID); ?>で表示できるようになりますのでこちらもテスト的に作ってみてください
作ったらテンプレートを保存して実際に単一の記事を表示してみてください。ちゃんとカスタム投稿タイプの記事が作ったテンプレート通りに表示されましたよね？
※テーマの中には「get_template_part」というコードがループの中にあり、記事の内容を別のphpファイルから読み込むようになっているものもありますので、その場合には「get_template_part」の後にあるphpファイルもコピーしてカスタム投稿タイプ用にリネームして、「single-カスタム投稿タイプ名.php」の中にある「get_template_part」の後にあるphpファイルの名前をリネームしたファイル名にすればＯＫです。複雑なテーマではこうした構造が何重にもなっていることがありますのでコードとにらめっこしてください。
記事のアーカイブテンプレートをカスタム投稿タイプ用にカスタマイズする
こちらは特にカスタマイズする必要がないことが多いので、カスタム投稿タイプ用のファイルのみ作成します
「archive.php」をコピーして「archive-カスタム投稿タイプ名.php」を作成すれば基本的には完了です。
記事一覧を表示するには
「http://貴方のサイトのURL/カスタム投稿名/」
とアドレスバーに入力すればＯＫです。
※投稿と同様、アーカイブにも他のファイルを読みだすようになっているものもあります。投稿テンプレートと同じように関連するファイルを辿っていき、ファイルの複製とファイル指定の変更をすることで読み込めるようになります。
簡単に書いてしまいましたが、以上がカスタム投稿タイプ用のテンプレートを作る手順になります。あとは前後のコードなどを試しにいろいろ触ってみてどう変化するのかをチェックしていけばテーマの構造そのものが理解していけると思います。
最後に
私はサイト作成のテーマに「Simplicity2」を使っています。「Simplicity2」でカスタム投稿タイプ用にテンプレートを作ったときの備忘録を記事にしてありますので、同じテーマを使っている方の参考になればと思います。
