ここでは、管理画面へ登録した内容を使ってサイトの主要ページを作ります。テンプレートへ文章を直書きせず、投稿や固定ページの内容を表示します。
管理画面で変更する内容を決める
管理画面で編集する内容が、公開画面のどの場所へ表示されるか先に整理します。
テーマへ文章やURLを直接書くと、更新のたびにコード編集が必要になります。サイト名、本文、投稿、メニューなど、運用中に変わる内容はWordPressの管理画面から更新できるようにします。
一方で、ページのレイアウトや共通装飾はテーマで管理します。内容と見た目を分けると、運営者が誤ってレイアウトを壊す範囲も小さくできます。
必要なテンプレートを作る
次の画像は、「必要なテンプレートを作る」で扱うコードや構成をブラウザで表示した結果です。
my-original-theme/
├── front-page.php
├── home.php
├── single.php
├── page.php
└── 404.php固定ページをテンプレートへ反映する
固定ページでは、管理画面で入力したタイトルと本文をテンプレートから出力します。本文には段落、見出し、画像、リストなどが入るため、実際のブロックを使って表示を確認してください。
特定の固定ページだけレイアウトを変える場合は、専用テンプレートを作る前に共通化できる部分を確認します。ページごとに似たファイルを増やすと、共通修正の漏れが起こります。
投稿一覧と詳細ページをつなぐ
一覧にはタイトル、日付、抜粋、アイキャッチ画像などを表示し、各投稿のパーマリンクへ移動できるようにします。詳細ページでは本文だけでなく、一覧へ戻る導線や前後の記事への導線も検討します。
- 画像がない投稿の代替表示を用意する
- タイトルの見出しレベルをページ構造に合わせる
- 公開日と更新日のどちらを表示するか決める
- カテゴリーや著者を表示する必要があるか決める
- 一覧が増えたときのページ送りを用意する
投稿一覧へリンクを表示する
次の図では、「投稿一覧へリンクを表示する」の仕組みや関係を確認できます。
<?php while (have_posts()) : the_post(); ?>
<article>
<h2>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>ナビゲーションメニューを管理画面から変更する
テーマ側でメニューの表示場所を登録し、管理画面で作ったメニューをその場所へ割り当てます。これにより、ページ追加や並び替えのたびにHTMLを編集する必要がなくなります。
メニューが未設定の場合に空白になるのか、代替表示を出すのかも確認します。スマートフォンの開閉ボタンはキーボードでも操作でき、現在の開閉状態を支援技術へ伝えられるようにします。
メニューを登録する
次の図では、「メニューを登録する」の仕組みや関係を確認できます。
function my_theme_setup() {
register_nav_menus(array(
'primary' => 'メインメニュー',
));
}
add_action('after_setup_theme', 'my_theme_setup');header.phpへメニューを表示する
次の図では、「header.phpへメニューを表示する」の仕組みや関係を確認できます。
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'site-navigation',
));
?>トップページを組み立てる
トップページは、管理画面で設定した固定ページを使うのか、テーマ固有の構成にするのかを決めます。最新投稿を掲載する場合も、件数、並び順、カテゴリー、0件の場合の表示を決めてください。
各セクションの見出しとリンク先を確認し、同じページへ移動するリンクが不自然に重複していないか整理します。見た目だけでなく、サイト内を迷わず移動できる構造にします。
内容の違いで崩れないか確認する
長いタイトル、画像なし、複数カテゴリー、長文の固定ページを表示し、HTML構造とCSSが崩れないことを確認します。
完成確認
- 固定ページのタイトルと本文を管理画面で変更し、表示へ反映されるか確認する
- 投稿を追加し、一覧と詳細ページの両方を確認する
- メニューの順番を変更し、ヘッダーとフッターを確認する
- 画像なし、長い文章、0件の状態でも崩れないか確認する
- スマートフォン幅とキーボード操作でナビゲーションを確認する