電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

【WordPressテーマ自作③】「PHPループでトップページ作成」

calendar

reload

【WordPressテーマ自作③】「PHPループでトップページ作成」

PHPのループを使ってブログカードを用いたトップページを作成します。

記事が投稿日付順に見栄え良く並んでいる、ブログ等のトップ画面でよく目にするやつですね。

トップページ

スポンサーリンク

PHPループについて

if文(分岐)とwhile文(繰り返し)のphpを使う事によって、投稿記事があれば、記事が積み重なるように表示されます。これがループによって再現されます。

ループ内には、記事の表示させたい項目の記述を入れます。

今回の例ですと、下記のような流れになります。

phpループ

index.php

今回はindex.phpをトップページにしたいと思いますので、index.phpにループの記述をしていきます。

ブログカードのHTML記述を全て消して、PHPループの記述に変更します。

パーマリンクのPHPで記事のURLを呼び出しますが、そこの<a>タグでループを囲っているのが一つのポイントです。後述しますが、CSSでスタイルをあてるとブログカード形式になり、枠内のどこをクリックしてもリンクに飛ぶようにできます。

サムネイルにもif文がついていますが、これは記事にサムネイルが無ければ任意の画像(ノーイメージとか)を表示させたりできます。

あとは記事のタイトル、カテゴリ、日時、本文の抜粋などのPHPがループ内に記述されています。

single.php(投稿ページ)とpage.php(固定ページ)

WEBサイトには更新される「投稿ページ」と、サイトの情報や問い合わせページ等の基本的には更新されない「固定ページ」があります。

これらもWordPressで簡単にページの作成が出来ますのが、それぞれ専用のPHPファイルが必要になります。

作成は簡単で、index.phpをベースにし、一部変更を加えるだけです。

変更箇所は、ブログカード式の表示を削除し、<?php the_excerpt()) ; ?>の本文抜粋の部分を<?php the_content()) ; ?>の本文一式に変更する感じです。

それでは、single.phpとpage.phpにindex.phpのコードをコピーして、下記のように変更を加えます。

この段階で、一度WordPressのテーマ設定から、トップページを開いてみます。

まだ記事の作成をしていないので、「記事はありません。」の表示が出るはずです。

記事はありません

固定ページと投稿ページを作成して公開

WordPressで10記事程度、記事を作成して公開します。

今回は固定ページ3、投稿ページ10位にしてみました。

なお、投稿記事作成の際にアイキャッチ画像を選択できるようにするため、functions.phpに下記のコードを追加します。

記事作成、公開後、表示のスタイルが崩れているので、Googleクロームのデベロッパーツールで崩れている箇所を探して、CSSで修正します。

下記は修正後のCSSになります。

CSS適用後、テーマのトップページ、ブログカード表示が問題なければOK。

ループ完成

次回はパンくずリスト、送りページのPHPを作成します。