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

コメントすることで、ユーザーはサイトのコンテンツに参加することができます。そのため、コメントレイアウトや コメントフォームを見栄えだけでなく、ユーザーフレンドリーなものにすることが重要だと考えています。最近、ユーザーからWordPressのコメントフォームにjQueryツールチップを追加する方法を尋ねられました。このチュートリアルでは、コメントフォームに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を開く必要があります。このコードをコピー＆ペーストしてください：

[cbk1］

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

また、これらのファイルはコメントフォームが表示されたときにのみ読み込まれるようにします。その後、初期設定のコメントフォームを修正し、入力フィールドにtitle属性を追加しました。このtitle属性には、ツールチップに表示させたいメッセージが含まれています。例えば、投稿者フィールドでは、次のようにしました：

title="実名で入力してください。キーワードは使用しないでください。"

プラグインファイルができたので、次はjQueryを追加します。wpb-tooltip.jsファイルを開き、その中に次のコードを追加してください：

[SKX1］
(関数($) {)
$( "#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)；
[SKX2］

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

さて、最後のステップは、wpb-tooltip.cssファイルにちょっとしたCSSを追加することです。以下のコードをコピー＆ペーストしてください：

[cbk2］

このCSSファイルは自由に変更してください。

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

このチュートリアルで、WordPress のコメントフォームに jQuery ツールチップを追加する方法をご理解いただけたでしょうか。このコードを修正して、他の場所にツールチップを追加してみることをお勧めします。例えば、私たちのサイトにツールチップの証言を追加した方法をご覧ください。フィードバックやご質問は、以下にコメントを残してください。