前回の記事でWordPressプラグイン【Contact Form 7】を使ってWEB拍手っぽいフォームを設置しましたが、それを更に改良してフォーム送信ボタンが押された回数をカウントして表示する疑似【いいねボタン】みたいな機能を追加してみました。
前回の記事はこちら↓
疑似【いいねボタン】概要
今回新たに追加したかった機能は、設置したWEB拍手(フォーム送信ボタン)が押された回数をページ毎に記録し、それを任意の場所に表示させる。というものです。
前回の記事でも書きましたが、私はプログラミング的なものは素人に毛が生えたレベルの知識しかありませんので、今回追加した機能も偉大な先達の皆さまによって既にネットのあちこちに掲載されている情報を搔き集めてどうにかこうにか実装したものです。
なので、見映えの悪さや機能面での不備など目に付く点は多々あると思いますが、そこはどうかご容赦ください😅
念のため個人的に気になっている事、注意点をいくつか書いておきます。
①プラグインの編集によって処理が重くなる可能性がある
私自身はそれ程重くなったという感覚はありませんが、function.phpに色々書いたりするので環境によっては表示に時間がかかったりする… かもしれません。
②一度送信した「いいね！」を取り消すことはできない
WEB拍手ボタンを【押した回数】をカウントするだけですので、それを取り消すことはできません。
③カウントの表示をリアルタイムに更新することはできない
普通、「いいね！」をクリックするとそれと同時に表示されている数字が更新されるかと思いますが、今回それは実装されていません。カウントを反映させる為にはページを再読み込みする必要があります。
ボタンクリックと同時に表示を更新するには恐らくAjaxとかそういうのを使わないといけないのかなと思います。残念ながらそこらへんの知識は皆無なので、ちょっとだけ試してみましたが手も足も出ませんでした😂
今後、機会があれば勉強して再チャレンジしてみようかと思います…
疑似【いいねボタン】の追加方法解説
ここからは具体的な機能の追加方法、追加した内容の説明です。
まず最初に、Contact Form 7の送信ボタンが押された時に、そのフォームが設置されている投稿や固定ページのIDを取得できるようにします。
これはボタンが押された回数をサイト全体ではなくページ毎に計ることで、どのページがよく読まれて(評価されて)いるのかを数値化したかったからです。
正直この部分が一番苦戦しました。WordPressには get_the_ID() という便利な関数が用意されていて、通常ならこれで投稿のIDを取得できる筈なのですが… ContactForm7ではそれが上手くいきません。
自分なりに色々と解決法を考えて試してみたのですが、やはり難しそうだったのでネットで情報を漁ってみたところ、便利な関数を公開してくださっている方がいました↓
ttps://github.com/surevine/contact-form-7/blob/master/modules/special-mail-tags.php
※現在はリンク先のページがなくなっているようです。
必要な関数をコピペさせていただきfunction.phpに追加します。
function wpcf7_special_mail_tag_for_post_data( $output, $name ) {
if ( ! isset( $_POST['_wpcf7_unit_tag'] ) || empty( $_POST['_wpcf7_unit_tag'] ) )
return $output;
if ( ! preg_match( '/^wpcf7-f(\d+)-p(\d+)-o(\d+)$/', $_POST['_wpcf7_unit_tag'], $matches ) )
return $output;
$post_id = (int) $matches[2];
if ( ! $post = get_post( $post_id ) )
return $output;
$user = new WP_User( $post->post_author );
// For backwards compat.
$name = preg_replace( '/^wpcf7\./', '_', $name );
if ( '_post_id' == $name )
$output = (string) $post->ID;
elseif ( '_post_name' == $name )
$output = $post->post_name;
elseif ( '_post_title' == $name )
$output = $post->post_title;
elseif ( '_post_url' == $name )
$output = get_permalink( $post->ID );
elseif ( '_post_author' == $name )
$output = $user->display_name;
elseif ( '_post_author_email' == $name )
$output = $user->user_email;
return $output;
}こちらの関数の中で ‘_post_id’ と記述されているあたりが投稿IDを取得するのに使われているようです。
投稿IDが取得できるようになったら、次は実際に送信ボタンを押した時の処理を追加します。
この処理は以下のサイトのアクセス解析を参考にさせていただきました。
↑ではページが【閲覧された回数】をカウントしていますが、それを【フォームの送信ボタンが押された回数】に変更します。
また、送信ボタンが押されたタイミングで処理が行われるように ‘wpcf7_mail_sent’ をフックにして処理を行うコードを追加します。
add_action('wpcf7_mail_sent', 'set_post_views', 10, 1);
function set_post_views($contact_form) {
$submission = WPCF7_Submission::get_instance();
if ( $submission ) {
//POSTデータの取得
$postdata = $submission->get_posted_data();
$post_id = wpcf7_special_mail_tag_for_post_data( $output, '_post_id'); //投稿IDを取得
$count_key = 'sent_count';
$count = get_post_meta($post_id, $count_key, true);
if(empty($count)) {
delete_post_meta($post_id, $count_key);
add_post_meta($post_id, $count_key, 1);
} else {
$count = $count + 1;
update_post_meta($post_id, $count_key, $count);
}
}
}$postdata はここでは使っていませんが、送信者の名前や送信された日時、メッセージの内容などを取得する時用に残してあります。これを利用してログファイルに送信内容を出力し記録としてとっておくと、必要な時にメッセージを読み返したりできて便利です。
次に保存された数値を取り出して任意の場所に表示させます。
この処理も同じ↑のサイトからコピペで使わせていただいてます。
/*管理画面のカラムを追加*/
function manage_posts_columns($columns) {
$columns['sent_count'] = 'いいね';
return $columns;
}
add_filter('manage_posts_columns', 'manage_posts_columns');
/*アクセス数を出力*/
function add_column($column_name, $post_id) {
/*View数呼び出し*/
if ($column_name === 'sent_count') {
$pv = get_post_meta($post_id, 'sent_count', true);
echo $pv ? esc_html($pv) : __('None');
}
}
add_action('manage_posts_custom_column', 'add_column', 10, 2);↑コードに誤りがあった為、一部修正しています。最終更新日2025/02/25↑
この処理ではWordPressの投稿一覧画面にカウント数値専用のカラムを追加し、数値を表示しています。投稿一覧画面で見る必要がない方は記述しなくてもいいかもしれません。
で、この処理を流用して記事の任意の位置に数値を表示できるようにします。表示用のショートコードも一緒に作ります。
add_shortcode('cf7_views','get_cf7_views');
wpcf7_add_shortcode('cf7_views','get_cf7_views');
function get_cf7_views(){
$value = get_post_meta( get_the_ID(), 'sent_count', true );
// カスタムフィールドの値がある場合
if( $value ){
return ($value);
}
} これでfunction.phpの準備はできました！
あとは作ったショートコード(この場合は［cf7_views］)を記事の数値を表示させたい位置に記述するだけです。
私の場合は記事タイトル下の投稿日時の横に表示させたかったので、ウィジェットを使って記事タイトルと本文の間にショートコードを記述し、CSSでレイアウトを調整します。
できました～～！😊✨
これで自分でもサイトを訪問してくれた人にも、その記事がどれくらい評価されているのか一目でわかるようになりました。
今回はフォーム送信された回数をカウントして表示するだけというシンプルな機能になりましたが、自分なりに調べて形にできたことを備忘録も兼ねて記事にしてみました。同じような情報を求めている何方かにとって少しでもお役に立てれば幸いです。
また、今回実装できなかったカウントの更新をリアルタイムに行う方法などについても、機会があれば勉強してまとめてみたいと思います。もし既にやり方を知ってる！という方がいらっしゃいましたら、是非コメントで教えていただけますと嬉しいです！よろしくお願いします！
追記
Ajaxを使った【いいね】カウント数のリアルタイム更新を実装してみました。
作成したコードと設置方法などを以下の記事でまとめていますので、よかったらこちらも参考にどうぞ～。
コメント