Blog

【WordPress】パンくずリストを独自実装する方法

2021/06/30

Wordpress

備忘録です。

制作中のサイトでBreadcrumb NavXTの設定ができなくなり、原因を調べていましたがわからなかったので、独自でパンくずリストを設置することにしました。

参考サイト
Breadcrumb NavXT を停止して、パンくずリストを独自実装する

テンプレート内の記述はBreadcrumb NavXTのものをそのまま使います。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

テーマのテンプレートディレクトリにincludesを作成して下記のclass-my-breadcramb.phpをアップします。

<?php
class My_Breadcramb {

	//パンくずの起点部分のトップページへのリンク。不要な場合は空白に。
	const HOME_LABEL = "HOME";

	//個別投稿ページのパンくずに表示するタクソノミー。不要な場合は空白もしくは項目削除。
	const SHOW_TAXONOMIES = array(
		'post' => 'category',
		'products' => 'genre'
	);

	private $paths = array();
	private $post = null;
	private $term = null;
	private $post_type = null;

	public function __construct()
	{
		$this->prepare();
	}

	/**
	 * パンくずに使う情報を取得して配列に格納
	 */
	public function prepare()
	{
		//まずは必要なオブジェクトを取得
		if ( is_singular() ) {
			//個別ページ
			global $post;
			$this->post = $post;
			//標準投稿と固定ページ以外なら投稿タイプを取得
			if ( $post->post_type != 'post' && $post->post_type != 'page' ) {
				$this->post_type = get_post_type_object( $post->post_type );
			}
			//タクソノミーを使用する場合は、1番新しいタームを取得
			if ( ! empty( self::SHOW_TAXONOMIES[$post->post_type] ) ) {
				$terms = get_the_terms( $post->ID, self::SHOW_TAXONOMIES[$post->post_type] );
				if ( $terms ) {
					foreach ( $terms as $term ) {
						if ( ! $this->term || $this->term->id < $term->id ) {
							$this->term = $term;							
						}
					}	
				}
			}
		} elseif ( is_tax() || is_category() ) {
			//タクソノミーアーカイブ
			$this->term = get_queried_object();
			//標準投稿と固定ページ以外なら投稿タイプを取得
			$tax = get_taxonomy( $this->term->taxonomy );
			$post_type = get_post_type_object( $tax->object_type[0] );
			if ( $post_type->name != 'post' && $post_type->name != 'page' ) {
				$this->post_type = $post_type;
			}
		} elseif ( is_post_type_archive() ) {
			//投稿タイプアーカイブ
			$this->post_type = get_queried_object();
		}

		//末端から順番に配列に入れていく
		$paths = array();

		if ( $this->post ) {
			//親投稿も遡っていく
			$cursor = $this->post;
			while ( $cursor ) {
				$paths[] = array(
					'label' => $cursor->post_title,
					'link' => get_permalink( $cursor )
				);
				$cursor = $cursor->post_parent ? get_post( $cursor->post_parent ) : null;
			}
		}

		if ( $this->term ) {
			//親タームも遡っていく
			$cursor = $this->term;
			while ( $cursor ) {
				$paths[] = array(
					'label' => $cursor->name,
					'link' => get_term_link( $cursor )
				);
				$cursor = $cursor->parent ? get_term( $cursor->parent, $cursor->taxonomy ) : null;
			}
		}

		if ( $this->post_type ) {
			$paths[] = array(
				'label' => $this->post_type->labels->name,
				'link' => get_post_type_archive_link( $this->post_type->name )
			);
		}

		if (self::HOME_LABEL) {
			$paths[] = array(
				'label' => self::HOME_LABEL,
				'link' => home_url()
			);
		}

		if ( $paths ) {
			//最初に入れたもの(=末端)はリンクをなくす
			$paths[0]['link'] = null;
			//順番をひっくり返す
			$this->paths = array_reverse( $paths );
		}
	}

	/**
	 * パンくず表示
	 */
	public function display()
	{
		if ( $this->paths && count( $this->paths ) > 1 ) {
			$output = '';
			foreach ( $this->paths as $index => $cramb ) {
				$output .= '<span property="itemListElement" typeof="ListItem">';
				if ( $cramb['link'] ) {
					$output .= '<a property="item" typeof="WebPage" href="' . $cramb['link'] . '">';
				}
				$output .= '<span property="name">' . $cramb['label'] . '</span>';
				if ( $cramb['link'] ) {
					$output .= '</a>';
				}
				$output .= '<meta property="position" content="' . ($index + 1) . '" />';
				$output .= '</span>';
			}
			echo $output;
		}
	}
}

functions.phpに下記の記述を追加

if ( ! function_exists( 'bcn_display' ) ) {
	function bcn_display() {
		require_once( TEMPLATEPATH . '/includes/class-my-breadcramb.php' );
		$breadcramb = new My_Breadcramb();
		$breadcramb->display();
	}
}

このままだと「>」が表示されないので、CSSで記述をして完了です。

カテゴリー

月間アーカイブ

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