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

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

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

サンプルサイト

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

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

Contents

固定表示の流れ

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

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

footer.phpの編集

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

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

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

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

子テーマを作成するプラグイン「Child Theme Configurator」使い方・header.php、footer.phpなどもコピー可能

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のインストールをお願いします。方法は以下の通りです。

【Font Awesome】WordPressでアイコンフォントを使う方法

< 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以上の画面では非表示にしています。

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