前回まででindex.phpとsidbar.phpが完成しました。 今回からは記事ページとして利用するsingle.php部分の作成に入ります。
- 開発環境の用意
- テーマ初期設定
- index.php（一覧表示)
- sidebar.php（サイトバー部分）
- single.php（記事ページ）
- front-page.php（サイトのトップページ）
確認用にざっくりと設定したページから、html作成時のデザインに変えていきましょう。
1.htmlからコードを移す
現在確認用に使っているsingle.phpは、index.phpをコピーして変更したものでした。
記事ページのデザインに戻すために、<article>タグから</article>タグまでをblog-single.htmlのコードに置き換えましょう。
blog-single.htmlから<main>タグから</main>タグまでをコピーします。
(※下図のコードは一部を折りたたんで表示しています)
blog-single.html
single.phpのwhile文のすぐ下に貼り付けます。
single.php
確認用に入れていたWordPressタグをそれぞれコピーしたコードのタイトル・本文箇所にカット＆ペーストして置き換えてください。
<article>タグは削除します。
<?php the_title(); ?>
<?php the_content(); ?>
single.php
保存して、ブラウザで記事ページを確認してみて下さい。
【変更前】
【変更後】
2.記事本文上のエリアを作る
①トップ画像エリアを削除
single.phpはトップ画像エリアを配置しないので、削除してしまいましょう。 ヘッダーと被らないようにヘッダーインクルードタグ直下のdivに「 mt-4」クラスを追加します。
②パンくずリストを加える
パンくずリスト部分はindex.phpと同じく「bcn_display()」で表示させます。
index.phpからコードをコピーして<ol>タグ間に張り付けて下さい。
<ol>タグに「 pl-0」クラスを追加します。
single.php
現在地の文字色が違うので、style.cssで調整しましょう。 セレクタを「.post .current-item」にすると適用されます。
HOMEなど各項目の後ろについている「>」の記号も要らないので、Breadcrumb-NavXTの設定画面にある「パンくずの区切り」を空欄にします。
ブラウザをリロードして確認します。
③記事画像を呼び出す
デザインではパンくずリストの下に画像が表示されていました。 しかし、WordPressで記事本文は1ブロックとして扱われます。 エディターで一番上に画像を挿入しても、この位置に表示することはできません。
ですので、アイキャッチ画像のURLを呼び出すテンプレートタグを使用します。
<?php the_post_thumbnail_url( 'full' ); ?>
fullと指定しているのは、空だとサムネイルとして設定した小さめの画像URLが使われてしまうためです。
サムネイルサイズについてはhas_post_thumbnail() – Function | Developer.WordPress.orgをご確認ください。
画像が呼び出されるようになりました。
3.記事情報部分を作ろう
タイトル下、記事投稿者やカテゴリーなどが表示されている部分を作ります。
WordPressに取得して欲しいのは、aタグとその間のテキスト部分ですね。
①記事投稿者
記事投稿者はテンプレートタグ <?php the_author(); ?> 、
投稿者アーカイブURLは下記コードで取り出すことが出来ます。
<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>
ブラウザで見てみると表示名が変わり、リンクが出来ています。
②カテゴリー
記事に使用されているカテゴリー名・そのカテゴリーへのリンクは、テンプレートタグ <?php the_category( ); ?> でまとめて取得できます。
（）内に入れているスラッシュは、カテゴリーが複数ある場合の区切りです。
ブラウザで見てみましょう。
カテゴリーが設定されている記事であれば表示されます。
③コメント数
html作成時にはコメント数も入れていましたが、今回のWordPressブログではコメント機能を付けません。 こちらはコメントアウトしておいてください。
ループ終わりまでのコード
今回作成したコードはここまでです。 コピー・アンド・ペースト箇所のインデントが崩れやすいので、見やすいように整えてみて下さい。
コメントアウトしている「コメント数」表示は、使う予定が無ければ削除しても構いません。
次回は記事本文よりも下の部分を作っていきましょう。