WordPressコメントフォームにjQueryツールチップを追加する方法

コメントは、ユーザーがあなたのウェブサイトのコンテンツにエンゲージできるようにします。そのため、コメントのレイアウトとコメントフォームを、ユーザーフレンドリーで見た目も良くスタイリングすることが重要だと考えています。最近、あるユーザーから WordPress のコメントフォームに jQuery ツールチップを追加する方法について質問がありました。他の人も役立つかもしれないと考え、このチュートリアルでは WordPress のコメントフォームに jQuery ツールチップを追加する方法を紹介します。

jQueryツールチップを追加する理由

マウスカーソルをアイテムに合わせるとツールチップが表示され、通常はそのアイテムに関する説明が提供されます。このチュートリアルでは、jQueryツールチップを追加して、「コメントフォームのフィールドには本名を使用してください」のようなヒントを表示します。

jQueryツールチップを追加することで、ユーザーエクスペリエンスを向上させることができ、より見栄えが良くなります。

jQueryツールチップを追加する方法

まず、デスクトップにフォルダを作成し、wpb-comment-tooltipsという名前を付けます。このフォルダ内に、次の3つのファイルを作成する必要があります。

• wpb-comment-tooltips.php
• wpb-tooltip.css
• wpb-tooltip.js

メモ帳のようなプレーンテキストエディタを使用してこれらのファイルを作成してください。ファイルを作成したら、テキストエディタでwpb-comment-tooltip.phpを開く必要があります。このコードをファイルにコピー＆ペーストしてください。

<?php
/** 
Plugin Name: WPBeginner's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/

// Only load our scripts and style when a comment form is displayed

add_action( 'comment_form_before', 'wpb_comment_tooltips' );

function wpb_comment_tooltips() { 
wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null);
}

// Modify comment form fields and add title attribute to form input fields
 
function alter_comment_form_fields($fields){
    $fields['email'] =  '<p class="comment-form-email"><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="email" title="Your email is safe with us, see our privacy policy." name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
      '" size="30"' . $aria_req . ' /></p>';  
    $fields['url'] = '<p class="comment-form-url"><label for="url">' .
      __( 'Website', 'twentythirteen' ) . '</label>' .
      '<input id="url" name="url" title="Your website or any social media profile URL" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
      '" size="30" /></p>';  
	  $fields['author'] = '<p class="comment-form-author">' .
      '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="author" title="Please use your real name, no keywords." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
      '" size="30"' . $aria_req . ' /></p>';
    return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>

上記のコードでは、まずプラグインヘッダーを作成し、このプラグインに名前と説明を付けました。その後、JavaScript と CSS ファイルを読み込みます（WordPress で JavaScript とスタイルを適切に追加する方法に関するガイドを参照してください）。

また、これらのファイルはコメントフォームが表示されたときにのみ読み込まれるようにします。その後、デフォルトのコメントフォームを変更し、入力フィールドにtitle属性を追加しました。このtitle属性には、ツールチップに表示したいメッセージが含まれています。たとえば、作成者フィールドでは次のように使用しました。

title="実名を使用してください。キーワードは不要です。"

プラグインファイルを作成したので、jQueryを追加する時間です。wpb-tooltip.jsファイルを開き、このコードを内部に追加してください。

(function($) {
$( "#commentform" ).tooltip({ position: {
	my: "center bottom-10",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        } } });
})(jQuery);

このコードでは、#commentform が jQuery がツールチップを表示するセレクターであり、.tooltip がツールチップの位置を定義したコンテンツ部分です。

次に、最後のステップとして、wpb-tooltip.cssファイルに少量のCSSを追加します。このコードをコピー＆ペーストするだけです。

.ui-tooltip, .arrow:after {
    background: #356aa0;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px #356aa0;
	max-width:350px;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px #356aa0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }

必要に応じて、このCSSファイルを自由に編集してください。

これで完了です。これで、WordPressのコメントフォームにjQueryツールチップを追加するプラグインを正常に作成できました。あとは、デスクトップからwpb-comment-tooltipsフォルダを、FilezillaのようなFTPクライアントを使用して、ウェブサーバーの/wp-content/plugins/ディレクトリにアップロードするだけです。プラグインをアップロードしたら、WordPress管理画面のプラグインページに移動してプラグインを有効化してください。

このチュートリアルが、WordPress のコメントフォームに jQuery ツールチップを追加する方法を学ぶのに役立ったことを願っています。このコードを変更して、他の場所にもツールチップを追加してみてください。例えば、私たちのサイトにツールチップ付きの推薦文を追加した方法をご覧ください。フィードバックや質問については、以下のコメント欄に書き込んでください。