index.phpに投稿・固定ページの情報を表示する | SkillhubAI（スキルハブエーアイ）

index.phpに投稿・固定ページの情報を表示する

前回未着手だった「ズーロッパ東京とは」と「お知らせ」のセクションをWordPress化します。
今回のレッスンでindex.phpが完成しますよ。
file

お知らせカテゴリーの投稿情報を表示

前レッスンの復習も兼ねて、先に「お知らせ」のセクションを作ります。

1.ループを設定する

記事リンクを囲うdivタグの下辺りに、WP_Queryを使ったループ（while文）を挿入します。
変更が必要なのは、以下の２箇所です。

  • カテゴリーを指定するcategory_nameの値（infoにする）
  • 取得件数を指定するposts_per_pageの値（3にする）

index.php 

<?php
  $args = array( // 取得したい投稿の条件指定
    'post_type' => 'post',
    'category_name' => 'info',
    'posts_per_page' => 3,
  );
  $info_posts = new WP_Query($args);
  while ($info_posts->have_posts()): $info_posts->the_post();
?>

  <!-- ループで表示したい内容 -->

<?php endwhile; wp_reset_postdata(); ?>

new WP_Query($args)の左にある変数名は、そのままでも、変更しても良いです。
上記コードでは分かりやすいよう変えています。

2.ループで表示させる内容を書く

ループの中に、繰り返し表示させたい内容を書きます。
投稿1つ分、素材のコードだと<article> ~ </article>までですね。

file

以下３つはテンプレートタグを使って、WordPressに登録されている情報を表示します。

  • 日にち部分：投稿日を表示する<?php echo get_the_date(); ?>
  • aタグのリンク先：<?php the_permalink() ?>
  • h3タグの中身：投稿タイトルを表示する<?php the_title(); ?>

index.php 

<?php
    $args = array( // 取得したい投稿の条件指定
        'post_type' => 'post',
        'category_name' => 'info',
        'posts_per_page' => 3,
    );
    $info_posts = new WP_Query($args);
    while ($info_posts->have_posts()): $info_posts->the_post();
?>
    <article class="flex-container">
        <div class="info-date">
            <?php echo get_the_date(); ?>
        </div>
        <h3 class="info-title">
            <a href="<?php the_permalink() ?>">
                <?php the_title(); ?>
            </a>
        </h3>
    </article>
<?php endwhile; wp_reset_postdata(); ?>

上書き保存して、表示を確認します。 ループを使って表示している部分が、HTMLで作った部分と同じように表示されていれば完成。

file

必要なくなった、HTMLを直に書いている部分（上図、黒い線の部分）のコードは削除してください。

もっと見る のリンク

お知らせの最下部にあるボタン風デザインの「もっと見る」。 ここのリンク先には、カテゴリーアーカイブページのURLを取得するget_category_link();というテンプレートタグを使います。

<?php get_category_link( $category_id ); ?>

( )内の$category_idには、移動したいカテゴリーのIDを入れます。

カテゴリーのIDは、カテゴリーの編集画面を開いた時のURLで確認できます。
URLの中にcategory&tag_ID=〇〇という部分があるので、探してみてください。

下図の場合、カテゴリーのIDは「6」です。
file

get_から始まる“取得”のテンプレートタグは、それだけだと情報を書き出してはくれません。
get_the_date();などと同じく、出力せよという命令「echo」をセットで使います。

index.php 

...
<?php endwhile; wp_reset_postdata(); ?>
<p class="text-center">
  <a href="<?php echo get_category_link( 6 ); ?>" class="btn-more text-white">もっと見る</a>
</p>

index.phpを上書き保存して、リンク先が設定できているかを確認してください。
file

ズーロッパ東京とは セクションの調整

「ズーロッパ東京とは」のセクションを作成します。
ここは、固定ページの情報を取得して表示するタイプです。
file

特定の固定ページの情報を出力する

今回のように特定の固定ページから情報を取り出したいときも、WP_Queryが使えます。 取得したい投稿の条件を指定する$args = array( )の中に、下記のように書けばOKです。

<?php
  $args = array(
    'page_id' => ●, // 取得する固定ページの IDを書く
  );

使用するページのIDは、カテゴリーIDと同様に編集画面のURLで確認できます。
URLの中にあるpost.php?post=〇〇部分の数字がID。下図の場合だと22です。
file

「ズーロッパ東京とは」の見出し+画像の下辺りにWP_Queryを使ったループを書きます。page_idの値には、ご自身のWordPressで確認したIDを入れてください。

index.php 

<h2 class="text-green text-center">
  ズーロッパ東京とは
</h2>
<div class="text-center">
  <img src="<?php echo get_template_directory_uri();?>/images/line.png" width="400" height="6" alt="">
</div>
<?php
  $args = array(
    'page_id' => 22, // ご自身のIDを入れてください
  );
  $about_page = new WP_Query($args);
  while ($about_page->have_posts()): $about_page->the_post();
?>

 <!-- 表示したい内容 -->

<?php endwhile; wp_reset_postdata(); ?>

コメントアウト<!-- 表示したい内容 -->のところに、中身（画像やテキスト）をまるっと全て入れます。
file

以下３箇所をテンプレートタグに置き換えてください。

  • imgタグ：投稿のアイキャッチを表示する<?php the_post_thumbnail(); ?>
  • h3タグの中身：投稿タイトルを表示する<?php the_title(); ?>
  • <p>~</p>まで：投稿の抜粋を表示する<?php the_excerpt(); ?>

index.php 

<?php
  $args = array( // 取得したい投稿の条件指定
    'page_id' => 22,
  );
  $about_page = new WP_Query($args);
  while ($about_page->have_posts()): $about_page->the_post();
?>
  <div class="flex-container">
    <div class="about-image card">
      <?php the_post_thumbnail(); ?>
    </div>
    <div class="about-description">
      <h3 class="text-green">
        <?php the_title(); ?>
      </h3>
      <?php the_excerpt(); ?>
    </div>
  </div>
<?php endwhile; wp_reset_postdata(); ?>

レイアウト崩れなく、固定ページのタイトルやサムネイルが表示されていたら完成です！
file

※抜粋<?php the_excerpt(); ?>の文字数制限で、文章が途中で省略されていますが、このままにしてください。
気になる方は、<?php the_content(); ?>を使って全文出力しても良いです。

WP_Queryのパラメータについて

いろいろな条件で取得する投稿や固定ページの絞り込みができる`WP_Query。
条件指定に使ったcategory_nameやpage_idなどのことを、パラメーターと言います。

使用できるパラメーターはWordPress公式のサイトで紹介されています。

WP_Query | Class | WordPress Developer Resources
https://developer.wordpress.org/reference/classes/wp_query/

このテーマ開発ハンドブック、日本語版も用意されてはいるのですが、まだ、ほとんど翻訳されていません。

テーマ開発ハンドブック – Japanese Team – WordPress.org 日本語
https://ja.wordpress.org/team/handbook/theme-development/

個人でまとめている、チートシートを作られている方が結構いらっしゃいます。
日本語で確認したい場合は、下記のようなをページを参考にさせていただきましょう。

WP_Queryやget_postsのパラメータまとめ
https://rishuntrading.co.jp/blog/wordpress/wp_query-get_posts-code-snippet/
前のレッスン 次のレッスン
レッスン一覧へ