Cocoonテーマのスライドインメニューのカスタマイズ方法

プロモーションを含みます

無料テーマで人気のCocoonですが、今回Cocoonテーマのカスタマイズを行ったので、その方法を紹介していきたいと思います。

そもそもCocoonでは、色々な部分が作り込まれていて、ほとんど自分でPHPなどをカスタマイズする必要なく、パラメータなどの設定をいじるだけで何でも出来てしまいます。しかし今回は、敢えてカスタマイズ出来ないスライドインメニューを強引にPHPを書き換えて自分好みに書き換えていきたいと思います。

今回の完成形は以下のような感じになるようにカスタマイズをしています。

　一番左（元メニュー）と真ん中（元検索）を改造

スライドインメニューとは？

先ずはスライドインメニューってどこ？ってところ何ですが、スマートフォンなどでサイトを見るときに出てくる追従してくる一番下のボタンメニューのことですね。

このボタンの設定は、Wordpressのダッシュボードで、Cocoon設定＞モバイルの部分で、「スライドインボタン」がデフォルトで設定されています。もしスライドインボタン自体が邪魔であれば、こちらを「ボタンを表示しない」など選択して削除することも出来ます。

しかし設定を確認しても、ボタンの内容まで選択するところが残念ながらありません。つまりこのスライドインボタンはデフォルトで「メニュー、ホーム、検索、トップ、サイドバー」の固定になっているわけなんですよね。

しかしCocoonもテーマがPHPで書かれていることは確かなので、書き換えることは可能なはずなので、今回この部分を改造してしまいましょう。

STEP 1 – mobile-menu-buttons.phpを修正する

先ずはPHPファイルをダウンロード

スライドインボタンを作成しているのは、mobile-menu-buttons.phpというファイルで管理されています。先ずこのファイルをダウンロードしましょう。

ファイルは以下のフォルダに格納されているので、適当なFTPソフトもしくは、レンタルサーバーのファイルマネージャーなどを使用します。

public_html/”サイトの名前”/wp-content/themes/cocoon-master/tmp

<?php //モバイル用のスライドインボタンメニューの表示
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;

if (is_mobile_button_layout_type_slide_in()): ?>

