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

2024 2/28

2024.02.28 2024.02.28

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

この記事を書いた人/サイト管理者

北海道在住 1児の父親です。せどり/ネット物販歴11年/法人7期目

アレコレ仕組化して自由気ままに暮らす物販プレイヤー

「小型軽量商品」「メーカー直仕入れ」「問屋仕入れ」「Amazonオリジナル商品販売」など。

「仕入れに悩まず、時間の自由を手に入れる物販」を構築

■詳しいプロフィールはコチラ >

公式LINEマガジンはコチラ>>

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

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

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

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

saku

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

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

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

Before

After

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

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

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

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

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

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

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

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

ゼロから分かるAmazonせどり入門講座！

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

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

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

saku

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

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>
    <!--フッターメニューカスタマイズここまで-->