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

スポンサーリンク

コードの修正

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

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

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

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

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

修正が完了したら、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で、以下のコードを追加記載してください。

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

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

完成

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

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

まとめ

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

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

スポンサーリンク

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です