<div class="mobile-menu-buttons">
  <?php if (has_nav_menu( 'navi-header' )): ?>
    <!-- メニューボタン -->
    <div class="navi-menu-button menu-button">
      <input id="navi-menu-input" type="checkbox" class="display-none">
      <label id="navi-menu-open" class="menu-open menu-button-in" for="navi-menu-input">
        <span class="navi-menu-icon menu-icon"></span>
        <span class="navi-menu-caption menu-caption"><?php _e( 'メニュー', THEME_NAME ) ?></span>
      </label>
      <label class="display-none" id="navi-menu-close" for="navi-menu-input"></label>
      <div id="navi-menu-content" class="navi-menu-content menu-content">
        <label class="navi-menu-close-button menu-close-button" for="navi-menu-input"></label>
        <?php //ヘッダーナビ
        ob_start();
        wp_nav_menu(
          array (
            //カスタムメニュー名
            'theme_location' => 'navi-header',
            //ul 要素に適用するCSS クラス名
            'menu_class' => 'menu-drawer',
            //コンテナを表示しない
            'container' => false,
            //カスタムメニューを設定しない際に固定ページでメニューを作成しない
            'fallback_cb' => false,
          )
        );
        $wp_nav_menu = ob_get_clean();
        //ドロワーメニュー用のグローバルナビからIDを削除（IDの重複HTML5エラー対応）
        $wp_nav_menu = preg_replace('/ id="[^"]+?"/i', '', $wp_nav_menu);
        //_v($wp_nav_menu);
        echo $wp_nav_menu;
         ?>
        <!-- <label class="navi-menu-close-button menu-close-button" for="navi-menu-input"></label> -->
      </div>
    </div>
  <?php endif ?>


  <!-- ホームボタン -->
  <div class="home-menu-button menu-button">
    <a href="<?php echo home_url(); ?>" class="menu-button-in">
      <div class="home-menu-icon menu-icon"></div>
      <div class="home-menu-caption menu-caption"><?php _e( 'ホーム', THEME_NAME ) ?></div>
    </a>
  </div>

  <!-- 検索ボタン -->
  <?php if (!is_amp() || (is_amp() && is_ssl())): ?>
    <!-- 検索ボタン -->
    <div class="search-menu-button menu-button">
      <input id="search-menu-input" type="checkbox" class="display-none">
      <label id="search-menu-open" class="menu-open menu-button-in" for="search-menu-input">
        <span class="search-menu-icon menu-icon"></span>
        <span class="search-menu-caption menu-caption"><?php _e( '検索', THEME_NAME ) ?></span>
      </label>
      <label class="display-none" id="search-menu-close" for="search-menu-input"></label>
      <div id="search-menu-content" class="search-menu-content">
        <?php //検索フォーム
        get_template_part('searchform') ?>
      </div>
    </div>
  <?php endif ?>


  <?php
  $on = null;
  //AMP用のイベントを設定
  if (is_amp()) {
    $on = AMP_GO_TO_TOP_ON_CODE;
  }
   ?>
  <!-- トップボタン -->
  <div class="top-menu-button menu-button">
    <a class="go-to-top-common top-menu-a menu-button-in"<?php echo $on; ?>>
      <div class="top-menu-icon menu-icon"></div>
      <div class="top-menu-caption menu-caption"><?php _e( 'トップ', THEME_NAME ) ?></div>
    </a>
  </div>

  <?php if (is_active_sidebar( 'sidebar' ) || is_active_sidebar( 'sidebar-scroll' )): ?>
  <!-- サイドバーボタン -->
    <div class="sidebar-menu-button menu-button">
      <input id="sidebar-menu-input" type="checkbox" class="display-none">
      <label id="sidebar-menu-open" class="menu-open menu-button-in" for="sidebar-menu-input">
        <span class="sidebar-menu-icon menu-icon"></span>
        <span class="sidebar-menu-caption menu-caption"><?php _e( 'サイドバー', THEME_NAME ) ?></span>
      </label>
      <label class="display-none" id="sidebar-menu-close" for="sidebar-menu-input"></label>
      <div id="sidebar-menu-content" class="sidebar-menu-content menu-content">
        <label class="sidebar-menu-close-button menu-close-button" for="sidebar-menu-input"></label>
        <?php //サイドバー
        ob_start();
        get_template_part('sidebar');
        $sidebar = ob_get_clean();
        //ドロワーメニュー用のサイドバーからIDを削除（IDの重複HTML5エラー対応）
        $sidebar = preg_replace('/ id="([^"]+?)"/i', ' id="slide-in-$1"', $sidebar);
        $sidebar = preg_replace('/ for="([^"]+?)"/i', ' for="slide-in-$1"', $sidebar);
        echo $sidebar;
         ?>
        <!-- <label class="sidebar-menu-close-button menu-close-button" for="sidebar-menu-input"></label> -->
      </div>
    </div>
  <?php endif ?>
</div>

<?php endif ?>

コードの修正

ダウンロード出来たら、中身を確認してコードを修正していきましょう。中身はコメントを入れてくれているので、とてもわかりやすいですね。修正前にファイルは必ずバックアップしておきましょう。

今回は以下のようなメニューに仕上げていきます。

　一番左（元メニュー）と真ん中（元検索）を改造

改造する部分は2点、「メニューボタン」と「検索ボタン」ですね。どんな改造をするかと言えば、今回はシンプルにカスタムリンクを設定するだけのものにしています。

編集の元にしたのは「ホームボタン」のコードになります。修正後のコードは以下のような感じに仕上げています。href=”＊＊URL＊＊”部分と”お好みの言葉”部分は、表示される言葉とリンク先になるので、お好きなものに変えてください。

    <!-- メニューボタン -->
    <div class="navi-menu-button menu-button">
    <a href="＊＊URL1＊＊" class="menu-button-in">
      <div class="navi-menu-icon menu-icon"></div>
      <div class="navi-menu-caption menu-caption"><?php _e( 'お好みの言葉1', THEME_NAME ) ?></div>
    </a>
  </div>

  <!-- ホームボタン -->
  <div class="home-menu-button menu-button">
    <a href="<?php echo home_url(); ?>" class="menu-button-in">
      <div class="home-menu-icon menu-icon"></div>
      <div class="home-menu-caption menu-caption"><?php _e( 'ホーム', THEME_NAME ) ?></div>
    </a>
  </div>

  <!-- 検索ボタン -->
    <div class="search-menu-button menu-button">
    <a href="＊＊URL2＊＊" class="menu-button-in">
      <div class="search-menu-icon menu-icon"></div>
      <div class="search-menu-caption menu-caption"><?php _e( 'お好みの言葉2', THEME_NAME ) ?></div>
    </a>
  </div>
  
  <!-- トップボタン -->
  <div class="top-menu-button menu-button">
    <a class="go-to-top-common top-menu-a menu-button-in"<?php echo $on; ?>>
      <div class="top-menu-icon menu-icon"></div>
      <div class="top-menu-caption menu-caption"><?php _e( 'トップ', THEME_NAME ) ?></div>
    </a>
  </div>

