2019.02.25スポンサーリンク無料テーマで人気のCocoonですが、今回Cocoonテーマのカスタマイズを行ったので、その方法を紹介していきたいと思います。そもそもCocoonでは、色々な部分が作り込まれていて、ほとんど自分でPHPなどをカスタマイズする必要なく、パラメータなどの設定をいじるだけで何でも出来てしまいます。今回は、敢えてカスタマイズ出来ないスライドインメニューを強引にPHPを書き換えて自分好みに書き換えていきたいと思います。今回の完成形は以下のような感じになるようにカスタマイズをしています。?先ずはスライドインメニューってどこ?ってところ何ですが、スマートフォンなどでサイトを見るときに出てくる追従してくる一番下のボタンメニューのことですね。このボタンの設定は、Wordpressのダッシュボードで、Cocoon設定>モバイルの部分で、「スライドインボタン」がデフォルトで設定されています。スライドインボタン自体が邪魔であれば、こちらを「ボタンを表示しない」など選択して削除することも出来ます。設定を確認しても、ボタンの内容まで選択するところが残念ながらありません。このスライドインボタンはデフォルトで「メニュー、ホーム、検索、トップ、サイドバー」の固定になっているわけなんですよね。CocoonもテーマがPHPで書かれていることは確かなので、書き換えることは可能なはずなので、今回この部分を改造してしまいましょう。mobile-menu-buttons.phpを修正する先ずはPHPファイルをダウンロードスライドインボタンを作成しているのは、mobile-menu-buttons.phpというファイルで管理されています。このファイルをダウンロードしましょう。ファイルは以下のフォルダに格納されているので、適当なFTPソフトもしくは、レンタルサーバーのファイルマネージャーなどを使用します。?>コードの修正ダウンロード出来たら、中身を確認してコードを修正していきましょう。中身はコメントを入れてくれているので、とてもわかりやすいですね。修正前にファイルは必ずバックアップしておきましょう。今回は以下のようなメニューに仕上げていきます。改造する部分は2点、「メニューボタン」と「検索ボタン」ですね。どんな改造をするかと言えば、今回はシンプルにカスタムリンクを設定するだけのものにしています。編集の元にしたのは「ホームボタン」のコードになります。修正後のコードは以下のような感じに仕上げています。href=”**URL**”部分と”お好みの言葉”部分は、表示される言葉とリンク先になるので、お好きなものに変えてください。?></div></a></div>修正が完了したら、PCに保存しているファイルに名前を変えずに保存しておきましょう。サーバのファイルを上書きしないようにしてください。Cocoonの子テーマに改造したファイルをアップロードするファイルが出来たらこれを早速アップロードしていきましょう。これをマスターにアップロードしてしまうと、マスターのアップデートの度に消えてしまいますし、万が一書き方が間違っていたりして、動かなくなるのは危険なので、今回はこれをCocoonの子テーマにアップロードしていきます。アップロードするフォルダは以下になります。public_html/biglobe/wp-content/themes/cocoon-child-master/tmp~/tmpフォルダはデフォルトでは存在しないので、新しく作成しておきましょう。適当なFTPソフトや、ファイルマネージャーを使ってアップロード出来たらここでの作業は完了です。これで、スライドボタンのリンクがカスタマイズ出来ました。このままだと、アイコンが元のままになっているので、ここも改造してしまいましょう。CSSを修正するアイコンの改造は、CSSで行います。子テーマのstyle.cssに書き込んでも良いですし、ダッシュボード画面で、外観>カスタマイズ>追加CSSで記述してもどちらでも大丈夫です。使いやすい方を選んで下さい。Fontawesomeでアイコンを選ぶスライドボタンのアイコンは、Fontawesomeという書式で規定されています。アイコンを変えたい場合は、Fontawesomeで好みのアイコンを選んで、CSSで読み込ませればいいわけですね。Fontawesomeで好きなアイコンを選びます。それぞれ検索部のアイコンと、メニュー部のアイコンを選んでおきます。コード番号だけメモっておきましょう。CSSコードを追加する選んだアイコンをCSSのコードを追加していきましょう。今回はダッシュボードからCSSを追加する方法で行います。外観>カスタマイズ>追加CSSで、以下のコードを追加記載してください。}*****部分は、Fontawesomeで選んだアイコンのコード番号(例:/f06b)に差し替えてください。それぞれ検索部のアイコンと、メニュー部のアイコンを選んだものに変えておきます。全て記載出来たら公開をクリック。完成これで完成となります。サイトを確認してみて、フォント崩れや、位置が合っていることが確認できれば、完成になります。フォント崩れなどが、あれば、phpの記載が間違っていたり、余計なコメントが入っている可能性があるので、そちらを修正してください。まとめ今回は、人気無料テーマCocoonのスライドインボタンのカスタマイズの方法を紹介しました。phpファイルって難しそうに感じるかもしれませんが、やってしまえばそんなに難しくないです。phpファイルはミスるとサイトが大変なことになることもあり得ますので、バックアップを取るなどして、慎重にやるようにしてくださいね。コピーTKをフォローする1TKデジモノ関連記事WordpressテクニックXeoryBaseテーマに乗り換え後に必要なテーマのカスタマイズ方法ブログのテーマを刷新しました。オートスリープを自作するどうもTK(@simplewasbest)です。格安SIMの仕組みと大手キャリアの通信料金について格安SIMって凄く流行ってますよね。2%キャッシュバック終了。2019年10月1日からKyashポイント1%付与に残念なニュースが出てしまいました。最近のスマホは年々高額化してしまって困りますよね。【!注意!】Appleサポートのなりすましメール:送信者アドレスを確認すれば一発で見破れる最近やたらと多いんですよ。Appleサポートを語った「なりすましメール」。Pring(プリン)の使い方。CARD(レックスカード):JACCSモール経由で1.25%+0.5%ポイント還元に!勿論Kyashとの相性もバツグン当サイトで度々オススメしているREXカードですが、今回はただでさえポイント還元率が業界最高峰にも関...スポンサーリンク【キャンペーン】OrigamiPayでLAWSONでLチキ1個無料。コメントをキャンセルメールアドレスが公開されることはありません。Proシリーズの正統進化モデルデュアル回線の本命:eSIM(イーシム)のメリットと日本での対応状況お問合せはこちらタイトルとURLをコピーしました。