WordPress | Yoast SEO テーマに「 パンくずリスト 」を挿入する方法

WordPress のプラグイン「 Yoast SEO 」でパンくずリスト機能をテーマに挿入して表示するには、使用している「 テーマ 」を編集する必要があります。「 パンくずリスト(ブレッドクラム)」を使用するテーマのテンプレートに次のコードをコピーしてください。

yoast seo パンくずリスト 挿入方法

Yoast SEO テーマに「 パンくずリスト 」を挿入する方法

Yoast SEO テーマに「 パンくずリスト 」を挿入する方法

「yoast seo パンくずリスト」のコードは、共通のテーマテンプレートの「 single.php 」や「 page.php 」ファイルで表示したい場所にコードを配置します。

初心者でも簡単にできる方法としては「 header.php 」のコードの最後にこのコードを貼り付けるだけです。

Template Files

<?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Template Files

<!--表示 CSS (スタイル)の :例-->
<style>
#breadcrumbs {
    text-align: -webkit-center;
    color: red;
}
</style>

パンくずリスト コード配置の例

「WordPress SEO by Yoast」プラグインをインストールしていない場合は、Yoast Seoをインストールしてください。「 Yoast Seo 」 のインストール 方法を確認して下さい。

「 パンくずリストの設定 」は、パンくずリストの設定 方法で確認してください

例:使用中のテーマが「 Twenty Seventeen 」の場合

テーマ「 Twenty Seventeen 」の投稿記事のページ

テーマ「 Twenty Seventeen 」の投稿記事のページ

WordPress 管理画面(ダッシュボード) > 外観 > テーマの編集 に移動します。

「 header.php 」の場合、テーマの編集 画面の右側でテンプレートの一覧が表示されます。そのリストのなかで テーマヘッダー (header.php) をクリックします。画面 編集領域に「 header.php 」のコードが表示されます。このコードの最終行に上記コードをコピー&ペーストしてください。

Twenty Seventeen: テーマヘッダー (header.php)

Twenty Seventeen: テーマヘッダー (header.php)

以下のスクリーンショットのように、表示されます。

テーマ「 Twenty Seventeen 」に Yoast SEO パンくずリスト を表示

テーマ「 Twenty Seventeen 」に Yoast SEO パンくずリスト を表示

<!--実際に挿入されたHTML-->
<p id="breadcrumbs">
<span xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://example.localhost:2020/" rel="v:url" property="v:title">Home</a> » 
<span class="breadcrumb_last">Hello world!</span></span>
</span>
</p>

yoast seo 関連記事・その他のリソース