2019-02-10Cocoonで設置できるパンくずリストは「メインカラム手前・メインカラムトップ・メインカラムボトム・フッター手前」から1つ選ぶことができます。SEOの観点では1つあれば十分かと思いますが、訪問者さんへのナビとして上下に設置したい!なんて方へパンくずリストを複製して2つ設置出来るJavaScript(jQuery)の紹介です。この記事は、設置済みのパンくずリストと同じ物を複製して設置する方法になります。出力サンプルカスタマイズする投稿ページのみ複製する固定ページのみ複製する好きな位置に複製する(中級編)あとがきスポンサーリンク【コピペでOK】パンくずリストを上下に設置するJavaScript子テーマのjavascript.jsに以下のコードをコピペするだけです。ココ;で指定出来ます。「1:メインカラム手前、2:メインカラムトップ、3:メインカラムボトム、4:フッター手前」から選んで数字をお好みで書き換えて下さい。}})(jQuery);AMPページではJavaScriptが使えないため複製は追加されません。修正履歴(2019-03-02)ちょっとコードを短縮しました。}}目次に戻るおすすめ設定JavaScriptはページがすべて表示されてから実行されるので、複製追加したパンくずリストの表示が一瞬遅れます。そのためページ上部は表示の遅延が見える可能性が高いので、Cocoon設定のパンくずリストは上部(メインカラム手前/メインカラムトップ)に設定し、JavaScriptでは下部(メインカラムボトム/フッター手前)に設定するのがおすすめです。通常のパンくずリストの配置は「Cocoon設定>投稿&固定ページ」の画面「パンくずリスト設定>パンくずリストの配置」で設定できます。目次に戻る出力サンプル複製したパンくずリストはidがbreadcrumb-cloneになり、class名も複製する位置によって変更されます。中身のHTMLはそっくりそのまま複製されます。<!--中身は省略--></div>表示サンプルJavaScriptがオンになっていたらこのページのパンくずリストが複製されます。(このテキストの下に表示されます)また、このページの「メインカラムボトム」にも複製して追加しています。下部にスクロールして確認してみて下さい。わかりやすいように矢印をつけておきました。ちなみに、そもそもパンくずリストが存在しない場合は実行されません。目次に戻るカスタマイズする投稿ページのみ複製する次のように.breadcrumb-categoryを追加します。$('#breadcrumb.breadcrumb-category')固定ページのみ複製する次のように.breadcrumb-pageを追加します。$('#breadcrumb.breadcrumb-page')好きな位置に複製する(中級編)一応、ページ内の所定の位置以外に複製する事も可能です。表示崩れ等にも対応出来る方は参考にどうぞ!例えば、以下のようにすると'original'を追加して複製位置を変えたり出来ます。この場合$('#sidebar').after(複製したパンくずリスト);が設定されます。['breadcrumb-original','#sidebar','after']};目次に戻るあとがきテンプレートのカスタマイズやプラグインを使う等、色々方法はあると思いますが個人的には訪問者さんへのナビ目的に複数設置するならJavaScriptで十分でメンテナンスも簡単かなぁと思います。