Navigation List Plugin NAVT (プラグイン) でメニューを分割
November 14, 2009
WordPressを利用して、ブログではないサイトを本格的に作る際に欠かせないのが、「Wordpress Navigation List Plugin NAVT」というプラグインです。ワードプレスはブログの作成という出発点から発展してきていているため、多くのページを管理するという機能についてはまだ発展途上です(2009年末現在)。例えば、WordPressとしばしば比較されるJoomlaは、ページ管理というCMS(コンテンツマネジメントシステム)の機能ではかなり上を行っていると言えるでしょう。
「Wordpress Navigation List Plugin NAVT」を使うと、デフォルトではやや物足りないワードプレスのCMS機能を簡単に拡張できます。ワードプレスのデフォルトではページメニューを分割することができないため、ワードプレスをベースにしたサイトではページの数に関わらず、ページメニューをサイドバーかページトップにまとめるのが普通だと思います。当サイトも、ページメニューをサイドバーにすべて収めているというパターンです。
これはこれで問題はないのですが、ページの数が増えてきた場合、もしくはページメニューをカテゴリー別に分けて異なる場所に配置したい場合などには、このプラグインを使う価値があります。たとえば、「About us」・「Sitemap」・「Link」などナビゲーションに関するものをページトップに小さく配置し、メインのコンテンツをサイドバーにまとめることなどができます。以前にご紹介した「PageMash」の、ページメニューの順番を入れ替えるという機能に加えて、ページ・ブログカテゴリーの自由な分割が可能になるので、デザインの自由度もグッとあがることでしょう。
* この「Navigation List Plugin NAVT」の設定がややこしいと思われる方は、プラグイン「Exclude Pages」もご覧ください。
使い方
 |
 |
 |
