カスタム投稿タイプの追加から表示まで「functions.php編集編」その2「表示」

カスタム投稿タイプの追加から表示まで「functions.php編集編」その2「表示」

スポンサーリンク

スポンサーリンク

WordPressにおけるカスタム投稿について、

をそれぞれ記事にしたいと思います。

前回の記事では、functions.phpを編集することでWordPressのダッシュボード画面に、カスタム投稿タイプを追加しました。

ですがそれだけでは、実際のwebページにカスタム投稿にて投稿した内容は表示されません。

そこで今回の記事では、投稿したカスタム投稿タイプの記事を、webページに表示させる方法について説明していきます。

カスタム投稿タイプの表示

WordPressの投稿によって公開した記事の一覧がトップページに表示されるように、カスタム投稿によって公開した記事の一覧についても、トップページやその他任意のページの任意の箇所に表示させる方法を説明します。

方法は簡単で、以下のコードを表示させたい箇所にコピペするだけです。

コードの2行目が表示させる件数となります。

上記コードで言えば、カスタム投稿にて公開した5件分の記事が一覧表示されることになります。もちろん10にすれば10件、20にすれば20件分表示されます。

コードの3行目の「example」の箇所に、functions.phpのregister_post_typeに入力した投稿タイプと同じ文字列を入力することで、追加したカスタム投稿タイプと表示する内容とを関連付けさせます。

(上記コードで言えば、functions.phpのregister_post_typeには、exampleと入力したことになります。この投稿タイプは任意のローマ字に変更が可能です。)

7行目以降の<div>タグ内に記載している内容が、一覧にて表示される以下の項目です。

  • 9行目が公開日時
  • 10~12行目がサムネイル画像
  • 13行目が記事のタイトル

この<div>タグ内のデザインや、18行目の「お探しの記事は見つかりませんでした。」の部分のデザインについては、CSSで自由に装飾をすることが可能となっています。

CSSによる装飾がない場合は、以下のような形でテーマ内CSSに準拠した形で表示されます。

カスタム投稿タイプの表示例

また、表示する際の項目で公開日時が不要な場合は9行目を削除、サムネイル画像が不要であれば10~12行目を削除、という風に、表示させる項目も変更することが可能です。

本サイトのHTML&CSSやWordPressといったように、カテゴリー別記事の一覧ページと同様の形の、カスタム投稿タイプにて公開した記事の一覧ページを表示(作成)する方法を説明します。

方法はとても簡単で、archive-投稿タイプ.phpというファイル名のファイルを作成し、サーバーにアップロードするだけです。

「投稿タイプ」の箇所は、functions.phpにて入力した投稿タイプと同じ値を入力してください。

今回の流れであれば、archive-example.phpというファイルになります。

本サイトを例にした場合、HTML&CSSのカテゴリー別記事の一覧ページと同じテンプレートにarchive-example.phpというファイル名を付けてアップロードした場合は、下記のような表示になります。

カスタム投稿タイプの記事一覧ページの表示例

最後に、カスタム投稿にて公開した記事ページの作成方法を説明します。

こちらも一覧ページと同様に簡単で、single-投稿タイプ.phpというファイル名のファイルを作成し、サーバーにアップロードするだけです。

「投稿タイプ」の箇所は、functions.phpにて入力した投稿タイプと同じ値を入力してください。

今回の流れであれば、single-example.phpというファイルになります。

本サイトの記事ページと同じテンプレートにsingle-example.phpというファイル名を付けてアップロードした場合は、下記のような表示になります。

カスタム投稿にて公開した記事ページの表示例

カスタム投稿タイプの表示まとめ

前回の記事では、functions.phpを編集することでWordPressのダッシュボード画面にカスタム投稿タイプを追加する方法を。

そして今回の記事では、追加したカスタム投稿タイプをwebページ上に表示させる方法を、それぞれ説明してきました。

HTMLやCSS、そしてPHPといった言語の扱いに慣れている方であれば、比較的簡単にカスタム投稿を追加&表示させることが出来たのではないでしょうか。

プラグイン(Custom Post Type UI等)による追加の方が簡単ですが、やはりPHPファイルを編集することで追加する方が柔軟性のあるカスタム投稿にすることが出来ると思います。

なにより、たくさんのプラグインをインストールしてしまうと重たくなってしまったり、思わぬところでプラグイン同士が競合してしまって機能しなくなることもあったりするので、プラグインにはあまり頼りたくというのが本音です。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク