如何在WordPress評論表中添加jQuery工具提示


評論允許用戶使用您網站上的內容。 因此,我們認為對您的評論佈局和評論表單進行樣式設置非常重要,因此它既易於使用,又美觀。 最近,一個用戶問我們如何將jQuery工具提示添加到WordPress註釋表單中。 我們認為其他人也可能會覺得這很有用。 在本教程中,我們將向您展示如何以WordPress註釋形式添加jQuery工具提示。

jQuery工具提示在WordPress註釋表單上的作用

為什麼要添加jQuery工具提示?

當用戶將鼠標移至某個項目時,會顯示工具提示,通常會向他們提供有關該特定項目的描述。 在本教程中,我們將添加jQuery工具提示以顯示提示,例如,請在註釋表單字段中使用您的真實姓名。

通過添加jQuery工具提示,您可以增強用戶體驗,並且看起來會更好。

如何添加jQuery工具提示

首先,您需要在桌面上創建一個文件夾並將其命名 wpb-comment-tooltips。 在此文件夾中,您需要創建以下三個文件:

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

使用記事本之類的純文本編輯器來創建這些文件。 創建文件後,需要打開 wpb-comment-tooltip.php 在文本編輯器中。 將此代碼複製並粘貼到文件中:

 ' .
      ( $req ? '*' : '' ) .
      '

'; $fields['url'] = '

' . '

'; $fields['author'] = '

' . ' ' . ( $req ? '*' : '' ) . '

'; return $fields; } add_filter('comment_form_default_fields','alter_comment_form_fields'); ?>

在上面的代碼中,我們首先創建了一個插件標頭,為其指定了名稱和描述。 之後,我們加載JavaScript和CSS文件(請參閱有關如何在WordPress中添加JavaScript和样式的指南)。

我們還確保僅在顯示註釋表單時才加載這些文件。 之後,我們修改了默認註釋表單,並在輸入字段中添加了title屬性。 此標題屬性包含我們希望在工具提示中顯示的消息。 例如,在作者字段中,我們使用了:

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 是我們定義工具提示位置的內容部分。

現在最後一步是在其中添加一些CSS wpb-tooltip.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 文件夾從桌面到 /wp-content/plugins/ 使用FTP客戶端(例如Filezilla)在Web服務器上的目錄。 上傳插件後,轉到 外掛程式 WordPress管理區域中的頁面並激活插件。

我們希望本教程可以幫助您學習如何在WordPress註釋表單中添加jQuery工具提示。 我們建議您修改此代碼,並嘗試在其他地方添加工具提示。 例如,查看我們如何將工具提示推薦添加到我們的網站。 對於反饋和問題,請在下面發表評論。