LINE登録で〝無料 Amazonせどりツール〟プレゼント中 ↓タップしてダウンロード↓

SWELLのスマホ固定フッターメニューでオリジナル画像アイコンを設定する方法【SWELL カスタマイズ】

プロフィール
サク

北海道札幌市在住の1児の父親です。「メーカー直仕入れ」「問屋仕入れ」「Amazonオリジナル商品販売」など。「仕入れに悩まず、時間の自由を手に入れる物販」を構築。6歳の息子とポケカで遊ぶ時間が一番幸せなイクメンです。

■詳しいプロフィールはコチラ >
■無料メルマガはコチラ >

※登録者限定で『セラーリサーチツール』を無料プレゼント中。

SWELLでは、サイトをスマホ表示した際に画面下部に固定表示される『スマホ固定フッターメニュー』を設定することができます。

通常は、WordPressの『外観⇒メニュー⇒新しいメニューを作成』で「固定フッター(SP)」にチェックを入れて保存でOK。

なんですが、SWELLのデフォルトでは設定できるアイコンが限定されてしまいます(IcoMoonで作成されたアイコンのみ)

サク

決められたアイコンしか選択できないのがチョットね…

決して悪くはないんですが、アイコンにオリジナル画像を使えると、もっと見栄えが良くなりそうですよね?

ということで、オリジナル画像を使えるようにカスタマイズした結果がコチラ。

Before

After

どうでしょう?アイコンを変えるだけで結構雰囲気変わると思いません?

『自己満足の世界でしょ!?』と言われてしまえばそれまでなんですが(笑)

せっかくSWELLという完成度の高いテーマに出会えたわけですし、ブロガーたるものできる限り細部までこだわってカスタマイズしなきゃいけん!!

ということで、この記事ではSWELLの固定フッターメニューのカスタマイズ方法を解説していきます。

『固定フッターメニューをもう少しオシャレにアレンジしたい♪』という方は、ぜひ参考にしてください。

※注意!/カスタマイズは自己責任で

固定フッターメニューのカスタマイズは、親テーマ→子テーマへのファイルをコピーや、既存CSSへの編集が必要だったりと、WordPressのカスタマイズに関する知識が必要となります(中級者以上向け)

私が実施した手順をそのまま記載してありますが、万が一サイトの表示が崩れたり、元に戻せなくなっても責任は負えませんので『カスタマイズは自己責任にて!』お願いいたします。※作業前に、必ずバックアップは取りましょう。

目次

手順① fix_menu.phpを親テーマ⇒子テーマへコピーする

今回のカスタマイズは『fix_menu.php』を編集する必要があります。

『fix_menu.php』は親テーマにしか存在しないため、FTPソフトを使って『親テーマ⇒子テーマ』へコピーしましょう。

サク

親テーマのファイル編集後にテーマのアップデートを行うと、ファイルが全て上書きされて、編集内容がキレイさっぱり消えてなくなることがあります。

WordPressのカスタマイズは『子テーマのファイルを編集する』のが基本です。

fix_menu.phpはファイル単体ではなく、partsフォルダごと子テーマへコピーしましょう。

  • コピー元フォルダ:/ドメイン名/public_html/wp-content/themes/swell/parts
  • コピー先フォルダ:/ドメイン名/public_html/wp-content/themes/swell_child

partsフォルダをダウンロードし、swell_childフォルダ配下にコピーできればOK。

『fix_menu.php』以外のファイルもコピーされますが、気にしなくてOKです。

またダウンロードできないファイルがあれば、スキップしても問題ありません。

手順② 固定フッターメニューを作成

次にスマホ用固定フッターメニューを作成します。※テスト用なので適当な名前でOK

STEP
『外観⇒メニュー』を選択
STEP
『新しいメニューを作成しましょう』をクリック。
STEP
適当なメニュー名を入力、固定フッター(SP)にチェックを入れ、メニューを保存。
STEP
メニュー作成後、適当な記事をメニューに追加する。

手順③ fix_menu.phpを編集する

次に『fix_menu.php』を編集します。

STEP
外観⇒テーマエディターを選択
STEP
SWELL CHILDを選び、選択をクリック
STEP
『fix_menu.php』を選択
STEP
下記内容をコピーして、赤線の箇所に貼り付け
    <!--フッターメニューカスタマイズここから-->
        <li class="menu-item menu_btn">
                    <a href="リンク先">
            <img src="アイコン画像リンク先" style="height:18px;">
            <span>アイコンメニュー文字</span>
            </a>
        </li>
                <li class="menu-item menu_btn">
                    <a href="リンク先">
            <img src="アイコン画像リンク先" style="height:20px;">
            <span>アイコンメニュー文字</span>
            </a>
        </li>
                <li class="menu-item menu_btn">
                    <a href="リンク先">
            <img src="アイコン画像リンク先" style="height:18px;">
            <span>アイコンメニュー文字</span>
            </a>
        </li>
                <li class="menu-item menu_btn">
                    <a href="リンク先">
            <img src="アイコン画像リンク先" style="height:18px;">
            <span>アイコンメニュー文字</span>
            </a>
        </li>
    <!--フッターメニューカスタマイズここまで-->
  • a href ⇒ リンク先URLを設定
  • img src ⇒ アイコン画像URLを設定
  • span ⇒ アイコン下に表示する文字列を設定
  • height ⇒ アイコン画像の高さを指定

追加したいメニューの数だけ記述を追記します。アイコン画像は事前にWordPressにアップしておき、その画像のリンクURLを記載すればOKです。

STEP
編集完了後、『ファイルを更新』をクリックして変更を反映させる

手順④ 固定フッターメニューの設定を行う(外観⇒カスタマイズ)

次に、作成した固定フッターメニューの設定を行います。

STEP
外観 ⇒ カスタマイズを選択
STEP
メニューを選択
STEP
『固定フッター(SP)』を選択
STEP
固定フッター(SP)にチェックを入れる
STEP
TOPに戻り、サイト全体設定を選択
STEP
下部固定ボタン・メニューを選択
STEP
メニュー開閉ボタンを表示するにチェックを入れる(最後に設定を保存することを忘れずに)

今回のカスタマイズは『メニュー開閉ボタンを表示する』にチェックを入れる事で、『fix_menu.phpに設定したボタンが表示される』ようになっています。

『メニュー開閉ボタンを表示する』のチェックを外すと、fix_menu.phpに設定したボタンが消えてしまうので注意してください。※常にチェックを入れた状態にしておけばOKです。

手順⑤ 追加CSSを編集する(不要なメニューを非表示にする)

現状では

  1. fix_menu.phpに設定したメニューと、
  2. 外観 ⇒ メニューで作成した固定フッター(SP)の

両方のメニューが表示されてしまっています。

②のメニューは必要ないので、追加CSSを編集し不要なメニューを非表示にしましょう。

STEP
外観 ⇒ カスタマイズを選択
STEP
追加CSSを選択
STEP
追加CSSに以下内容を張り付けて保存する

/フッターメニュー非表示/
#fix_bottom_menu .menu-item:nth-child(1){
display:none;
}

#fix_bottom_menu .menu-item:nth-child(2){
display:none;
}

↑上記内容を全て追加CSSに記載する必要はありません。固定フッターメニューのアイコンは左側から『1、2、3、4~』の順番となっているので、末尾の数字を非表示にしたいアイコンの数字に合わせて設定してください。

これですべての作業は完了です、お疲れ様でした!

まとめ

記事の内容をまとめながら改めて感じたんですが

『ホント、自己満足の世界ですよね(笑)』

カスタマイズといっても微々たる変更ですし、固定フッターメニューをキレイにしたからといって、アクセスが急激に増えるわけでもないんですが…

ただ、SWELLというテーマが本当に素晴らしくて(WordPressでブログを始めて7年?くらいになりますが、クオリティは間違いなくダントツ)

『ブログを書くのが楽しい!』と感じることができるテーマに出会えたのは初めての経験なので、これからも細部のカスタイマイズにもこだわって、楽しくブログを構築していこうと思います!

サク

もし『こんなカスタマイズあるよ!』というおススメがあれば、↓のコメント欄からシェアしていただけるとありがたいです。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる