サイドバーを左右両方に表示する3カラムレイアウトに変更する方法

はじめに

以下をCocoonで実現します。

【SWELL】サイドバーを左右両方に表示する３カラムレイアウトにカスタマイズする方法｜かんた🌊SWELLマニア

今回はWordPressテーマSWELLのカスタマイズ。サイドバーを左右両方に表示する3カラムレイアウトを実装したメモ書きです。 まずはSWELLを３カラムにしたデモサイトです↓ 【SWELL】左右両方にサイドバーを表示した3カラムレイアウ...

note.com

通常のサイドバーと同じ幅で、左側に独自サイドバーを追加します（表1参照）。

独自サイドバーにウィジェットを配置しない場合、通常通り2カラム表示になります。

画面幅がコンテンツ幅より小さい場合、独自サイドバーを非表示にし、ウィジェットを通常のサイドバーの先頭に追加して、2カラム表示に切り替えます。

この記事では、このカスタマイズ方法について詳しく説明します。

完成イメージ

実装手順

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

// ウィジェットエリアを追加
add_action('widgets_init', function () {
  register_sidebar([
    'name'          => '左サイドバー',
    'id'            => 'left-sidebar',
    'description'   => '3カラム用（左サイドバー）に追加コンテンツを表示するウィジェットです。',
    'before_widget' => '<aside id="%1$s" class="widget widget-sidebar widget-sidebar-standard %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-sidebar-title widget-title">',
    'after_title'   => '</h3>',
  ]);
});


// テンプレート（コンテンツ上部）を変更
add_filter('cocoon_part__tmp/body-top', function ($content) {
  // 3カラムではない場合は処理対象外
  if (!is_active_sidebar('left-sidebar') || !is_active_sidebar('sidebar')) {
    return $content;
  }

  ob_start();
  ?>
  <div id="left-sidebar" class="left-sidebar sidebar nwa cf" role="complementary">
    <div class="left-sidebar__content">
      <?php dynamic_sidebar('left-sidebar'); ?>
    </div>
  </div>
  <?php
  $html = ob_get_clean();

  // メインコンテンツの前に置換
  $content = preg_replace('/(<main id="main")/', $html . '$1', $content);

  return $content;
});


/**
 * 全体幅の変更判定（親テーマ関数を上書き）
 *
 * @return bool true
 */
if (!function_exists('is_clumns_changed')):
function is_clumns_changed() {
  return true;
}
endif;


/**
 * サイト全体のコンテンツ幅を計算（親テーマ関数を上書き）
 *
 * @return int サイト全体のコンテンツ幅
 */
if (!function_exists('get_site_wrap_width')):
function get_site_wrap_width() {
  $sidebar_count = 1;

  // 3カラムの場合はサイドバーを設定
  if (is_active_sidebar('left-sidebar') && is_active_sidebar('sidebar')) {
    $sidebar_count = 2;
  }

  $main_sidebar_margin = is_numeric(get_main_sidebar_margin()) ? get_main_sidebar_margin() : 20;

  return get_main_column_width() +
         get_sidebar_width() * $sidebar_count +
         intval($main_sidebar_margin);
}
endif;


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  // 3カラムではない場合は処理対象外
  if (!is_active_sidebar('left-sidebar') || !is_active_sidebar('sidebar')) {
    return;
  }

  // コンテンツ幅を取得
  $wrap_width = get_site_wrap_width();

  // JSを生成
  ob_start();
  ?>
  jQuery(function ($) {
    const wrapWidth = <?= $wrap_width; ?>;
    const mql = window.matchMedia(`(max-width: ${wrapWidth - 1}px)`);

    /**
     * サイドバーの表示位置を変更
     *
     * @param {MediaQueryListEvent} e
     */
    function moveSidebarContent(e) {
      // 小画面の場合はサイドバーを変更
      if (e.matches) {
        $('#left-sidebar').css('display', 'none');
        $('.left-sidebar__content').prependTo('#sidebar');
      } else {
        // 大画面の場合はサイドバーを変更
        $('#left-sidebar').css('display', 'block');
        $('.left-sidebar__content').prependTo('#left-sidebar');
      }
    }

    moveSidebarContent(mql);

    // 画面幅の変更を監視
    mql.addEventListener('change', moveSidebarContent);
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、Cocoonを3カラムレイアウトに変更し、画面幅に応じてサイドバーを切り替えることができます。
レスポンシブ対応のデザインを簡単に実現するために、ぜひ試してみてください。