横浜の業務用ソフトウェア開発やPHPを使ったWEBシステム開発・ホームページ制作ならアイ・エヌ・ワークスにお任せください。

横浜のホームページ制作ページ
  • home
  • 会社概要
  • 制作実績
  • 価格
  • ダウンロード
  • ブログ
  • お問い合せ

ダウンロード

  • home
  • 横浜のホームページ制作・アイエヌワークス会社概要
  • 横浜のソフトウェア開発・アイエヌワークスの制作実績
  • 横浜のWebサイト制作・アイエヌワークスの価格
  • ダウンロード
  • 横浜のウェブ制作・アイエヌワークスのブログ
  • 横浜のWebシステム・アイエヌワークスへのお問い合せ

「Dynamic Page Menu プラグイン」について

WordPress用のプラグインです。
Windowsのエクスプローラ風の自動拡張、自動折りたたみのページ(Page)メニューを実現します。(あくまでエクスプローラ「風」です。全く同じ動作をするわけではありません。)

説明

WordPress を使って企業や個人のホームページを作成する例が増えているようです。
WordPressにはCMSツールとしての側面があり、「ページ(Page)」の作成はその基本になる機能です。

Pageは普通の投稿と違って、自動ではリンクが表示されませんので、サイドバー等にPageのメニューをつける必要があります。
このようなPageメニューは通常、WordPressに標準で付属するwp_list_pagesという関数を使って表示します。

ただ、Pageの数が増えて、階層も深くなると、ずらずらとメニューが表示されるのでかなり見難くなります。

wp_list_pages関数にはメニューの階層を「全て表示する」/「n階層まで表示する」等のオプションがあるのですが、Windowsエクスプローラのような「表示中の部分だけをツリー表示」というオプションがありません。(「child_of」という指定でツリーの一部を表示することはできるようですが、これも期待する動作とはちょっと違う感じです。)

というわけで、自分でプラグインとして自作してみました。
(同種のプラグインとはしては、「Fold Page Menus plug-in for WordPress」 など色々あるようですが、まあその中のひとつということで。)

表示は自分が属する親ページから第1階層のページまで、および自分の子ページの1階層分のみを表示し、他は第1階層のメニューのみを表示します。

第1階層ページ1■
 第2階層ページ1
  第3階層ページ1
  第3階層ページ2
   第4階層ページ1
   第4階層ページ2
   第4階層ページ3
  第3階層ページ3
 第2階層ページ2
 第2階層ページ3
第1階層ページ2■
 第2階層ページ1▲
  第3階層ページ1◎
  第3階層ページ2 ★
   第4階層ページ1▼
   第4階層ページ2▼
    第5階層ページ1
    第5階層ページ2
   第4階層ページ3▼
  第3階層ページ3◎
 第2階層ページ2
 第2階層ページ3
第1階層ページ3■
 第2階層ページ1
 第2階層ページ2
 第2階層ページ3

以下は必ず表示されます。
★ … 現在表示中のページ
■ … 第1階層(トップレベルメニュー)
▲ … 先祖ページ(親ページ、およびさらにその親ページとたどります)
▼ … 直下の子ページ(孫ページ以降は表示しません)

また、以下は引数オプションの「show_brother=1」を指定することで表示されるようになります。
◎ … 兄弟ページ(自分以外の、親ページの子ページ)

たとえば上記のような階層構造をしている場合で、現在の表示ページが★印のページを表示中だとすると、表示されるのは以下のようになります。

【表示結果】

第1階層ページ1
第1階層ページ2
 第2階層ページ1
  第3階層ページ2 
   第4階層ページ1
   第4階層ページ2
   第4階層ページ3
第1階層ページ3

インストール

1. zip を解凍し、フォルダごと /wp-content/plugins/ の中に入れる。

2. adminのプラグイン管理ページで Dynamic Page Menu を有効にする。

3. テーマの sidebar.php を以下を参考にして変更する。

テーマのサイドバー(sidebar.php)等で、メニューを表示したい部分にて wp_list_dynamic_pagemenu を呼び出すコードを挿入する。

※注意! widgetを直接修正する場合はこの修正(3)は必要ありません。
(→下記の「付録」を参照)

// sidebar.php の修正例

【修正前】

<div id="sidebar">
  <ul>
    <?php if ( !function_exists('dynamic_sidebar') ||
         !dynamic_sidebar() ) : ?>
	~ 略 ~
  </ul>
</div>

↓↓↓

【修正後】赤字のついた行を挿入する。

<div id="sidebar">
  <ul>
    <li>
      <h2>ページ</h2>
      <ul>
         <?php if ( function_exists('wp_list_dynamic_pagemenu'))
                  wp_list_dynamic_pagemenu(''); ?>
      </ul>
    </li>

    <?php if ( !function_exists('dynamic_sidebar') ||
                  !dynamic_sidebar() ) : ?>
          ~略 ~
  </ul>
</div>

オプションの説明

wp_list_dynamic_pagemenu関数は、以下の引数で表示を変更可能です。

[書式]
wp_list_dynamic_pagemenu('オプション名=値&オプション名2=値&…')
  • exclude=n,n,n (nは数字)

    メニュー表示から除外するページIDを指定します。
    デフォルト: 全て表示

  • depth=-1

    「depth=-1」を指定すると、インデントしません。
    デフォルト: インデントあり

  • moredesc=(隠れた子要素が有る場合のマーク)

    「moredesc=」を指定すると、隠れた子要素がある場合に(+)以外で表示します。
    (※文字はURLエンコードされた文字を指定する必要があります。)
    ‘moredesc=’ として空を指定すれば(+)マークは表示されません。
    デフォルト:「 (+)」

  • show_brother=1

    「show_brother=1」を指定すると、現在のページの兄弟ページ(同じ親ページをもつページ)を表示するようになります。
    デフォルト:「0」(表示しない)

例として、ページIDの2と3を非表示、インデントなし、隠れ子要素マークを「 [+]」にする場合は下記のように指定します。

wp_list_dynamic_pagemenu(
    'exclude=2,3&depth=-1&moredesc=+[%2b]');

CSSついて

本プラグインは、cssにおいて表示を細かく制御できるように、liタグに以下のようなクラス名を追加します。

current_page_child … 現在のページの子ページ
current_page_brother … 現在のページの兄弟ページ
current_page_parent … 現在のページの親ページ
current_page_ancestor … 現在表示中のページの先祖ページ
page_has_more_children … (表示されていない)子ページが存在するページ
page_level_(数字) … 階層レベル

(付録)widgetsを直接修正する場合

widgets.php の 392行目あたりを下記のように修正する。

【修正前】

$out = wp_list_pages( array('title_li' => '', 'echo' => 0, 'sort_column' => $sortby, 'exclude'
=> $exclude) );

↓↓↓

【修正後】

if ( function_exists('wp_list_dynamic_pagemenu')) {
  $out = wp_list_dynamic_pagemenu(
      array('title_li' => '', 'echo' => 0,
              'sort_column' => $sortby,
              'exclude' => $exclude) );
}
else {
  $out = wp_list_pages(
    array('title_li' => '', 'echo' => 0,
            'sort_column' => $sortby,
            'exclude' => $exclude) );
}

※widgetを直接修正する場合、WordPressをバージョンアップするたびに上書きされてしまいますので、そのたびに上記の修正を行う必要があります。なるべくならテーマの修正で対応するほうがよいでしょう。

ダウンロード

【ダウンロード】
Dynamic Page Menu version 1.02

【動作確認環境】
WordPress : ver. 2.5.1 / 2.6
PHP : ver. 4.4.4 / 5.1.6

【ソフトウェア種別】
フリーソフト

商用・個人利用含めてご自由にお使いください。
ご利用の際はぜひご一報いただけますと嬉しいです。
不具合などありましたらご連絡ください。