【WordPress】モバイルページに固定フッターを付けて問い合わせしやすくする方法

こんにちは。独学WordpressユーザーのLeoです。

最近あまりWordpress系の話題を書いていませんでしたが、少し前にボクが取り組む新事業用のホームページを作って、そのページ上に題名の通り、「固定フッター」を装備したのでその話を紹介します。

ユーザビリティの確保
固定フッターの付け方
イコルバ！で加えた微調整
まとめ

ユーザビリティの確保

今回のカスタマイズは、例えばこのLEOLOGには不要かなと思うもので、例えばレストランや今回カスタマイズを施した「イコルバ！個別指導スクール」のような教室ごとのサイトに有効です。

実際、このカスタマイズをやろうと思った理由は、教室体験希望だったお母様が、「電話番号を見て、記憶してから電話アプリに行って、というのが面倒だった」とおっしゃった声に応えるものでした。

つまり、こちらも問い合わせに誘導しやすい、という効果はもちろんですが、ユーザー側（お客様側）が、使いやすいサイトにするためのカスタマイズということです。

固定フッターの付け方

今回のカスタマイズにあたり、以下のページを参考にしました（というかコピペしました）。

https://fugaeco.com/sp-fixed-under-menu/

本当にほとんどコピペなので、リンク先を読んでいただいた方がいいんじゃないかと思いますが、今回ボクの方では「Lightning」というテーマに実装したので、この条件にはまっている方はこちらの情報も有用かもしれません。

仕上がり

仕上がりは今の所こんな感じです。一番下の2つのボックスがそれです。

今は全ページでこのボタンが出るので、問い合わせフォームのページやブログページなどではでないようにするか、などは考え中です。

では、どんな手順でこれを実装するか紹介していきます。

固定メニュー実装の手順

Step 1
メニューをぶち込む
footer.phpにメニュー用のHTMLを記述
Step 2
CSSで固定
メニューをページ一番下に固定するためのCSSを記述
Step 3
スマホのみの表示に
スマホでだけ表示されるようにCSSを追加

わーい！スーパーシンプルに3ステップ！

Step 1. メニューをぶち込む

まず、以下のコードをfooter.phpなど、フッターの</body>の前に記述します。Lightiningではfooter.phpがあるので、そこに記述しました。

<div id="sp-fixed-menu" class="for-sp">
 <ul>
    <li><a href="#">電話</a></li>
    <li><a href="#">問い合わせ</a></li>
 </ul> </div>

この状態では以下の通り文字が出るだけですので続きのCSSで整えます。

Step 2. CSSで固定

てことで、以下のコードをstyle.cssなどにぶち込んで整えます。

ここでひとつ、Lightningテーマの場合、スタイルシートに入れても反映されなかったので、カスタマイズ、の方の追加CSSに記述するということをコメントしておきます。

テーマによってはカスタマイズの追加CSSに入れる必要があるかも？

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #f3a324;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px;
}

まんまコピペですが、このコードを入れたら下のスクショのようになり、それっぽくなりますよ！

どうですか？

結構それっぽいですね。

スマホで見た場合こんな感じです。

この状態で完成っぽいですが、上のスクショの通り、パソコンから見た状態でもこのボタンが出ているので、このボタンがスマホからのみ見えるように最後にもういっちょCSSを入れます。

Step 3. スマホのみの表示に

以下のコードをStep 2で紹介した記述の前に書いてパソコンから見えないようにします。ただし、すでにスマホだけに反映するCSSを色々ぶち込んでいる方は先ほどのコードをスマホ用のエリアに移動して調整です。

/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
   .for-sp{
      display:none;
    }
}

これでパソコンから見た場合、ブラウザの幅を狭くしない限り見えなくなります。

イコルバ！で加えた微調整

ここまでが、FUGAさんのページをコピペしながら作ったフッター固定ボタンでしたが、最初に紹介したスクショの状態にするため、以下の調整を行いました。

ボタンの上下幅を狭めた
ボタン色を変えた
ボタンの間の空白をなくした
文字の前にアイコンを入れた
左側のボタンを押せば電話がかかるようにした

多分この5つをやったと思います。

それぞれ簡単に説明しますね。

1. ボタンの上下幅調整

#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:10px;
}

コピペのままだと上下の余白が20pxだったのですが、表示領域を優先して10pxに狭めました。

2. ボタン色

これは、

#sp-fixed-menu li:last-child{
   background: #4a69bd;
}

のところですね、#xxxxxxを好きな色に帰るだけです。

3. 余白をなくす

デフォルトだとボタンの右側に1pxの余白があるので、0pxにしています。

4. 文字の前にアイコン

これは、FontAwesomeを使ったことがないとすぐにわからないかもしれませんが、https://fontawesome.comから好きなアイコンを選んで、文字の前に入れるだけですので、やり方がわかれば基本的には簡単だと思います。

    <li><a href="tel:0123456789">電話</a></li>
    <li><a href="https://xxxxxx.com/contact/">問い合わせ</a></li>

スタイルシートの方の、↑この部分に記述追加です。

    <li><a href="tel:0123456789"><i class="fas fa-phone-alt"></i> お電話</a></li>
    <li><a href="https://xxxxxx.com/contact/"><i class="fas fa-envelope"></i> 問い合わせ</a></li>

例えばこんな感じです。

これで、先ほどの文字だけのボタンがアイコン付きで可愛くなります。

5. タップで電話がかかるように

今回のカスタマイズの場合、2つのボタンを実装しましたが、片方は電話連絡、片方は問い合わせフォームのリンクということにしたので、電話連絡用ボタンをタップすれば電話がかけられるようにし、前述の保護者様の声に答えます。

これはリンク先指定のa href=の後を「tel:電話番号」にするだけなのですでに上記コードで反映されている通り、電話がかかってほしい番号に書き換えればタップすれば電話がかけられるように変更できます。

まとめ

飲食店や教室用のホームページもWordpressで簡単に作れるのは本当にいい時代ですよね！

完成されているテーマを使う方がデザイン性も完成度もかっこいい感じでできる可能性が高いのはありますが、汎用性の高いテーマを自分でいじっていくのも楽しいです。

今回は、お教室のホームページなので、入会ずみの方なら電話帳に番号登録もしているかなーと思うやつですが、教室を探されている方がページにたどり着いてくださった時に、問い合わせまで結びつけやすいUI作りは重要です。

Lightningのようにコーポレートサイトとしても使いやすいテーマでの実装の需要はあるのかな？と思ったので自分用にカスタマイズしたついでに情報載せておきます！

以上！

LikeLoveHahaWowSadAngry