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