MENU
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • モバイル&光回線
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
ガジェット&お得なサービス情報をお届けするブログメディア「デジライン」
DIGILINE (デジライン)
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • モバイル&光回線
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
DIGILINE (デジライン)
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • モバイル&光回線
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
  1. ホーム
  2. ライフ
  3. プログラミング
  4. Cocoonテーマのスライドインメニューのカスタマイズ方法

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

2022 11/23
プログラミング ブログ運営



無料テーマで人気の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をコピーしました!

コメント

コメントする コメントをキャンセル

人気記事
  • IKEA TRADRI(トロードフリ)のリモコン/センサーが反応しない!?電球がペアリングできないときの復旧方法
    ライフハック
  • iPhoneの電池の減りが異常に早いのでバッテリー交換しに行ったら断れた話。AppleCare+未加入の人は注意しよう!
    便利なサービス
  • セゾンカードの携行品保険ならスマホもパソコンも保証!月300円のお買い物安心プラン[Y]がコスパ最強!
    保険のこと
  • Apple Watch (アップルウォッチ)に延長保証「AppleCare+」はいらない
    保険のこと
  • iPhoneのフィールドテストモード。隠しコマンドを入れたらこうなるなんて!?【専門家が解説】
    ライフハック
新着記事
  • Windowsのバックアップ管理ソフトならMiniTool ShadowMaker|無料なのに多機能で定期バックアップに最適
    2023年5月18日
  • 【レビュー】SwitchBot ロボット掃除機K10+|椅子の間もスイスイと。業界最小級コンパクト!
    2023年5月17日
  • 【レビュー】PITAKA MagEZ Case 2 &MagEZ Charging Stand を2ヶ月がっつりと使ってみた
    2023年5月15日
  • 【レビュー】PITAKA MagEZ Slider 2|旧モデルから進化で死角無し!コンパクト&ハイスピード充電 4-in-1 チャージャー
    2023年4月29日
  • 【レビュー】Satechi USB4 マルチハブ 6-in-1|最大8K対応のマルチハブ!
    2023年4月28日
目次
DIGILINEオススメのサービス
TAKA
メディア監修
シニアモバイルシステムコンサルタント。エンジニア兼ガジェットブロガーをやっています。自宅をスマートホーム化させたり、デスク周りのガジェット、生活家電を中心にレビューしており、またお得で便利なサービスなども紹介しています。
レビュー依頼などはお問合せからお願いします。
新着記事
  • Windowsのバックアップ管理ソフトならMiniTool ShadowMaker|無料なのに多機能で定期バックアップに最適
  • 【レビュー】SwitchBot ロボット掃除機K10+|椅子の間もスイスイと。業界最小級コンパクト!
  • 【レビュー】PITAKA MagEZ Case 2 &MagEZ Charging Stand を2ヶ月がっつりと使ってみた
  • 【レビュー】PITAKA MagEZ Slider 2|旧モデルから進化で死角無し!コンパクト&ハイスピード充電 4-in-1 チャージャー
記事を探す
メーカーで探す
Aiseesoft Amazon Anker Apple BenQ(ベンキュー) BLUETTI Bose Broadlink Buffalo CANDY HOUSE(キャンディハウス) Coomooy DELL FlexiSpot(フレキシースポット) Garmin(ガーミン) GenHigh Google Hysure IKEA iRobot j5create LinkJapan Logicool MiniTool MOFT(モフト) Nature Philips PITAKA(ピタカ) PR QNAP Rakuten Satechi(サテチ) SwitchBot(スイッチボット) TP-Link(ティーピーリンク) Tranya Ulanzi VOLTME Zenosyne お得情報 まとめ
  • 運営者情報
  • 製品レビュー依頼
  • 特定商取引法に関する表記
  • 免責事項/プライバシーポリシー
  • お問合せ

© DIGILINE (デジライン)

目次