投稿を表示するためのテーマテンプレートファイル「single.php」を作成します。
single.phpを準備する
single.phpを作成
テーマフォルダの中にsingle.phpを作成します。
single.phpに該当するhtmlファイルは、event1.html。
index.phpを作成したときと同様に、直にファイル名を変更するか、別名で保存などを使ってsingle.phpを作成してください。
WordPressが作成したsingle.phpを認識しているか確認しましょう。
投稿ページで唯一デザインがあった「アライグマの握手会」の投稿ページを、以下どちらかの方法で開きます。
方法①トップページのリンクから開く
方法②管理画面 > 投稿一覧から「表示」
以下のようなページが表示されていたら、single.phpが認識されています。
中のコードを整えていきましょう。
投稿ページが表示できない時のチェック
ローカル環境によっては、URLに日本語が入っていると、投稿ページが上手く表示できない場合があります。
WordPress管理画面のメニューから、設定 > パーマリンクを開きます。
パーマリンク構造を“数字ベース”に変更して、変更を保存してください。
変更を保存すると、投稿ページのURLが変わります。
リロードではなく①か②の方法で、もう一度ページが開けるか確認してください。
headとヘッダーを修正
まず、index.phpでも修正した以下3箇所を直します。
それぞれ、index.phpからコピー・アンド・ペーストしてしまいましょう。
- style.cssのパス
- ロゴ画像（logo.png）のパス
- ヘッダーナビゲーションをWordPressメニューに変更
トップページへのリンク
ロゴ画像のリンク先がhtmlファイルなので、WordPressサイト仕様に直します。
WordPressサイトのホーム（トップ）のURLはhome_urlというテンプレートタグで取得できます。取得のテンプレートタグなので、echoを使って、文字列として出力しましょう。
single.php
<a href="<?php echo home_url( )?>">
<img src="<?php echo get_template_directory_uri();?>/images/logo.png" width="168" height="32" alt="ズーロッパ東京">
</a>
titleタグ
<title>タグ部分に、投稿のタイトル + サイトのタイトルが入るように設定してください。
ここまでで変更した、headから</header>までのコードは以下のようになります。
single.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title( ); ?> | <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
<header>
<div class="container flex-container">
<div class="header-logo text-center">
<a href="<?php echo home_url( )?>">
<img src="<?php echo get_template_directory_uri();?>/images/logo.png" width="168" height="32" alt="ズーロッパ東京">
</a>
</div>
<nav class="header-nav">
<?php wp_nav_menu(); ?>
</nav>
</div>
</header>
投稿の内容を取得する
single.phpのメインコンテンツ部分を作りましょう。
1.ループで囲う
まず、投稿内容を取得するためのループを用意します。
WordPressから出力したいタイトル、文章などの投稿情報を囲う形で書きましょう。
WordPressはURLで判定して、自動で取得するべき情報を取り出してくれます（メインループ）。
ですので、ここでは基本形のシンプルなループだけでOKです。
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
2.テンプレートタグに置き換える
ループタグで囲った中を、WordPressのテンプレートタグに置き換えていきます。
課題で、記事タイトル上の画像は「アイキャッチを使う」となっていたのでthe_post_thumbnail( )で表示させましょう。
最終更新日はテンプレートタグthe_modified_date( )で取得できます。
single.php
<?php while (have_posts()) : the_post(); ?>
<?php the_post_thumbnail(); ?>
<div class="timestamp">
最終更新日：<?php echo the_modified_date( ); ?>
</div>
<h1 class="toptitle text-green">
<?php the_title(); ?>
</h1>
<div class="post-body">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
single.phpを上書き保存して、投稿ページの表示を確認してください。
上図のようにテンプレートタグに置き換えた部分が表示されていれば成功です。
3.アイキャッチ画像のサイズを指定する
投稿タイトルの上に表示されているアライグマの画像は、WordPressにアップロードした画像のサイズより小さくなっています。
それは、そうですよね。
functions.phpを作った時に、サムネイルサイズを指定しています。
「アイキャッチ画像に登録されている画像を、アップロードしたままのサイズで」表示させたい。
これはthe_post_thumbnail( )のカッコ内に、サイズを指定するキーワードを入れることで実現できます。(アップロードした画像本来のサイズの場合は、フルサイズを意味する'full'と書きます。
<?php the_post_thumbnail('full'); ?>
上書き保存して、投稿ページを見てみましょう。
表示される画像が大きくなっているはずです。
アイキャッチのキーワード値
投稿のアイッキャッチに登録されている画像を表示する、the_post_thumbnail( )のカッコ内で使えるキーワードは5つあります。
the_post_thumbnail( 'post-thumbnail' ); // ()が空の時と同じ。functions.phpのset_post_thumbnail_sizeで指定したサイズ
the_post_thumbnail( 'thumbnail' ); // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' ); // 中サイズ (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' ); // 大サイズ (デフォルト 1024px x 1024px :最大値)
the_post_thumbnail( 'full' ); // フルサイズ (アップロードした画像の元サイズ)
thumbnail medium largeについては、設定 > メディアから変更することも可能です。
サイドバーの作成
ウィジェットの使用に関して
サイドバーはウィジェットを使って作成することも可能です。
ただし、ウィジェットを使いつつ、デザインに近い表示を作る場合、必要な工程が多く難易度も上がります。
このため、解説ではphpファイルに直接ループを書く方法で進めます。
index.phpからループタグを複製
サイドバーでは、イベントカテゴリーの投稿を新着4件取得します。
これは、index.phpの「楽しいイベントいっぱいだよ」セクションで書いたWP_Queryと全く同じ条件。
表示させる内容やレイアウトは違いますが、ループタグ部分に関してはindex.phpからコピー・アンド・ペーストするだけで完了します。
まずは、ループ開始のためのphpタグをコピー・アンド・ペーストします。
素材のhtmlをご利用の方は、<li>タグの上に貼り付けてください。
同様に、ループを終わらせるphp endwhile ～の一行も、index.phpからコピーして貼り付けます。
素材のhtmlをご利用の方は、</li>タグの下に貼り付けてください。
ついでに、見出し下の画像（line.png）のパスも直しましょう。
ここまでで設定した、サイドバー部分のコードは以下のようになります。
single.php
<aside class="sidebar section-padding">
<h2 class="text-center">
最新のイベント情報
</h2>
<div class="text-center">
<img src="<?php echo get_template_directory_uri();?>/images/line.png" width="400" height="6" alt="">
</div>
<ul class="sidelist">
<?php
$args = array( // 取得したい投稿の条件指定
'post_type' => 'post',
'category_name' => 'event',
'posts_per_page' => 4,
);
$event_posts = new WP_Query($args);
while ($event_posts->have_posts()): $event_posts->the_post();
?>
<li class="flex-container flex-all-row">
<a href="#" class="sidelist-img">
<img src="images/event1.png" width="629" height="378" alt="猫パーク">
</a>
<div class="sidelist-text">
<h3><a href="#">猫パークに行こう</a></h3>
<span class="timestamp">2023/05/16</span>
</div>
</li>
<?php endwhile; wp_reset_postdata(); ?>
<li class="flex-container flex-all-row">
...以下略
ループ内をテンプレートタグに置き換え
ループ内で、WordPressの投稿情報を取得したい部分をテンプレートタグに置き換えます。
置き換えるのは以下５つ。
- アイキャッチ画像を囲うaタグのリンク先
- アイキャッチ画像
- 投稿タイトルを囲うaタグのリンク先
- 投稿タイトル（
h3タグの中身） - 投稿の公開日
これらも全てindex.phpで使っているタグです。
index.phpを見ながら入力、もしくはコピー・アンド・ペーストしてください。
single.php
index.phpを上書き保存して、ブラウザで表示を確認します。
アイキャッチ画像やタイトルが表示され、投稿ページへのリンクができていれば成功です。
不要になったHTML部分は、削除もしくはコメントアウトして、表示を整えてください。
single.php（サイドバー部分）
<aside class="sidebar section-padding">
<h2 class="text-center">
最新のイベント情報
</h2>
<div class="text-center">
<img src="<?php echo get_template_directory_uri();?>/images/line.png" width="400" height="6" alt="">
</div>
<ul class="sidelist">
<?php
$args = array(
'post_type' => 'post',
'category_name' => 'event',
'posts_per_page' => 4,
);
$event_posts = new WP_Query($args);
while ($event_posts->have_posts()): $event_posts->the_post();
?>
<li class="flex-container flex-all-row">
<a href="<?php the_permalink() ?>" class="sidelist-img">
<?php the_post_thumbnail(); ?>
</a>
<div class="sidelist-text">
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<span class="timestamp"><?php echo get_the_date(); ?></span>
</div>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</aside>
これで、single.phpは完了です。