WP SiteManagerを使ってパンくずナビを表示する

WordPressサイトでパンくずナビを出力するには、プラグインを利用するのが最も簡単です。
パンくずナビ出力機能を持ったプラグインはたくさんありますが、ここではこのサイトでも利用している「WP SiteManager」を使う方法を解説します。

【コンテンツ】

  1. プラグインをインストールして有効化する
  2. パンくずナビ表示部へ出力コードを記述する
  3. CSSを設定する

【記事執筆時の環境】
WordPress 3.8.1
WP SiteManager 1.0.12

プラグインをインストールして有効化する

WP SiteManagerを、プラグインのインストール画面から検索してインストールします。
インストールが済んだら、有効化してください。

WordPressの管理画面からインストールできない場合は、下記ページからプラグインをダウンロードしてください。

http://wordpress.org/plugins/wp-sitemanager/

パンくずナビ表示部へ出力コードを記述する

パンくずナビを表示するHTML文書中に、以下のコードを記述します。

パンくずナビはリストで出力されます。
ここではパラメーターで、リストのラッパー要素としてdivを指定しています。

指定できるパラメーターの詳細は、下記サイトを参照してください。

http://www.wp-sitemanager.com/usage/breadcrumb/

CSSを設定する

デフォルトでは、ラッパー要素のクラス名として、「bread_crumb」がつきます。
パラメーターで、IDをつけたりクラス名を変更することも可能です。

ラッパー要素のdivに、デフォルトのクラス名「bread_crumb」がついた時のCSS記述例を以下に示します。
※このサイトでの設定です。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