さっき決めたブログ

[WordPressサイト構築日記04]記事の一覧を表示しよう

目次

• 確認用の記事を登録
• 色々と仕込む
• 記事一覧の表示

今回は、前回作成したテンプレートのインデックスファイルにPHPのコードを書き込んで、記事を表示するところまでやります！！

確認用の記事を登録

現時点で記事は"Hello World"しか登録されていない状態なので、確認用の記事をいくつか登録します。
こんな感じに10記事ほど登録しました。

色々と仕込む

今回の目標である記事一覧の表示に取り掛かる前に、index.php 内に色々と仕込みを行います。

wp_headとwp_footerを仕込む

テンプレート内のヘッダ部分に、wp_head() を、フッタ部分に、wp_footer() をそれぞれ仕込む。

こうすることでWordPressにログインしている場合、画面上部にツールバーが表示されます。
ログインしていない場合は、wp-admin にアクセスしてログインします。
ログインしているのにツールバーが表示されない場合、一度ログアウトしてからログインし直すと良いみたいです。

ヘッダ部分の修正

ヘッダ部分のタイトルが可変になるように、コードを入れます。

タイトルの表示

ヘッダ区画部分にタイトルを表示します。

ここまでで、こんな感じです。

記事一覧の表示

そして、今回のメインである記事一覧が表示できるようにコードを追加。
こんな感じにコードをついかしました。

ブラウザで表示を確認します。

こんな感じに表示されました。
登録日時の時計 は、Font Awesomeを使用して表示しています。
ちなみに分かりやすくするめ、h1, h2のスタイルもいじっています。

今回はここまで。
次回は記事の本文を表示していきます。

ここまでのコード
test_templ002.zip