為什麼添加 jQuery 提示？
提示是在用戶將鼠標懸停在某個項目上時顯示的，通常是提供該項目的描述。在這個教程中，我們將添加 jQuery 提示來顯示像 ‘請在評論表單字段中使用真實姓名’ 這樣的提示信息。通過添加 jQuery 提示，可以提升用戶體驗，使您的評論表單看起來更好。
如何添加 jQuery 提示
首先，在桌面上創建一個文件夾，命名為 wpb-comment-tooltips。在這個文件夾中，需要創建以下三個文件：
- wpb-comment-tooltips.php
- wpb-tooltip.css
- wpb-tooltip.js
使用像 Notepad 這樣的純文本編輯器來創建這些文件。創建好文件後，打開 wpb-comment-tooltip.php 文件，複製並粘貼以下代碼：
<?php
/**
Plugin Name: WPressize Me's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPressize Me
Version: 1.0
Author: WPressize Me
Author URI: https://www.wpressizeme.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'] = ' ' .
($req ? '*' : '') .
'
';
$fields['url'] = '' .
'
';
$fields['author'] = '';
return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>
在上述代碼中，我們首先創建了一個插件標頭，並給予這插件一個名稱與描述。接下來，我們加載了 JavaScript 和 CSS 文件（請參考我們的教程來了解如何在 WordPress 中添加 JavaScript 和樣式）。我們確保這些文件僅在顯示評論表單時被加載，接著修改了默認的評論表單並在輸入字段中添加了 title 屬性。這些 title 屬性包含了我們希望在提示中顯示的消息。例如，在 author 字段中，我們使用了 title=’Please use your real name, no keywords.’
現在您已經創建了插件文件，接下來我們需要添加一些 jQuery。在 wpb-tooltip.js 文件中添加如下代碼：
(function($) {
$("#commentform").tooltip({
position: {
my: "center bottom-10",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
$("")
.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);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
您可以根據需要自由修改這個 CSS 文件。
這就是全部內容。您現在已順利創建了一個在 WordPress 評論表單中添加 jQuery 提示的插件。只需使用 FTP 客戶端（例如 Filezilla）將 wpb-comment-tooltips 文件夾從桌面上傳到您的網絡伺服器的 /wp-content/plugins/ 目錄中。上傳插件後，前往 WordPress 管理區的插件頁面並啟用插件。
我們希望這個教程能幫助您學習如何在 WordPress 評論表單中添加 jQuery 提示。我們鼓勵您修改這些代碼並嘗試將提示添加到其他地方。例如，查看我們如何在我們的網站上添加提示推薦信。在下面留言以提供反饋和問題。
Share
Written by
Related Posts
