【学習記録：138日目】固定ページに一覧記事を表示してみる×プログラミング

こんにちは！アラサーOLのぱるこです。

現在、webプログラマーを目指して、でプログラミングの勉強中です。

今回はウェブカツ5ヶ月目(前半)の定例ブログです。

「wordpress部」の備忘録
プログラミング学習報告（5ヶ月目(前半)）

「wordpress部」の備忘録

今月の前半に「wordpress」で学んだことを生かして、現在転職活動のためのポートフォリオを作成中なのですが、今回は、そのアウトプット中に学んだことを、備忘録として書いていきたいと思います。

ポートフォリオのワイヤーフレーム

まず最初に、今回作るポートフォリオのざっくりとしたワイヤーフレームです。
こんな感じにしようと思っています。

ポートフォリオの固定ページと投稿ページ（ブログを載せるページのみ）

【固定ページ】
・font-home.php（トップページ）…最新記事を3つ載せます
・page.php（最新一覧ページ）

【投稿ページ】
・index.php（カテゴリー一覧ページ）
・single.php（個別記事ページ）

プログラミングの学習を始めたと同時に始めたこのブログも、せっかく月2回書いているので、ポートフォリオに載せたいと思っています。(なので、備忘録をもっと増やしたいけど、浅はかな知識を文章にするって本当に難しいです。でもすごくいいアウトプットになっています)

また今回は、カテゴリーページだけではなく、最新の記事一覧を見れるページも作成しました。
最新ページだから、投稿ページかと思いきや、固定ページにしなければならないみたいです。

wordpressの仕組み

wordpressは、ページに応じた記事を自動的に取得してくれるような仕組みになっています。
カテゴリーの一覧ページであればカテゴリーの記事を、月別一覧記事であれば月別の記事を、個別記事ページであれば個別記事を自動的に取得してくれます。
なので、自動的に取得されたデータを表示したい場合は、このコードを書けばOKです！！

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  the_title();
  the_content();
<?php endwhile; else: ?>
  <div>記事がありませんでした。</div>
<?php endif; ?>

なぜ、このようにページに応じた記事を自動で取得してくれるのかというと、「メインクエリ」というもののおかげのようです。

メインクエリとは

まず、「クエリ」とは、あの過酷な思い出のwebサービス部で散々使用したSQL文のことです。
つまり、記事が保存されているデータベースに対して、ページに応じた記事を取得するよう命令し、自動的に取得してくれるんですね！

なので、カテゴリ一覧ページを表示する場合は、データベースに対して「カテゴリー記事(データ)を取得して」という命令をし、カテゴリー記事を取得するところまで、wordpressが自動的に行ってくれます。

しかし、今回作成するポートフォリオのように、TOPページやブログページ(最新記事一覧)を固定ページにし、一覧記事を表示したい場合は、注意しなければなりません。

wordpressでは、メインクエリが自動的にそのページに応じて記事を取得してくれます。
なので固定ページの場合も同様で、「その固定ページの記事(データ)を取得して」と自動的に命令&取得してしまいます。なので、TOPページの場合はTOPページの記事そのものを呼び出してしまうので、今回欲しいブログ記事を取得できません。

固定ページやサイドバーの一覧表示はサブクエリを使おう！

自動的に取得されたデータではないものを表示したい場合は、「サブクエリ」というものを使って、取得する命令を変えることができます。
TOPページに最新の記事を取得したい場合は、自動的に取得されるTOPページのデータではなく、「最新の記事を取得して」という風に命令を変えることで最新記事を取得することができます。

サブクエリを使う方法は、WP_Queryを使う方法とget_postsを使う方法の2種類あります。
※コードの説明を省いているので下記の参考ページをご覧ください。

WP_Queryを使う方法

<?php $query = new WP_Query(array(
  'post_type' => 'post',
)); ?>
<?php if($query->have_posts()) : ?>
  <?php while ($query->have_posts()) : $query->the_post(); ?>
    the_title();
  　the_content();
  <?php endwhile; wp_reset_postdata(); ?>
<?php else : ?>
  <div>記事がありませんでした。</div>
<?php endif; ?>

get_postsを使う方法

<?php $posts = get_posts(array(
  'post_type' => 'post',
)); ?>
<?php if(!empty($posts)) : ?>
  <?php foreach($posts as $post) : setup_postdata($post); ?>
    the_title();
  　the_content();
  <?php endforeach; wp_reset_postdata(); ?>
<?php else : ?>
  <div>記事がありませんでした。</div>
<?php endif; ?>

また、今回の固定ページの最新一覧ページは、サブクエリやプラグインを使わなくても、下記の方法で簡単にできました。なんで出来るのかまだ理解できてませんが・・・。