• SIMPLEとは

    SIMPLEとは

  • デモ

    デモ

  • マニュアル

    マニュアル

  • アップデート

    アップデート

  • ダウンロード

    ダウンロード

テーマ開発

PR

【WordPress】パンくずリストの作り方【テーマ開発】

今回は、WordPressで↓のようなパンくずリストを自作する方法を解説していきます。

Contents

【WordPress】パンくずリストの作り方【テーマ開発】

パンくずリストの構成

パンくずリストの構成は下記の通りです。

  • 投稿ページ
    →　HOME > カテゴリー > 記事タイトル
  • 固定ページ
    →　HOME > 固定ページタイトル
  • アーカイブページ
    →　HOME > 年別アーカイブ > 月別アーカイブ
  • 検索ページ
    →　HOME > 検索文字列
  • 404エラーページ
    →　HOME > ページが見つかりません
  • カテゴリーページ
    →　HOME > カテゴリー
  • タグページ
    →　HOME > タグ

例えば、投稿ページに表示するパンくずリストは

という感じで　HOME → カテゴリー → 記事タイトル　という表示になりますが、

固定ページの場合はカテゴリーを設定できないので、

HOME → 固定ページタイトル　となります。

こんな感じで、ページごとに表示する文字を変える必要があります。

パンくずリストの作り方

上記で書いたように、パンくずリストは表示するページによって変わってきます。

そのため、コードを書く際はページによってパンくずリストの表示が変わるようにページごとに処理を分けていきます。

作成が必要なファイルは、下記の通り。

  1. breadcrumb.php → ここにパンくずリストのコードを書いていきます
  2. style.css → パンくずリストのcssを記述します
  3. 各テンプレートファイルのphpファイル → breadcrumb.phpを表示したい位置に読み込ませます

breadcrumb.php

breadcrumb.phpの全コードは下記。

<div class="breadcrumb">
	<ul itemscope itemtype="https://schema.org/BreadcrumbList">
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<span>
				<a href="<?php echo home_url(); ?>" itemprop="item">
					<span itemprop="name"><i class="fas fa-home"></i>HOME</span>
				</a><i class="fas fa-chevron-right"></i>
			</span>
			<meta itemprop="position" content="1">
		</li>
		<?php if (is_404()) : /* 404エラーページの場合 */  ?>
			<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
				<span>
					<span itemprop="name">ページは見つかりませんでした</span>
				</span>
				<meta itemprop="position" content="2">
			</li>
		<?php elseif(is_category()): /* カテゴリーページの場合 */ ?>
			<?php
				$parent_cat = get_queried_object();
				$parent_cat_id = $parent_cat->parent;
				$cat = get_category($parent_cat_id);
				$cat_link = get_category_link($parent_cat_id);
			?>
			<?php if($parent_cat_id): ?>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span>
						<a href="<?php echo $cat_link; ?>" itemprop="item">
							<span itemprop="name"><?php echo $cat->name; ?></span>
						</a><i class="fas fa-chevron-right"></i>
					</span>
					<meta itemprop="position" content="2">
				</li>
			<?php endif; ?>
			<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
				<span>
					<span itemprop="name"><?php single_cat_title(); ?></span>
				</span>
				<meta itemprop="position" content="3">
			</li>
		<?php elseif(is_tag()): /* タグページの場合 */ ?>
			<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
				<span>
					<span itemprop="name"><?php single_tag_title(); ?></span>
				</span>
				<meta itemprop="position" content="2">
			</li>
		<?php elseif(is_archive()): /* 日別・月別・年別アーカイブページの場合 */ ?>
			<?php
				$year = get_the_time('Y');
				$month = get_the_time('n');
				$day = get_the_time('d');
			?>
			<?php if(is_day()): /* 日別アーカイブ */?>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span>
						<a href="<?php echo get_year_link($year); ?>" itemprop="item">
							<span itemprop="name"><?php echo $year; ?>年</span>
						</a><i class="fas fa-chevron-right"></i>
					</span>
					<meta itemprop="position" content="2">
				</li>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span>
						<a href="<?php echo get_month_link($year,$month); ?>" itemprop="item">
							<span itemprop="name"><?php echo $month; ?>月</span>
						</a><i class="fas fa-chevron-right"></i>
					</span>
					<meta itemprop="position" content="3">
				</li>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span>
						<span itemprop="name"><?php echo $day; ?>日</span>
					</span>
					<meta itemprop="position" content="4">
				</li>
			<?php elseif(is_month()): /* 月別アーカイブ */?>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span>
						<a href="<?php echo get_year_link($year); ?>" itemprop="item">
							<span itemprop="name"><?php echo $year; ?>年</span>
						</a><i class="fas fa-chevron-right"></i>
					</span>
					<meta itemprop="position" content="2">
				</li>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span>
						<span itemprop="name"><?php echo $month; ?>月</span>
					</span>
					<meta itemprop="position" content="3">
				</li>
			<?php elseif(is_year()): /* 年別アーカイブ */ ?>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span>
						<span itemprop="name"><?php echo $year; ?>年</span>
					</span>
					<meta itemprop="position" content="2">
				</li>
			<?php endif; ?>
		<?php elseif(is_single()): /* 投稿ページの場合 */ ?>
			<?php
				$current_post_id = get_the_ID();
				$current_post_category = get_the_category($current_post_id);
				$current_post_category_name = $current_post_category[0]->cat_name;
				$current_post_category_id = $current_post_category[0]->cat_ID;
				$current_post_category_link = get_category_link($current_post_category_id);
			?>
			<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
				<span>
					<a href="<?php echo $current_post_category_link; ?>" itemprop="item">
						<span itemprop="name"><?php echo $current_post_category_name; ?></span>
					</a><i class="fas fa-chevron-right"></i>
				</span>
				<meta itemprop="position" content="2">
			</li>
			<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
				<span>
					<span itemprop="name"><?php echo get_the_title(); ?></span>
				</span>
				<meta itemprop="position" content="3">
			</li>
		<?php elseif(is_page()): /* 固定ページの場合 */ ?>
			<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
				<span>
					<span itemprop="name"><?php single_post_title(); ?></span>
				</span>
				<meta itemprop="position" content="2">
			</li>
		<?php elseif(is_search()): /* 検索ページの場合 */ ?>
			<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
				<span>
					<span itemprop="name">検索結果「<?php echo get_search_query(); ?>」</span>
				</span>
				<meta itemprop="position" content="2">
			</li>
		<?php endif; ?>
	</ul>
