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

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

 

<追記>
現在はテーマをThe Thor(ザ・トール)に変えたため、以下の説明とは違うトップページになっています。
The Thorでは様々な設定がphpの知識なしで簡単に利用できます。
例えば記事一覧の表示なら、画像ありとなしの2種類のウィジェットや、カテゴリ指定で記事一覧を表示できるショートコードがあらかじめ用意されています。
自力でサイトデザインを進めるのが大変だと感じている方は、思い切って有料テーマに乗り換えるのも1つの手です。
こんなボタンも簡単に作れて、いい感じですよ。
The Thorを見に行く

 

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

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

 

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

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

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

 

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

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

 

めっちゃ大変でしたよ!

 

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

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

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

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

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

 

<追記>

サイトのテーマを「LION MEDIA」に変更したので、このサイトでは使わなくなりました。

もし使用中のテーマに新着記事の表示機能がある場合はそちらを使用した方が確実です。

関連:テーマ「LION MEDIA」が無料とは思えないクオリティ!おすすめポイントと使い方

関連:高性能無料テーマ「LION MEDIA」がVer2.0.0になり使いやすさパワーアップ

 

スポンサーリンク

使用しているPHP

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

 

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

 

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

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

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

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

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

 

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

新着記事の件数を変える

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

 

件数を選択するPHP

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

 

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

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

 

画像を選択するPHP

 

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

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

 

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

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

 

記事タイトルの表示

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

 

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

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


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

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

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

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

 

 


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

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

ありがとうございます。

パソコン・プログラム系特化型の質問サイト|teratail(テラテイル)

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

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

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


今回のまとめ

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

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

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

 

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

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

 

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

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

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

 

迷ったら検索&質問です!

 

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

 

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

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