如何在 WordPress 评论表单中添加 jQuery 工具提示

---

评论允许用户与您网站上的内容互动。这就是为什么我们认为设计评论布局和评论表单的风格非常重要，这样既方便用户又美观。最近，一位用户询问我们如何将 jQuery 工具提示添加到 WordPress 评论表单中。我们认为其他人可能也会发现这很有用。在本教程中，我们将向您展示如何在 WordPress 评论表单中添加 jQuery 工具提示。

为什么添加 jQuery 工具提示？

当用户将鼠标移至某个项目时，会出现工具提示，通常为他们提供有关该特定项目的描述。在本教程中，我们将添加 jQuery 工具提示来显示诸如“请在评论表单字段中使用您的真实姓名”之类的提示。

通过添加 jQuery 工具提示，可以增强用户体验，而且看起来会更好。

如何添加 jQuery 工具提示

首先，您需要在桌面上创建一个文件夹并将其命名为 wpb-comment-tooltips。在此文件夹中，您需要创建以下三个文件：

• wpb-评论-tooltips.php

• wpb-工具提示.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://word-press.club
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="请使用真实姓名，不要使用关键字。"

现在您已经创建了插件文件，是时候添加一些 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 工具提示。您所需要做的就是使用 Filezilla 等 FTP 客户端将 wpb-comment-tooltips 文件夹从桌面上传到 Web 服务器上的 /wp-content/plugins/ 目录。上传插件后，转到 WordPress 管理区域的插件页面并激活插件。

我们希望本教程能帮助您学习如何在 WordPress 评论表单中添加 jQuery 工具提示。我们鼓励您修改此代码并尝试将工具提示添加到其他位置。例如，查看我们如何将工具提示推荐添加到我们的网站。如需反馈和问题，请在下面发表评论。