HOME フォーラム BizVektor [ 解決済 ] ページから電話を掛ける際に注意を表示したい

このトピックには14件の返信が含まれ、2人の参加者がいます。3 ヶ月前じょに次郎 じょに次郎 さんが最後の更新を行いました。

15件の投稿を表示中 - 1 - 15件目 (全15件中)
  • 投稿者
    投稿
  • #9877

    ebi0720
    参加者

    HTMLやjavaなどほぼ初心者です。

    ページから電話を掛ける際に注意を表示したいと考え、他の掲示板にて助言を求めたところ、javascriptにて行う方法を教えていただきましたが、Bizvektorの場合、どのファイルに以下の記述をしてよいかわかりませんでした。

    ご存知の方、ぜひご教授いただけると有難いです。

    よろしくお願いします。

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

    #9890
    じょに次郎
    じょに次郎
    モデレーター

    あまり美しくないですけど子テーマのfunctions.phpに

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

    とかでいけるんじゃないかと。

    #9895

    ebi0720
    参加者

    じょに太郎さんありがとうございます!

    以上をfunctions.phpに記述することで固定ページ中に配置した電話番号のうち、HTMLで

    <p class=”Reserve” style=”text-align: right;”>

    というような記述の電話には反映されました。

    ただ、それ以外の

    0123-45-6789

    のみのような電話には反映されず、また、ヘッダーにある電話番号や、ウィジェットにテキストで作った電話リンクでは反映されませんでした。

    ホームページの全ての電話リンクにおいて以上のような注意を表示する方法はないものでしょうか?

    #9896

    ebi0720
    参加者

    あ、HTMLが反映されて記載できていませんね。

    つまり、<a class=”tel-alert”のように、クラス指定してあるものには反映されるのですが、クラス指定されていないものには反映されていない状況なのかな?と考えています。

    そのように考えてウィジェットのテキストにて、同じクラスを指定してみたのですが、反映されませんでした。

    行いたいことは全ての電話リンクで注意を表示したいということなのですが、方法があるでしょうか?

    #9897
    じょに次郎
    じょに次郎
    モデレーター

    うーん、PCで確認してますか?
    tel属性になるのはモバイル端末の時だけだと思うので、とりあえずモバイル端末で確認してみてください。
    あとクォートは半角になるように打ち直してください。

    #9899

    ebi0720
    参加者

    毎回、iphoneで確認してますが、じょに次郎さんがそうおっしゃるからには通常は反映されるんですね。

    もっと試行錯誤してみます!

    #9900
    じょに次郎
    じょに次郎
    モデレーター

    あ、いえ…僕今回実際には検証してないので…(滝汗)
    まぁでもそうですねー、押してからアラートよりは電話番号の下とか上にメッセージ表示出来たと思うからそこに書いておいた無難ではないかなと…。

    #9902

    ebi0720
    参加者

    いつもこのフォーラムで大変参考にさせていただいており、感謝しています。

    メッセージ表示というと、タップしたときに表示される電話番号の上か下に記述できるのですか?

    #9903
    じょに次郎
    じょに次郎
    モデレーター
    #9904

    ebi0720
    参加者

    あ、そういうことですね!

    いま作っているホームページではヘッダーのところももちろんなのですが、固定ページの文中にも入っているページが20ページくらいあり、また、フロートメニュー上でも電話があったり、ウィジェットにも電話があるので、それら全ての近くに表示しておくよりも吹き出し風が良いかなと考えたところでした。

    ただ、ヘッダーとかウィジェットの方が実装できなければ、固定ページ文中のものだけ表示できるところで諦めるしかないかな、というところです。

    #9928
    じょに次郎
    じょに次郎
    モデレーター

    あ、ごめんなさい。
    上記コードだと $ を jQuery にしないと ダメでした。

    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
    }

    で、 ‘ や ” は多分コピペすると別の記号になってしまうので、 半角で再度入力してみてください。

    #9938

    ebi0720
    参加者

    じょに次郎さんありがとうございます~!
    すばらしい動作です。ヘッダーの電話も、他のページでも全て動作しました!ありがとうございます。

    申し訳ありませんがもう一点。
    ホームページ下部にフロートメニューを設置しており、そのためfooter.phpに

    <a href="tel:012345678"><img src="http://ebi-seitai.com/wp-content/uploads/2017/11/72c2383750587eff7e70ef4e048f0e46.png" width="40" /></a>

    という記述をして電話をかけるボタンを作っているのですが、このボタンだけ反映されませんでした。
    これは記述を変える必要があるのでしょうか?

    • この返信は3 ヶ月前に  ebi0720 さんが編集しました。
    • この返信は3 ヶ月前に  ebi0720 さんが編集しました。
    • この返信は3 ヶ月前に  ebi0720 さんが編集しました。
    #9942
    じょに次郎
    じょに次郎
    モデレーター

    <?php wp_footer();?> タグより前に書いてあれば動作すると思うのですが、後になってませんか?

    #9943

    ebi0720
    参加者

    できましたー!!
    本当にありがとうございます!

    長く困っていた問題が解決しました!

    #9945
    じょに次郎
    じょに次郎
    モデレーター

    You are welcome ( ̄ー ̄)

15件の投稿を表示中 - 1 - 15件目 (全15件中)

このトピックに返信するにはログインが必要です。