2017/07/11

店舗サイトに役立つスマホ専用フッターバーの設置のやり方

 
アイチャッチの画像

こちらの記事より簡単に設置できるようになったのでワードプレステーマ「ELEPHANT」を使用されている方はこちらをみてください。

今回は店舗サイトで役立つスマホ専用のフッターバーの設置のやり方についてご説明していきます。

fontawesomeのアイコンが使えるワードプレステーマならこの方法で設置できると思います。

フッターバーというのはスマホでHPをみていると常に下のほうに表示されるあれです。

電話やお問い合わせや地図や料金などが設置されていて常に表示されているのでお客様を逃がしにくくなるとおもいます。

アイチャッチの画像

※テーマの編集は自己責任でお願いします。ホームページが表示されなくなったなど、何かあってもこちらは責任をおえません。

今回のカスタマイズは「テーマの編集」を行うため必ず子テーマで編集しましょう。

親テーマで編集してしまうと親テーマのバーションを更新してしまうとせっかくカスタマイズしてもなくなってしまいます。

それにテーマの編集が失敗したときにも親テーマに元のデータがあるのでサイトを復旧しやすいです。

子テーマのインストールについてはエレファントの公式サイトにあるのでそちらを参照してください。

まずは子テーマに「footer.php」を準備していきましょう。わかる方は下のカスタマイズまで飛ばしていただいても大丈夫です。

子テーマにまずfffttpなどのFTPソフトを使用するか、サーバーサイトのFTPをいじれるところにいってください。

ご自身のサイトのフォルダをクリックすると「public_html」のフォルダがあると思います。

public_htmlを開く

まずはそこを開きます。次に表示されたところにある「wp-content」のフォルダを開きます。

wp-contentを開く

次に「themes」のフォルダを開きます。

themesを開く

そうすると下記のようなエレファントのテーマがでてきます。「elephant」をまずは開きます。

elephantを開く

そこにある「footer.php」をダウンロードします。

footer.phpをダウンロードする

次にフォルダを一つ戻っていただいて「elephant」フォルダがあったところに戻りましょう。

「elephant」の下に子テーマの「elepant-child」があります。そちらを開きます

 

elephant-childを開く

子テーマを開いたところに先ほどダウンロードした「footer.php」をアップロードします。

footer.phpをアップロードする

これで「テーマの編集」準備ができました。

「テーマの編集」を編集する前にまずはCSSの設定をしてちゃいましょう。

「外観」→「CSS編集」をクリックします。

「外観」→「CSS編集」をクリックします

下記のコードをコピーして貼り付けてください。

すると下の写真のようになります。

コードが貼り付けられた様子

上のほうにある「保存して公開」をクリックいます。

これでCSSの設定は終わりました。

次は「テーマの編集」の説明をしていきます。

まずは「外観」の「テーマの編集」選びクリックします。そうしますと、下の写真のように右に「編集するテーマを選択」がありますので「elephant-child」になっていることを確認しましょう。子テーマを有効にしていれば初めから表示されていると思います。

もしなっていない場合は「外観」の「テーマ」を選び「elephant-child」が有効になっているか確認しましょう。

確認し終わりましたら下にあるテーマフッター(footer.php)をクリックします。

elephant-childのテーマフッターをクリック

下にずっとスクロールしていただくと「ページトップへ戻る」のすこし上に「/footer」があると思います。

/footerの場所の写真

「/footer」の上に下記のコードをコピーして貼り付けてください。間違って他のコードを消さないようにしましょう。間違って消すとホームページが表示されなくなることもあります。

貼り付けると下の写真のようになります。

コードが貼り付けられた写真

貼り付けしましたら

href=”#”の#の部分にご自身の電話番号やメールフォームへのリンクや料金ページのリンクを貼りましょう。

電話番号をいれる例

href=”#”→href=”tel:000-000-000″

ホームページのリンクを貼る例

href=”#”→href=”https://toypoo.info/customize-footer_bar/”

全部おわりましたら「ファイル更新」を押せば、スマホでみた場合にのみフッターバーが表示されるようになります。

以上でフッターバーを導入できました。

補足になりますが、ワードプレステーマ「ELEPHANT」をしようされている方は

フッターバーのアイコンの色は「外観」→「カスタマイズ」→「サイトカラー(色)」にいっていただいて

リンク色の色を変えていただければアイコンの色が変わりますのでご自身のサイトにあったお好きな色を選んでください。

 

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© 🐩プードル鍼灸整骨院🐩 , 2017 All Rights Reserved.