【Cocoonカスタマイズ】サイドバーを表示／非表示を切り替える方法（1カラム⇔2カラム）

はじめに
完成イメージ
実装手順
さいごに

はじめに

以下をCocoonで実現します。

【SWELL】サイドバー表示切り替えボタンで1カラム（サイドバーなし）⇔2カラム（サイドバーあり）のレイアウトを変更してみた｜かんた🌊SWELLマニア

SWELLマニアの、かんた（@swell_mania）です。最近自分の運営しているブログに実装したカスタマイズについてのメモ書きです。「サイドバーが邪魔だな～」と感じるユーザー向けに、ボタンを押して1カラムに変更できるスクリプトを書いて...

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下の手順で実装します。

ラベル

PHPを追加

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

add_action('wp_footer', function () {
  if (!is_the_page_sidebar_visible()) {
    return;
  }

  ?>
  <button type="button" class="sidebar-toggle" aria-label="サイドバー切り替えボタン" title="サイドバー切り替えボタン">
    <i class="fas fa-cog" aria-hidden="true"></i>
  </button>

  <script>
  jQuery(function ($) {
    $('.sidebar-toggle').on('click', function () {
      $('body').toggleClass('no-sidebar');
    });
  });
  </script>
  <?php
});

ラベル

CSSを追加

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

.sidebar-toggle {
  align-items: center;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 100px;
  bottom: 110px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #333;
  cursor: pointer;
  display: grid;
  height: 50px;
  place-content: center;
  position: fixed;
  right: 30px;
  width: 50px;
  z-index: 999;
}

@media (width <= 1023px) {
  .sidebar-toggle {
    display: none;
  }
}

さいごに

今回紹介した方法を使えば、サイドバー表示切り替えボタンを手軽に実装できます。
このカスタマイズにより、訪問者はレイアウトを1カラムまたは2カラムに切り替えられ、コンテンツにより集中できるようになります。