WordPress にパンくずリストを追加する最速の方法

公開: 2022-12-25

WordPress は、世界で最も人気のある CMS (コンテンツ管理システム) と見なされています。 実際、世論調査によると、インターネット上のすべての Web サイトの半数以上が WordPress をバックエンドとして使用しており、これらのサイトの所有者が新しいコンテンツを管理およびアップロードするのに役立っています。

Web サイトの SEO ランキングを改善してトラフィックを増やしたい場合は、パンくずリストについて学ぶことが重要です。

パンくずリストは、訪問者が Web サイトをより簡単にナビゲートするのに役立つだけでなく、Google や他の検索エンジンに Web サイトの構造を伝えることにもなります。 また、より良い構造化により、サイトは人々の検索結果で上位にランク付けされます.

このガイドでは、ブレッドクラムを WordPress に追加する方法を紹介します。

  • WordPress サイトのブレッドクラムとは?
  • プラグインを使用して WordPress にブレッドクラムを追加する方法
  • コードを使用して WordPress にブレッドクラムを追加する方法

WordPress サイトのブレッドクラムとは?

ブレッドクラムは、Web サイトの上部に表示される小さなテキストで、ユーザーが Web サイトのどこにいるかを示します。 ウェブサイトで読んでいる記事の座標を教えてくれる GPS システムのようなものだと考えてください。

pfo-wordpress-breadcrumb-examples

たとえば、製品レビュー サイトのブレッドクラムは次のようになります。

ホーム>レビュー>徹底的なレビュー> 記事

つまり、あなたはレビュー カテゴリ内の詳細なレビュー サブカテゴリの記事を読んでいます。

このブレッドクラム ラインのすべてのセクションはクリック可能で、ホームページに戻ることができます。 初めて Web サイトにアクセスするユーザーは、パンくずリストをナビゲーションの補助として使用できます。

Google などの検索エンジンでは、ブレッドクラムも検索結果の一部として表示されます。 ブレッドクラムは、ユーザーに Web サイトの構造のより広範で正確な概要を提供します。

Web サイトの設計方法に応じて、さまざまなブレッドクラムを使用できます。 次の 3 つの主要なタイプがあります。

  • 階層ベースのブレッドクラム:このタイプのブレッドクラムは、ホームページに戻るまでに必要なステップ数を示します。 上記の例を使用すると、階層ベースのブレッドクラムは次のようになります: Home > Review > Indepth Review > Article 。
  • 属性ベースのブレッドクラム:このタイプは、電子商取引およびビジネス サイトで非常に一般的です。 ブレッドクラム トレイルの各部分は、製品の属性 (ホーム>製品タイプ>サイズ> 色など) の結果です。
  • 履歴ベースのブレッドクラム:このタイプのブレッドクラムは、Web サイト内の移動を記録します。 つまり、ミニ履歴タブです。 通常は次のように配置されます:ホーム>前の記事>前の記事> 現在の記事。

WordPress にブレッドクラムを追加する方法

幸いなことに、ブレッドクラムを WordPress に追加するのは難しくありません。 そして、WordPress の他の種類の操作と同様に、この小さな「問題」を解決するためのさまざまなアプローチがあります。 これが最も簡単なものです。

#1 プラグインを使用する

WordPress には何でもプラグインがあり、ブレッドクラムの追加も例外ではありません。 Yoast SEO、Breadcrumb NavXT、Flexy Breadcrumb、WooCommerce Breadcrumbs など、Web サイトに美しく機能的なブレッドクラム トレイルを提供するために使用できるプラグインが多数あります。

pfo-add-breadcrumbs-to-wordpress-plugin

これらのプラグインはすべて非常に使いやすいです。 それらをインストールして、いくつかのボタンとプロンプトをクリックするだけで、サイトがカスタマイズされたブレッドクラム トレイルを取得できます。

通常、ブレッドクラムを好みに合わせてカスタマイズするオプションが提供されます。これには、ブレッドクラムの機能、形式、さらには外観の変更が含まれます。

ほとんどのユーザーには、このアプローチを取ることを強くお勧めします。 シンプル、迅速、そしてかなり安全です。

このアプローチの唯一の欠点は、これらのツールのほとんどを使用するにはサブスクリプションを支払う必要があることです。 Yoast SEO はその一例です。 このツールの年間サブスクリプションは 89 ドルです。

#2 パンくずリストをコーディングする

高価なプラグインにお金をかけたくない場合は、ブレッドクラム トレイルをコーディングすることをお勧めします。

このアプローチは、上級ユーザーにのみお勧めします。 まず、WordPress でコードを追加して実行する方法を知る必要があります。

WordPress のコア コンポーネントをナビゲートして変更する能力に自信がない場合は、代わりにプラグイン メソッドを使用してください。 これであなたのウェブサイトを壊すだけの価値はありません.

独自のブレッドクラムをコーディングすることで、ブレッドクラムをニーズに合わせて柔軟に調整できます。 そして最も重要なことは、コードに対して何も支払う必要がないことです。

フレーミングを作る

パンくずリストを作成するには、PHP 関数を作成する必要があります。 コードの単純なフレームを作成することから始めます。 WordPress サイトの他のコードやコンポーネントと競合しないように、コードのフレーミングには一意の名前を付ける必要があります。

 関数 my_breadcrumbs() {
/* コードはここにあります */
}

ブレッドクラムのすべてのコードは、中括弧内に配置されます。

ルールを追加する

ここで、フレーミングにいくつかのルールを追加し始めます。

 /* 必要に応じて変更します */
$show_on_homepage = 0;
$show_current = 1;
$区切り文字 = '»';
$home_url = 'ホーム';
$before_wrap = '<span class="current">';
$after_wrap = '</span>';

/* ここは何も変更しないでください */
グローバル $post;
$home_url = get_bloginfo( 'url' );

それ以外の場合に使用

3 番目のステップは、コードに「if else」ステートメントを追加することです。 このコンポーネントは、ユーザーが現在ホームページにいるかどうかを WordPress が判断するのに役立ちます。 ホームページにある場合、パンくずリストは表示されません。

 /* ホームページをチェック */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* ブレッドクラムを表示します */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';
$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* ブレッドクラムの作成*/
$breadcrumbs .= '</ol>';
$breadcrumbs をエコーし​​ます。

header.php ファイルに挿入する

ブレッドクラム トレイルのコーディングが完了したら、最後のステップはそれを WordPress のメインのheader.phpファイルに追加することです。 WordPress 管理パネルにログインし、[外観] > [テーマ エディター] に移動すると、それを見つけることができます。

上記の関数は、ファイルの最後に追加する必要があります。 変更を保存してから、Web サイトでテストを実行します。

コード作業がうまくいっていれば、ブレッドクラムはホームページに表示されません。 ただし、小さいページをクリックすると、そのページがサイトの上部に表示され、正確な場所が表示されます。

パンくずリストを WordPress に簡単に追加！

ブレッドクラムは単純ですが、どの Web ページにも追加できる優れた機能です。 ユーザーがナビゲートするのに役立つだけでなく、サイトを新規参入者にとって非常に使いやすくするだけでなく、Web サイトは検索エンジンの結果ページでも目立つようになります。

パンくずリストを追加するだけでなく、ソーシャル メディア アイコンを追加することで、サイトをよりユーザー フレンドリーで SEO フレンドリーにすることができます。 理由を確認してください。

このガイドがお役に立てば幸いです。 他に質問がある場合は、下のコメント セクションからお問い合わせください。

最後に、より便利なチュートリアルについては、当社の Web サイトを購読することを忘れないでください。