WordPressの訪問者コメント機能の最適化方法、WordPressコメント機能

WordPressの訪問者コメント機能の最適化方法、WordPressコメント機能_PHPチュートリアル

WBOY

リリース： 2016-07-12 09:04:03

オリジナル

764 人が閲覧しました

WordPressの訪問者のコメント機能、WordPressのコメント機能のいくつかの最適化方法

数日前、非常に実用的なコメント機能を備えたブログを見ました（名前とウェブサイトを忘れました）訪問者がメッセージを残した後、立ち上がると、データ入力ボックスが非表示になります。訪問者は、コメントする前に関連情報を変更することを選択できます。これにより、訪問者に優れたユーザーエクスペリエンスが提供されます。作るのは難しくないのでシェアしてください

20151124150133394.png (445×225)

需要

注意深い友人は気づいたかもしれません: WordPress でコメントを投稿した後に再度ブログにアクセスすると、情報はすでに情報入力ボックスに入っているため、再度入力する必要はありません。ただし、コメントをしていないか、コメントをクリアしていない場合は、情報を再度入力する必要はありません。 Cookie、データ入力ボックスは空になります。

1. 訪問者の情報がすでに存在している場合、訪問者はその情報自体に注目することがほとんどないため、それらの情報入力ボックスを非表示にする方法を見つける必要があります。これには訪問者の名前が表示されます。それ以外の場合、訪問者は自分の身元を知りません。

2. 訪問者は自分のメールアドレスを変更したり、自分の名前をより魅力的な名前に変更したいと考えている可能性があります。そのため、それらの情報を許可するにはいくつかの対策が必要です。訪問者は情報入力ボックスを再度表示します。

3. 情報を提供したことがない訪問者には、情報入力ボックスが表示される必要があります。

分析

要件からもわかるように、情報を持っている訪問者と情報を持っていない訪問者の2つの状態に対応する必要があります。

情報をお持ちの方には、情報入力ボックスを表示する（ニックネーム表示）と情報入力ボックスを非表示にする（ニックネーム表示）の2つの状態があります。情報のない訪問者には、情報入力ボックス（ニックネームなし）のみが表示されます。
さて、訪問者にデータ入力ボックスを表示するボタンと非表示にするボタンの 2 つのボタン (変更とキャンセル) を提供します。

感想

1. ページをどのように記述するか? コーディングする前に、疑似コードを使用してみましょう。

if (情報を持った訪問者) {

訪問者のニックネームを配置します

変更ボタンを配置します（クリック後：変更ボタンを非表示、キャンセルボタンを表示、データ入力ボックスを表示）

キャンセルボタンを配置します（クリック後：変更ボタンを表示、キャンセルボタンを非表示、データ入力ボックスを非表示）
}
データ入力ボックスを配置します
if (情報を持った訪問者) {
キャンセルボタンを非表示にする
データ入力ボックスを非表示にする
}
2. 訪問者がコメントしたかどうかを知るには? 前述したように、コメントをした訪問者の情報が表示されます。つまり、情報を取得する方法がコードに実装されています。リーリー
以上です! $comment_author は訪問者のニックネームです。空の場合は、訪問者情報が空であることを意味します。
3. いくつかのコントロールが同時に表示されたり非表示になったりします。これを行うには、ページにジャンプする必要はありません。特定のコントロールを表示するかどうかを設定するメソッドを作成できます。それはただの簡単な方法です:
リーリー

エンコーディング

次は何を書くでしょうか? 見てください...

リーリー

訪問者のコメントにはウェルカムメッセージが表示されます

重要な質問: 訪問者情報の取得

実際、実装プロセス全体は複雑ではありません。ここでの重要なポイントは、訪問者が最近コメントしたかどうかを確認する方法です。 20151124150152167.png (840×400)

訪問者がコメントを残すと、コメント投稿者の情報が Cookie に保存されます。 Firebug または Chrome の開発者ツールを通じて確認できます:

リーリー

上記からわかるように、コメントに関連する情報は、comment_author、comment_author_url、comment_author_email の 3 つです。ただし、真ん中に文字列 bbfa5b726c6b7a9cf3cda9370be3ee91 があります。default-constants.php のコードを見ると、このセクションが COOKIEHASH と呼ばれ、その値がブログ URL の md5 値であることがわかります。

リーリー

これだけを知る必要があるのは、この情報は WordPress が comments_template メソッドの wp_get_current_commenter を通じて Cookie から訪問者の情報をすでに解析しているためです。たとえば、comment.php ファイルで $comment_author を直接使用して、Cookie に保存されている訪問者の名前を取得できます。

コードの実装

次の実装は非常に簡単です。$comment_author 変数の値が空かどうかを判断することで、訪問者が最近 (Cookie を使用して) コメントしたかどうかを判断します。

リーリー

可能な場合は、コメントボックスの上にウェルカムメッセージを表示します:

リーリー

comment_form($comments_args) メソッドが呼び出される前に、上記のコードをテーマの comment.php ファイルに追加する必要があります。

次に、JavaScript を使用して訪問者情報を変更します。

/* Toggle comment user */
$('#comments').on('click', '#toggle-author', function () { 
  $('#author-info').slideToggle(function () { 
    if ($(this).is(':hidden')) {
      /* Update author name in the welcome messages */
      $('#welcome-login strong').html($('#author').val());

      /* Update the toggle action name */
      $('#toggle-author u').html('更改');
    } else {
      /* Update the toggle action name */
      $('#toggle-author u').html('隐藏');
    }  
  }); 
});

ログイン後にコピー

这样，如果用户需要更新信息时，可以点击欢迎信息右侧的更改按钮；修改完成之后，用户信息会在评论后更新。