カスタマイズ容易なパンくずナビ/WPプラグイン「Prime Strategy Bread Crumb」

stara


WordPressプラグイン「Prime Strategy Bread Crumb」

便利なパンくずナビをワードプレスで設置できるプラグイン。

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

これは、ワードプレスの参考書を読んでいた時に知ったプラグインです。非常にシンプルで使い易いですね。制作者様ありがとうございます。

パラメータでカスタマイズしやすいパンくずナビをプラグインにしてみた

上記サイトから読み解くと、この手の有名プラグインの「Breadcrumb NavXT」に対抗?したようです。

ポイントは、デザインなどはあえて設定しない点でしょうか? 吐き出されたソースを見て各々がデザインできるのです。

ある程度CSSなど分かる人は、こっちの方が便利かもしれません。

設置は簡単、インストール後に下記の関数を表示したい場所に貼り付けます。

(フロントページでは出力させず、このパンくずナビがある時に出力)

<?php
if(!is_front_page()&&function_exists('bread_crumb')):
bread_crumb('navi_element=nav&elm_id=bread-crumb');
endif;
?>

すると、余計なデザインもなく、こんな感じで出力される。

<nav class="bread_crumb" id="bread-crumb">
<ul>
<li class="level-1 top"><a href="http://www.example.com/">Home</a></li>
<li class="level-2 sub"><a href="http://www.example.com/?post_type=seminar">Seminar</a></li>
<li class="level-3 sub"><a href="http://www.example.com/?area=tokyo">Tokyo</a></li>
<li class="level-4 sub tail current">WordBench Tokyo</li>
</ul>
</nav>

そこで、CSSでデザインすれば完成。

カスタマイズするCSSの参考例です。

#bread-crumb {
font-size: 90%;
padding: 1px 0 10px;
margin-left: 20px;
}

#bread-crumb ul {
margin: 0;
}

#bread-crumb ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}

#bread-crumb li {
float: left;
list-style-type: none;
}

#bread-crumb li.sub {
padding-left: 10px;
}

#bread-crumb li.sub:before {
letter-spacing: 10px;
content: "&gt;";
}

LINEで送る
Pocket

タグ:,

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す