WordPressテンプレートのカスタマイズ(2)
June 5, 2009WordPress (ワードプレス) でサイトを作成したとき、ページナビゲーションのメニューの位置を変えたいと思ったことはありませんか。ブログ機能がメインであるなら、ページは「Home」や「About」に限られるかもしれません。しかし、ページの数がある程度以上のときには、これらページへのリンクをどこに置くかというのは結構重要だと思います。
このページメニューの位置は簡単に移動させることができます。やり方を知ってしまえば、「お気に入りのテンプレートが見つかったけど、ページメニューの位置が変えられればなぁ・・・」といったときに役立ちます。また、ページメニューを移動させることでページのデザインをコントロールする幅も広がると思います。ページメニューを置くパターンとしては2つあります。ひとつには、デフォルトのデザイン等で見られるように、サイドバー内に位置しメニューアイテムが縦に並ぶ、というものです。もうひとつは、ページのトップにページメニューがあり、メニューアイテムが横方向に並ぶというタイプです。
ページメニューの移動
ここでは、ページトップにあるページメニューをサイドバーに移動させる例で説明してみます。
1) まずワードプレスの管理画面の「Design」セクションで「Theme Editor」を選びます。それぞれのテンプレートは複数のファイルからできているので、その中から「Header (header.php)」を選び画面に表示させます。このファイルの中から、「wp_list_pages」という記述を探します。記述のパターンはいろいろとあって、例としては、以下のようなものがあります。
? <?php wp_list_pages(‘title_li=’); ?>
? <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>
? <?php wp_list_pages(‘sort_column=id&depth=1&title_li=’); ?>
このように、テンプレートによって ( ) の中の記述が若干異なりますが、ページメニューの移動に際しては気にする必要はありません。この点についは後述します。
ページトップからページメニューを取り去るには、「<?php wp_list_pages(‘title_li=’); ?>」という一行を消してしまいます。同時に、メモ帳などにこの一行をコピーしておきます。 この一行が、<li>・</li>やといったタグの中に位置している場合は、これらも一緒に消してしまいましょう。ファイルに変更を加えたら、ファイルを更新しておきます。
2) 次に、ワードプレスの管理画面からサイドバーのファイルを選びます。1つのサイドバーしかない場合はたいてい「Sidebar (sidebar.php)」というファイルですが、複数ある場合にはテンプレート作者によって「Sidebar1」・「Sidebar2」・「Sidebar-right」といった名前が使い分けられています。まずは、ページメニューを設置したい場所を探しましょう。ワードプレスのPHPファイルに慣れていないうちは、ファイル内のテキストがさっぱり分からないという印象を受けてしまうかもしれませんが、落ち着いてみてみると実際のページに反映されている文字列を見つけることができると思います。例えば、<h2>Archive</h2>や<h2>Blogroll</h2>、<h2>Meta</h2>といったものです。(この<h2>というタグはサイドバーの見出しをつけるときによく使われます。ちなみに、こうしたものを「アーカイブ」「リンク」「メタ」といった日本語に書き換えてしまってもOKです。
話がややそれてしまった感じがするかもしれませんが、ここが一番大事なところです。ページメニューをサイドバー内に移動させるためにはサイドバーの他のセクションがどのように書かれているかを確認することが大切です。たとえば、以下のような記述パターンがあったとします。
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</li>
ページメニューをこのアーカイブと同じように表示させるには、以下のように記述すればよいことになります。
<li><h2>ページ</h2>
<ul>
<?php wp_list_pages(‘title_li=’); ?>
</ul>
</li>
重要なのは「<?php wp_list_pages(‘title_li=’); ?>」という一行だけでなく他のタグも含めて1つのユニットとして扱い、これをページメニューを表示させたいポジションに書き入れるという点です。書き込んだら、ファイルの変更をします。
3) ページにアクセスすると、ページメニューがサイドバーに移動されているはずです。「<?php wp_list_pages(‘title_li=’); ?>」という一行を移動させること自体は簡単ですが、慣れないうちはページメニューが思ったように表示されないという経験をするかもしれません。この問題は、ページメニューを指定するPHPコマンドを囲むタグ構造の記述にかかわっています。テンプレートによっては、サイドバーの記述がややこしかったりするので、あまりに難しく感じる場合には他のテンプレートのサイドバーファイルも調べてみて、簡単そうなものから始めてみましょう。なお、ワードプレスのPHPファイルに変更を加える前にはファイル全体のバックアップをメモ帳などにしておくことをお薦めします。
ページメニューの位置は好みの問題です。ただ、一般論として、ページの数が多くなる場合はページメニューをサイドバーに置いたほうが無難だと思います。というのも、トップに並列したときにスペースがなくなり、デザインが崩れてしまうケースがあるからです。いっぽうで、ページの数が少ないときは、サイドバーにスペースを取るよりも、ページトップ(もしくはページ下部)に並列しておいたほうがサイトがすっきりするかもしれません。
注) ワードプレスでページメニューを表す記述は「<?php wp_list_pages(‘title_li=’); ?>」というものが基本です。ただ、テンプレートの作者によっては、()の中に追加の記述をします。上に示した例で言えば、「depth=1」あるいは「sort_column=menu_order」というもので、これらが「&」を挟んで併記されます。前者は、「サブページをメニューに表示しない」というもので、後者はページメニューの順序に関わります。()の中にはこれ以外にも追記でき、特定のページをメニューから外してしまうこともできます。とりあえず、ページメニューを移動させる分にはこうしたものを気にする必要はないので、プラグイン作者が書き入れたものをそのままコピー&ペーストすれば問題ありません。ページメニューの表示のさせ方の詳細はwp list pagesをご覧ください。(日本語のページへのリンクがページ上部にあります)
