![画像[1]-Elementorでパンくずナビゲーションを追加して最適化する方法 - Photon Flux|専門家のWordPress修理サービス、ワールドワイド、速いレスポンス](https://www.361sale.com/wp-content/uploads/2024/07/2024072604563751.png)
パン粉ナビゲーションは強力で、ウェブサイトのユーザーエクスペリエンスを大幅に向上させることができます。パンくずナビゲーションは、ユーザーがサイト内のどこにいて、どのように元の場所に戻るかを理解するのに役立つナビゲーションツールです。
ウェブサイトにパンくずナビゲーションを追加するのは比較的簡単で、プラグインを使用するかコーディングによって行うことができます。Elementorを使用すると、コーディングや追加のプラグインを必要とせずにパンくずナビゲーションを追加する機能が組み込まれているため、さらに簡単です。ユーザーフレンドリーなインターフェイスにより、ウェブサイトのデザインにパンくずナビゲーションを簡単にカスタマイズして配置することができます。
パン粉とは何ですか?
パンくずナビは、ユーザーがウェブサイトの構造を理解し、関連するコンテンツを見つけやすくするのに役立ちます。検索エンジンもパンくずナビゲーションを使用して、ウェブサイトの構造を理解しウェブサイトの検索エンジンランキングを向上させます。
Elementorのパンくずパスは通常、サイトのトップページへのリンクで始まり、現在のページの各親ページへのリンクを含みます。リンクは通常 ">「または/"文字を使用します。例えば、ユーザが "Example.com "というサイトの "Elementor Breadcrumbs "というページにアクセスした場合、パンくずパスは次のようになります:"ホーム > ブログ > Elementorのパンくず".
Elementorのパンくずは何に使うのですか?
![画像[2] - Elementorでパンくずナビゲーションを追加して最適化する方法 - フォトンゆらぎ|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応](https://www.361sale.com/wp-content/uploads/2024/05/2024050815134772.png)
Elementorのパンくずナビゲーションの目的は、検索エンジンがサイトの構造を理解するのを助けると同時に、ユーザーにサイト内の明確でわかりやすい経路を提供することです。ユーザーの視点から見ると、Elementorのパンくずはユーザーがサイトの構造を理解し、簡単に道を見つけられるようにします。
Microdataとは、ウェブサイトのHTMLに追加されるタグのセットで、サイトのコンテンツに関する追加情報を提供します。Elementorのパンくずは、サイト内の明確でわかりやすい経路を提供し、検索エンジンがサイトの構造を理解できるようにすることで、ウェブサイトのユーザーナビゲーションと検索エンジン最適化を改善することを目的としています。
パン粉の利点
パン粉には多くの利点があります:
1.ナビゲーションの改善
パンくずパスは、ユーザーにウェブサイトをナビゲートする明確で直感的な方法を提供します。ユーザーにサイトの階層構造を示し、前のページに戻りやすくします。
2.ユーザビリティの向上
パンくずパスは、ユーザーが今いるページのコンテキストを理解し、関連するコンテンツを見つけやすくします。これにより、サイト全体のユーザビリティが向上し、よりユーザーフレンドリーなサイトになります。
3.より良いSEO
パンくずパスは、検索エンジンにウェブサイトの構造に関するより多くの文脈情報を提供することで、検索エンジン最適化(SEO)を向上させることもできます。これは、検索エンジンがウェブサイトをより効果的にインデックスし、ランク付けするのに役立ちます。
4.アクセシビリティの向上
また、パンくずパスは、ウェブサイトのナビゲーションに明確で一貫したアプローチを提供することで、障害を持つユーザーのアクセシビリティを向上させることができます。これにより、すべてのユーザーにとって、Webサイトをより包括的なものにすることができます。
5.より良いユーザーエクスペリエンス
パンくずパスは、ユーザーがサイト内のどこにいて、どのように前のページに戻るかを理解できるようにすることで、より良いユーザーエクスペリエンスを提供します。これにより、ユーザーのエンゲージメントを高め、直帰率を減らすことができます。
6.より良いトラッキング
パンくずは、ウェブサイト上でのユーザーの旅を追跡するのにも役立ちます。ユーザーがどのようにサイトをナビゲートし、どのページが最も人気があるかを理解するのに役立ちます。この情報は、ウェブサイトのデザインと機能性を改善するために使用することができます。
ウェブサイトにElementorのパンくずを追加する方法
Elementor のパンくずをサイトに追加する方法はいくつかあります。パンくずウィジェットの組み込み、カスタムコーディング、またはプラグインの使用.
1.組み込みのパンくずウィジェットを使用します。
パンくずウィジェットはElementorの組み込み機能で、プラグインのProバージョンで利用できます。ここでは、組み込みのパンくずウィジェットを使ってElementorのパンくずを追加する手順を説明します:
- パンくずを追加したいページまたは投稿をElementorで開きます。: WordPressのダッシュボードに移動し、パンくずを追加したいページまたは投稿に移動します。Elementorで編集ボタンをクリックし、Elementorでページまたは投稿を開きます。
![画像[3] - Elementorでパンくずナビゲーションを追加して最適化する方法 - Photon Flux|専門家のWordPress修理サービス、ワールドワイド、速いレスポンス](https://www.361sale.com/wp-content/uploads/2024/07/2024072603263096.png)
- Elementorウィジェットパネルからパンくずウィジェットをページにドラッグ&ドロップします。: Elementorエディタで、画面左側のウィジェットパネルに移動します。を検索してください。パン粉"ウィジェットを表示したいページにドラッグ&ドロップしてください。
- ウィジェットを編集してカスタムパンくずの外観を設定します。パンくずウィジェットをページに追加した後、ウィジェットをクリックしてウィジェット設定を開いてください。ここでは、フォントサイズ、色、配置を変更して、パンくずリストの外観をカスタマイズできます。また、ホームページリンクとセパレータの表示/非表示も選択できます。
![画像[4] - Elementorでパンくずナビゲーションを追加して最適化する方法 - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応](https://www.361sale.com/wp-content/uploads/2024/07/2024072603280293.png)
- 変更の保存と公開パンくずの外観に満足したら、Elementorエディタの「保存」ボタンをクリックして変更を保存します。その後、"Publish "ボタンをクリックして変更をサイトに反映させます。
- 異なるページと投稿でパンくずをテストパンくずが正しく表示されているか確認するには、サイト内のさまざまなページや投稿に移動して、パンくずが正しく表示されていることを確認してください。
注:カスタムWordPressテーマを使用している場合、あなたのテーマサポートブレッドクラム機能がないと動作しません。
2.カスタムコードの使用
カスタムコーディングを使用してウェブサイトにElementorのパンくずを追加するのは少し高度ですが、より柔軟でカスタマイズ性の高いオプションを提供します。以下は、カスタムコーディングを使ってパンくずを追加するステップバイステップのガイドです:
- テーマのheader.phpファイルをコードエディターで開きます。.このファイルは通常、"wp-content/themes/あなたのテーマ名「カタログで
- header.phpファイルのパンくずを追加したい部分を見つけてください。.通常、メインコンテンツコンテナの前に配置されます。
- パンくずを表示するために、header.phpファイルに以下のコードを追加します。::
<code><?php if ( function_exists( 'elementor_the_breadcrumbs' ) ): ?> <div> <?php elementor_the_breadcrumbs(); ?> </div> <?php endif; ?><code><?php if ( function_exists( 'elementor_the_breadcrumbs' ) ): ?> <div> <?php elementor_the_breadcrumbs(); ?> </div> <?php endif; ?><code><?php if ( function_exists( 'elementor_the_breadcrumbs' ) ): ?> <div> <?php elementor_the_breadcrumbs(); ?> </div> <?php endif; ?>
このコードは、関数 "elementor_the_breadcrumbs "が存在するかどうかをチェックし、存在すれば、その関数をクラス"エレメンタ-パンくず「Div.のパンくず。
- パンくずスタイルの設定: CSSはテーマのstyle.cssファイルに追加できます。例えば、パンくずのフォントサイズと色を変更するには、以下のCSSを使用します:
<code>.elementor-breadcrumbs { font-size: 14px; color: #333; }.</code><code>.elementor-breadcrumbs { font-size: 14px; color: #333; }.</code>
.elementor-breadcrumbs { font-size: 14px; color: #333; }..elementor-breadcrumbs { font-size: 14px; color: #333; }..elementor-breadcrumbs { font-size: 14px; color: #333; }.
- 更新したheader.phpファイルを保存し、サイトにアップロードします!.
- 異なるページと投稿でパンくずをテストを使用して、正常に動作し、期待通りに表示されることを確認します。
重要なのは::
- この方法はすべてのテーマには適用されません.テーマファイルの編集に慣れていない場合は、変更を加える前にテーマの作者やウェブ開発者に相談するのが一番です。コーディングなどに詳しくない場合は、いつでもプレミアムWordPressテーマを提供しているサードパーティのウェブサイトを訪問することができ、WP Elementoテーマがお勧めです。
3.プラグインの使用
![画像[5] - Elementorでパンくずナビゲーションを追加し、最適化する方法 - Photon Flux|WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/uploads/2024/07/2024072206200276.png)
Elementor で構築されたウェブサイトにパンくずを追加するために使用できるプラグインがいくつかあります。人気のあるオプションをいくつか紹介します:
- パンくずナビXT: このプラグインはWordPressのパンくずプラグインの中で最も人気のあるプラグインの一つです。使いやすく、パンくずパスをカスタマイズするための様々な設定やオプションを提供しています。
- ヨーストSEO: このプラグインはSEOに役立つだけでなく、パンくず機能も備えています。追加コーディングなしで簡単にパンくずを追加することができます。
- パンくずリスト: このプラグインは、あなたのウェブサイトにパンくずを追加する簡単な方法を提供します。パンくずパスをカスタマイズするためのシンプルなインターフェイスを提供し、カスタム投稿タイプやタクソノミーをサポートします。
- 高度なパンくず: このプラグインは、あなたのウェブサイトにパンくずナビゲーションを追加するための強力なオプションです。パンくずナビゲーションのパスをカスタマイズする複数のオプションを提供し、カスタム投稿タイプやタクソノミーをサポートします。
- BestWebSoftによるパンくず: このプラグインは使いやすく、パンくずパスをカスタマイズするための様々な設定やオプションを提供します。また、カスタム投稿タイプやタクソノミーをサポートしています。
上記のプラグインはすべてElementorと互換性があり、WordPressページビルダーと簡単に統合できます。以下は ヨースト あなたのウェブサイトにパンくずを追加するプラグインの詳細な手順:
- Yoast SEO プラグインをインストールします。: Elementorでサイトにパンくずを追加する最初のステップは ヨーストSEO プラグインです。このプラグインはWordPressのSEOプラグインの中で最も人気があり、広く使われているプラグインの一つで、パンくず機能が組み込まれています。このプラグインをインストールするには、WordPressプラグインにアクセスしてください。新しいプラグインのインストールと検索 ヨーストSEO.クリック "今すぐインストール"ボタンをクリックし、インストールが完了するまでお待ちください。
![画像[6] - Elementorでパンくずナビゲーションを追加し、最適化する方法 - Photon Flux|WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/uploads/2024/07/2024072603353623.png)
- アクティベーションプラグインプラグインをインストールした後、WordPressのダッシュボードから"プラグイン"セクションをご覧ください。インストールされているプラグインの一覧からYoast SEOを見つけて、" "をクリックします。アクティブ化「ボタン
- プラグインの設定プラグインを有効化した後、Yoast SEOの設定ページを開き、「機能」タブに移動します。パンくず」オプションを探し、有効になっていることを確認します。
![画像[7] - Elementorでパンくずナビゲーションを追加して最適化する方法 - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応](https://www.361sale.com/wp-content/uploads/2024/07/2024072603360752.png)
- 新規ページまたは投稿の作成: Elementorを使ってパンくずナビゲーションをサイトに追加するには、新しいページまたは投稿を作成する必要があります。これを行うには、WordPressダッシュボードに移動し、ページまたは投稿セクションに移動します。をクリックします。新規追加"ボタンをクリックして、新しいページや投稿を作成してください。
![画像[8] - Elementorでパンくずナビゲーションを追加して最適化する方法 - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応](https://www.361sale.com/wp-content/uploads/2024/07/2024072603382773.png)
- パンくず要素の追加: 新しいページまたは投稿を作成した後、Elementorエディタに移動し、レイアウトに新しいセクションを追加します。セクションの設定で、""を追加します。パン粉"オプションを指定します。このオプションをクリックすると、パンくず要素がレイアウトに追加されます。
- カスタムのパンくず要素: パンくず要素は、ページや投稿へのパスを自動的に表示します。パンくず要素の外観は、フォント、色、配置を変更してカスタマイズできます。また、パンくずの中にホームページのリンクを表示したり、非表示にしたりするオプションもあります。
- ページや投稿の公開パンくず要素のカスタマイズが完了したら、変更を保存してページや投稿を公開します。パンくずがサイトに表示され、訪問者がサイトをナビゲートしやすくなります。
![画像[9] - Elementorでパンくずナビゲーションを追加して最適化する方法 - Photon Flux|専門家のWordPress修理サービス、ワールドワイド、速いレスポンス](https://www.361sale.com/wp-content/uploads/2024/07/2024072603380428.png)
- 他のページでもこの作業を繰り返します。サイトの他のページにもパンくずナビゲーションを追加したい場合は、各ページや投稿にこのプロセスを繰り返してください。サイト全体で一貫したルック&フィールを保証するために、各ページまたは投稿のパンくずナビゲーションの要素をカスタマイズしてください。
注意:他のプラグインを使用している場合は、手順が若干異なる場合があります。
はんけつをくだす
ElementorのパンくずとWordPressのElementorテーマは、ウェブサイトのナビゲーション、デザイン、SEOを改善する素晴らしい方法です。Elementorを使えば、ウェブサイトにパンくずを追加するのはシンプルで簡単な作業です。
![画像[10] - Elementorでパンくずナビゲーションを追加して最適化する方法 - Photon Flux|WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/uploads/2024/07/2024072409362459.jpg)
組み込みのパンくずウィジェットを使用することで、パンくずの外観を簡単にカスタマイズし、サイト上の任意の場所に表示することができます。パンくずを使用することで、検索エンジンがあなたのウェブサイトの構造を理解しやすくなり、より良いインデックスと検索順位の上昇につながります。
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttps://www.361sale.com/ja/14732
この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。
コメントなし