前回は、トップページを表示させてみました。
次は下層ページ、と行きたいところですが、下層ページは一旦置いておきましょう。
少しだけ複雑なので、順番にご説明させていただきます。
今回は、記事一覧を表示させてみます。
さらに「記事のリンク」をクリックし「詳細ページ」に遷移するところまで作ります。
まず、記事一覧を表示させるには「ループ」という概念を理解する必要があります。
ループは、書いたHTMLタグを、記事の投稿数分、繰り返し表示させます。
WordPressに5記事投稿されていたとしたら、5回繰り替えされるわけです。
では、具体的にどうやってループさせるかと言うと、下記のようになります。
<!--ループのはじまり-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!--ループで繰り返したい内容-->
<article>
<h2><a href="#">タイトルが入ります。</a></h2>
<div>テキストが入ります。テキストが入ります。テキストが入ります。</div>
</article>
<!--ループの終わり-->
<?php endwhile; else : ?>
<div><?php _e( 'Sorry, no posts matched your criteria.' ); ?></div>
<?php endif; ?>
なんとなく、お分かり頂けましたでしょうか。
上記の場合<article>で囲まれたエリアを、WordPressのphpタグで囲んでいます。
今回使われているタグはこちらの2つ。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else : ?>
<div><?php _e( 'Sorry, no posts matched your criteria.' ); ?></div>
<?php endif; ?>
上記2つのタグで囲まれたソースコードは、記事の投稿回数分、繰り返されます。
これで、記事の一覧を表示させる土台はできました。
記事の内容を反映させよう
ただ、まだ記事のタイトルや内容は表示されていません。
詳細ページへのリンクも表示されていませんね。
ここで登場するのが、下記3つのタグです。
<!--タイトルを表示します。-->
<?php the_title(); ?>
<!--概要を表示します。-->
<?php the_excerpt(); ?>
<!--記事へのリンクを表示します。-->
<?php the_permalink(); ?>
コメントのままですね。
それぞれのphpタグが、それぞれ対象のデータを表示してくれます。
あとはタグを、必要箇所に入れていくだけです。
なお、上記のタグは「ループの中でしか使えない」というルールがあります。
では、実際に入力すると、どうなるでしょうか。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?></div>
</article>
<?php endwhile; else : ?>
<?php _e( 'Sorry, no posts matched your criteria.' ); ?>
<?php endif; ?>
それぞれ、該当箇所に上書きしただけですね。
以上で、記事一覧が完成します。
思ったより、簡単だったのではないでしょうか。
1点、リンクを出力するタグだけ「WordPressならでは」の癖があります。
リンクを出力するタグは「パーマリンク」というリンクを書き出します。
パーマリンクとは「記事の詳細ページ」のリンクを意味します。
では「記事の詳細ページ」とは、どこを意味するのでしょうか。
現状、まだトップページ以外のページは、表示さえ出来ていませんからね。
記事の詳細ページを表示させよう
ここでWordPressの特殊なルールが出てきます。
記事詳細ページは、ファイル名が「single.php」となっているファイルを自動参照するのです。
つまり、パーマリンクをクリックするとsingle.phpをベースとして記事を出力します。
どの記事であっても、参照するファイルは「single.php」になります。
記事1つ1つ、htmlやphpファイルが作られるわけではありません。
single.phpをテンプレートとして各記事を表示します。
記事の詳細ページとしてコーディングしたファイルの名前を「single.php」に変更しましょう。
すると、記事URLにアクセスすれば、single.phpのレイアウトで出力される状態になります。
上記の画像で言えば、ファイルの上から2番目にあたります。
もともと、別のファイル名だったものをsingle.phpに変更しました。
これで、詳細ページが無事表示されるようになったはずです。
ただ、前回と同じように、CSSや画像がリンク切れしているはずなので、修正が必要です。
<?php bloginfo('template_directory'); ?>
前回使った上記のタグで、CSSや画像のパスを通しましょう。
これで、記事一覧と、記事ページが完成です。
このように、WordPressには、ファイル名に一定のルールがあります。
例えば、カテゴリーごとの一覧ページであれば「category.php」としたり。
タグで縛られた記事一覧ページであれば「tag.php」であったり。
特に更新要素の無い説明ページなとは「page.php」であったり。
どのページにどのファイル名を使うか、ルールが決められているのです。
詳細ページに記事の内容を表示させよう
記事ページの作成に関して、さらに進んでいきます。
ひとまず、記事一覧から詳細ページへは飛ぶようになりましたが、中身がまだ反映されていません。
記事の内容ではなく、HTML×CSSで作ったデータのままなのではないでしょうか。
記事のデータを反映させるのは、そう難しいことではありません。
指定のタグを埋め込むだけで、ほとんどが完了します。
まず下準備として、ここでもループを作りましょう。
「記事の内容を反映させたいエリア」をループで囲ってください。
記事一覧ページでは、ループで囲うと記事数分ループされました。
しかし、single.phpでは該当記事1つだけ表示されます。
現在表示されるべき1ページだけが表示されるようになります。
URLに紐づけられたコンテンツを自動的に表示するんですね。
ループで囲ったら、今度は「タイトルや本文」を出力します。
と言っても、前回の方法とほとんど変わりません。
該当箇所をWordPressのタグで書き換えていきましょう。
それぞれ該当するタグがあるので、実際に試してみてください。
<!--タイトルを表示します。-->
<?php the_title(); ?>
タイトルのタグは、一覧ページのタグと変わりはありません。
では、記事の本文に関してはどうでしょう。
<!--記事本文を表示します。-->
<?php the_content(); ?>
こちらのタグを入れるだけで、本文すべてが表示されます。
本文の箇所を丸ごと、上記のタグに差し替えてください。
管理画面で投稿した文章が、そのまま表示されるはずです。
基本的には、上記の2つでタイトルと本文が表示されます。
これで、記事を一覧表示して、クリックし、詳細を読む仕組みはできました。
次は、カテゴリー別やタグ別の記事一覧表示について試していきます。