WordPressのウェブサイトを見やすくする方法をお探しなら、パンくずリンクを追加することをお勧めします。
パンくずリストナビゲーションは、ユーザーがサイト内のどこにいるのかをホームページとの相対的な関係で示します。このパンくずリストは検索結果にも表示され、サイトを目立たせます。
私たちは自分のウェブサイトでパンくずリストを使っており、この機能によって読者が異なるページを移動しやすくなることを実感している。そしてこの記事では、WordPressでパンくずナビリンクを表示する方法を紹介します。
パンくずリストナビゲーションとは？
パンくずリストは、リンクの軌跡として表示される階層ナビゲーションメニューを表すキーワードです。ユーザーがサイトのページ階層を上がっていくためのセカンダリー・ナビゲーションとして使用されることが多い。
パンくずリストはWordPressの初期設定のナビゲーションメニューシステムとは異なります。
パンくずリストは、ユーザーがウェブサイトをナビゲートするのに役立ち、検索エンジンがウェブページ上のリンクの構造や階層を理解するのに役立ちます。
パンくずリストが正しく設定されていれば、Googleなどの検索エンジンは検索結果でページタイトルとともにパンくずリストを表示します。これにより、検索結果であなたのサイトがより見やすくなり、クリック率も上がります。
このガイドの方法は、スキーママークアップを使ってパンくずリストを適切に設定するのに役立ちます。スキーマとは、Googleがパンくずリストを識別し、検索結果に表示されるようにするためのスマートなマークアップコードです。
それでは、WordPressでパンくずナビゲーションのリンクを追加する方法を見ていきましょう。ここでは2つの方法を紹介するので、自分に合った方法を選んでほしい：
方法1：All In One SEOを使ってWordPressにパンくずリストを追加する（推奨）
この方法は簡単で、すべてのWordPressユーザーにお勧めします。
この方法では、市場で最高のWordPress SEOプラグインであるAll In One SEO for WordPressを使用します。技術的なスキルがなくても、WordPressのSEOを簡単に改善することができます。また、使いやすいパンくずリスト機能も付いている。
注：All In One SEOの無料版もあり、パンくずリストを含む限られた機能しか利用できない。しかし、リンクアシスタント、アドバンスドサイトマップなどのプレミアム機能にアクセスするには、有料プラグインにアップグレードすることをお勧めします。
有効化すると、プラグインのセットアップウィザードが表示されます。画面の指示に従ってプラグインを設定してください。
セットアップにヘルプが必要ですか？All In One SEOのインストールと設定方法については、ステップバイステップのチュートリアルをご覧ください。
次に、All In One SEO ” 一般設定ページにアクセスし、「パンくずリスト」タブに切り替える必要があります。
パンくずリストスキーママークアップは、All In One SEOによって自動的にサイトのコードに追加されるため、検索エンジンに見つけてもらうことができます。
ただし、サイト上にパンくずナビゲーションリンクも表示したい場合は、「パンくずリストを有効化」オプションをオンにする必要があります。
トグルを切り替えると、WordPressサイトで使用できるさまざまなパンくず表示設定を見ることができます。
WordPressサイトでパンくずナビゲーションを表示するには、4つの方法があります。
1.ショートコードを使ってパンくずリストをナビゲーションに追加する
ショートコードを使う方法は簡単で、WordPressの投稿やページ、オンラインストアの商品ページにパンくずリストナビゲーションリンクを表示することができます。
投稿、ページ、商品を編集し、パンくずナビゲーションを表示したい場所に以下のショートコードを追加するだけです：
[aioseo_breadcrumbs]
初期設定のブロックエディターを使用している場合、ショートコードは自動的にショートコードブロックに変換されます。
投稿やページを保存し、プレビューしてパンくずリストナビゲーションメニューの動作を確認できるようになりました。
これがテストサイトでの様子だ。
2.Gutenbergブロックを使ったパンくずナビゲーションの追加
ショートコードのオプションを使いたくない場合、またはショートコードを覚えていない場合は、AIOSEO – パンくずリストを使用してパンくずナビゲーションを表示することができます。
パンくずナビゲーションを表示させたい投稿やページを編集し、AIOSEO – パンくずリストを追加するだけです。
プラグインはパンくずリストのナビゲーションリンクのライブプレビューを読み込み、コンテンツエリアに表示します。
更新または変更を公開することを忘れないでください。
3.ウィジェットを使ったパンくずリストのナビゲーション追加
上記の2つの方法では、パンくずナビゲーションのリンクを表示したい投稿やページごとにショートコードやブロックを追加する必要があります。
投稿やページごとにパンくずリストを自動的に表示したい場合はどうすればいいでしょうか？
AIOSEOパンくずリストウィジェットを使えば、それが簡単にできます。
外観 ” ウィジェットページに行き、AIOSEO – パンくずリストウィジェットブロックを追加するだけです。サイトのサイドバー、フッター、ウィジェットエリアに追加できます。
ウィジェットのタイトルをプロバイダーすることも、空白のままにすることもできます。
更新』ボタンをクリックして設定を保存することをお忘れなく。
あなたのサイトにアクセスすると、すべての投稿日とページにパンくずリストナビゲーションメニューが表示されます。
4.コードを使ったパンくずリストのナビゲーションの追加
この方法を使うと、パンくずナビゲーションのリンクを好きな場所に正確に表示することができます。ただし、WordPressテーマファイルにコードを追加する必要があります。
まだやったことがない場合は、WordPressでコード・スニペットを追加する方法の投稿をご覧ください。
まず、パンくずリンクを表示する場所を決める必要があります。最も一般的な場所は、個々の投稿、ページ、商品タイトルの下です。
WordPressのテーマは、ウェブサイトのさまざまなセクションを表示するためにテンプレートファイルを使用します。例えば、多くのテーマでは、テーマのtemplate-partsフォルダ内にあるcontent-single.phpというファイルを使用します。
WordPressテーマで編集するファイルについては、チートシートをご覧ください。
その後、FTPクライアントを使用してテーマファイルを編集する必要があります。手順については、FTPを使ってWordPressにファイルをアップロードする方法のガイドをご覧ください。
次に、パンくずナビゲーションのリンクを表示したい場所に以下のコードを配置します：
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
変更を保存し、ファイルをサイトにアップロードすることをお忘れなく。
あなたのサイトでパンくずリンクの動作を確認できます。
AIOSEOでパンくずリストの表示方法を変更する
初期設定では、All In One SEOはパンくずリストナビゲーションリンクを表示するテンプレートを使用します。このテンプレートには、ホーム、カテゴリー、親ページ、投稿またはページタイトルへのリンクが” “記号で区切られて表示されます。
All In One SEO ” 一般設定ページにアクセスし、’パンくずリスト’タブに向かうことで変更できます。次に、パンくずリスト設定セクションまでスクロールダウンします。
ここから区切りの変更、ホームリンクの表示・非表示、プレフィックスの追加などができる。
終了したら、設定を保存することをお忘れなく。
方法2：パンくずNavXTでパンくずナビゲーションを追加する
この方法は、他のWordPress SEOプラグインでも使用できる。互換性のあるテーマがあれば簡単に使えますが、そうでない場合は、パンくずナビゲーションリンクを表示するためにテーマファイルを編集する必要があります。
最初に必要なことは、パンくずリストNavXTプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、Settings ” Breadcrumb NavXTページでプラグイン設定を行う必要があります。
初期設定はほとんどのサイトで機能するはずです。しかし、必要に応じて設定をカスタマイズすることができます。
設定ページは様々なセクションに区切られています。一般設定タブでは、パンくずリストのスタイルと設定を変更することができます。
また、これらのリンクテンプレートは、リンクタグにSchema.orgマークアップを使用していることに気づくだろう。
プラグイン設定の投稿タイプタブでは、投稿、ページ、カスタム投稿タイプのパンくずリンクを設定することができます。
投稿階層の表示方法を選択できます。初期設定では、プラグインは「サイトタイトル > カテゴリー > 投稿タイトル」の階層を使用します。
カテゴリーをタグ、日付、投稿親に置き換えたり、セパレーターを変更することができます。
タクソノミーとその他タブには、パンくずナビゲーションリンク用の同様のテンプレートがあります。
変更が終わったら保存することをお忘れなく。
パンくずリストNavXTは、サイトにパンくずナビゲーションリンクを表示する複数の方法を提供します。
1.パンくずリストナビゲーションをテーマサポートで表示する
最も人気のあるWordPressテーマのいくつかは、ソースとしてパンくずNavXTまたはWordPress SEOプラグインを選択することにより、パンくずナビゲーションを表示するビルトインオプションが付属しています。
例えば、Astraを使用している場合、外観 ” カスタマイズページに行き、「パンくずリスト」メニューをクリックします。
そこから、「ヘッダーの位置」ドロップダウンでパンくずリストを表示する場所を選びます。
パンくずソース」で、「パンくずNavXT」を選択する必要があります。
個別投稿やページを表示している場合、パンくずリストナビゲーションリンクのライブプレビューが表示されます。
公開する」ボタンをクリックして変更を保存することを忘れないでください。
2.パンくずリストブロックによるナビゲーションリンクの表示
パンくずリストブロックを使って、パンくずナビゲーションリンクを表示することもできます。
WordPressのコンテンツエディターにアクセスし、パンくずリストブロックをナビゲーションリンクを表示したい場所に追加するだけです。
次に、コンテンツを更新または公開します。
その後、あなたのサイトを訪問し、ナビゲーション・リンクの動作を確認してください。
3.ウィジェットを使ったパンくずリストのナビゲーション追加
プラグインは、サイドバーやウィジェット対応エリアにパンくずナビゲーションを表示するためのウィジェットも提供します。
まず、外観 ” ウィジェットページに行き、サイドバーやフッターなどのサイトのウィジェットエリアに「パンくずリスト」ウィジェットブロックを追加する。
初期設定のウィジェットは、ほとんどのサイトで使用できますが、必要に応じて変更することができます。例えば、トップページの軌跡を非表示にしたいかもしれません。
更新」ボタンをクリックして、ウィジェットの設定を保存することを忘れないでください。
4.コードを使ったパンくずリストのナビゲーションの追加
このプラグインは、上級ユーザー向けにパンくずリストナビゲーションリンクを表示するコードメソッドも提供しています。
まず、FTPクライアントを使用してWordPressサイトに接続する必要があります。その後、/wp-content/themes/ディレクトリ内にある現在のWordPressテーマフォルダーに移動します。
WordPressテーマは、サイトのさまざまなセクションを表示するためにテンプレートファイルを使用します。例えば、多くのテーマでは、テーマのtemplate-partsフォルダ内にあるcontent-single.phpというファイルを使用します。
WordPressテーマで編集するファイルについては、チートシートをご覧ください。
テンプレートファイルを開いて編集し、パンくずリストを表示したい場所に以下のコードを記述します：
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
変更を保存し、ファイルをサイトにアップロードすることをお忘れなく。
あなたのサイトでパンくずリンクのトレイルを実際に見ることができます。
動画チュートリアル
WordPressでパンくずナビリンクを表示する方法をご紹介しましたが、参考になりましたでしょうか？また、WordPressでログ記録ユーザーに異なるメニューを表示する方法や、WordPressサイトにメガメニューを追加する方法についてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dayo Olobayo
Thanks for this informative article. I added the aioseo breadcrumbs widget and it automatically shows breadcrumbs for my blog posts. However, I notice it displays breadcrumbs on the home page which I don’t like. Is there a way to fix that please?
Also, I notice from the screenshot above that your breadcrumbs looks appealing compared to what I have on my blog. Is there a way to customize it?
PS: I use the aioseo lite plugin.
WPBeginner Support
It would depend on what method you used to add breadcrumbs to your site for how to remove it from the homepage specifically. For our breadcrums those are currently something we have styled specifically with our theme.
管理者
Dayo Olobayo
About the breadcrumbs showing up on my homepage, I contacted aioseo support and they provided me with a CSS code that fixed the problem. Thanks for your response.
Steven Jæger
I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.
My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.
WPBeginner Support
You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.
管理者
Surjeet Kumar Verma
Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.
WPBeginner Support
Glad our guide was helpful
管理者
Rintesh Roy
The plugin is not at all documented. At least, I could not find any.
WPBeginner Support
The documentation for the plugin is linked on the plugin’s page
管理者
Elizabeth Morgan
I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:
“Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.
syntax error, unexpected ‘<', expecting end of file"
What do I do about this?
WPBeginner Support
There are a few possible reasons, you may want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
管理者
Varun
Thank you finally problem is solved
WPBeginner Support
Glad our recommendations could help
管理者
Hammad Rashid
The plugin is awesome…. Thank You!
WPBeginner Support
Glad we could recommend it
管理者
Andres
Hi WPBeginner,
Amazing post.
I wonder the following.
How do you make the “home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.
I mean, when you go “home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.
Thanks a lot for your time.
Editorial Staff
In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.
管理者
Manish Ransubhe
Hello, I am not using any plugin and I have never enabled Breadcrumbs.
Why my search Result showing breadcrumbs help me to disable this
Thank you
Ravi Singh
same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.
Dua Centre
I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?
Walter
Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.
DUy
Is it posible to change the font size and the font color of Breadcrumb?
thanks
Sameer
Hello,
I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.
Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?
Joshua
Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using “insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.
Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.
juan luis
Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?
WPBeginner Support
Hi Juan,
If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.
管理者
Nate Balcom
By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.
Nate Balcom
Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.
Anna
My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.
I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?
subhan
Just copy the header.php to the the generate press child theme forlder.
Sunil
Thanks for great post. Cheers!
Raymond Chukwuman
Thank you so much. It is really working on my website God bless you
Abiodun
I followed the steps, didn’t really work for me with the posts. I just saw the ‘Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO
WPBeginner Support
Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.
管理者
Abiodun
It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?
Michelle
Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ‘child’ of the articles page, and the articles page as ‘child’ of the homepage. you can do it in the page editor.
JOY
Great! This is really useful! Thanks a lot!
malek
thanks you , really usefull