WordPressでサイトを運営していると、ユーザーがサイト内でどのようなパスを辿ってきたかを示すパンくずリストは非常に便利な機能です。Cocoonテーマを利用している場合、パンくずリストの設置とカスタマイズが簡単に行えます。この記事では、Cocoonテーマでパンくずリストを設置し、カスタマイズする方法を初心者にもわかりやすく解説します。
パンくずリストの設置方法
まずは、Cocoonテーマでパンくずリストを設置する基本的な手順について説明します。
- WordPressのダッシュボードにログインします。
- 左側のメニューから「Cocoon設定」をクリックします。
- 「Cocoon設定」内にある「投稿」or「固定ページ」タブにパンくずの設定項目が存在します。
それぞれ別設定になっているので両方設定するようにしましょう。
パンくずリストを表示するためのオプションがいくつかありますので、必要に応じて設定を調整します。
- 設定が完了したら、「変更をまとめて保存」ボタンをクリックして変更を保存します。
パンくずリストのカスタマイズ
Cocoonテーマでは、パンくずリストの外観を簡単にカスタマイズすることが可能です。以下に、いくつかのカスタマイズ例を紹介します。
テキストの色変更
パンくずリスト内のテキスト色を変更するには、投稿画面の「カスタムCSS」セクションにCSSコードを追加、もしくはテーマの style.css に記述します。例えば、テキスト色を赤に変更するには以下のコードを使用します。
.breadcrumb , .breadcrumb a {
color: red;
}フォントサイズの調整
パンくずリストのフォントサイズを変更する場合も、同様に「カスタムCSS」セクションにCSSコードを追加、もしくはテーマの style.css に記述します。フォントサイズを大きくするには、例えば以下のようなコードを使用します。
.breadcrumb , .breadcrumb a {
font-size: 18px;
}パンくずリストのルートテキストの変更方法
パンくずリストのルートテキスト「ホーム」の個所をカスタマイズすることができます。
フィルターフックが設定できるので、そちらで設定します
投稿ページのフィルターフック「breadcrumbs_single_root_text」
固定ページのフィルターフック「breadcrumbs_page_root_text」
ルートテキストを設定する関数を作成して、両方のフィルターフックに設定します。
add_filter('breadcrumbs_single_root_text', 'breadcrumbs_root_text');
add_filter('breadcrumbs_page_root_text', 'breadcrumbs_root_text');
function breadcrumbs_root_text(){
return 'トップ';
}ルートテキストにサイト名を含めたい場合は以下のように設定をします
add_filter('breadcrumbs_single_root_text', 'breadcrumbs_root_text');
add_filter('breadcrumbs_page_root_text', 'breadcrumbs_root_text');
function breadcrumbs_root_text(){
return get_bloginfo( 'name' ) . ' HOME';
}まとめ
Cocoonテーマを使用することで、パンくずリストの設置とカスタマイズが非常に簡単になります。基本的な設定から、色やフォントサイズの変更、ルートテキストのカスタマイズまで、サイトのニーズに合わせてパンくずリストを最適化することができます。
