• HOME
    • >
  • タグ: パンくずリスト

    • パンくずリストをプラグイン無しで作る

    2021年2月25日 コメントをどうぞ

    今回はプラグイン無しでパンくずリストを作ったので、備忘録としてメモしておきます。

    作成にあたって、とても分かり易い解説がされている下記サイトを参照いたしました。（感謝！）

    【WordPress】パンくずリストをプラグイン無しで自作する方法

    オリジナルゲーム.com「【WordPress】パンくずリストをプラグイン無しで自作する方法」参照

    作成手順は、

    1. 作業前に変更するファイルのコピーを取っておく（※これ、大事です）
    2. functions.phpにコードを追記する
    3. パンくずを表示させたいファイルにコードを追記する
    4. style.cssでスタイルを整える
    5. category.phpとtag.phpの二重表記を修正（必要があれば）

    2.functions.phpに追記したコード

    「【WordPress】パンくずリストをプラグイン無しで自作する方法」に掲載されている完成版を、まるっきりコピーして使用させていただきました。

    // ===========================
// = パンくず =
// ===========================
function mytheme_breadcrumb() {
    	//HOME>と表示
    	$sep = '>';
    	echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
    	echo $sep;
     
    	//投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
    	$cats = '';
    	$cat_id = '';
    	if ( is_single() ) {
    		$cats = get_the_category();
    		if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
    	}
    	else if ( is_category() ) {
    		$cats = get_queried_object();
    		$cat_id = $cats->parent;
    	}
    	$cat_list = array();
    	while ($cat_id != 0){
    		$cat = get_category( $cat_id );
    		$cat_link = get_category_link( $cat_id );
    		array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' );
    		$cat_id = $cat->parent;
    	}
    	foreach($cat_list as $value){
    		echo '<li>'.$value.'</li>';
    		echo $sep;
    	}
     
    	//現在のページ名を表示
    	if ( is_singular() ) {
    		if ( is_attachment() ) {
    			previous_post_link( '<li>%link</li>' );
    			echo $sep;
    		}
    		the_title( '<li>', '</li>' );
    	}
    	else if( is_archive() ) the_archive_title( '<li>', '</li>' );
    	else if( is_search() ) echo '<li>検索 : '.get_search_query().'</li>';
    	else if( is_404() ) echo '<li>ページが見つかりません</li>';
    }

    3.パンくずリストを表示させたいファイルに追記するコード

    <div class="mytheme_breadcrumb">
    <?php mytheme_breadcrumb(); ?>
       </div>

    パンくずリストを表示させたいファイル
    　　・single.php
    　　・category.php
    　　・tag.php

    コードを追記する位置は各ファイルの<div id=”content” role=”main”>の下になります。＜div＞のクラス名は任意。

    4.style.cssでスタイルを整える（一例：2021/03/27修正しました）

    /* パンくず */
.mytheme_breadcrumb li {
    font-size: 90%;
    display: inline-block;   
}

    5.category.phpとtag.phpの二重表記を修正

    私が使っているテンプレートでは、カテゴリーとタグページに元々パンくずが表示されていたので、二重表記になってしまいました。スタイルを統一するために
    category.phpとtag.phpのコードを一部削除しました。

    category.phpで削除したところ

    <h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>

    tag.phpで削除したところ

    <h1 class="archive-title"><?php printf( __( 'Tag Archives: %s', 'twentytwelve' ), '<span>' . single_tag_title( '', false ) . '</span>' ); ?></h1>