【WordPress】フロントページ（トップページ）に新着記事を表示する【PHP・CSS】

テンプレート用のものも用意しました。

現在「不器用ド貧乏日記」では、フロントページに固定ページを使用しています。

関連：【WordPress】固定ページをフロントページ（トップページ）に設定する【超初心者】

固定ページを使用することで、自分の好きなデザインのフロントページを作成できます。

表を使用することで、無事ジャンル分けをしたページを作成できました。

関連：【WordPress】記事内に「表（テーブル）」を使用する【超初心者】

しかし、固定ページにしたことで新たに問題が生じ、とても苦労したことがあります。

それが新着記事の表示です。

めっちゃ大変でしたよ！

フロントページを固定ページにする前は、何の設定もなく出来ていたことにここまで苦労するとは思いませんでした。

ということで今回は、このサイトで使用している新着記事を表示するPHPを記録しておきます。

PHPファイルの使用方法が分からない場合は、まず以下の記事をご覧ください。

エックスサーバーを使用した場合のPHPファイルの使い方を記録してあります。

関連：【WordPress】エックスサーバーWebFTPにPHPファイル等をアップロードする方法【超初心者】

使用しているPHP

このサイトのフロントページで新着記事を表示しているPHPは以下の通りです。

<?php query_posts('posts_per_page=5'); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <a href="<?php the_permalink(); ?>">
 <p>
 <span class="date">
 <?php echo '&nbsp'; ?>
 <span>
 <?php the_time('Y年m月d日'); ?></span>
 <?php echo '&nbsp'; ?>
 <?php $cat = get_the_category(); ?>
 <?php $cat = $cat[0]; ?>
 <?php $cat_id = $cat->cat_ID; ?>

<?php if ($cat_id == 11) { ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/s_afii.png" alt="afi" />
 <?php }elseif ($cat_id == 12){ ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/s_wpi.png" alt="wp" />
<?php }elseif ($cat_id == 79){ ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/s_doui.png" alt="movie" />
<?php }elseif ($cat_id == 10){ ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/s_ili.png" alt="il" />
<?php }elseif ($cat_id == 71 or $cat_id == 70){ ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/s_sai.png" alt="sakkyoku" />
<?php }elseif ($cat_id == 6){ ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/s_zai.png" alt="zakki" />
<?php }else{ ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/s_zai.png" alt="else" />
<?php } ?>

 <?php echo '&nbsp'; ?>
 <span><?php the_title();?></span>
 <hr class="bar3">
 </span>
 </p>
 </a>
 <?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

このPHPの内容を記録しておきます。

どうしても分からないとき、正常に動かないときは詳しい人に質問してみましょう。

プログラム系の質問は、知恵袋などより専用の質問サイトの方が親切で丁寧な回答が期待できます。

オススメの質問サイトはteratail（テラテイル）です。

メールアドレスのみで登録でき、初心者マークを付ければ分かりやすく回答してくれます。知恵袋のような意味のない回答や高圧的な人はいないので安心して使えますよ。

関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ

それでは、中身を少しずつ見ていきます。

新着記事の件数を変える

1行目の数字を変更することで表示する件数を変えることが出来ます。

件数を選択するPHP

<?php query_posts('posts_per_page=5'); ?>

現在は5記事を表示するよう設定しています。

カテゴリごとに表示する画像を変える

2つ目の塊（14行目から）で画像を選択しています。

画像を選択するPHP

<code></code><?php if ($cat_id == 11) { ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/s_afii.png" alt="afi" />
<?php }elseif ($cat_id == 12){ ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/s_wpi.png" alt="wp" />
<?php }elseif ($cat_id == 79){ ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/s_doui.png" alt="movie" />
<?php }elseif ($cat_id == 10){ ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/s_ili.png" alt="il" />
<?php }elseif ($cat_id == 71 or $cat_id == 70){ ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/s_sai.png" alt="sakkyoku" />
<?php }elseif ($cat_id == 6){ ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/s_zai.png" alt="zakki" />
<?php }else{ ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/s_zai.png" alt="else" />
<?php } ?>

「$cat_id == ID番号」の部分でカテゴリーを選び、「<img～」の行で画像を選択しています。

カテゴリーのID番号は「投稿」の「カテゴリー」から確認できます。

<?php }elseif ($cat_id == ID番号){ ?>　を追加することで、カテゴリーを増やします。

<?php }else{ ?>　でその他のカテゴリーの場合を表しています。

記事タイトルの表示

.3つ目の塊の2行目で記事タイトルを取得し表示しています。

記事タイトルを表示するPHP

<span><?php the_title();?></span>

フォントサイズも変更できます。

画像等がなくても使用できるテンプレート

こちらは画像の用意やスタイルの設定をしていなくてもすぐに使用できるテンプレートです。

使用する際は、念のためInstant WordPressで試してから使用してください。

関連：【ホームページ作成】「Instant WordPress」を導入し練習環境を作る【超初心者】

<?php query_posts('posts_per_page=5'); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <a href="<?php the_permalink(); ?>">
 <p>
 <span class="date">
 <?php echo '&nbsp'; ?>
 <span>
 <?php the_time('Y年m月d日'); ?></span>
 <?php echo '&nbsp'; ?>
 <?php $cat = get_the_category(); ?>
 <?php $cat = $cat[0]; ?>
 <?php $cat_id = $cat->cat_ID; ?>

<?php echo '&nbsp'; ?>
 <span><?php the_title();?></span>
 </span>
 </p>
 </a>
 <?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

参考にさせていただいたサイト

このPHPを組むにあたって参考にさせていただいたサイトは以下のサイトです。

ありがとうございます。

パソコン・プログラム系特化型の質問サイト｜teratail（テラテイル）

【wordpress】投稿・固定ページ内にPHPファイルをインクルード(挿入/実行)させる｜かわたま.net

WordPressでトップページに最新記事5件をリスト表示｜カメぞうのメモ書き

WordPressでカテゴリ名を表示する方法！リンク付きとリンクなしそれぞれご紹介します！｜delaymania

今回のまとめ

色々なサイトを見て、新着記事を表示できるPHPを組むことが出来ました。

まだまだ分からないことだらけですが、自分で組めると便利そうだということが分かりました。

PHPとCSSは勉強して、是非身に付けたいと思います。（いつになるかは分かりませんが）

調べると、ありがたいことにたくさんの情報が出てきます。

自分に必要な情報を探すのは大変ですが、調べ癖を付けていてよかったと思います。

それに、質問サイトの方たちが非常に親切でした。ありがとうございます。

teratail（テラテイル）は今後も利用させていただく質問サイトになりそうです。

関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ

迷ったら検索＆質問です！

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

関連：【WordPress】エックスサーバーWebFTPにPHPファイル等をアップロードする方法【超初心者】

関連：知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ＜画像付き＞