ワードプレスといえばやはり何と言っても、HTMLでは実現できない投稿機能！
投稿機能とは、例えばブログ記事だとかお知らせだとか、新しい記事を投稿する機能のこと。
投稿した記事を表示するページのことを、投稿ページと言います。
投稿した記事が投稿ページに反映される…なんだかとても…ワードプレスっぽい！！！
というか投稿機能を活用していなかったら、もはやワードプレスサイトとしての役割を果たしていないと言っても過言ではない！
それでは、投稿ページを作成し、記事を表示させていきましょう！
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
それでは本文へ、レッツゴー！
投稿ページ用のファイルを作成する
投稿ページのファイル名は決まっています。
single.php
このsingle.phpを作成し、オリジナルテーマのディレクトリ内に放り込みます。
ご自身のテーマを持っていないない方は、今後いろいろ試しながら学習していくためにも、1つはオリジナルテーマを作成しておきましょう！
既に投稿ページのhtmlファイルを用意している方は、そのファイル名をsingle.phpに変更すればOK
何も用意していない場合、適当に用意しましたのでとりあえず以下をコピペでもOKです。
<?php get_header(); ?>
<main>
<p>single.phpですよ</p>
</main>
<?php get_footer(); ?>※ヘッダーフッター等各自適切なものに変更してください。
これで、投稿ページは自動的に「single.php」を参照し、ブラウザに反映するようになります。
投稿ページの表示は、ワードプレス管理画面投稿一覧から開くことができます。
適当に記事を選択し「表示」をクリック！
すると各自、single.phpのファイルが参照されたページが開きます。
この時点ではまだ記事の内容そのものは反映されません。
投稿ページを反映するためのページを作成しただけです。
これから投稿記事が表示されるように、記述をしていきます。
single.phpが参照されない！
ちゃんとsingle.phpを作成してテーマディレクトリ内に入れたはずなのに、いざ投稿ページを見ても思てたんとちゃう結果になることがあります。
とりあえずパーマリンク設定の「変更を保存」をクリックしてみましょう。
ワードプレス管理画面から、設定 → パーマリンクの順に進んでいきます。
特に何も設定を変更する必要はありません。
とりあえず「変更を保存」をクリックすることに価値があります。
今後リンク関連のことで困ったときも、とりあえずは「変更を保存」をクリックすることで解決する場合があります。
これで解決しない場合、URLが別のページと干渉してしまっている可能性があります。
例えば既に/about/のURLで固定ページが存在しているのに、aboutというカテゴリ名で記事を作成しても、固定ページが優先して表示されます。
この場合、適切に開かないsingle.phpが今どのファイルを参照しているのかを確認することで、解決の糸口を見つけることができます。
投稿ページの表示は実はsingle.phpだけではない
実はsingle.php以外にも、投稿ページを表示するファイルはいくつかあります。
ただsingle.phpが最もスタンダードで万能です。
まだ慣れないうちに細かい説明をしだすと沼にハマらせてしまいそうなので、ここではあえて割愛します。
投稿の内容をページに表示させる
現在開いている投稿記事のページでは何も表示されていませんが、実際にはタイトルや内容、投稿日などあらゆる記事のデータを保有しています。
なのでここからは、それらのデータを出力するための、決まり文句をsingle.phpに書いていきます。
そうすることで、single.phpは投稿内容を表示するためのファイルとして、あるべき姿に進化します。
では、それぞれのお決まりの記述を見ていきましょう！
とりあえず完成品を見てみよう！
まずどんな感じになるか、結果を見ておきたいですよね！
htmlを最小限までに削ぎ落としたサンプル投稿ページを作成しました。
これをsingle.phpにコピペして確認してみましょう！
<?php get_header(); ?>
<main>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h1>タイトル：<?php the_title(); ?></h1>
<p>投稿日：<?php the_time(get_option('date_format')); ?></p>
<?php if(get_the_time(get_option('date_format')) != get_the_modified_date(get_option('date_format'))): ?>
<p>最終更新日：<?php the_modified_date(get_option('date_format')) ?></p>
<?php endif; ?>
<p>カテゴリー：</p>
<?php the_category(); ?>
<p>タグ：<?php the_tags('', '、'); ?></p>
<div>
<p>本文：</p>
<?php the_content(); ?>
</div>
<div>
<?php previous_post_link('%link', '古い記事へ'); ?> | <?php next_post_link('%link', '新しい記事へ'); ?>
</div>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>※ヘッダーフッター等各自適切なものに変更してください。
僕がブログ記事用に使っているテーマではこのようになりました。
デザインがおしゃれすぎるのは一旦目を瞑ってもらって、ちゃんと投稿内容が表示されているのが確認できました！
それでは、これを0から作っていきましょう！
まずは投稿内容を表示するためのスペースを確保する
まずは「今からここに投稿内容を反映させますよ」というスペースを確保するための記述を入れます。
ここでいう投稿内容とは、本文だけでなくタイトルや投稿日など全ての情報が含まれます。
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!-- ここに投稿内容が入ります -->
<?php endwhile; endif; ?>投稿内容は全て、このスペース内に記述していきます。
この記述は「ループ」と呼ばれるものなのですが、ここでの詳細は割愛。
僕の用意したsingle.phpに記述すると、以下のようになります。
<?php get_header(); ?>
<main>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!-- ここに投稿内容が入ります -->
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>※「<p>single.phpですよ</p>」は役目を終えたので自然に帰しました。
ここからは、各自自由に決まり文句をコピペして作っていきましょう！
タイトルを表示させる
タイトルの出力には「the_title()」を使います。
<?php the_title(); ?>素のテキストで出力されるので、h1タグなどで囲んであげる必要があります。
headタグ内のtitleタグにも使いたくなるかもしれませんがNGです。
投稿を表示させるスペースからはみ出してしまいます！
titleタグに入れたい場合は「get_the_title()」を使います。
<?php echo get_the_title(); ?>the_XXX と get_the_XXX
タイトル以外にもこれから「the_XXX」と「get_the_XXX」が出てくるので、これらの違いについて簡単に紹介します。
- the_XXX
定められた内容をHTMLに出力する
スペース内でしか使えない - get_the_XXX
定められた内容を取得する
スペース外でも使える
「get_the_XXX」はスペースの外でも使えるのですが、自分でHTMLに出力する力を持っていません。
そのため「echo」を使ってhtmlに出力します。
<?php the_title(); ?>
<?php echo get_the_title(); ?>どちらも、HTMLでの出力結果は全く同じです。
投稿日を表示する
投稿日は以下をコピペすると出力されます。
<?php the_time(get_option('date_format')); ?>これもテキストのみで出力されるので、何かしらのタグで囲んであげてください。
また日付ですが、どのような形式で表示されるかは人により違います。
ワードプレス管理画面から、日付の出力形式を選択することができます。
最終更新日を表示する
ブログなどで投稿日の隣によく見かける、最終更新日の出力方法です。
その記事を最後に手を加えた日付が出力されます。
<?php the_modified_date(get_option('date_format')) ?>これだけでOKなのですが、最終更新日は少し手を加えておきたいですね。
最後に手を加えた日付というのがポイントで、投稿後に更新していなくても、投稿日と同じ日付で出力されてしまいます。
もし投稿してから一度も更新していない場合は、出力されないようにしておきましょう！
以下のような記述になります。
<?php if(get_the_time(get_option('date_format')) != get_the_modified_date(get_option('date_format'))): ?>
<p>最終更新日：<?php the_modified_date(get_option('date_format')) ?></p>
<?php endif; ?>「投稿日 ≠ 最終更新日」の場合のみ、最終更新日を出力するようにifで条件を分岐させています。
所属カテゴリを表示する
所属カテゴリは以下をコピペするだけでもOKですが、少しだけクセ物です。
<?php the_category(); ?>カテゴリは複数保有している場合もあるため、ulタグに囲まれ、かつリンクがついた状態で出力されます。
検証ツールからHTMLのソースを見ると、以下のように出力されています。
<ul class="post-categories">
<li><a href="カテゴリ別一覧ページ" rel="category tag">カテゴリ名</a></li>
<li><a href="カテゴリ別一覧ページ" rel="category tag">カテゴリ名</a></li>
<li><a href="カテゴリ別一覧ページ" rel="category tag">カテゴリ名</a></li>
</ul>htmlタグ付きで自動出力してくれるのはありがたい反面、迷惑な部分でもあります…。
「ulタグじゃないんだよなぁ…。」
「リンクいらないんだけど…。」
「出力するカテゴリは１件に絞りたい…。」
と思ったあなた、ご安心ください！
カテゴリの出力は、いろいろカスタマイズが可能です。
ただ少し長くなってしまうので、別記事にてご紹介。
タグの出力
タグの出力もカテゴリと同じく少しクセ物。
<?php the_tags(); ?>カテゴリと同じようにリンク付きで表示されるのですが、ulタグはつきません。
しかし頭に謎の「タグ: 」というテキストがついてきます。
検証ツールから確認するとこのようになっています。
タグ: <a href="タグ別一覧ページ" rel="tag">タグ名</a>,
<a href="タグ別一覧ページ" rel="tag">タグ名</a>,
<a href="タグ別一覧ページ" rel="tag">タグ名</a>,「the_tags()」は第一引数と第二引数を設定することで少しだけカスタマイズすることができます。
<?php the_tags('タグ一覧の最初にくる文字', 'タグとタグの間に入る文字'); ?>デフォルトで第一引数は「タグ:」、第二引数が「, 」に設定されています。
<?php the_tags('', ''); ?>と第一引数第二引数共に空っぽにすることで、冒頭にくる「タグ: 」やタグ間の「, 」を葬ることができます。
<a href="タグ別一覧ページ" rel="tag">タグ名</a>
<a href="タグ別一覧ページ" rel="tag">タグ名</a>
<a href="タグ別一覧ページ" rel="tag">タグ名</a>ただこれだけでは物足りなさがあるのは拭えません。
カテゴリ同様、よりカスタマイズしていくことも可能です。
本文を表示する
本文はとってもシンプルです。
<?php the_content(); ?>あなたが頑張って書いた本文が全て、適切なタグ付きで一気に出力されます。
pタグなども自動で付与されますので、pタグ内に出力しないように注意しましょう。
古い記事（新しい記事）のリンクを表示する
よく他の方のブログ記事の最後に、新しい記事と古い記事のリンクが貼ってありますよね。
古い記事と新しい記事はそれぞれ別のタグで出力しています。
<?php previous_post_link('%link', '古い記事へ'); ?>
<?php next_post_link('%link', '新しい記事へ'); ?>aタグに囲まれたリンク付きで自動的に出力されます。
とても賢い動きをしてくれる子で、最新記事のページでは自動で「新しい記事へ」が消えます。
同様に、最古の記事のページでは「古い記事へ」が消えます！正確には消えるのではなく、出力されなくなります。
それぞれ「古い（新しい）記事へ」はテキストを変更することもできます。
もしリンクのテキストを記事タイトルにしたい場合は「%title」を使います。
<?php previous_post_link('%link', '%title'); ?>
<?php next_post_link('%link', '%title'); ?>最後に
まだまだ出力方法にはいろいろありますし、カスタマイズしていくことも可能なのですが、今回はここまで。
それでも結構ボリューミーみなってしまいましたね。
すみません。
一気に頭につめこみすぎると疲れますからね！
出力方法などのカスタマイズはやりはじめるとキリがないので、基本だけおさえてあとは必要に応じて調べるという形がベターだと思っています。
今回はその基本中の基本を紹介しました。
今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。
