ここまででブログのトップページ（index.php）の基本形は完成しました。このファイルだけでトップページ、記事ページ、固定ページの役割を担ってくれますので、一応（ほんとに一応なんですけど）ブログとして機能します。
ただ、やはりトップページ、記事ページ、固定ページはそれぞれの役割が違いますので、個別に作っておくほうがよいでしょう。
なので、ここから作っていきます！一緒に頑張りましょう！
- WordPressのオリジナルテーマを3時間で作成する手順
- WordPressのオリジナルテーマ（記事ページ／固定ページ）を作る ← 今ココ
- WordPressのオリジナルテーマ（スマホ用レスポンシブ）を作る
記事ページ（single.php）を作る
皆さんがGoogleやYahooで検索して、誰かのブログ記事をクリックして閲覧した場合、大抵はこの記事ページに着地すると思います。ブログで書かれた個別の記事のページです。
ブログのトップページはタイトルと記事の冒頭部分が見えるパーツが5個や10個ずらずらっと並んでいることが一般的ですが、記事ページは記事が全文見える形になっていますね。
前節で作っておいた「index.php」をコピーして、複製したファイルを「single.php」という名前で保存してください。保存場所は「index.php」と同じ階層でOKです。
その「single.php」を開いて、
<?php the_content(続きを読む); ?>
↑と記述しておいた箇所を探してください。見つけたらそこを
<?php the_content(); ?>
と変更してください。え？何をしたのかって？
続きを読む
の文字を消しただけです。これでsingle.phpは完成です。
後はブログ記事の本文で抜粋表示したい箇所に下記タグを入れておけば
<!--more-->
今まで「続きを読む」で隠れていた部分がすべて表示されているはずです。
固定ページ（page.php）を作る
固定ページってなんぞや？と思われる方もいらっしゃるでしょう。
当ブログの例で言いますと「水泳ダイエット」のようなページです。一見、記事ページのようですが、どのカテゴリにも属さない独立した記事となっています。
どちらかというとサブTOPみたいな扱いですね。メインTOPはもちろん当ブログのトップページですが、水泳ダイエットという少し大きめのくくりで見やすくまとめたページです。
カテゴリを持った記事ではなく自由に作れるページなので、記事をまとめたページにしてみたり、他とは異なる使い方をしたいときに役立ちます。
それでは、ついさっき作った「single.php」をコピーして、複製したファイルを「page.php」という名前で保存してください。保存場所は「index.php」と同じ階層でOKです。
今度、見つけていただくのはこちら
<?php the_category(', '); ?>
これは何かといいますと、記事のカテゴリを表示するコードなんですね。
でもWordPressの管理画面で固定ページの編集画面を見てもらうと分かりますが、カテゴリを指定するところがありません。
先ほど書きましたが、固定記事はカテゴリを持っていません。つまり、このソースを入れていても機能しません。ですので！この一行を！
消します
以上です！
これで固定ページ「page.php」も完成しました。
グローバルメニューを表示する
グローバルナビを表示したい箇所に以下の1行を追加します。
<?php wp_nav_menu(); ?>
グローバルナビはトップページ、記事ページ、固定ページ、などどのページでも共通で表示する場合が多いですね。
というわけで、これらのどのテンプレートでも共通で使えるように前節で切り出しした「header.php」の最下部に追記するのがおすすめです。
サイドバーを表示する
サイドバーを表示するための準備は２つあります。
１つはサイドバーをページに表示するための準備、もう１つはWordPressの管理画面でサイドバーの中身を編集するための準備です。
では表示するための準備から、
まずは中身空っぽで結構ですので、文字コード「UTF-8」で「functions.php」というファイルを作ってください。保存する場所はこれまでに登場したindex.phpやsingle.phpと同じ階層でOKです。ファイル名は、functionじゃなくてfunctionsですよ。最後「ズ」ありますからね、ご注意ください。
今回、初登場の「functions.php」はページの表示には関係ないファイル、つまり裏方ファイルのようなものです。でも決まりごとを書いたりする大事なファイルです。
では作成できたら、以下の3行のみ記述してください。
「functions.php」には<html>や<body>などの記述は不要です。
<?php register_sidebar(); ?>
はい、これで宣言終わりです。
この宣言を行うことで、WordPress管理画面の「外観＞ウィジェット」でサイドバーの編集を行えるようになります。
続いて表示する準備です。
以下のコードをindex.phpに追記してください。表示位置はCSSで調整しますので、とりあえずこの一行をソースに入れておけばOKです。
<?php get_sidebar(); ?>
これで管理画面の「外観＞ウィジェット」で作ったサイドバーのコンテンツが表示されます。
アイキャッチ画像を挿入する
記事ページにアイキャッチ画像を設定する方法をご紹介します。
自作テーマにした場合、WordPressの記事投稿画面にアイキャッチを設定するメニューがなくなっていますよね。ですので、まずはそのメニューを復活させます。
これまで何度か登場している「functions.php」の末尾に以下の3行を追記します。
<?php
add_theme_support('post-thumbnails');
?>
これで投稿画面にアイキャッチの設定メニューが表示されると思います。ただ、これだけだとアイキャッチの指定はできますが、表示する部分が決まっていませんよね。
どこにアイキャッチを表示させるかは皆さんのデザイン次第ですが、一般的には記事ページ（single.php）の各記事のタイトル下ぐらいではないでしょうか。ちなみにタイトルを表示しているのは
<?php the_title(); ?>
こんなタグでしたよね？（これは思い出していただくために書いたのでアイキャッチ表示のタグではありませんよ）
では、アイキャッチ画像を表示するために「single.php」の記事タイトルを表示するタグの次の行あたりに、以下のタグを埋め込んでみましょう。
<?php the_post_thumbnail(); ?>
これで、このタグを設置した場所にサムネイルが表示されます。
最後に
えぇ！？まだ全然最後じゃないだろぉ！
…でも私は頑張ったと思う。
まだまだブログを綺麗に仕上げたいですよね。分かります、その気持ち。
ですからまた書きます。
たぶん…いや、きっと。
まずは第二章、ご清聴ありがとうございました。
＜追記＞
ようやく、第三章を書きました！
ジムで使えるLINEスタンプです