WP SiteManagerを使ってパンくずナビを表示する
公開日：2014年2月4日
最終更新日：2014年7月13日
WordPressサイトでパンくずナビを出力するには、プラグインを利用するのが最も簡単です。
パンくずナビ出力機能を持ったプラグインはたくさんありますが、ここではこのサイトでも利用している「WP SiteManager」を使う方法を解説します。
【コンテンツ】
【記事執筆時の環境】
WordPress 3.8.1
WP SiteManager 1.0.12
プラグインをインストールして有効化する
WP SiteManagerを、プラグインのインストール画面から検索してインストールします。
インストールが済んだら、有効化してください。
WordPressの管理画面からインストールできない場合は、下記ページからプラグインをダウンロードしてください。
http://wordpress.org/plugins/wp-sitemanager/
パンくずナビ表示部へ出力コードを記述する
パンくずナビを表示するHTML文書中に、以下のコードを記述します。
|
1 2 3 4 5 |
<?php if (class_exists('WP_SiteManager_bread_crumb')): WP_SiteManager_bread_crumb::bread_crumb('navi_element=div'); endif; ?> |
パンくずナビはリストで出力されます。
ここではパラメーターで、リストのラッパー要素としてdivを指定しています。
指定できるパラメーターの詳細は、下記サイトを参照してください。
http://www.wp-sitemanager.com/usage/breadcrumb/
CSSを設定する
デフォルトでは、ラッパー要素のクラス名として、「bread_crumb」がつきます。
パラメーターで、IDをつけたりクラス名を変更することも可能です。
ラッパー要素のdivに、デフォルトのクラス名「bread_crumb」がついた時のCSS記述例を以下に示します。
※このサイトでの設定です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* Bread Crumb ======================================== */ div.bread_crumb > ul:after, div.bread_crumb > ul:before { content: ""; display: table; } div.bread_crumb > ul:after { clear: both; } div.bread_crumb ul { padding: 9px 0 0 15px; } div.bread_crumb ul li { float: left; font-size: 1.2em; } div.bread_crumb ul li.sub { padding-left: 10px; } div.bread_crumb ul li.sub:before { content: ">"; letter-spacing: 10px; color: #333; } |
スポンサーリンク
