index.phpは、[home.php(トップページ)][category.php(カテゴリ別一覧ページ)][tag.php(タグ別一覧ページ)][archive.php(アーカイブ一覧ページ)][serch.php(検索結果一覧ページ)]が作成されていない場合に、代わりとなって表示される万能テンプレートです。
また、WordPressで上記の記事の一覧を出力するためのテンプレートを作成していく際の、ベースとなるテンプレートでもあります。
WordPressテーマ作成5では、記事情報を呼び出すためのループの記述方法とテーマのメイン部分であるindex.phpの作成方法についてご紹介いたします。
メインループとサブループについて理解する
index.phpを作成する前に、記事の一覧を呼び出すためのwordpressのループについて理解しておきましょう。
ループとは、WordPressのデータベースから記事のデータを抽出して表示する機能で、WordPressが自動的に処理を行うメインループと自分で抽出条件を選択するサブループが存在します。
WordPressで自動的にページを生成する上で、ループは絶対に欠かせない存在なのでメインループとサブループに分けて理解しておきましょう。
メインループ
メインループでは、呼び出されたURLなどから自動的にWordPressが必要なデータを判別し表示させるループです。表示させるコンテンツはWordPressが自動で判別するので、TOPページや記事ページ・カテゴリ、タグ、アーカイブページなどで使用します。
メインループのソース<?php if(have_posts()): while(have_posts()): the_post(); ?>
～ループ内で表示させたい内容を記述～
<?php endwhile; endif; ?>『have_posts』という関数を使って記事のデータがあるかないかを判別し、『while』より後に出力したい（タイトルやURL・コンテンツなど）を記述し、最後に『<?php endwhile; endif; ?>』でループの処理を終了させましょう。
メインループで呼び出す記事の数は、管理画面の『設定』→『表示設定』→『1ページで表示する最大投稿数』で指定できます。
サブループ
サブループは、WordPressのデータベースから抽出する記事の条件を任意に指定することができます。記事の属性や、呼び出す記事数など様々な条件を付けて呼び出すことができるので様々な場面で活躍します。
サブループには、『WP_Query』『get_posts』『query_posts(非推奨)』の3つの形式がありますが、今回は一番取得できる情報量が多く複雑な処理が可能な『WP_Query』の使い方をご紹介します。
サブループのソース<?php
$args = array(ここに出力する記事の条件を記述
);
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
-ループ内で表示させたい内容を記述-
<?php endwhile; wp_reset_postdata(); ?>『array()』の中の配列で、様々な記事の抽出条件を指定することで、好きな条件の記事を出力することができます。
出力する記事の条件を指定するパラメーターについては、コーデックスに詳しく記述されていますので参考にしてください。
サブループを使用する場合は、ループ終了後に『wp_reset_postdata();』を記述して必ずループをリセットしてください。ループのリセット処理を行わないと、後のループに悪影響を与えてしまうので忘れないように注意しましょう。
サブループを自動で作成できる『WordPressサブループ自動作成ツール』を公開しました。ページネーションも自動で出力でき、カテゴリ・タグ・著者・ターム・日付・投稿・固定ページ・カスタムフィールドなど、様々な条件をセレクトボックスで選択するだけでサブループを出力するためのコードを自動で作成することができますので、ぜひ利用してみてください。
WordPressサブループ自動作成ツールindex.phpにコンテンツを追加する
index.phpは、『WordPressレスポンシブテーマ作成1』でご紹介したように、トップページ・カテゴリ・タグ・検索結果ページなどの一覧ページを生成するためのファイルなので、WordPressに出力する記事情報を自動で選択させるために、メインループを使用します。
index.phpの<div class="contents">の後に追加<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!--ここに記事一覧に表示したいコンテンツを記述-->
<?php endwhile; endif; ?><!--ループ終了-->メインループをindex.phpに追加したら、続いてループ内にコンテンツを追加していきましょう。
今回作成するWordPressテーマでは、一覧ページの記事情報に『サムネイル画像』『カテゴリ』『タイトル』『記事の投稿日』『記事の著者』『抜粋』を呼び出して表示させます。
loop-content.phpを作成する
ループ内のコンテンツは、作成中のWordPressテーマ内に『loop-content.php』というファイルを新たに作成し、そこに記述していきます。これは、後の記事でご紹介する『home.php』や『archive.php』でコンテンツを共通化し、ソースコードを修正や追記した場合に一つのファイルを触るだけ済むようにするためです。
※『loop-content.php』を作成しない場合は、『index.php』のループの中に直接記述してください。
loop-content.phpを新規作成→追加<article <?php post_class( 'article-list' ); ?>>
<a href="<?php the_permalink(); ?>">
<div class="img-wrap">
<!--画像を追加-->
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
<?php endif; ?>
<!--カテゴリ-->
<?php if (!is_category() && has_category()): ?>
<span class="cat-data">
<?php
$postcat = get_the_category();
echo $postcat[0]->name;
?>
</span>
<?php endif; ?>
</div><!--end img-warp-->
<div class="text">
<!--タイトル-->
<h2><?php the_title(); ?></h2>
<!--投稿日を表示-->
<span class="article-date">
<i class="far fa-clock"></i>
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<!--著者を表示-->
<span class="article-author">
<i class="fas fa-user"></i><?php the_author(); ?>
</span>
<!--抜粋-->
<?php the_excerpt(); ?>
</div><!--end text-->
</a>
</article>上記のソースコードを追加することで、記事へのリンク付きで『サムネイル画像』『カテゴリ』『タイトル』『記事の投稿日』『記事の著者』『抜粋』を出力することができます。一つ一つの要素については下記の通りです。
ループの中に記述する各要素
記事の各要素を出力する枠とリンク
<article <?php post_class( 'article-list' ); ?>>
<a href="<?php the_permalink(); ?>">
</a>
</article>htmlのarticle要素で記事を括り『<?php post_class( 'article-list' ); ?>』で『article-list+各記事の情報』をclass属性として追加します。
記事の項目をクリックしたときのリンクは『<?php the_permalink(); ?>』とphpを記述することで、各記事のURLを自動で取得できます。
サムネイル画像
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img">
<?php endif; ?>画像は、各記事に設定されているアイキャッチ画像を自動で出力します。『<?php if( has_post_thumbnail() ): ?>』でアイキャッチ画像がある場合とない場合で条件分岐を行い、アイキャッチ画像がある場合は、『<?php the_post_thumbnail('medium'); ?>』で画像を中サイズで呼び出します。
ソースコードの('medium')の部分で、呼び出す画像のサイズを指定することができます。『thumbnail』『medium』『large』『full』『空欄』のいずれかの値を指定してください。ページの呼び込み速度を上昇させるためにも適切なサイズで出力しましょう。
アイキャッチ画像が無い場合は『no-image』という画像が出力されるように、作成しているWordPressのテーマ内のimagesフォルダ(headerのタイトル画像を挿入時に作成)に追加しておきましょう。
追加した『no-image.gif』の画像が必要な方はご自由にお使いください。(画像クリックで拡大)
カテゴリ
<?php if (!is_category() && has_category()): ?>
<span class="cat-data">
<?php
$postcat = get_the_category();
echo $postcat[0]->name;
?>
</span>
<?php endif; ?>カテゴリは『if (!is_category() && has_category())』で条件分岐して、カテゴリページでは無いとき + カテゴリの設定がある場合のみカテゴリ情報を出力するようにします。
カテゴリの情報は、『$postcat=get_the_category(); echo $postcat[0]->name;』で記事に設定されているカテゴリの名前を1つだけ出力します。
テキストエリア
<div class="text">～</div>呼び出される『タイトル』『投稿日』『著者』『抜粋』を一つのかたまりとしてCSSで調整できるように、<div class="text">というエリアを作成しています。
記事のタイトル
<h2><?php the_title(); ?></h2>記事のタイトルは『<?php the_title(); ?>』で呼び出します。ループ内の記事のタイトルは『h2』タグで出力されるようにします。
投稿日
<span class="article-date">
<i class="far fa-clock"></i>
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
</span>投稿日は、検索エンジンにインデックスしている記事の正式な投稿日を伝えるために『time <time datetime="<?php echo get_the_date(); ?>">』で出力します。『()』の中で日付を好きな形式に変更することができます。『()』の中が空欄の場合は、管理画面の『設定』→『一般』→『日付のフォーマット』で選択したものが表示されます。
また、投稿日の表記だということがわかりやすいように、投稿日の前に『<i class="far fa-clock"></i>』でfontawesomeの時計のアイコンを追加しています。
著者
<span class="article-author">
<i class="fas fa-user"></i><?php the_author(); ?>
</span>記事の著者は、『<?php the_author(); ?>』で出力します。著者名のデフォルトは、WordPressのユーザーIDと同じになっているため、必ず『管理画面 > ユーザー』から『ニックネーム』とブログ上の表示名を変更しておきましょう。
抜粋
<?php the_excerpt(); ?>抜粋は、『<?php the_excerpt(); ?>』で出力することができます。呼び出された抜粋欄は『<p>～</p>』で囲まれた一つの段落として出力されます。
loop-content.phpを呼び出すための記述を追加する
編集が完了したら、『index.php』に『loop-content.php』を呼び出すための記述を追加します。
index.phpのループの中に追加<?php get_template_part('loop-content'); ?>要素がきちんと組み込まれていれば、下記の画像のように各記事の一覧が追加した要素付きで出力されます。(画像はTOPページ)
要素の出力が完了したらCSSでデザインを整えていきましょう。
index.phpの記事一覧の各デバイスごとのデザインをCSSで反映する
記事一覧のパソコン表示用のデザイン
まずは、パソコン表示用のCSSから整えていきます。
CSSでデザインを始める前に、contentsに要素を確認するために指定しているカラーと高さの一時設定を、非表示もしくは削除してください。
style.cssに記述.article-list {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #ddd;
}
.article-list:hover {
background-color: #eee;
}
.article-list a {
display: block;
text-decoration: none;
color: #333;
}
.article-list a:after {
display: block;
clear: both;
content: '';
}
.article-list .img-wrap {
position: relative;
float: left;
line-height: 1;
}
.article-list .img-wrap img {
width: 240px;
height: 160px;
object-fit: cover;
}
.article-list .img-wrap .cat-data {
font-size: .75rem;
position: absolute;
top: 0;
right: 0;
padding: .3rem .5rem;
color: #fff;
background-color: #03162f;
}
.article-list .text {
margin-left: 260px;
}
.article-list .text h2 {
font-size: 1.15rem;
margin-bottom: .5rem;
}
.article-list .text .article-date,
.article-list .text .article-author {
font-size: .75rem;
font-weight: bold;
display: inline-block;
margin-bottom: .5rem;
color: #888;
}
.article-list .text .article-date {
margin-right: .5rem;
}
.article-list .text .article-author i {
margin-right: .3rem;
}
.article-list .text p {
font-size: .8125rem;
line-height: 1.7;
}object-fitは、とても便利なCSSプロパティですがIEに対応していません。object-fitをIEにも対応させる方法は下記の記事で紹介しています。
wordpressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する今回は、記事が一つずつ縦に表示されるようにCSSを設定していますが、お好みに合わせて自由にCSSを調整してください。
デモのCSSをそのまま記述して表示すると、上の画像のようなデザインになります。PC用のベースとなるデザインが整ったら、『@media』を使って各デバイスの表示を整えていきましょう。
記事一覧のスマホ表示用デザイン
スマホ用のデザインを整えるときは、ブラウザのデベロッパツール(F12キー)を使ってスマホ版の表示を確認しながら作成すると便利ですよ。
style.cssに記述@media(max-width: 600px) {
.article-list {
padding: .5rem;
}
.article-list .img-wrap img {
width: 132px;
height: 88px;
}
.article-list .img-wrap .cat-data {
font-size: .6rem;
}
.article-list .text {
margin-left: 140px;
padding: 0;
}
.article-list .text h2 {
font-size: 1rem;
margin-bottom: 0;
}
.article-list .text p {
display: none;
}
.article-list .text .article-date,
.article-list .text .article-author {
font-size: .625rem;
margin-bottom: 0;
}
.article-list .text .article-date {
margin-right: .2rem;
}
}スマートフォン表示用のデザインでは、記事の抜粋を非表示に、サムネイル画像やフォントのサイズを調整しています。
今回は、スマートフォンサイズ『@media(max-width: 600px)』に記事リストのCSSのフックポイントを設定していますが、タブレットの表示など細かく調整したい場合は、フックポイントを増やしてCSSを追記してください。
上記のCSSをそのまま記述するとスマートフォンでは上記の画像のように表示されます。
記事一覧にページネーションを追加する
記事の一覧が出力できたら、最新の記事だけでなく全ての記事をユーザーが見ることができるように、ページネーション(ページ送り)を作成しましょう。
ページネーションの要素をindex.phpに追加する
メインループで記事を出力するときに使用するページネーションは、WordPressのデフォルトの機能として搭載されている関数を使って出力します。
index.phpのループ終了後(<?php endwhile; endif; ?>の後)に記述<div class="pagination">
<?php echo paginate_links( array(
'type' => 'list',
'mid_size' => '1',
'prev_text' => '<i class="fas fa-angle-left"></i>',
'next_text' => '<i class="fas fa-angle-right"></i>'
) ); ?>
</div>『<?php echo paginate_links(～』でページネーションの機能を呼び出し配列(array)で詳細を指定します。
'type' => 'list'htmlタグのリストタグ（<ul><li><ul><li>）でページネーションを表示するように指定します。
mid_size現在のページ番号の両隣に、何個ずつの数字を表示するかを指定することができます。
prev_textとnext_textページネーションの最初と最後の表示を指定できます。今回は、fontawesomeのアイコンが出力されるように指定しています。
上記のように、ページネーションの要素が出力されたら、きちんと動くか動作確認をしましょう。
ページネーション用のデザインをCSSで反映する
今回は、パソコン表示・スマホ表示共通でページネーション用のCSSを記述しています。
style.cssに記述.pagination {
margin: 2rem 0;
text-align: center;
}
.pagination ul {
font-size: 0;
}
.pagination ul li {
font-size: 1rem;
display: inline-block;
margin-right: .5rem;
}
.pagination ul li:last-child {
border: 0;
}
.pagination ul li a,
.pagination .current {
display: block;
padding: .5rem .8rem;
border: 1px solid #ccc;
}
.pagination ul li .prev,
.pagination ul li .next {
border: 0;
}
.pagination ul li a {
text-decoration: none;
color: #333;
}
.pagination ul li a:hover {
opacity: .6;
}
.pagination .current {
color: #fff;
background-color: #03162f;
}CSSをそのまま反映すると、上記の画像のようにデザインが反映されます。好みに合わせて、サイズや色を調整してください。
『記事の一覧』『ページネーション』がきちんと作成できたら、『index.php』の作成は完了です。カテゴリやタグページなどに出力するタイトル等の条件分岐は、後の記事で『index.php』を『archive.php』に分岐する際に詳しくご説明いたします。
次回は、ユーザーに一番みられると行っても過言ではない『single.php』の作成方法についてご紹介します。
下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。