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

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

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

    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>
    

    wpプラグイン「topへ戻る」ボタンを比べてみました。

    ボタンをクリックすると、ページのトップにシュルシュルっとスクロールしてくれる。無くてもさほど困らないけど、あるとwebサイトがちょっとカッコ良くなる「topへ戻るボタン」を、いくつか比べてみました。
    プラグインをインストールして有効化するだけで 作動するものと、設定やオプションがあって、カスタマイズできるタイプがあります。
    「RRF Scroll To Top」,「Royal Scroll to Top」
    「Smooth Page Scroll to Top」,「Scroll Button」
    topbutton-1いずれも同じタイプのボタンです。
    オプションはありませんので、プラグインを有効化するだけで、すぐ作動します。
    ボタンが現れる位置やアニメーションに、微妙な違いがあります。
    「Scroll to Top Button」
    topbutton-3これもオプション無し。プラグインを有効化するだけでOKです。画面の右下角っこに四角いボタンがスッと現れます。
    「LB Back To Top」
    topbutton-11オプション無し。プラグインを有効化するだけでOKです。
    画面右下に文字付きの黒い四角いボタンが現れます。
    文字はプラグインファイル(backtop/index.php)を直接編集して変更できます。
    「Smooth-scroll-to-top」
    topbutton-8オプションは無し。プラグインを有効化するだけでOKです。画面右下にボタンが現れます。
    「WP Scroll To Top」
    topbutton-17プラグインの有効化だけで作動します。アイコン5個からボタンを選べるオプションがあります。
    (私の場合icon4は、表示されませんでした。)
    「WP-Smooth-Scroll」
    topbutton-9ボタンの位置を右、中央、左から選択できます。
    ボタンは、マウスオーバーで青色に変わります。
    「Back To Top」
    ボタンやアニメーションの効果について、オールマイティーなオプションがあります。
    topbutton-13ボタンのオプションは以下の3通り。
    ①左のような25種類の画像が用意されているので、その中から気に入ったボタンを使う。
    ②手持ちの画像をアップロードして使う。
    ③画像でなくテキストでボタンを表示する。
    ボタンの動きについても3通りのエフェクトが選べます。
    ①ボタンが、フェードイン/フェードアウト する。
    ②ボタンが画面下から上下に、スライドアップ/スライドダウンする。
    ③ボタンが画面右下角からヒョイと現れ、ヒョイと引っ込む。
    「Scroll To Top」
    topbutton-18テキストとテキスト幅、文字色、背景色を設定できます。ボタンは画面の中央に現れます。topbutton-5
    まだまだ、ありますが、このくらいにしておきます。
    利用しているWordPressのバージョンや導入しているプラグインなどとの相性で、作動しないものがあるかも知れません。