デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

新しいトップページをつくってみた
②固定ページに投稿を読み込む

トップページ制作過程の第2回目は、
トップページのテンプレート(front-page.php)に投稿を読み込む方法をご紹介します。
new_toppage_2-1

★本記事の概要ポイント

・固定ページに投稿を読み込むには、WP_Queryというクラスを使う。

スポンサーリンク

1.WP_Queryについて

固定ページに投稿を読み込むには、「WP_Query」というクラスを使います。

WP_Queryとは、WordPressのコアにあるクラスの1つで、様々な条件を指定して投稿などを読み込むことができます。

2.WP_Queryの使い方

具体的にWP_Queryの使い方をご説明します。
以下のソースがWP_Queryの基本的な使い方になります。

1行目で、WP_Queryのオブジェクトを生成しています。パラメータには読み込みたい投稿の条件を指定します。(パラメータは後述のサンプルでいくつかご紹介します。)
3行目〜5行目がループ処理になります。
have_posts()やthe_post()等の関数は、WP_Queryクラスのメソッドとして実行しています。
ループ処理の中にthe_title等のテンプレートタグ関数を使って投稿情報を出力できます。

ループ処理が終わったら、7行目の「wp_reset_postdata」という関数を実行し、グローバル変数等を初期化し、状態を元に戻しておきます。

3.サンプル

実際に新しいトップページで使ったWP_Queryの条件をサンプルとしてご紹介します。
なお、処理は、すべて新しいトップページのテンプレート(front-page.php)に記載します。

最新記事6件分のアイキャッチ画像を表示する

1行目のWP_Queryのパラメータは、連想配列で指定しています。
orderbyは、パラメータで指定した項目の値で投稿をソートします。
今回、dateを指定しましたので、投稿した日付順にソートしています。
posts_per_pageは、投稿数を指定します。今回は、6件分指定しています。
あとは、ループ処理の中にアイキャッチ画像(426px,284px)を読み込む処理を入れれば、最新記事6件分のアイキャッチ画像が表示されます。

WordPress関連の全記事のアイキャッチ画像を表示させる

1行目のcategory_nameで指定したいカテゴリーのスラッグを設定します。
今回は、wordpressカテゴリーの投稿を読み込みたいので、wordpressを指定しています。
また、’posts_per_page’ => -1を指定すると、すべての投稿を読み込みます。

4.最後に

以上、WP_Queryを使って固定ページに投稿を読み込む方法をご紹介しました。
WP_Queryのパラメータには、他にも色々条件が指定できますので、
以下のサイトを参考にしてみてください。
関数リファレンス(WP_Query)

少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン