WordPressTHE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約6分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。
MASAa.blog│パズドラ日記と製品レビューの記事を掲載するmasaaの元祖WordPressブログサイト
このMASAa.blogは、パズドラ好きmasaaのWordPressブログサイトです。パズル&ドラゴンズ(パズドラ)を始めスマホアプリについてやレビュー記事等を掲載していきます。

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

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

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

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

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

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

WordPressテーマ THE THOR(ザ・トール)での、「固定フッターエリア設定[スマホ専用]」の設定は、【共通エリア設定[THE]】→【固定フッターエリア設定[スマホ専用]】で行うことができます。

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

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

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

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

【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行目あたりの

<a href="<?php echo home_url() ?>"><i class="icon-home"></i>ホーム</a>

を編集します。

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

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

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

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

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

編集前の206行目あたりの

<label class="controllerFooter__link" for="controllerFooter-checkbox"><i class="icon-share2"></i>シェア</label>

を編集します。

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

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

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

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

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

編集前の224行目あたりの

<label class="controllerFooter__menuLabel" for="menuBtn-checkbox"><i class="icon-menu"></i>メニュー</label>

を編集します。

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

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

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

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

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

編集前の234行目あたりの

<a href="tel:<?php echo get_option('fit_conFooterSp_menu_tel'); ?>" ><i class="icon-phone"></i>電話</a>

を編集します。

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

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

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

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

footer.php アップロード

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

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

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

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

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

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

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

最後に

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント

  1. とらお より:

    こんにちわビギナーです。ビギナーですのでPHPファイルを触る事が少し怖くて超慎重に作業をして10分程度で完了致しました!ちなみにmasaさんブログで良くでてくる"php等のエディタソフト"は、私は"terapad"を使っていますよ~。確か窓の杜で無料で入手できますし初心者にはお勧めかと。

    • masaa masaa より:

      確かにPHPをミスるとサイトが全く表示できなくなるので注意が必要です。
      但し、バックアップさえ取っておけばそれを戻すことで修復可能です。
      terapad見ました!フリーのソフトウェアで気軽にエディターソフトを導入できるのが良いですね。
      それでは今後とも当サイトをご愛顧の程お願い致します(o_ _)o))