Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

WordPressのコメント送信時にメッセージを出す

2021年1月9日 2021年1月8日 プログラミング

★2021-01-09追記。
素敵なプラグインを見つけてしまいました。
こちらを使うことをおすすめします(^_^;)
http://katwat.s1005.xrea.com/wp/?p=8669

 先日、
何気に自分のWordPressなブログに自分でテスト的にコメントをしてみた所、
特にメッセージが出ることもなく、
実にアッサリと無愛想な感じで送信されたのが何か気になりました。
思わず、「あれっ! ちゃんと送信された?」てな感じ(^_^;)

 というか、
このブログはコメントが入ることは滅多に無いし(^_^;)
そもそもアクセス数自体も大したこと無さそうだし・・・。
なので、そこまでやらなくても良いかなと思ったのですが、
とりあえずやってみた次第です。

ネットで見つけた2つのやり方

 どうすればよいのかをネットで調べてみた所、
こちらを見つけました。
2つのやり方が提示されていました。
1つ目はこれ↓

add_filter('comment_post_redirect', 'redirect_after_comment');
function redirect_after_comment($location){
    $newurl = substr($location, 0, strpos($location, "#comment"));
    return $newurl . '?c=y';
}

if($_GET[ 'c' ] == 'y'){
    echo 'Thank you your comemnt';
} 

2つ目はこれ↓

// Redirect to thank you post after comment
add_action('comment_post_redirect', 'redirect_to_thank_page');

function redirect_to_thank_page() {
    return 'http://purabtech.in/thank-you';
}

 いずれも comment_post_redirect という、
フィルターイベントでページ遷移するという感じになっています。
ただ、後者は別途ページを作らないといけないし、
ページ遷移後に元居たページに戻ってもらうようなことになってしまう。
なので、前者のように同じページにパラメータを付けて遷移するやり方の方が良さげな感じ。

 そこで、
WorpPressのダッシュボードから
外観>テーマエディター>functions.phpにそのまま追加して試してみました。

 確かにメッセージは出ました。
ただ、ページの先頭に文字列をベタ貼りしているだけなので、
どうにも見た目的にスマートでない・・・(^_^;)

JavaScriptの通知表示なライブラリを使う

 思案の結果、
JavaScriptの通知表示なライブラリを使ってやることにしました。
このやり方ならWordPressのテーマによらずに、うまくやれるはずです。
テーマ内部のPHPとかを調べたりする必要ないし。

 WordPressのfunctions.phpにおいて、
CSSやJavaScriptをどうやって読み込んだりすれば良いのか
分からなくて手間取ったりしましたが、
どうにか実装することができました。
以前にWordPressのテーマを変更する際に、
XAMPPを使って構築したローカルな環境があったので、
そこでテストしてみた所、
概ね期待したように出来ました。

cookie方式に変えてみたけど・・・

 ただ、ブラウザのURL欄に謎のパラメータが見えるのが
なんかちょっとイマイチの感じ・・・(^_^;)
なので、パラメータじゃなくてcookieでやれば
内部的な処理だけになるのでもうすこしスマートな感じになるかも、と
ふと思いついたのでPHPのsetcookie()とか使って
コードを書き直してみました。
ブラウザのURL欄にパラメータとか出なくなって、
より良さげな感じにすることが出来ました(^_^)

 で、
さっそく実環境のサーバーに適用してやってみたら・・・
動かない・・・(T_T)
なんでや!

 どうもcookieが発行されてない感じ・・・。
ホスティングサービスであるXREAの無料版を利用して
WordPressなブログをやっているのですが、
ネットで調べてもうまい解決法が見つかりませんでした。
いろいろ試してはみたのですが・・・うむぅ(T_T)

結局、URLパラメータ方式でやる

 ということで、
ブラウザのURL欄にパラメータが見えてしまうのは気になるけど、
動かないのでは仕方ありません。パラメータ方式でやることにしました。

 ちなみに、
使用したJavaScriptの通知表示なライブラリはこちらです。
5,6年ほどメンテされてなくて古いし、
ドメインは存在しているけど全然関係ないサイトになっていたりしますが(^_^;)、
コードのサイズが小さめで機能的にも特に困るようなこともないので、
これを使いました。
もし気になるようなら、他にも色々とありますので検討してみてください。

 ということで、
WordPressのコメント送信時にメッセージを出すには、
以下のコードをfunctions.phpに追加してください。
なお、表示が維持される時間は10秒にしてありますが、
必要に応じてalertify.delay(10000)の数値を変えてください。単位はミリ秒です。
また、自分のブログでは設定でコメントの手動承認を必須にしてあるため、
「コメントを受け付けました。承認されるまでお待ち下さい。」
というメッセージにしてあります。
これについても、必要に応じて変更してください。

// コメント送信時にメッセージを表示
add_action('wp_enqueue_scripts', function() {
	wp_enqueue_style('alertify','https://cdnjs.cloudflare.com/ajax/libs/alertifyjs-alertify.js/1.0.11/css/alertify.css');
/*	$css = <<<CSS
.alertify-logs>.success {
	background: rgba(76, 175, 80, 1) !important;
}	
CSS;
	wp_add_inline_style('alertify',$css); // CSSを調整する場合はこんな感じで。*/
	wp_enqueue_script('alertify','https://cdnjs.cloudflare.com/ajax/libs/alertifyjs-alertify.js/1.0.11/js/alertify.js', array(), null, true);
	$script = <<<SCRIPT
window.addEventListener('load',function() {
	if (new URLSearchParams(location.search).get('c') === 'y') {
		alertify.delay(10000).logPosition('top').success('コメントを受け付けました。承認されるまでお待ち下さい。');
		/*setTimeout(function(){
			location.search = ''; // パラメータを消す。
		},10001); // リロードすることになるので止めておく(^_^;)*/
	}
});
SCRIPT;
	wp_add_inline_script('alertify',$script);
});
add_filter('comment_post_redirect', function($location) {
	return substr($location, 0, strpos($location, "#comment")) . '?c=y';
});

実際の表示例

 なお、
実際にはこんな感じに表示されます↓

関連記事
パーリンノイズを試してみた(2) WordPressのテーマを自作する(19) 麻雀の向聴数と有効牌を確認 zip.jsを触ってみた(2) JavaScript→PNG ロト当選確認 PDFなカレンダーを作成 json2bin By MessagePack Home (最新の投稿~)

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

新型コロナワクチンのソースコードを解読する
コメント送信をスマートにするWordPressプラグイン

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::