自作クラシックテーマに、パンくずと投稿・固定ページの本文テンプレートを追加します。
パンくずはカテゴリーがない投稿にも対応し、URLと表示文字列をそれぞれエスケープします。
旧breadcrumb関数を導入済みなら、その関数と呼び出しを一緒に置き換え、二重に登録しないでください。
自作テーマ制作の第5弾！
今回は投稿ページと固定ページを作成します。
具体的にはパンくず、タイトル・更新日・公開日・アイキャッチ画像・本文を追加しています。
スターターテーマを使わずに
WordPress自作テーマを制作する
パンくずの作成
まずはヘッダーにパンくずを作成します。
functions.php
functions.phpに以下のコードを追記します。
以下の記事を参考にしたパンくずを、このページの適用範囲に合わせて整理しています。
function waza_theme_breadcrumb() {
if (is_front_page()) return;
$items = [[home_url('/'), 'トップ']];
if (is_singular()) {
$id = get_queried_object_id();
if (is_page()) {
foreach (array_reverse(get_post_ancestors($id)) as $parent) $items[] = [get_permalink($parent), get_the_title($parent)];
} elseif (is_single() && get_post_type($id) === 'post') {
$terms = get_the_category($id);
if ($terms) {
$term = $terms[0];
$ids = array_reverse(get_ancestors($term->term_id, 'category', 'taxonomy'));
$ids[] = $term->term_id;
foreach ($ids as $tid) {
$t = get_term($tid, 'category'); $url = get_term_link($tid, 'category');
if ($t && !is_wp_error($t) && !is_wp_error($url)) $items[] = [$url, $t->name];
}
}
}
$label = get_the_title($id);
} elseif (is_category()) {
$term = get_queried_object();
foreach (array_reverse(get_ancestors($term->term_id, 'category', 'taxonomy')) as $tid) {
$t = get_term($tid, 'category'); $url = get_term_link($tid, 'category');
if ($t && !is_wp_error($t) && !is_wp_error($url)) $items[] = [$url, $t->name];
}
$label = single_cat_title('', false);
} elseif (is_search()) {
$label = '検索: ' . get_search_query(false);
} elseif (is_404()) {
$label = 'ページが見つかりません';
} elseif (is_home()) {
$label = '投稿一覧';
} else {
$label = wp_strip_all_tags(get_the_archive_title());
}
echo '<nav aria-label="パンくず"><ol class="breadcrumb">';
foreach ($items as [$url, $text]) echo '<li><a href="' . esc_url($url) . '">' . esc_html($text) . '</a></li>';
echo '<li aria-current="page">' . esc_html($label) . '</li></ol></nav>';
}
header.phpにコードを挿入
header.phpのbodyの中に以下のコードを挿入。
<?php waza_theme_breadcrumb(); ?>表示の確認
記事ページを開くとパンくずが表示されているのを確認できます。
パンくずの構造化データ
構造化データはあとでまとめて挿入します。
投稿ページの作成
タイトル・更新日・公開日・アイキャッチ画像・本文の表示といった
投稿ページに必要な要素を作成していきます。
自作テーマにsingle.phpを作成して、下記のコードを挿入します。
<?php get_header(); ?>
<div class="wrap">
<main id="main-content">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<h1 class="title"><?php the_title(); ?></h1>
<div class="date">
<div>Release date. <?php the_time('Y/m/d'); ?></div>
<div>Last update. <?php the_modified_date('Y/m/d'); ?></div>
</div>
<?php
if (has_post_thumbnail()) {
echo '<figure class="thumbnail">' . get_the_post_thumbnail() . '</figure>';
}
?>
<div class="content">
<?php
the_content();
wp_link_pages();
?>
</div>
<?php
endwhile;
endif;
?>
</main>
</div>
<?php get_footer(); ?>タイトルを作成
the_title();の関数を使って表示。
<h1 class="title"><?php the_title(); ?></h1>公開日・更新日の作成
the_time('Y/m/d'); とthe_modified_date('Y/m/d');の関数を使って表示。
<div class="date">
<div>Release date. <?php the_time('Y/m/d'); ?></div>
<div>Last update. <?php the_modified_date('Y/m/d'); ?></div>
</div>アイキャッチ画像の作成
functions.phpに下記を記載。
add_theme_support('post-thumbnails');あとはsingle.phpに下記のコードを挿入。
get_the_post_thumbnail();の関数を使って表示。
if (has_post_thumbnail()) {
echo '<figure class="thumbnail">' . get_the_post_thumbnail() . '</figure>';
}本文の作成
the_content();の関数を使って表示。
<?php the_content(); ?>Articleの構造化データ
構造化データはあとでまとめて挿入します。
投稿記事の確認
WordPressに最初から投稿されている「Hello world!」の記事を開いて確認します。
アイキャッチ画像も設定して表示を確認します。
1200×630pxは作例の寸法で、このテンプレートの必須条件ではありません。
実際の表示幅や縦横比に合わせて用意してください。
固定ページの作成
single.phpをコピーして、page.phpを作成します。
変更箇所は投稿記事の公開日と更新日の記述部分を削除しただけのものになります。
<?php get_header(); ?>
<div class="wrap">
<main id="main-content">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<h1 class="title"><?php the_title(); ?></h1>
<?php
if (has_post_thumbnail()) {
echo '<figure class="thumbnail">' . get_the_post_thumbnail() . '</figure>';
}
?>
<div class="content">
<?php
the_content();
wp_link_pages();
?>
</div>
<?php
endwhile;
endif;
?>
</main>
</div>
<?php get_footer(); ?>固定記事に抜粋文を表示
固定ページの編集画面で抜粋を入力できるようにします。
このコードは抜粋欄を有効にするだけで、meta descriptionタグを自動出力するものではありません。
本文中のheader.phpにはdescriptionの出力処理を置いていないため、必要な場合は利用するテーマやSEOプラグイン側で出力を設定してください。
// 固定記事に抜粋文を表示
add_post_type_support('page', 'excerpt');最後にWordPressの最初から用意されているSample Pageを開いて状態を確認してみます。
まとめ
今回は投稿ページと固定ページを作成してみました。
あらかじめ用意されている関数が多いので、それを使うだけですね。
GitHubの過去の例は今回の修正と同期していません。
現行コードは本文を参照してください。
過去のコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
投稿と固定ページの分割番号を操作する
投稿と親子関係のある固定ページに、ページ区切りを含む検証本文を保存しました。
投稿ではPCで、固定ページではスマホ幅390pxで、2のリンクをEnterで開くと2ページ目の本文へ切り替わりました。
固定ページのパンくずには親ページと現在のページも表示されます。
本文が切り替わることは、番号が見えるだけでは判断できません。
1ページ目と2ページ目に異なる文章を置き、リンク先で文章が変わるか確かめてください。
固定ページではパンくずの親ページリンクも、実際の親子関係と照合します。
下の画面は掲載のpage.phpを使った実WordPressです。
ロゴやサイドバーは前段階のファイルと組み合わせています。
前の記事の修正版footer.phpを使い、同じウィジェットを二重に追記しないでください。
抜粋欄を有効にする処理と、検索エンジン向けのdescriptionを出力する処理は別です。
今回は投稿と固定ページの本文保存・再読み込み・公開表示と分割番号の操作を確認しました。
全デザインの完成を確認した結果ではありません。
戻す場合は変更前のsingle.php・page.php・functions.php・header.phpを復元します。
新規作成したテンプレートは取り除き、パンくず関数とheader.phpの呼び出しを一緒に元へ戻してください。
編集画面で保存して分割本文と親ページを確認する
検証用の投稿と固定ページにページ区切りのある本文を用意し、それぞれの編集画面で区切り前後の文章を変更して保存します。
今回の検証ではコードエディターで既存のページ区切りを残したまま本文を変更し、更新完了の通知を確認しました。
確認したのはコードエディターでの本文変更・保存・再読み込みと公開画面の分割番号・親ページリンクです。
ビジュアルエディターで見出しや段落を入力して保存する操作は未確認です。
編集画面を再読み込みし、変更後の文章が残っていることを確かめます。
公開画面の1ページ目で変更後の文章を確認し、分割番号「2」にフォーカスしてEnterキーを押します。
リンク先で本文が2ページ目の文章に切り替わることを確認します。
URLはパーマリンク設定により、page=2というクエリや末尾の/2/などになります。
URLにpageという文字がないことだけで失敗と判断しないでください。
親ページが設定された固定ページでは、パンくずの親ページ名にフォーカスしてEnterキーを押し、親ページの本文が表示されるか確認します。
ブラウザーで子ページへ戻り、分割番号から引き続き移動できることも確かめます。
今回の検証では投稿と固定ページの保存・再読み込み・分割番号の操作、および固定ページから親ページへの移動を確認しました。
コードの適用前にsingle.php・page.php・functions.php・header.phpの原本を保存します。
既存テーマのファイルは比較して置き換え、解説用の部分コードを完成例へ重ねて追加しないでください。
貼付先・対象・戻し方
関数は自作テーマのfunctions.phpのPHP領域へ、呼び出しはheader.phpのbody内で本文の前へ配置します。
投稿は最初に取得したカテゴリーの親階層、固定ページは親ページの階層を表示します。
複数カテゴリーの優先順位指定、カスタム分類の階層、構造化データには対応していません。
トップページでは表示しません。
カテゴリー未設定の投稿、親のある固定ページ、カテゴリー一覧、検索、404で確認します。
パンくずはnavと順序付きリストで、現在の項目はリンクにせずaria-currentを付けています。
スマホで折り返せるCSSと、Tab・Enterのリンク操作を確認してください。
問題があればfunctions.phpとheader.phpを一緒に変更前へ戻します。
single.phpとpage.phpでは、ループ内のthe_content()直後にwp_link_pages()を置きます。
本文の「ページ区切り」で分割した場合に、続きへ進む番号リンクを表示するためです。
分割していない本文では出力されません。
2ページの投稿と固定ページで、番号リンクから続きが表示されることを確認してください。
戻す場合は追加したwp_link_pages()だけを削除しますが、分割した本文への導線もなくなります。
