電話を掛ける前に注意の吹き出しを表示

Question

質問させていただきます。

ホームページから電話を掛けてもらう際、

「施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。」

と、１度注意を促す吹き出しを表示して、その後で電話を掛けることができるようにしたいと考えています。

これが可能なのか、そして具体的にどのようなHTMLあるいはPHPの記述が必要なのか調べましたが、全くわからない状況です。

ご存知の方、教えていただけたら大変助かります。

よろしくお願いします。

補足情報(言語/FW/ツール等のバージョンなど)
サーバーはエックスドメインの無料サーバー
ワードプレスのバージョンはWordPress 4.9.5
ＰＨＰはPHP7.0.7

Answer 1

ポップアップやツールチップ、吹き出しなど方法はさまざまあるかと思います。
実装しやすいものをピックアップしましたので、イメージに合うものを使用してみてはいかがでしょうか。

Comments

[ebiPT]

ありがとうございます！参考にします！

Answer 2

簡単な確認画面でよければ、以下のような感じでいけるかと思います。

<a href="tel:[phone]">0123-45-6789</a>

	$('a[href^="tel"]').click(function(e){
		if (confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){
			return true;
		}else{
			return false;
		}
	});

極端な話、以下のようにHTMLでそのTELリンクのすぐ後ろに書けばOKです。
もちろんjQueryが入っていないと動作はしませんが。
JSは、何を読み込んでいるかわからないので、読み込んでいるJSに追加してください。

<a href="tel:[phone]">0123-45-6789</a>
<script type="text/javascript">
	$('a[href^="tel"]').click(function(e){
		if (confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){
			return true;
		}else{
			return false;
		}
	});
</script>

HTMLのみ

強引な話、こんなのでも可能です。
jQueryは使わなくても、素のJSでできますね。

<a href="tel:[phone]" onclick="if(confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){ return true; }else{ return false; }">0123-45-6789</a>

HTMLとJS分離

同ページに複数あっても対応してます。jQueryなしです。

<a class="tel-alert" href="tel:[phone]"">0123-45-6789</a>
<a class="tel-alert" href="tel:[phone]"">0123-45-0000</a>
<script type="text/javascript">
	var telLinks = document.querySelectorAll('.tel-alert');
	telLinks.forEach(function(telLink) {
		telLink.addEventListener('click', function(e){
			e.preventDefault();
			if (confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){
				location.href = e.target.getAttribute('href');
			}else{
				return false;
			}
		}, false);
	});
</script>

Comments

[ebiPT]

詳しい内容とても感謝します！
すみません、javaは扱ったことがないのですが、追加で教えていただけるでしょうか。

現在、bizbectorというテーマを使用しているのですが、そのようなテーマを使っている場合、どのファイルに以上のjavaを記述したら良いのでしょうか？
functions.phpとかですかね？

[kszk311]

javaとjavacsriptは全く別物です。追記しましたのでご確認ください。

[ebiPT]

ありがとうございます！
javaとjavascriptは違うんですね、調べてやっと気づきました(汗)

私のテーマではHTMLに直接記述では動作しませんでした。jQueryというものが入っていないのでしょうね。

javascriptを入れるファイルがわからないので、Bizbectorの掲示板にて現在質問しているところです。

[atmn3356]

横入すみません。
jQueryはインストールせずとも、htmlの冒頭に記述することで使用できますよ。
その場合は、htmlにjavascriptを直接書けばよいです。
参考→http://ponk.jp/jquery/basic/install

[ebiPT]

そうなんですか！
試してみます、ありがとうございます！

[kszk311]

jQueryなくても実装できる内容だったので、追記しておきました。
ご確認ください。

[ebiPT]

HTMLのみの強引なやり方というのでできました！
素晴らしいです。ありがとうございます！
しかし強引というのがどう強引なのかわからず、やや不安があります。
この方法によるデメリットがあるのでしょうか？

教えていただいたJavascriptの構文を置く場所がわからず、header.phpやらfunctions.phpやら、あるいはワードプレスの固定ページのHTMLの最上部などに記述し試してみましたが、できませんでした。
知識が浅く大変ご迷惑をおかけします。

[kszk311]

強引というか、HTMLでまとめるならって感じでしょうか。
他のページにもあった場合に一つずつ書かなければいけないとか、もし文章少し変更したいときに、全て変える必要があるとか、更新性の問題とかですかね。

「HTMLとJS分離」の方は、記載の通りaタグのすぐ後にscriptタグでそのままコピペすればいけるはずです。

[ebiPT]

本当ですね！できましたー！感動です。ありがとうございます。

あとは、ヘッダーやフッターの電話番号まではHTMLでは反映されないので、このテーマでのJavascriptの置き場所を探してみます。

[ebiPT]

できました！
テーマの掲示板でおき場所をうかがった所、functions.phpに以下の記述をすることで希望する動作ができました！
kszk311さん
atmn3356さん
とても助かりました！ありがとうございました！

```
add_filter( 'wp_footer', 'my_add_script_tel_alert' );
function my_add_script_tel_alert() {
?>
<script type="text/javascript">
jQuery('a[href^="tel"]').click(function(e){
if (confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){
return true;
}else{
return false;
}
});
</script>
<?php
}
```