ContactForm7で現在ページのURLを送る方法。 #カスタマイズ

2023.05.27

Logging

おはようございます。ContactForm7で現在ページのURLを送る方法です、全ての記事の下にお問い合わせフォームを設置している人はあまりいないかもしれないけれど。そのあまりいない人の一人です😂。

記事の下にショートコードを設置するにはプラグインを自作するか、テンプレート内に埋め込むかどちらかだと思います。自分は前者のプラグインを自作してショートコードを埋め込んでいます。

ショートコードを埋め込むコードはこんなコードです。

<?php
do_shortcode('[contact-form-7 id="XXXX" title="comment"]')

これで全記事にショートコードを埋め込むことが可能ですがこれだけでは動きません。こんな感じのプラグインを作ってみてください。プラグインの設置方法などはググって下さい。

<?php
/*
  Plugin Name: comment-add
  Plugin URI:
  Description: 記事の下にアドセンス広告などを貼り付けるのに使用
  Version: 1.0.0
  Author: @zip358com
  Author URI: https://www.zip358.com
 */


function comment_add($content)
{
    if (is_single() && 'post' == get_post_type()) {
        $content = $content.do_shortcode('[contact-form-7 id="xxxx" title="comment"]');
        return $content;
    } else {
        return $content;
    }
}
add_filter('the_content', 'comment_add');
remove_filter('the_content', 'wpautop');

これだけでは、どのページから問い合わせしたのか分からないので、名前などの入力欄以外に入力欄を設置します。次に設置したそのNoを控えて下さい。

<script>
//Contact Form 7 現在ページのURL
if(document.querySelectorAll("[name='text-564']")){
    [...document.querySelectorAll("[name='text-564']")].forEach(elm=>{
        elm.setAttribute("type","hidden");
        elm.value = decodeURIComponent(location.href);
    });
}
</script>

上記のコードを</body>タグ直前に設置してください。設置後、text-564を控えたNoに変更シテクダサイこれで設置が完了です☹。

⚠ContactForm7のメール送信欄にも控えたNoを設置してください。これで完了です!!
最後に送信のご確認を忘れずに😐。

タグ

add_filter, body, comment-add, decodeURIComponent, description, document.querySelectorAll, elm, else, foreach, hidden&quot, lt, php, php do_shortcode, quot, remove_filter, return, setAttribute, title, Version, wpautop,

404の画像をno-imageにする#jscode

2023.05.16

Logging

おはようございます、404の画像をno-imageにするコードです。案外簡単なコードですが、これでノーイメージに変換できます。因みに参照した404ページが404のステータスを吐き出していなかったら、このJSコードは機能しません。

if(document.querySelectorAll("img")){
     [...document.querySelectorAll("img")].forEach(elm=>{
        fetch(elm.src).then(response=>{
            if(!response.ok){
                elm.src = "no_image1.gif";
            }
        });
     });
}

因みに自分のブログサイトもこんな感じのコードを埋め込んでいます。これをphp言語で対応すると処理がサーバーサイドになるので重たくなります。こういうのはJSコードで対応するのが個人的には良いと思っています。尚、JSコードとPHPを連動させて表示の有無を行うのも良いかも知れません。

画像URLを参照してレスポンスデータが返ってきます、このレスポンスの変数をconsole.log(response);で表示するとstatusなども返ってきていることが分かると思います。404ステータスだけ何かしたい場合はresponse.statusで判断するともっと厳密になって良いかも知れません。

タグ

'src', console.log, document.querySelectorAll, elm, fetch, foreach, gt, if, img&quot, no-image, quot, response, response.ok, response.status, status, then, サーバーサイド, ブログサイト, レスポンス, 変数,