</div>

style.css

続いて、style.cssにパンくずリストのスタイルを記述していきます。

.breadcrumb {
	color: #808080;
	font-size: 11px;
	line-height: 20px;
	animation: site-title 0.8s ease 0.5s 1 normal;
	animation-fill-mode: forwards;
	opacity: 1;
}

.breadcrumb a {
	color: #808080;
}

.breadcrumb ul {
	margin-bottom: 0;
}

.breadcrumb ul li {
	display: inline;
}

.breadcrumb .fa-home {
	font-size: 11px;
	padding-right: 3px;	
}

.breadcrumb .fa-chevron-right {
	padding: 0 10px;
}

各テンプレートファイルのphpファイル

各テンプレートファイルは、下記の通り。

  • 投稿ページ
    →　single.php
  • 固定ページ
    →　page.php
  • アーカイブページ
    →　archive.php
  • 検索ページ
    →　search.php
  • 404エラーページ
    →　404.php
  • カテゴリーページ
    →　archive.php
  • タグページ
    →　archive.php

各テンプレートファイルのパンくずリストを表示したい位置に下記のコードを挿入します。

<?php get_template_part('include/breadcrumb'); ?>

当テーマでは、下記のように関連記事の上にパンくずリストを表示させています。

WordPressテーマ「SIMPLE」

simple

「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。

> ダウンロード

RELATED POSTS

【WordPress】カレンダーウィジェットのデザインをカスタマイズする方法【テーマ開発】

【WordPress】アイキャッチ付き最近の投稿ウィジェットの作り方【テーマ開発】

【WordPress】カエレバ/ヨメレバリンクのデザインをカスタマイズする方法【テーマ開発】

【WordPress】おすすめ記事をプラグインなしでサイドバーに表示する方法を解説【テーマ開発】

【WordPress】プロフィールウィジェットの作り方【テーマ開発】

【WordPress】アプリーチリンクのデザインをカスタマイズする方法【テーマ開発】