追尾型電話番号バナー設置マニュアル
本マニュアルでは、追尾型電話番号バナーをWordPressサイトに設置する方法をご説明します。
こちらの動画も併せてご覧ください。
https://youtu.be/ruh1HU9omfI
今回の設定では、WordPressのテーマファイルを編集しますが、今回はBizVektorテーマを使っ
た場合の説明となります。
ただ、他のテーマでも基本は同じですので設定は可能です。
対象となるファイルは、
• header.php
• functions.php
• page.php
• front-page.php
などです。
編集を失敗したことを想定して、あらかじめ編集するファイルは必ずバックアップをしておいてく
ださい。
特に、functions.phpは編集に失敗するとWordPress自体が動かなくなります。
ただ、その場合も落ち着いてバックアップしておいたファイルで上書きすれば元に戻せます。
バナー画像の準備
まず、このようなボタン画像を用意してください。
Photoshopなどで電話番号を表記した画像をサイズ600ｘ90px程度で作ります。
なお、Photoshopは有料ソフトですので、無料サイトを使って画像を作る方法もご紹介します。
https://www.youtube.com/watch?v=fiTCUS-NBf0
電話番号バナー画像ができたら、WordPressのメディアに画像をアップしておきます。
アップしたらURLをコピーしておいてください。後で貼り付けて使います。
CSSの設定
次に、CSSの設定を行います。WordPressの管理画面でCSSカスタマイズ画面を開いて以下のコー
ドを追記します。
.fbdisp {display: none;}
@media (max-width: 500px) {
.fbdisp {display: block;}
.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
BizVektorテーマ以外の場合は、外観ーテーマ編集にあるスタイルシート「sytle.css」などに追記
します。
このCSSでは、2つのクラスを設定しています。
fbdispの方は、画面サイズに応じて表示・非表示を切り替えるためのクラスです。
fixedの方は、javascripを使って画像の位置をスクロール状態によって切り替える際に使うクラス
です。
JavaScriptの設定
次に、javascriptを設定します。
header.phpに設定して、全てのページで実行されるようにします。
以下のコードを<head>∼</head>の間に貼り付けます。
貼り付ける前に、検索文字「jquery」で検索して既に「jquery」が読み込まれた設定がないか確
認してください。
既に読み込まれている場合は、1行目は不要ですので2行目移行を貼り付けて下さい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
var nav
= $('#fixedBox'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
</script>
貼り付けたら更新して保存します。
バナー画像を表示する
次に、ページのコンテンツの始まる前にボタンが表示されるようにします。
WordPressは、ページの種類によってファイルが異なります。
投稿ページは、single.php
固定ページは、page.php
トップページは、front-page.php
といった感じです。
固定ページについては、page-xxx.phpといった感じで複数のテンプレートも存在しますので更に
ややこしくなります。
共通で一つまとめて設定できればいいのですが、BizVektorテーマの場合はそうもいきませんので
一つずつ設定する必要があります。
では、固定ページに設定する方法を説明します。
テーマ編集でpage.phpを開きます。
コンテンツが始まる前に表示するなら、<?php the_content(); ?>の前に以下のHTMLタグを貼り
付けます。
BizVektorテーマの場合は、<div id="content" class="content">のすぐ下がいいと思います。
<div id="fixedBox" class="nav fbdisp"><A href="tel:050-0000-0000"><IMG src="http://
www.ssw2005.net/wp-content/uploads/sp-tel03.png" width="100%" border="0"></
A></div>
緑文字には、最初にメディアに電話番号バナーをアップしたときにコピーしておいたURLが入るこ
とになります。
青文字には、タップした際にコールする電話番号をここに入れます。このまま貼り付けないでご自
身の電話番号に書き換えて下さい。
page.php以外のファイルも同様に貼り付けてください。
以上で設定は終わりです。
動作確認をする
まず、画面サイズを変えたときに表示・非表示されるかどうかです。
幅を狭くしてスマホ表示になった場合だけに、電話番号バナーが表示されることを確認します。
次に、スマホで表示してスクロールした際に、画像の位置を過ぎるとボタンが上部に固定される
かどうかです。
最後に、ボタンをタップしたら電話が発信できるかどうかを実際にスマホを使って確認してくだ
さい。
以上で設置方法の説明は終わりになります。
（終わり）
© Copyright 2024 Paperzz
