本記事は、「ブログサイトをWordPress化しよう 基盤編」の続編の記事になります。
「ブログサイトをWordPress化しよう 基盤編」では、ブログサイトのトップページのWordPress化を行いました。本記事では、トップページで表示されている投稿記事一覧をメインループで表示するようにするのと、個別投稿ページの作成を行います。
WordPress化するデザイン
準備から進めていきましょう。
準備
「ブログサイトをWordPress化しよう 基盤編」同様、準備から行いましょう。
教材のダウンロード
「ブログサイトをWordPress化しよう 基盤編」の続編になるため、前回のファイルのまま使用しても構いません。
ない方は、以下よりダウンロードを行ってください。
圧縮ファイルとしてダウンロードされるので、「解凍（展開）」してファイルの中身を確認しましょう。
ダウンロードしたものを使用する方はthemes直下に入れよう
上記のダウンロードリンクよりダウンロードしたファイルを使用する方は、Localのthemes直下に配置しましょう。
ローカル環境の起動
Localの起動
「ブログサイトをWordPress化しよう 基盤編」で作成したLocalの「ZPM-WP」プロジェクトを「Start site」で起動しましょう。
管理画面を表示
画像の「WP Admin」というボタンからWordPressの管理画面を表示しましょう。
WordPress化する
ここからは、エディタを開きzpm-wpを以下の項目でWordPress化していきます。
やることの確認
- トップページ（投稿一覧ページ）にメインループを組み込む
- 個別投稿ページを作成する
エディタでテーマを開く
Localで起動しているthemes直下のzpm-wpをVS Codeで開きましょう。
投稿一覧ページにメインループを組み込む
現状、投稿の表示はシンプルにHTMLで表示するようにしています。
画像部分は、get_template_directory_uri() やesc_url() などを使って表示させています。
これらを動的処理にするためにメインループを組み込んでいきます。
記事のHTMLはひとつだけにする（index.php）
<?php get_header(); ?>
<div class="top-container">
<main class="main">
<div class="posts">
<!-- ひとつだけ残す -->
<article class="post">
<a href="" class="post-thumb-wrapper">
<img
src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article.jpg' ); ?>"
alt=""
width="686"
height="384"
class="post-thumb"
/>
</a>
<div class="post-txts">
<h3 class="post-title">
<a href="">初心者のやりがちなミス</a>
</h3>
<p class="post-content">
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
</p>
<div class="post-btn-wrapper">
<a href="" class="post-btn">続きを読む</a>
</div>
</div>
</article>
</div>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>現在、投稿のHTML（articleタグ）の分だけ表示させていますが、メインループを組み込むにあたって、投稿のHTMLはひとつのみ残しその他は削除しましょう。
メインループを組み込む（index.php）
<?php get_header(); ?>
<div class="top-container">
<main class="main">
<div class="posts">
<!-- メインループ -->
<?php
if (have_posts()):
while (have_posts()):
the_post();
?>
<article class="post">
<a href="<?php the_permalink(); ?>" class="post-thumb-wrapper">
<?php the_post_thumbnail(null, array('class' => 'post-thumb')); ?>
</a>
<div class="post-txts">
<h3 class="post-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<p class="post-content">
<?php the_excerpt(); ?>
</p>
<div class="post-btn-wrapper">
<a href="<?php the_permalink(); ?>" class="post-btn">続きを読む</a>
</div>
</div>
</article>
<?php
endwhile;
else:
?>
<p>投稿データがありませんでした</p>
<?php endif; ?>
</div>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>「WordPressのメインループを使って投稿を表示しよう」を参考にメインループを組み込んでいきましょう。
メインループ内で使用している関数
| 関数名 | 意味 |
|---|---|
| the_permalink() | 投稿のリンクURLの出力 |
| the_post_thumbnail() | 投稿の画像を表示 |
| the_title() | 投稿のタイトルを表示 |
| the_excerpt() | 投稿の本文を抜粋して出力 |
アイキャッチ画像を設定を有効化（functions.php）
add_theme_support( 'post-thumbnails' );
アイキャッチ画像（サムネイル画像）を管理画面から設定できるように変更する必要があるので、functions.phpに上記コードを追加しましょう。
投稿にアイキャッチ画像を設定する
管理画面にてアイキャッチ画像を設定する必要があるので、管理画面を開き投稿一覧を開きましょう。
既存投稿として、「Hello, World」という投稿があるのでタイトルをクリックして編集画面に遷移し、「アイキャッチ画像」という項目が右下あたりに表示されているので、クリックします
モーダルウィンドウが表示され、画像を選択することができるので選択します。
画像がない場合は、適当な画像をアップロードしましょう。
右下の「アイキャッチ画像を設定」というボタンをクリックして設定します。
モーダルウィンドウが閉じられ、アイキャッチ画像が設定されているのが確認できるかと思います。確認できたら、右上の「更新」をクリックして、投稿を更新しましょう。
これでアイキャッチ画像の設定は完了です。
サイトの表示の確認
サイトを表示してみるとこのように「タイトル」「本文の抜粋」「アイキャッチ画像」が設定されているのが確認できました。
個別投稿ページを作成する
個別投稿ページを作成していきます。
single.htmlが個別投稿ページに当たるので、そのファイルをWordPress化します。
個別投稿ページの作り方の詳細は、「個別投稿ページを作成しよう」で解説していますのでチェックしましょう。
個別投稿ページテンプレートファイルの作成（single.php）
今回のブログサイトで個別投稿ページを作成するにあたって、single.phpを作成し使用します。
single.htmlの内容をコピペする
single.htmlの内容がベースになるので、中のコードをすべてコピペします。
テンプレートパーツファイルを呼び出す
<?php get_header(); ?>
<div class="single-container">
<main class="main">
<article class="single">
<div class="single-main-thumb-wrapper">
<img
src="img/thumb_article.jpg"
alt=""
width="686"
height="384"
class="single-main-thumb"
/>
</div>
<div class="single-main-content">
<h1>
初心者のやりがちなミス
</h1>
<p>
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
</p>
<p>
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
</p>
<p>
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
</p>
</div>
</article>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>トップページと同じヘッダー、フッター、サイドバーを使用するので、それぞれをget_header(),get_footer(),get_sidebar()で呼び出します。
メインループを組み込む
<?php get_header(); ?>
<div class="single-container">
<main class="main">
<?php
if (have_posts()):
while (have_posts()):
the_post();
?>
<article class="single">
<div class="single-main-thumb-wrapper">
<?php the_post_thumbnail(); ?>
</div>
<div class="single-main-content">
<h1>
<?php the_title(); ?>
</h1>
<?php the_content(); ?>
</div>
</article>
<?php
endwhile;
else:
?>
<p>投稿データがありませんでした</p>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>あとは、投稿の内容を動的に表示させたいので、メインループを使って表示していきます。
詳しい個別投稿ページについては、「個別投稿ページを作成しよう」を確認しましょう。
表示の確認
トップページで表示されている記事をクリックすれば、個別投稿ページを開くことができるので、表示を確認しましょう。
上記のように表示ができていれば完成です。
まとめ
本記事で実際にメインループを使って実践を行いました。WordPressを使う際に必ずと言っていいほど行う流れになるので、流れを理解しましょう。
