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

公開日:2015年12月14日 サイト作成日記
Knowledge Base Wordpress パソコン カスタマイズ 設定

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

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

 せっかくカスタム投稿を作るのですから、それを表示するためのテンプレートをオリジナルで作りたいですよね。特にカスタムフィールドなどを使ってフロントエンドから入力した内容を表示させるにはカスタム投稿用のテンプレートを使う必要性が出てきます。
 特別な動作をするテーマ以外では、投稿された記事は「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」プラグインを使っている場合で私の配布する日本語化ファイルを適用している場合には、カスタム投稿タイプの編集画面右側にある「特別な一覧を作る」という項目を「はい」に変更する必要があります。

中国最大の検索サイト「baidu(バイドゥ)」にサイトを登録してみた

【Simplicity】バージョンアップ(2.1.0 20160227o→2.3.0g)の際の備忘録

【CSS】ブロック要素とインライン要素(divタグとspanタグなど)の違いと使い分け


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

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

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

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

  1. 「single.php」
  2. 「entry-body」
  3. 「list.php」
  4. 「entry-card」
  5. 「entry-card-large」

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

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

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

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

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

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

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

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

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

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

「entry-body-test」を開くと

<?php //記事本文の表示
	the_content( get_theme_text_read_more() ); //デフォルト:続きを読む?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

<p>~</p>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

の「~」部分に表示したい文字を入力すればいいので、何かしら作ってみてください
また、カスタムフィールドの値を取得するには
<?php the_field(“カスタムフィールドの「フィールド名」”, $post->ID); ?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

まとめ

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

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

そして、

  1. 「single.php」
  2. 「entry-body」
  3. 「list.php」
  4. 「entry-card」
  5. 「entry-card-large」

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

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

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

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

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

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

このページを紹介いただいているサイト

 インターネットの世界はネットワークが命。私の拙いページをご紹介いただいているありがたいサイト様へ少しでも恩返しを・・ということでサイトへのリンクを張らせていただきます。ぜひご覧ください。

※Google Analyticsでのリファラアクセスデータを元にリンクさせていただいております(リンクを張っていただいている方でも本ページへアクセスのないサイト様は残念ながら掲載できておりません)

※リンクを張っていただいているサイト様でも長期間本ページへのアクセスがない場合にはリンクを解除させていただく場合があります

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報