Aopika技術日記

WEB制作の情報を自分のためにまとめたい

WordPressでカスタム投稿を表示する方法

前回「WordPressでカスタム投稿を実装する方法」で管理画面に独自の投稿を追加する方法を紹介させていただきました。今回は画面の表示処理をご紹介していきたいと思います。

ループ処理を回しながら複数ある記事のそれぞれタイトル、サムネイル、抜粋などを表示するよくある一覧ページを作成していきます。

 

カスタム投稿の実装がまだの方は前回の記事を参考にしてください。

 

 

 カスタム投稿タイプの記事を取得する処理

カスタム投稿タイプの記事を取得する方法は3つあります。

  1. WP_Query()クラスを使用する方法
  2. get_posts()タグを使用する方法
  3. query_posts()タグを使用する方法(※現在非推奨)

3番目のquery_posts()を使用したカスタム投稿の表示方法を解説されている記事を多く見かけますが、現在のWordPressでは推奨しておらずquery_posts()での実装はすべきではありません。(query_postsで解説されている記事の公開日を確認すると数年前の物が多いはずです

大きな理由としては、WordPressがデータベース側に投げるメインクエリを上書きする形で新たなクエリを生成しているため、データベースに不要なアクセスを行っており表示速度が悪くなるデメリットがあります。また実装の面においてもメインクエリを上書きしているためバグの温床となります

 

こちらの詳しい解説は自分のためにも別記事で書いていきたいですww

 

 そんなこんなで今回はWP_Query()クラスとget_posts()タグでの実装を行います。

こちらの2つについては実装コード上の大きな差異はあまりありません。

機能上の差異でいうと、WP_Query()クラスは細かいパラメータの設定取得が出来るため表示やページングなどのカスタマイズがし易く、get_posts()タグは記事情報の取得のみとなるためカスタマイズがしにくい点です。

 

  • ページングや表示のカスタマイズが必要になりそう→WP_Query()クラスを使用する
  • サイドナビやニュースなどページングが発生しない箇所で実装したいget_posts()タグを使用する

こんな感じの判断で良いかと思います。

 

 ◆WP_Query()の実装コード

 

WP_Queryの方は複数ページにわたる場合を考慮して$pagedに現在のページ送りを取得します。取得した$pagedを配列$argsのpagedに渡して、12行目でWP_Queryをインスタンスさせます。

上記のような実装で、ページ数にあった記事の情報を取得することができます。

 

get_posts()の実装コード

 get_postはタグになるためWP_Queryのようにインスタンスの必要はありません。

(get_post内でWP_Queryをインスタンスさせているので引数に配列をわたせばOKです) 

 

ループ処理で記事のリスト(サムネイル)を表示する処理

記事の取得処理ができてしまえばあとはhtmlで表示するだけです。「//your html code」の箇所を書き換えていただければ記事の数だけ繰り返し表示されます。

 

 

記事情報を表示するテンプレートタグ

<?php the_time(); ?>
現在の記事の投稿時間を表示。

 

<?php the_date(); ?>
現在の記事の投稿日時を表示。

 

<?php the_title(); ?>
現在の記事のタイトルを表示

 

<?php the_content(); ?>
現在の記事の本文を表示。<!-- more --> がある場合はsingleページ以外では概要文を表示し、「続きを読む」リンクをつけられる。

 

<?php the_permalink(); ?>
現在の記事のパーマリンクURLを表示

 

<?php the_category(); ?>

記事のカテゴリーをリンク付きで表示

 

<?php the_author(); ?>
現在の記事の著者名を表示

 

<?php the_tags(); ?>
現在の記事のタグを表示

 

その他色々ありますが基本的な記事の表示は上記を使用すれば大体表示できるとおもいます。