WordPressで画面下にお問い合わせ・電話番号ボタンを固定表示する方法

WordPressで画面下にお問い合わせ・電話番号ボタンを固定表示する方法

特にスマートフォンで閲覧したときに、ホームページの下の方に電話番号やお問い合わせのボタンが常に表示されているのをよく見かけます。このような、お問い合わせや電話番号ボタンを画面下部に固定表示する方法をご紹介させていただきます。

こちらのサンプルサイトでは、スマートフォンなど幅の狭い画面(横幅700px以下)で見たときに、固定の電話番号とお問い合わせのボタンが表示されるように設定しております。

サンプルサイト

以下のように、画面の下の方に固定されています。

パソコンでご覧の方は、ブラウザの画面幅を狭くすると、表示されますのでご確認いただければと思います。

Contents

固定表示の流れ

電話番号・お問い合わせボタンの固定表示させるための作業は以下の2点です。

  • footer.phpの編集
  • 追加CSSの編集

footer.phpの編集

使用しているワードプレス・テーマによって多少違うかもしれませんが、フッター(ホームページの下の部分)の情報がfooter.phpに書かれています。

footer.phpファイルを編集するには、ダッシュボード「外観」>「テーマエディター」をクリックしてください。

テーマファイルからfooter.phpをクリックします。子テーマ化している場合は、親テーマのfooter.phpをコピーして、子テーマのディレクトリに入れておいてください。

FTPでファイル操作するのが面倒な人は、プラグインを使ってファイルを子テーマに持ってくる方法が簡単です。

footer.phpの最後の方、</body>の手前に以下のコードを追加してください。

<div class="footer_fixed">
	<div class="footer_tel"><a href="tel:000-0000"><i class="fas fa-phone"></i> 000-0000</a></div>
	<div class="footer_contact"><a href="/contact"><i class="fas fa-envelope"></i> お問い合わせ</a></div>	
</div>

ここで、<i class=・・・></i>の部分は、Font Awesomeのアイコンフォントを表示させるタグになりますので、事前にFont Awesomeのインストールをお願いします。方法は以下の通りです。

< a href=”tel:000-0000″>は、タップ(クリック)すると自動で電話を掛けるリンクになりますので、000-0000の部分をご自身の会社やお店の電話番号に書き替えてください。

<a href=”/contact”>の /contact の部分は、ご自身のホームページのお問い合わせページのURLに書き替えてください。

追加CSSの編集

今度は、追加CSSで固定表示の設定をしていきます。

ダッシュボード「外観」>「カスタマイズ」をクリックし、

「追加CSS」をクリックしてください。

以下のCSSコードを追加してください。コピペでOKです。

.footer_fixed{
	position:fixed;
	display:flex;
	width:100%;
	bottom:0;
	left:0;
	z-index:999;
}
.footer_fixed a{
	color: #fff;
	text-decoration: none;
}
.footer_tel{
	width:50%;
	background:#008000;
	text-align:center;
	padding:10px 0;
}
.footer_contact{
	width:50%;
	background:#ffa500;
	text-align:center;
	padding:10px 0;
}
@media(min-width:700px){
.footer_fixed{
	display: none;
}
}

footer_fixedクラスの position:fixed; で固定表示にして、bottom:0; で、画面下に来るように設定しています。

@media(min-width:700px){・・・}で、横幅が700px以上の画面では非表示にしています。

これによって、以下のように電話番号とお問い合わせボタンが固定表示されます。

まとめ

お店や企業のホームページの場合、気軽にお電話やお問い合わせをいただくのに、固定のバナーがあるのは大変有効だと思います。

以上、電話番号やお問い合わせを固定表示する方法でした。よかったらご参考にしていただければと思います。

関連記事 Related Articles