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

IT・通信
スポンサーリンク

無料テーマで人気の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でフッターモバイルボタン(スライドイン)のカスタマイズ機能が有効化されましたので、以下のやり方でもっと簡単にカスタマイズできるようになりました。

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

IT・通信 ブログ運営
スポンサーリンク
スポンサーリンク
スポンサーリンク
当サイトの運用レンタルサーバ
【当サイト運用】コスパ最強のColorfulBox(カラフルボックス)のオススメポイント
1.超高速Webサーバー「LiteSpeed」と「HTTP/2」「QUIC」の高速化技術にも対応。
2.全プラン最新のCPU・大容量メモリ・ピュアSSDを採用。
3.最新のスペックと技術でWordPressをより高速・安全に表示!
4.東日本・西日本のリージョン選択が可能な “地域別”の自動バックアップを無料で搭載。
5.次世代セキュリティ「Imunify360」でマルウェア、改ざんを防止。
6.「かんたん操作のコンパネ/cPanel」を採用!
7.無料SSL(COMODO)に標準対応。
8.マルチドメイン・データベース・メールアドレス、すべて無制限。
9.ライブチャット・電話・メールに対応した安心のサポート体制。
10.ドメイン取得が可能!業界トップクラスの「バリュードメイン」を採用。

プロモーションコード(クーポンコード)
2021年3月1日(月)10:00 ~ 3月31日(水)17:00まで

サーバー初年度30%OFFクーポンプレゼント!
SV50AKR2EZ7G6E
スポンサーリンク
スポンサーリンク
\この記事が役に立ったらシェアしよう/
デジライン

Comments

スポンサーリンク
『小学生と親が楽しむ初めてのプログラミング』さくら舎・公式サイト
こちらの記事も読まれています
スポンサーリンク
スポンサーリンク

この記事を書いた人

モバイルシステムエキスパート。某大手IT企業でエンジニアをやりながら、モバイルIT系ブロガーをやっております。独学でプログラミング勉強してWEBアプリ作ったりしながら、日々の生活の中で面白そうな情報を記事にしています。レビュー依頼などはお問合せからお願いします。

\フォローする/