AGA 成長因子
不器用ド貧乏日記

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

 

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

 

スポンサーリンク


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

参考:【WordPress】固定ページをフロントページ(トップページ)に設定する【超初心者】

 

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

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

参考:【WordPress】記事内に「表(テーブル)」を使用する【超初心者】

 

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

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

 

めっちゃ大変でしたよ!

 

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

ということで今回は、このサイトで使用している新着記事を表示する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(); ?>" style="text-decoration:none; font-size: 12pt; color: #000000; line-height:24pt;">
 <p style="background-color:#dbf0b8; margin : 0pt ;">
 <span class="date">
 <?php echo '&nbsp'; ?>
 <span style="font-size: 8pt;">
 <?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 style="font-size: 12pt;"><?php the_title();?></span>
 <hr class="bar3">
 </span>
 </p>
 </a>
 <?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

内容をわかる範囲で記録しておきます。

 

新着記事の件数を変える

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

 

件数を選択するPHP
<?php query_posts('posts_per_page=5'); ?>

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

 

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

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

 

画像を選択するPHP
<?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 style="font-size: 12pt;"><?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(); ?>" style="text-decoration:none; font-size: 12pt; color: #000000; line-height:24pt;">
 <p style="background-color:#dbf0b8; margin : 0pt ;">
 <span class="date">
 <?php echo '&nbsp'; ?>
 <span style="font-size: 8pt;">
 <?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 style="font-size: 12pt;"><?php the_title();?></span>
 </span>
 </p>
 </a>
 <?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

 


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

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

ありがとうございます。

 

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

 

WordPressでトップページに最新記事5件をリスト表示

 

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


今回のまとめ

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

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

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

 

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

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

 

迷ったら検索です!

 

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

 

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

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

 

↓クリックで応援!

人気ブログランキング

 

スポンサーリンク


コメントを残す

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