ホームページやWebサイトを作成する上で、「パンくずリスト」はユーザーにとってわかりやすくサイト内を移動しやすくするだけでなく、SEOの改善にも貢献する有効なナビゲーション手法です。特に大規模なサイトや、複数のカテゴリを持つサイトでは、ユーザー体験の向上に大きく寄与します。今回はZeroStartで作成しているパンくずリストの作成方法を解説していきます。
今回つくるもの
作成・編集するファイル
- content-panlist.php
- stylecss(scss)
テンプレートパーツファイルを作成する
パンくずリストはあらゆるページで呼び出されるパーツになるため、まずはcontent-panlist.phpというテンプレートパーツを作成していきましょう。
<div class="pan-list">
<div class="container">
<ul>
<li>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="44"
height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l-2 0l9 -9l9 9l-2 0" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
ホーム
</a>
</li>
<?php
if ( is_page() && $post->post_parent ) {
// 分岐１: 親ページが指定されている固定ページ
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ( $parent_id ) {
$page = get_post( $parent_id );
$breadcrumbs[] = sprintf( '<li><a href="%s">%s</a></li>', esc_url( get_permalink( $page->ID ) ), esc_html( get_the_title( $page->ID ) ) );
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse( $breadcrumbs );
foreach ( $breadcrumbs as $crumb ) {
echo $crumb;
}
echo '<li>' . esc_html( get_the_title() ) . '</li>';
} elseif ( is_singular( 'post' ) ) {
// 分岐２: 投稿ページ
$categories = get_the_category();
if ( $categories ) {
$category = $categories[0];
echo '<li><a href="' . esc_url( get_category_link( $category->term_id ) ) . '">' . esc_html( $category->name ) . '</a></li>';
}
echo '<li>' . esc_html( get_the_title() ) . '</li>';
} elseif ( is_singular( 'sample' ) ) {
// 分岐３: カスタム投稿タイプ「sample」の個別投稿ページ
echo '<li><a href="' . esc_url( get_post_type_archive_link( 'sample' ) ) . '">サンプル一覧</a></li>';
echo '<li>' . esc_html( get_the_title() ) . '</li>';
} elseif ( is_post_type_archive( 'sample' ) ) {
// 分岐４: カスタム投稿タイプ「sample」のアーカイブページ
echo '<li>サンプル一覧</li>';
} elseif ( is_page() ) {
// 分岐５: 親ページを持たない固定ページ
echo '<li>' . esc_html( get_the_title() ) . '</li>';
}
if ( is_category() ) {
$category = get_the_category();
$current_cat_id = $category[0]->cat_ID;
$parent_cat_id = $category[0]->category_parent;
if ( $parent_cat_id != 0 ) {
// echo '<li>' . get_category_parents( $parent_cat_id, true, '</li>' );
}
echo '<li>' . single_cat_title( '', false ) . '</li>';
} elseif ( is_404() ) {
echo '<li>404 Not Found</li>';
} elseif ( is_search() ) {
echo '<li>Search Results for "' . get_search_query() . '"</li>';
} elseif ( is_tag() ) {
echo '<li>Tag: ' . single_tag_title( '', false ) . '</li>';
} elseif ( is_author() ) {
echo '<li>Author: ' . get_the_author_meta( 'display_name', get_query_var( 'author' ) ) . '</li>';
} elseif ( is_day() ) {
echo '<li>' . get_the_date() . '</li>';
} elseif ( is_month() ) {
echo '<li>' . get_the_date( 'F Y' ) . '</li>';
} elseif ( is_year() ) {
echo '<li>' . get_the_date( 'Y' ) . '</li>';
} elseif ( is_archive() && !is_post_type_archive( 'sample' ) ) {
echo '<li>Archive</li>';
} elseif ( is_home() ) {
echo '<li>Blog</li>';
}
?>
</ul>
</div>
</div>
冗長ではありますが、やっている処理は至ってシンプルです。
それぞれのページの種類に合わせて分岐を用意し、それに対応するリンクの生成や親ページ・親カテゴリを生成するようにしています。
カスタム投稿タイプを利用している場合は、カスタム投稿タイプ用の分岐もしっかり用意しましょう。
style.css(scss)を編集する
style.css(scss)には以下のコードを記述していきます。
.pan-list {
width: 100%;
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
.container {
width: 1200px;
margin: auto;
}
ul {
display: flex;
flex-wrap: wrap;
li {
list-style: none;
display: flex;
align-items: center;
color: #fff;
font-size: 12px;
padding: 8px;
margin-right: 10px;
width: max-content;
a {
display: flex;
align-items: center;
color: #fff;
font-size: 12px;
}
svg {
height: 15px;
width: 15px;
margin-right: 5px;
}
}
li:nth-child(n+2) {
position: relative;
&::before {
content: '>';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
color: #fff;
display: block;
height: max-content;
width: max-content;
margin: auto;
}
}
}
}それぞれのページで呼び出す
content-panlist.phpを作成しstyle.cssへの追記が完了したら、パンくずリストが必要なページで呼び出していきましょう。
呼び出す時は以下のコードを使用します。
<?php get_template_part('template-parts/content', 'contact'); ?>まとめ
今回はZeroStartで作成しているパンくずリストの作成方法を解説しました。パンくずリストがある場合とない場合ではユーザーの操作性だけでなく、SEOの観点から見ても大きな差が出る部分になるので、ホームページやWebサイトを作成する際は積極的に取り入れていきましょう。
ZeroStartでは初期費用０円でお客様に合わせたオリジナルテーマを使用したホームページ作成を行っています！ホームページ作成についてご相談がございましたらお気軽にご連絡ください！
