サイドバーの目次だけ最初から開いた状態で表示する方法

はじめに

表1の設定を適用すると、本文上とウィジェットの目次は同じ動作になります。

そこで、サイドバーに配置した「目次」ウィジェットのみ、初期状態で展開し、本文上の目次は閉じたままにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  $('#sidebar .widget_toc .toc-checkbox').prop('checked', true);
  $('#sidebar-scroll .widget_toc .toc-checkbox').prop('checked', true);
});

参考：サイドバーの目次に表示切替機能を非表示

サイドバーに配置した「目次」ウィジェットには、目次の表示を切り替える機能を持たせず、常に展開された状態で表示されるようにします。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

:is(#sidebar, #sidebar-scroll) {
  .toc-title {
    display: none;
  }

  .toc-content {
    height: unset;
    opacity: 1;
    padding-top: 0.6em;
    visibility: unset;
  }
}

参考：任意のウィジェットエリアだけ設定値を変更する方法

サイドバーおよびスクロール追従サイドバーに配置した「目次」ウィジェットの設定値自体を変更します。

実装手順

以下のコードをfunctions.phpに追加します。

/**
 * ウィジェットエリアごとのフィルター設定を適用・解除
 *
 * @param string $index  ウィジェットエリアのID
 * @param bool $is_add trueの場合はフィルターを追加、falseの場合はフィルターを解除
 * @return void
 */
if (!function_exists('widget_area_dependent_filters')):
function widget_area_dependent_filters($index, $is_add = true) {
  $widget_filters = [
    'sidebar' => [
      'theme_mod_toc_content_visible' => '__return_true',
    ],
    'sidebar-scroll' => [
      'theme_mod_toc_content_visible' => '__return_true',
    ],
  ];

  if (empty($widget_filters[$index])) {
    return;
  }

  $action_func = $is_add ? 'add_filter' : 'remove_filter';

  foreach ($widget_filters[$index] as $filter_name => $callback) {
    $action_func($filter_name, $callback);
  }
}
endif;


// ウィジェットエリア出力直前に実行
add_action('dynamic_sidebar_before', 'widget_area_dependent_filters');


// ウィジェットエリア出力直後に実行
add_action('dynamic_sidebar_after', function ($index) {
  widget_area_dependent_filters($index, false);
});

さいごに

今回紹介した方法を使えば、サイドバーに設置した目次ウィジェットだけを常に展開表示にしたり、切り替え機能を残したまま初期状態を調整することができます。
用途に合わせて柔軟にカスタマイズしてみてください。