AFFINGER4

Affinger4 スマホ用ハンバーガーメニューのアイコンを変更する

先日、運用中のサイトに載せているメールアドレスからお問い合わせをいただきました。

内容は

件名:資料請求

本文:資料があればください

とのことでした。

問い合わせフォームあるのに・・・

入会案内のことは全てサイトにかいてあるのに・・・

そこで

  1. サイトも見たけど、紙ベースで資料が欲しい。
  2. スマホのハンバーガーアイコンの「メニュー」の存在に気づいていない。

のどちらかと思ったですよ。

そのサイトに訪れるユーザ、たぶんパソコンに疎い人が多いかと。。。なので「スマホメニューに気づかない」が大いにありうるー。

会員募集のチャンスを逃している可能性大!

ということで、ハンバーガーメニューをカスタマイズすることにしました。

作業前にバックアップを忘れずに。

アイコンの場所を探す

今回使用するブラウザはChromです。

WordPress初心者なもので、どうやって探すのが正解かわかりませんが、以下の手順でやっていきます。

  1. Chromのデベロッパーツールでアイコンのクラス名を調べる
  2. 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, "MS Pゴシック", 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以下)

より上に貼り付けます。

このコメントより上に貼り付けないと反映されないです。

これでしばらくハマりました。

これでも画面が反映されない〜という人は、ブラウザのキャッシュ削除を試してみてください。

 

-AFFINGER4

© 2021 Mikke's blog