1) 「Wordpress Navigation List Plugin NAVT」を所定の位置にアップロードしてから、WordPress(ワードプレス)のコントロール画面から設定をします。初めての場合どこをどうしたらいいのか分かりにくいので、キャプチャーイメージを使って簡単に流れを見てみます。
1-a) これが「Navigation List Plugin NAVT」の管理画面です。画面の左、中央から下段にかけて、ページ・カテゴリのリストが示されています。
1-b) リストの中から好きなものをクリックすると画面の左、中段にアイテムが移動します。ここでは、「About」と「サイトマップ」をクリックしてみました。ここでは、この2つのアイテムをひとまとまりにしてページのどこかに配置するという例を説明します。
1-c) 画面左上の「group name」に好きな名前を打ち込みます。ここでの注意は、「半角英数を使用する」・「ブランクスペースを入れない」・「特殊記号を使わない」という点です。というのも、この「group name」をワードプレスのテンプレートに書き込む必要があるからです(後述)。ここでは、「site_navi」という名前を使ってみます。「create」をクリックで、画面右側に「site_navi」が現れます。
1-d) 上のb) の2つのアイテムを画面右の「site_navi」へドラッグ&ドロップします。
1-e) 「sitenavi」にある車輪のようなアイコン「group options」内でいくつかの設定ができます。細かく説明すると長くなってしまうので端折りますが、すこし不明なところがあってもいじくっているうちに分かってくるはずです。これでコントロール画面での設定は完了です。
2) 次に、設定したグループ(ここでは「sitenavi」)をワードプレスのテンプレートに埋め込む必要があります。
2-a) まずは使っているテンプレートのファイルからページメニューの箇所を探します。例えばサイドバーのPHPファイルなどに下のような記述が見つかるはずです。
<?php wp_list_pages(‘title_li=’ . __(‘Pages:’)); ?>
2-b) 上記のような「wp_list_pages」のコードを下のものに置き換えます。
<?php
if( function_exists('navt_getlist') ) {
navt_getlist('site_navi');
}
else {
wp_list_pages('title_li=<h2>Pages' );
}
?>
このコードを翻訳すると「[navt_getlist]というPHP機能がある場合はそれを読み込み、そうでない場合は[wp_list_pages]を表示する。」という感じになります。「else」以下の関連部分はお使いのテンプレートのもともとのコードをコピーしておけばよいでしょう。コードの「else」以降の関連箇所を消してしまってもプラグインは機能します。下は「else」を消した場合のコードです。
<?php
if( function_exists('navt_getlist') ) {
navt_getlist('site_navi');
}
?>
なお、ページのリストに<h2>で囲んだヘッダーを組み込む場合は下のようになります。
<?php
if( function_exists('navt_getlist') ) { ?>
<h2>Pages</h2><?php
navt_getlist('site_navi');
}
else {
wp_list_pages('title_li=<h2>Pages' );
}
?>
2-c) 上のコードの中で注目してほしいのが、「navt_getlist」に続くクォーテーションメークで囲まれた箇所です。上記の例’site_navi’となっているところに、コントロール画面で設定した「group name」を入れます。異なる「group name」を使い、サイト内の異なる場所にページ・ブログナビゲーションを好きなだけ追加していくことができます。
注意事項*) 上記コードの「else」以下について。「else」以下を記述しない場合、なんらかの理由でプラグインが機能しない場合にはなにも表示されなくなり、サイトのテンプレートが「breaking」することにもなりかねないので、プラグイン作者は「else」以下を含めておくこと薦めています。詳しくはプラグイン作者のページの説明をご覧ください(英語)。
「Wordpress Navigation List Plugin NAVT」のダウンロードページには、このページから、あるいは、WordPressの
Pluginのページや管理画面でのプラグインページで「Wordpress Navigation List Plugin NAVT」と検索することでアクセスできます。「このプラグインはちょっとややこしそう・・・」という方は、プラグイン「Exclude Pages」をご覧ください。また、ページの順序を簡単にコントロールできる「PageMash」もお薦めです。
EnglishTwist.com | 海外の優良サーバ比較 & ワードプレス:
January 7, 2010 at 11:38 am
[...] プラグイン「Navigation List Plugin NAVT」を使ってページナビゲーションを分割し、サイトの異なる場所に配置。 [...]
ishi:
February 9, 2011 at 8:42 pm
はじめまして、つい最近ワードプレスを始めたばかりの初心者ですが質問させてください。
当方、ヘッダーにメニューバーがないテーマ（テンプレート）を導入しており、ヘッダーにメニューを入れたかったので、プラグインのＮＡＶＴを入れてみました。
header.phpに追記してなんとか表示されたのですが、ヘッダーの右下に縦に並んだ状態で表示されてしまっております。
もともとスタイルシートに表示用の記述がないので、どういうふうに記述したらいいのか分かりません。 いろいろ試してみたのですが横並びにはなりませんでした。
大変恐れ入りますがスタイルシートへはどのように追記したらよろしいのでしょうか？
初歩的な質問で申し訳ございませんがよろしご教授ください。
Haru:
February 10, 2011 at 11:56 am
こんにちは。
メニューのコードをPHPファイルに書くだけでCSSを記述しないと、自動的に縦ならびに表記されてしまいます。メニューを横並びに変えたり、そのデザインを変更したりする際は、CSSに手を加えます。ishiさんのご質問はCSSについてですが、その説明の前に、現在WPには2通りのメニューの記述パターンがあることをご紹介しておきます。
古いバージョン：
<ul class="menu">
<?php wp_list_pages('title_li='); ?>
</ul>
この記述の仕方についてはwp list pagesに詳しい説明があります。(日本語のページへのリンクがページ上部にあります。)
新しいバージョン：
<div class="menu">
<?php wp_nav_menu(); ?>
</div>
この記述の仕方についてはwp list pagesに詳しい説明があります。(日本語のページへのリンクがページ上部にありますが、現時点では大雑把な翻訳しかないようです。)
最初の表記の仕方は「古い」といっても、なんら問題はありませんし(実際このサイトでもこの記述の仕方です)、ページメニューを表示させるという目的では、新・旧バージョンは同じです。日本語での解説もWPサイトで見られるので、とりあえず「古いバージョン」を使って以下で説明します。
1) 「wp_list_pages」のPHPコードを「ul」で囲い、その「class」に任意の名前をつけます。(ここでは「menu」です。)
2) これを「div」で囲い、その「class」に任意の名前をつけます。(ここでは「menubar」です。)
これを記述すると以下のようになります。
<div class="menubar">
<ul class="menu">
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
CSSには以下のような感じで記述します。
.menubar {
margin: 0px; (任意のマージン)
padding: 0px; (任意のパディング)
height: 50px; (メニューバーの任意の高さ)
background: url(images/xxx.gif) repeat-x; (背景の指定。ここでは横方向にリピート。)
}
.menu {
padding: 0px;
margin: 0px;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: inline;
float: left;
height: 50px;
}
.menu li a {
color: #FFF;
display: block;
border-right: 1px solid #222222;
padding:5px 10px;
}
「menubar」で囲わない場合は、「.menu」にメニューバーの高さ･幅の指定を入れ込むことで同様な結果が得られるはずです。CSSの書き方は多くありどれが正解ということはないと思いますので、色々といじってみてください。ishiさんのご質問の「横並び」とそのデザインについては、「list-style-type: none;」に加えて、高さ･横幅の指定をどこかで行うことで解決できるはずです。
なお、当サイトの記事WordPressテンプレートのカスタマイズ(2)が若干ですが関連した内容となっています。
ishi:
February 10, 2011 at 11:42 pm
早速のご返答ありがとうございます。上記のとおりに入れてページ表示をさせたところ
、真っ白のページになってしまいました。
いろいろ試して分かったのですが、
を
header.php追記するとＮＧになるようです。
また、新しいバージョンの
を追記したところ表示が出ました。しかしながら表示は以前のとおり右下に縦に並んだ状態での表示でした。
古いバージョンでやる場合はfunctions.phpにadd_theme_support( ‘menus’ );のような機能の追加をしなければいけないのでしょうか？
また、新しいバージョンでやる場合のＣＳＳは上記のものと違うのでしょうか？
初歩的な質問で大変恐縮ですがよろしくお願いいたします。
ishi:
February 10, 2011 at 11:51 pm
申し訳ございません。上記のコメントの いろいろ試したのですが、 の後は 古いバージョンの記述パターン（）で、 また、新しいバージョンのの後は（）です。
なぜか消えてしまいました。
改めてよろしくお願いいたします。
ishi:
February 10, 2011 at 11:56 pm
↑また消えてしまいました・・・。（）の中は教えていただきました古いバージョンの記述の・・・php wp_list_pages・・・ と、 新しいバージョンの記述の・・・php wp_nav_menu・・・です。
すみません。
Haru:
February 11, 2011 at 9:21 am
ishiさんこんにちは。
先日の私の返信を読み返していましたらいくつかのミスに気が付きましたので訂正させていただきます。まずは、新旧2つのコードですが、投稿の際に、<code></code>というタグで囲むのを忘れていたため、コード内のクウォーテーションマークとダブルクウォーテーションマークがそれぞれ「’」と「”」に表示されていました。(訂正済みです) コピペされた際にページが真っ白になってしまったのはこのせいです。(新しいバージョンでページが真っ白にならなかったのはPHPコードのラインにクウォーテーションマークが含まれていないからです。)
改めて新旧のコードを「menubar」で囲ったものを示しますと以下のようになります。
古いバージョン：
<div class="menubar">
<ul class="menu">
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
新しいバージョン：
<div class="menubar">
<div class="menu">
<?php wp_nav_menu(); ?>
</div>
</div>
もう一つのミスは、コードの方で「menu」というクラスを使っておきながら、CSSの例ではなぜか「.menulist」という記述をしていました。新しいバージョンでishiさんがメニューを変更されたときにCSSが反映されなかったのはこのためです。(それに加えてダブルクウォーテーションマークが正確ではなかったため、CSSのクラス名が一致していてもうまく行っていなかったと思いますが。。。すみません。。。) 先のCSSの例を手直ししましたのでコピペしていただければ、新旧どちらでもうまく行くはずです。function.phpに手を加える必要はありません。なお、WordPressサイトに横並びのメニューバーの作り方のページがあったので参考になさってください。(日本語の翻訳ページはないようです。)