【無料テーマBusinessPressカスタマイズ】ヘッダーに電話番号・お問い合わせボタンを設置する方法

WordPressの無料テーマBusinessPressでヘッダーグローバルメニューの上部に電話番号やお問い合わせボタンなどを設置する方法をご紹介させていただきます。

BusinessPressは、ビジネス・コーポレートサイト、店舗サイトなどに使える無料のワードプレス・テーマですが、ホームページからの問い合わせ件数をアップさせるには、電話番号やお問い合わせのボタンが目立つところに設置されていた方が良いですよね。

実際に作成したサンプルサイトでは、このように左側にはロゴ、右側にはメニューがあって、その上に所在地、電話番号、お問い合わせボタンを配置しております。

サンプルサイト

Contents

ヘッダー上部に電話番号、お問い合わせボタンを配置する流れ

実際の流れといたしましては、

header.phpにコードを記述
追加CSSにコードを記述

という２点になります。

１．header.phpにコードを記述

header.phpの編集は、ダッシュボード「外観」＞「テーマエディター」から行えます。

テーマファイルを編集する場合、子テーマ化してそちらを編集することで、テーマのアップデートの際にリセットされずに済みますのでお勧めです。

子テーマ化には、こちらの記事も参考にしていただければと思います。

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

header.phpの39行目くらいからコードを書き替えます。

	</div><!-- .site-branding -->
	<?php businesspress_main_navigation(); ?>
	<button class="drawer-hamburger">

<!– .site-branding –>から<button class=”drawer-hamburger”>の間を以下のように書き替えます。

	</div><!-- .site-branding -->
	<div class="header_wrap">
				<div class="header_contact_wrap">
					<div class="header_text">東京都○○区　JR○○駅徒歩3分</div>
					<div class="header_tel"><a href="tel:000-0000"><i class="fas fa-phone-square"></i><span class="pc"> 000-0000</span></a></div>
					<div class="header_contact"><a href="/contact"><i class="fas fa-envelope"></i><span class="pc"> お問い合わせ</span></a></div>
				</div>
				<?php businesspress_main_navigation(); ?>
	</div>
	<button class="drawer-hamburger">

<div class=”header_text”>の後の部分には、会社やお店の住所、
<div class=”header_tel”>の後の000-0000の部分には電話番号、
<div class=”header_contact”>の後のhref=”/contact”には、お問い合わせページのURLになりますので、それぞれ書き換えてください。

<i class=”fas fa-phone-square”>や<i class=”fas fa-envelope”>は、WEBアイコンフォント「Font Awesome」の出力コードになります。Font Awesomeの使える設定になっていないと正常に表示されませんので、事前にプラグイン新規追加で「Font Awesome」プラグインをインストールしてください。

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

以上で、header.phpの編集は完了です。

２．追加CSSにコードを記述

今度は、CSSで見た目を整えていきます。

ダッシュボード「外観」＞「カスタマイズ」をクリックし、「追加CSS」をクリックし以下のコードを追加します（コピペでOKです）。

.header_contact_wrap{
	display:flex;
}
.main-header-clone .header_contact_wrap{
	display: none;
}
.header_contact{
	margin:0 20px;
	background: #F18219;
	padding:10px 20px;
	color: #fff;
	font-weight:bold;
	border-radius:0px 0px 10px 10px;
}
.header_contact a{
	color: #fff;
}
.header_tel{
	margin:0 20px;
	padding:5px 10px;
	font-size:20px;
	font-weight:bold;
	color: #37C61E;
}
.header_text{
	padding:10px;
	font-size:14px;
}

まとめ

今回は、無料テーマBusinessPressで、ヘッダー上部に電話番号やお問い合わせボタンを配置する方法をご紹介させていただきました。

サンプルサイトでは、スクロールしたときにお問い合わせボタンを画面横に表示させたり、スマホ表示の際には、画面下に電話番号やお問い合わせボタンを固定表示させています。

これらの方法も別の記事でご紹介させていただきます。