WordPressで作ったサイトのサイドバーを動的に制御

表示の切り替えとカラム数の調整

WordPressでは、サイドバーに表示するウィジェットを管理画面で選択することが可能です。

外観 → ウィジェット

のページで表示したいウィジェットを選択することで、サイト全体で利用するウィジェットを設定することが出来る。

上の画像はtwentythirteenを選択中の画面になり、サイドバー(副ウィジェットエリア)にカレンダーを設定してあります。この状態であるカテゴリーに属する記事を表示する場合に、

サイドバーのカレンダーを削除し、シングルカラムのページにプログラムで制御

してみます。

通常、副ウィジェットエリアにウィジェットを配置した場合には、2カラム構成になりますが、sidebars_widgetsフィルターを使って、ウィジェットをコントロールすることで、

ウィジェットの表示のON/OFFだけでなく、カラム構成の切り替えも動的に制御することが可能

です。

sidebars_widgetsフィルターで解決

管理画面の

外観 → ウィジェット

で調整を行うと、データベースのwp_optionsテーブルの

sidebars_widgetsキー

の値が変更されます。このデータを利用して表示するウィジェットと場所を管理しています。そのため、update_option()を利用してsidebars_widgetsキーの値をカスタマイズすれば、動的にウィジェットの表示を制御することが可能です。

より良い方法として、WordPressのフィルターフックを利用してランタイム上でsidebarの情報を変更する方法があります。そのためのフィルターフックがsidebars_widgetsフィルターです。

add_filter('sidebars_widgets', 'disable_sidebar');

function disable_sidebar($widgets)
{
  if( is_single() )
  {
    echo "<pre>";
    var_dump($widgets);
    echo "</pre>";
  }

  return $widgets;
}

上のコードをfunctions.phpに追加して記事ページを閲覧し、$widgetsの内容を確認してみます。

array(3) {
  ["wp_inactive_widgets"]=>
  array(2) {
    [0]=>
    string(10) "calendar-4"
    [1]=>
    string(10) "calendar-3"
  }
  ["sidebar-1"]=>
  array(4) {
    [0]=>
    string(14) "recent-posts-2"
    [1]=>
    string(17) "recent-comments-2"
    [2]=>
    string(10) "archives-2"
    [3]=>
    string(12) "categories-2"
  }
  ["sidebar-2"]=>
  array(1) {
    [0]=>
    string(10) "calendar-5"
  }
}

twentythirteenのテーマを適用した環境で確認したところ、上のデータ構造が表示されました。サイドバーに属するウィジェットデータを確認することが出来ます。このデータ構造を調整することで、ページの構成をカスタマイズすることが可能です。

• wp_inactive_widgets → 使用停止中のウィジェット
• sidebar-1とsidebar-2 → twentythirteenのregister_sidebar()で登録済みのサイドバー

今回は、サイドバーの表示を切り替えるので、特定のカテゴリに属する記事を表示する場合のみ、sidebar-2に対応する値(配列)をunsetで削除します。

sidebars_widgetsフィルターを使えば、サイドバーに表示するウィジェットとページのカラムレイアウトをプログラミングでコントロールできるようになります。

使用例

特定のカテゴリに属する記事を表示した際にサイドバーに属するウィジェットを削除して、サイドバーを非表示にするコードです。

add_filter('sidebars_widgets', 'disable_sidebar');

function disable_sidebar($widgets)
{
  if( is_single() )
  {
    // カテゴリ情報の取得
    $cat = get_the_category(get_the_ID());
    // カテゴリスラッグがtechの場合
    if ( $cat[0]->slug == "tech" )
    {
      // sidebar-2のウィジェットを削除
      unset($widgets['sidebar-2']);
    }
  }
  
  return $widgets;
}

sidebars_widgetsフィルターフックを利用して、データベースの値を変更することなく、WordPressのサイドバー情報に変更(追加・削除)を加えることが出来ます。