修正が完了したら、PCに保存しているファイルに名前を変えずに保存しておきましょう。くれぐれもサーバのファイルを上書きしないようにしてください。

Cocoonの子テーマに改造したファイルをアップロードする

ファイルが出来たらこれを早速アップロードしていきましょう。しかしこれをマスターにアップロードしてしまうと、マスターのアップデートの度に消えてしまいますし、万が一書き方が間違っていたりして、動かなくなるのは危険なので、今回はこれをCocoonの子テーマにアップロードしていきます。

アップロードするフォルダは以下になります。

public_html/biglobe/wp-content/themes/cocoon-child-master/tmp

~/tmpフォルダはデフォルトでは存在しないので、新しく作成しておきましょう。適当なFTPソフトや、ファイルマネージャーを使ってアップロード出来たらここでの作業は完了です。

これで、スライドボタンのリンクがカスタマイズ出来ました。しかしこのままだと、アイコンが元のままになっているので、ここも改造してしまいましょう。

STEP 2 – 追加 CSSを修正する

アイコンの改造は、CSSで行います。子テーマのstyle.cssに書き込んでも良いですし、ダッシュボード画面で、外観＞カスタマイズ＞追加CSSで記述してもどちらでも大丈夫です。使いやすい方を選んで下さい。

Fontawesomeでアイコンを選ぶ

スライドボタンのアイコンは、Fontawesomeという書式で規定されています。アイコンを変えたい場合は、Fontawesomeで好みのアイコンを選んで、CSSで読み込ませればいいわけですね。

まずはFontawesomeで好きなアイコンを選びます。

それぞれ検索部のアイコンと、メニュー部のアイコンを選んでおきます。そしてコード番号だけメモっておきましょう。

CSSコードを追加する

選んだアイコンをCSSのコードを追加していきましょう。今回はダッシュボードからCSSを追加する方法で行います。

外観＞カスタマイズ＞追加CSSで、以下のコードを追加記載してください。

/* スライドインメニュー　モバイル */
.search-menu-icon::before { content: '/*****'; } 

.navi-menu-icon::before { content: '/*****'; }

*****部分は、Fontawesomeで選んだアイコンのコード番号(例：/f06b)に差し替えてください。それぞれ検索部のアイコンと、メニュー部のアイコンを選んだものに変えておきます。

全て記載出来たら公開をクリック。

完成

これで完成となります。サイトを確認してみて、フォント崩れや、位置が合っていることが確認できれば、完成になります。

もしフォント崩れなどが、あれば、phpの記載が間違っていたり、余計なコメントが入っている可能性があるので、そちらを修正してください。

まとめ

今回は、人気無料テーマCocoonのスライドインボタンのカスタマイズの方法を紹介しました。phpファイルって難しそうに感じるかもしれませんが、やってしまえばそんなに難しくないです。

ただ、phpファイルはミスるとサイトが大変なことになることもあり得ますので、バックアップを取るなどして、慎重にやるようにしてくださいね。

2019年5月のver.1.7.8からCocoonでフッターモバイルボタン（スライドイン）のカスタマイズ機能が有効化されましたので、以下のやり方でもっと簡単にカスタマイズできるようになりました。

フッターモバイルボタンの設定方法

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @digiline_ Follow Me

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

Taka

AI業務自動化エンジニア / IoTコンサルタント / ガジェットブロガー

AIとIoTの技術を組み合わせ、スマートホーム構築・業務自動化・ガジェット活用を中心に情報発信と技術支援を行っています。
最新デバイスの検証やレビューだけでなく、実際に生活に組み込み、効率的でストレスのない暮らしを実現するための具体的なノウハウを提供しています。

自宅を“テックハブ”として運用しながら、AIエージェント、IoTデバイス、クラウドサービスを連携させた実験的な取り組みも継続中。
技術の進化を生活に落とし込み、「明日から使えるスマートな暮らし」を読者のみなさんと一緒に作っていくことを目指しています。