WordPressでプラグイン無しでパンくずリストを表示させる方法

スポンサーリンク

WordPressサイトにパンくずリストの設置諦めていませんか?

WordPressサイトを運営しているとテーマによっては、パンくずリストが実装されていないテーマがあると思います。かといって、テーマのデザインが気に入っているとなると、自分で何とか実装するしかないですよね?でもちょっとハードルが高いと思ってパンくずリストを諦めていませんか?

パンくずリストにどういったメリットがあるかイマイチわからない

パンくずリストがどういった効果が有るのか?イマイチわからない。

パンくずリスト設定したいけど諦めている

使っている無料テーマにパンくずリストの機能が付いていないので、付けたいけどどうやって付けたらいいのかわからない。

パンくずリストプラグインを探している

ちょうど、パンくずリストを設置するための専用プラグインを探している

 

こういったお悩みの参考になればいいなと思います。

スポンサードサーチ

パンくずリストのメリットを知る

なぜパンくずリストを設置した方が良いのか考えてみます。

何の記事を読んでいるかを知らせる

ユーザーが読んでいる記事がどのジャンルなのかを視覚的にわかりやすくするためです。オーガニック検索などからやってきたユーザーが、ランディングページとなった記事がどのカテゴリの記事なのか?を認識しやすくなります。

SEO対策でもある

パンくずリストの設置はGoogleやBingのクローラーがサイトを巡回するのに役立つとされています。巡回する際にどのカテゴリの記事なのか?を理解しやすいため、このサイトは構造がしっかりしているぞ!と思ってくれるかもしれないという事ですね。

有料テーマを使えばパンくずリストがついてくる

今回は、無料でパンくずリストを設置する方法を紹介しているのですが、例えば有料のWordPressテーマーを使えばパンくずリストをすぐに設置する事が可能です。有料のWordPressテーマの殆どがパンくずリストを初めから実装されています。有料テーマの2強を掲載しておきますので、もし興味がある方はご覧ください。

WordPressの最強有料テーマ

WordPressユーザーの殆どの人は無料テーマで日々四苦八苦しています。皆より一歩先を進むために有料テーマを検討してみるのはいかがでしょうか?きっと差がつくはず!

徹底的なSEO対策と洗練されたデザインのWordPressサイトがワンクリックで完成

THE THOR公式サイト

ロングセラーで信頼されたWordPressテーマ

賢威公式サイト

パンくずリストを設置する方法

早速、パンくずリストを設置する方法を紹介しようと思います。

通常はパンくずリストを自分で設置する際は、プラグイン使うのとプラグインを使わずにfunction.phpにパンくずリストのコードを記述して、設置したいテンプレートにショートコードを設置する方法の2つ有るのですが、どちらも紹介していこうと思います。

プラグイン無しでパンくずリストを設置する方法

プラグインを使わずにfunction.phpにパンくずリストのコードを記述して、設置したいテンプレートにショートコードを設置する方法を紹介します。焦らずに頑張ればできると思います。

    1. WordPressダッシュボード開く
    2. 外観>テーマエディターを開く
    3. function.phpを開く
    4. 以下のコードをコピーします
      // パンくずリスト
      function breadcrumb(){
          global $post;
          $str ='';
          if(!is_home()&&!is_admin()){
              $str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
              $str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> &gt;</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"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt;</div>';
                      }
                  }
              $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></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"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></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"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> &gt;</div>';
                      }
                  }
                  $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
              } else{
                  $str.='<div>'. wp_title('', false) .'</div>';
              }
              $str.='</div>';
          }
          echo $str;
      }
    5. 「ファイルを更新」を押します
    6. これで以下のコードでパンくずリストを表示させることができます
      <?php breadcrumb(); ?>
    7. header.phpなどパンくずリスト設置したい箇所に6のコードを貼り付けます
    8. 設置後に、正常に表示されていれば完了です

いかがでしょうか?上手く設置できましたか?

少しレベルが高いかもしれませんが、この方法だとプラグインを使わないので多少はサーバーへの負荷を抑えられるかもしれませんので一度試してみてはいかがでしょうか?

パンくずリストプラグインの紹介

とにかく簡単にパンくずリストを設置したい場合は、パンくずリストプラグインをおすすめします。中でも有名なパンくずリストプラグインを紹介しますので参考にしてみてはいかがでしょうか。

Breadcrumb NavXT

Breadcrumb NavXT は人気のあった WordPress プラグイン Breadcrumb Navigation XT の後継で、さらなる改善に向け旧版を抜本的に見直してあります。このプラグインは、訪問者に対し現在地へのパスを表示する「パンくずリスト」ナビゲーションをサイトに追加します。追加するパンくずリストは柔軟なカスタマイズが可能で、どのようなサイトのニーズでも満たすことができます。管理画面では各種オプションを簡単に設定できます。テーマ開発者やパワーユーザー向けに、クラスへの直接アクセス手段も提供されています。※公式サイト抜粋

Breadcrumb NavXT
Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancesto …

Breadcrumb

WordPressサイトへのブレッドクラムナビゲーションを表示するための簡単で軽量なプラグインであり、簡単にカスタマイズおよび変更する事ができます。フィルタフックとアクションフックを使用して、プラグインコードを編集せずにプラグインを書き直すこともできます。このプラグインは、アーカイブ、カテゴリ、タグ、カスタム分類法、カスタム投稿タイプ、デフォルト投稿、日付、年、月、作成者、検索ページなど、ほぼすべてのWordPressページで機能し、パンくずリストを動的に表示します。※公式サイト参考

Breadcrumb
Super light weight & easy breadcrumb navigation for wordpress site.

Prime Strategy Bread Crumb

このプラグインは、ブレッドクラム(トピックパス)ナビゲーションを表示する機能を追加します。表示スタイル、スタイルの多くのパラメーター、およびパンくずナビゲーションの元のプラグインフックを使用でき、ナビゲーションを柔軟にカスタマイズできます。※公式サイト抜粋

Prime Strategy Bread Crumb
Adds the function to display breadcrumbs navigation.

スポンサードサーチ

パンくずリストより大事なもの

最後までお読みいただきありがとうございました。

最後にお伝えしたいことは、パンくずリストの設置方法の選択は皆さんのお好みで大丈夫ですよという事です。どの方法で設置するかに時間をかけるよりは、ササッと設置をして更にコンテンツを充実させることに時間を費やした方が良いと思います。

もちろん、途中でご紹介した有料テーマを使って更に簡単にパンくずリストを設置するという手も有ると思います。その辺りはご自由にどうぞ。

WordPressの最強有料テーマ

WordPressユーザーの殆どの人は無料テーマで日々四苦八苦しています。皆より一歩先を進むために有料テーマを検討してみるのはいかがでしょうか?きっと差がつくはず!

徹底的なSEO対策と洗練されたデザインのWordPressサイトがワンクリックで完成

THE THOR公式サイト

ロングセラーで信頼されたWordPressテーマ

賢威公式サイト

WordPress自体についてもっと詳しくなりたい方

WordPressの扱いがまだまだ初心者の方やもっと勉強したい方は向けです

最後までお読みいただきありがとうございました。

タイトルとURLをコピーしました