【THE THOR】固定フッターエリア設定[スマホ専用]のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

wp.masaa.net

MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト

wp.masaa.me

今回は、WordPressテーマ THE THOR（ザ・トール）での「固定フッターエリア設定[スマホ専用]」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）固定フッターエリア設定[スマホ専用]

WordPressテーマ THE THOR（ザ・トール）の「固定フッターエリア設定[スマホ専用]」は、スマートフォン画面一番下に4個の項目を設定することが可能です。

WordPressテーマ THE THOR（ザ・トール）の「固定フッターエリア設定[スマホ専用]」は、

• 項目1：ホームボタン or 自由設定リンクボタン
• 項目2：シェアボタン or 自由設定リンクボタン
• 項目3：メニューボタン or 自由設定リンクボタン
• 項目4：電話ボタン or 自由設定リンクボタン

の中で設定することができます。

ZMASAa.blogの「固定フッターエリア設定[スマホ専用]」は、次の様に設定しています。

• 項目1：ホームボタン
• 項目2：シェアボタン
• 項目3：メニューボタン
• 項目4：自由設定リンクボタン

WordPressテーマ THE THOR（ザ・トール）での「固定フッターエリア設定[スマホ専用]」のスタイルは、次の様になっています。

この「固定フッターエリア設定[スマホ専用]」の設定で制約されることは、

• 項目1：ホームボタン
• 項目2：シェアボタン
• 項目3：メニューボタン
• 項目4：電話ボタン

で設定した場合は、アイコン及びタイトルを変更することが出来ないことです。

なお、自由設定リンクボタンに設定した場合は、自由にアイコン及びタイトルを設定することが可能です。

そこで「固定フッターエリア設定[スマホ専用]」の各項目をそれぞれホームボタン・シェアボタン・メニューボタン・電話ボタンで設定したときに、アイコン及びタイトルを自由に決めることができるカスタマイズを行いたいと思います。

固定フッターエリア設定[スマホ専用]のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「固定フッターエリア設定[スマホ専用]」のカスタマイズを行います。

footer.php カスタマイズ内容

「ページネーション（ページ送り）」のカスタマイズ内容は、下記の通りです。

本当はスタイルシート(style-user.css)でカスタマイズしようと思ったのですが、カスタマイズ内容を確認すると直接PHPファイルをカスタマイズした方が簡単なので今回のカスタマイズではPHPファイルを触ることにします。

PHPファイルを触るとサイトが表示されなくなる可能性があるので注意が必要です。必ずカスタマイズするファイのバックアップを取ってカスタマイズを行ってください。

footer.php ダウンロード

親テーマフォルダ「the-thor」フォルダ内にあるファイル「footer.php」を、FTPソフトを使って一旦自分のパソコン内に保存します。

次にパソコン内に保存したファイル「footer.php」をエディタソフトで開きます。

footer.php 項目1ホームボタンのカスタマイズ

編集前の196行目あたりの

を編集します。

デフォルトのアイコン設定は「icon-home」なので、これを表示したい別のアイコンに設定します。

デフォルのタイトル設定は「ホーム」なので、これを表示したいタイトルに設定します。

アイコンについては自由設定リンクボタンの[アイコン一覧]で、好きなアイコンを探してください。

footer.php 項目2シェアボタンのカスタマイズ

編集前の206行目あたりの

を編集します。

デフォルトのアイコン設定は「icon-share2」なので、これを表示したい別のアイコンに設定します。

デフォルのタイトル設定は「シェア」なので、これを表示したいタイトルに設定します。

アイコンについては自由設定リンクボタンの[アイコン一覧]で、好きなアイコンを探してください。

footer.php 項目3メニューボタンのカスタマイズ

編集前の224行目あたりの

を編集します。

デフォルトのアイコン設定は「icon-menu」なので、これを表示したい別のアイコンに設定します。

デフォルのタイトル設定は「メニュー」なので、これを表示したいタイトルに設定します。

アイコンについては自由設定リンクボタンの[アイコン一覧]で、好きなアイコンを探してください。

footer.php 項目4電話ボタンのカスタマイズ

編集前の234行目あたりの

を編集します。

デフォルトのアイコン設定は「icon-phone」なので、これを表示したい別のアイコンに設定します。

デフォルのタイトル設定は「電話」なので、これを表示したいタイトルに設定します。

アイコンについては自由設定リンクボタンの[アイコン一覧]で、好きなアイコンを探してください。

footer.php アップロード

設定が終わったらファイル「footer.php」を保存します。

設定が終わってパソコン内に保存されているファイル「footer.php」を、サーバーに保存している子テーマフォルダ「the-thor-child」フォルダ内にFTPソフトを使ってアップロードします。

カスタマイズ後の固定固定フッターエリア設定[スマホ専用]

今回のカスタマイズによって、「固定フッターエリア設定[スマホ専用]」のスタイルは、テスト的に次の様にしてみました。

カスタマイズの設定内容は下記の通りです。

• ホームボタン：トップページ（アイコン：icon-table2）
• シェアボタン：問い合わせ（アイコン：icon-mail4）
• メニューボタンサブメニュー（アイコン：icon-table2）
• 電話ボタン：自由設定リンクボタンで変更なし

最後に

これでWordPressテーマ THE THOR（ザ・トール）の「固定フッターエリア設定[スマホ専用]」が更に自分の思い通りに設定できるようになりました。