WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」バージョンアップ

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」バージョンアップ

Posted at February 12,2012 2:55 AM
Tag:[Plugin, WordPress, wp_list_folder]

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」をバージョンアップしました。

1.プラグインの機能

WordPressのサイドメニューで折りたたみができるようにします。

プラグイン適用前(Twenty Tenテーマ)
プラグイン適用前

プラグイン適用後の折りたたんだ状態
プラグイン適用後

2.プラグインの変更点

ページを移動したときに、メニューの折りたたみ状態を保持できない不具合を解消しました。以下解説です。

このプラグインはjQueryの「Listfolderプラグイン」を利用しているのですが、ページを移動したときに折りたたみ状態を保持するために、各メニュータイトルに次のようなid属性の設定が必要です(その値をクッキーに保持します)。

<dt class="sidetitle" id="hoge">Recent Entries</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

ただし、WordPressのウィジェットではこの設定を行うことが困難なようです。困難な理由は次のとおりです。

WordPressのウィジェットはwidgets_initフックでカスタマイズできるようになっています。下はTwentyElevenのfunctionc.phpにあるwidgets_initフックの実装です。

/**
 * Register our sidebars and widgetized areas. Also register the default Epherma widget.
 *
 * @since Twenty Eleven 1.0
 */
function twentyeleven_widgets_init() {
 
    register_widget( 'Twenty_Eleven_Ephemera_Widget' );
 
    register_sidebar( array(
        'name' => __( 'Main Sidebar', 'twentyeleven' ),
        'id' => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
    …中略…
}
add_action( 'widgets_init', 'twentyeleven_widgets_init' );

メニュータイトルに該当するのは赤色で示した「before_title」の部分ですが、ウィジェットごとに異なるid属性値を設定できないようです。wp-includes/widgets.phpにあるregister_sidebar()のデフォルト値(赤色部分)も次のようになっています。

function register_sidebar($args = array()) {
    global $wp_registered_sidebars;
 
    $i = count($wp_registered_sidebars) + 1;
 
    $defaults = array(
        'name' => sprintf(__('Sidebar %d'), $i ),
        'id' => "sidebar-$i",
        'description' => '',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => "</li>\n",
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => "</h2>\n",
    );
    …後略…

ただし、その手前にある「before_widget」にはid属性値が付与されるので、これを利用できるようにしました。

        'before_widget' => '<aside id="%1$s" class="widget %2$s">',

「before_title」にこの設定がある場合、ページ移動を行ったときに折りたたみ状態が保持されるようになります。

3.プラグインのダウンロード

wp_list_folderプラグインは以下のリンク先からダウンロードできます。

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)