【WordPress】プラグインなしでパンくずリストを設置する【Twenty Seventeen】

はい!こんにちは!
今回のテーマは

『プラグインなしでパンくずリストを設置する』

です。
パンくずリストって知っていますか?

記事などタイトルの上にあるこれです。↓

これ実は、結構大事なんです。

まずは、ユーザーに現在の居場所を分かりやすく伝える役目があります。

トップページからどのカテゴリーにいるのか、などを一目で判断出来ます。

また、各カテゴリーにリンクが貼ってあるので同じカテゴリーの違う記事を読みたいな、という時にユーザーの巡回性を上げることが出来ます。

また、検索エンジンへ(SEO)の対策にも効果があると言われていますので、まだ自分のサイトに設置していない方は是非検討してみて下さい。

それでは設置手順の方へ行ってみましょう。


パンくずリスト設置手順

下のコードをコピーします。

function breadcrumb(){global $post;$str ='';if(!is_home()&&!is_admin()){$str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;">';$str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> &gt;&#160;</div>';if(is_category()) {$cat = get_queried_object();if($cat -> parent != 0){$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));foreach($ancestors as $ancestor){$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt;&#160;</div>';}}$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';} elseif(is_page()){if($post -> post_parent != 0 ){$ancestors = array_reverse(get_post_ancestors( $post->ID ));foreach($ancestors as $ancestor){$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a> &gt;&#160;</div>';}}} elseif(is_single()){$categories = get_the_category($post->ID);$cat = $categories[0];if($cat -> parent != 0){$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));foreach($ancestors as $ancestor){$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a>→</div>';}}$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';} else{$str.='<div>'. wp_title('', false) .'</div>';}$str.='</div>';}echo $str;}

スポンサーリンク

PHP内へコードを貼り付けます。

ここでお決まりの一言を言っておきましょう。

phpなどを弄る時はバックアップを取ってから作業しましょう!何が起きても責任とれません!(原因位は一緒に探せますが…)バックアップを強くおススメします。

①外観→テーマの編集→テーマの編集(fanction.php)の一番下に前記のコードをすべてコピーして貼り付けます。

②パンくずリストを表示させたい場所に(php内に)下記のコードを貼り付けます。

<?php breadcrumb(); ?>

私はここに設置しています。

投稿ページのタイトル上(page.php)

固定ページタイトル上(single.php)


完了です!

はい!そこのあなた!

え?これだけ?って思いましたね?

これだけです。

ご自分のブログのコードを張り付けたページを開いてみて下さい。

パンくずリストが表示されていますね。

このコードの特徴は、カテゴリーに2つ登録してあるような記事ありますよね。

私のブログなら『DIY』と『庭造り』両方にカテゴリー登録してあるような記事です。

そのような記事は、カテゴリー一覧で上にあるカテゴリーが優先表示されます。ですのでカテゴリーの分けを整理して1記事1カテゴリーにする。等のスリム化を図るとユーザーの方にも分かりやすいです。

(ですが記事を書いていると迷うんですよね…(笑) 私も庭造りで枕木を立ててみよう、という記事の時、カテゴリーにすごく迷いました。)

まとめ

いかがでしたでしょうか?

今回は取り急ぎパンくずリストを設置する方法を記述しました。私の記事では『なるべく手間を掛けずに少ない手順で機能を追加する』を心掛けてます。

このパンくずリスト、一度設置しておけば編集いらずなので結構便利です。

グーグルの検索結果にも、

この通り正常に表示されます。

ユーザーの為、検索からの集客の為、是非設置してみて下さい。


おまけ

Twitterの自分のタイムライン(ツイート)をフッターに追加しました!

結構簡単に出来たので後日記事としてあげます♪

更新情報はTwitterから配信しています。(フェイスブックとインスタ使うほどお洒落な画像が無いとか言えない…。)よろしくお願いします♪


今回の記事は以上になります。

ご質問等はコメントから受け付けております。お気軽にどうぞ♪

最後まで読んで頂き感謝!

また次の記事で。。。

最新情報をチェックしよう!