先日、運用中のサイトに載せているメールアドレスからお問い合わせをいただきました。
内容は
件名：資料請求
本文：資料があればください
とのことでした。
問い合わせフォームあるのに・・・
入会案内のことは全てサイトにかいてあるのに・・・
そこで
- サイトも見たけど、紙ベースで資料が欲しい。
- スマホのハンバーガーアイコンの「メニュー」の存在に気づいていない。
のどちらかと思ったですよ。
そのサイトに訪れるユーザ、たぶんパソコンに疎い人が多いかと。。。なので「スマホメニューに気づかない」が大いにありうるー。
会員募集のチャンスを逃している可能性大！
ということで、ハンバーガーメニューをカスタマイズすることにしました。
作業前にバックアップを忘れずに。
アイコンの場所を探す
今回使用するブラウザはChromです。
WordPress初心者なもので、どうやって探すのが正解かわかりませんが、以下の手順でやっていきます。
- Chromのデベロッパーツールでアイコンのクラス名を調べる
- grepコマンドで、どのファイルに書いてあるかを調べる
Chromeのデーベロッパーツールでアイコンのクラス名を調べる
以下はサンプルサイト。
パソコンのブラウザから対象サイトを表示し、画面の適当なところで右クリック。
「検証」を選択します。
Chomeのデベロッパーツールが起動します。
このままじゃ見ずらいので、レイアウトを変更します。
図にある赤枠をクリック。
すでにハンバーガアイコンが表示されていますが、とりあえずスマホサイズにしたいので赤枠で囲ったToggle Device Toolbarをクリック。
画面がスマホサイズになりました。
ElementsタブにあるDOMツリーにマウスオーバーすると、それに対応したエレメントが反転します。
ハンバーガーアイコンが反転するまで、マウスでツリーを走査。
ありました。
<i class="fa fa-bars"></i>
Font Awesome のアイコンじゃ。
grepコマンドでどのPHPファイルが該当するか調べる
Afiinger4がローカル環境に展開されていることが前提です。
今回はMacなので、ターミナルを起動。
Windowsでgrepする時は、サクラエディタをよく使ってます。
MacBook-Pro:~ elink$ cd /Users/elink/Desktop/affinger4 MacBook-Pro:affinger4 elink$
ターミナルにcdコマンドを入力、Afinnger4のディレクトリに移動します。
以下のgrepコマンドを入力。
grep '<i class="fa fa-bars"></i>' *
MacBook-Pro:affinger4 elink$ grep '<i class="fa fa-bars"></i>' * grep: css: Is a directory grep: images: Is a directory grep: js: Is a directory st-accordion-menu.php: <p><span class="op"><i class="fa fa-bars"></i></span></p> st-kanri.php: <li><a href="#header-menu"><i class="fa fa-bars"></i>メニュー設定</a></li> st-kanri.php:<h3 id="header-menu" class="h3tai"><i class="fa fa-bars"></i>メニュー設定</h3> grep: vendor: Is a directory MacBook-Pro:affinger4 elink$
以下のファイルに書いてあるようですね。たくさん出てこなくて良かった。
st-accordion-menu.php
st-kanri.php
stはSTINGERですかね？
st-kanri.phpはファイル名からして管理系のファイルっぽいです。
スマホメニューはアコーディオンだし st-accordion-menu.phpがそれっぽい。
st-accordion-menu.phpファイルをカスタマイズ
FTPソフトでサーバにログイン。
/ホームディレクトリ/サイト/public_html/wp-content/themes/affinger4/
に移動して
st-accordion-menu.php
このファイルをローカルにコピーして編集します。
<p><span class="op"><i class="fa fa-bars"></i></span></p>
<i class="fa fa-bars"></i> の部分を
<p><span class="op">Menu</span></p>
Menu に書き換え。
書き換えたファイルを保存し、サーバにアップロードします。
自分は子テーマを使用しているので以下に置きます。
/ホームディレクトリ/サイト/public_html/wp-content/themes/affinger4/
ブラウザをリロードします。
メニューアイコンを文字に変更できました。
ちなみに上の表示はスタイルシートで変更してます。
スタイルシートでボタンをカスタマイズ
ボタンのデザインがそっけなかったので、軽くカスタマイズしました。
WordPress管理画面＞外観＞テーマの編集
編集するテーマをAFFINGER4に変更。
/*アコーディオンメニューボタン*/
#s-navi dt.trigger .op {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
color: #333;
font-size:25px;
line-height:30px;
background:#ccc;
display:block;
float:right;
height:auto;
margin-top:-5px;
padding: 10px 10px 9px 10px;
max-width:20%;
box-sizing:border-box;
}
この部分をコピー。
編集するテーマをAFFINGER4 Childに変更。
スタイルシートにコピーしたコードを
/*media Queries タブレットサイズ（960px以下）
より上に貼り付けます。
このコメントより上に貼り付けないと反映されないです。
これでしばらくハマりました。
これでも画面が反映されない〜という人は、ブラウザのキャッシュ削除を試してみてください。
