dark

何在沒有插件的情況下在 WordPress 中添加工具提示

2023年3月6日

第 1 步：為您的主題添加額外的 CSS

要在不安裝任何額外插件的情況下為您的 WordPress 網站添加工具提示功能，您需要使用 WordPress 主題定製器將我們的自定義 CSS 類添加到您的主題中，然後將該類用於您選擇的任何單詞。為此，首先 從您的 WordPress 管理儀錶板導航到外觀 → 自定義 以打開主題定製器頁面（如果您使用塊主題，您可以參考這篇文章以在您的網站上啟用主題定製器）。

1

進入主題定製器頁面後，打開 Additional CSS 塊，然後在代碼編輯器中添加以下自定義 CSS，然後單擊 Publish。

.tooltip{ 位置：相對；顯示：內聯塊；}.tooltip .tooltip-text { 可見性：隱藏；寬度：240px；背景色：#071e26；邊界半徑：25px；顏色：#fff；盒子陰影：10px 10px 5px 淺藍色；文本對齊：居中；填充：6px；位置：絕對；z-index: 1;}.tooltip:hover .tooltip-text { visibility: visible;}

上面的 CSS 片段所做的是聲明「 tooltip 」和「 tooltip-text 」CSS 類，然後向工具提示添加一些樣式，隱藏工具提示，並在將游標懸停在使用 CSS 類的元素上方時顯示它。

第 2 步：添加工具提示

一旦您將額外的 CSS 添加到您的主題定製器中，現在就是為您想要的詞添加工具提示的時候了。首先編輯您的一篇文章或頁面，然後使用父詞的「 tooltip 」類和「 tooltip-text 」在工具提示框中添加附加信息。在古騰堡編輯器上這樣做：

  • 選擇包含要提供工具提示的單詞的塊（例如，段落塊）
  • 通過單擊垂直省略號打開塊 選項 
  • 從選項中選擇 編輯為 HTML 

3-edit-as-html

對於本教程，我們將向上面屏幕截圖中的第一個「Ghost」單詞和「WordPress」單詞添加工具提示。我們這樣做如下：

4 添加跨度

  • 我們 <span> 使用工具提示類為「Ghost」字詞添加了標籤，將其設置為帶有工具提示的字詞
  •  在關閉前一個標籤之前 使用tooltip-text<span>類 再次 添加一個 標籤，因此該 標籤將成為前一個標籤的子標籤<span>
  • 為工具提示中顯示的附加信息添加了一些文本
  • </span></span> 使用標籤關閉兩個代碼 

您可以按照上述步驟為要提供工具提示的單詞進行操作。完成塊的編輯後，您很可能會看到一個錯誤。如果您修改塊的 HTML，則預計會出現此錯誤。要繼續，您可以通過單擊顯示  為水平省略號的 更多選項然後選擇轉換為 HTML 將塊轉換為 HTML。

5-block-error-convert-to-html

完成添加工具提示後發布或預覽您的頁面或帖子，以從前端查看結果。

1-anim-tooltip-guten 如何添加可重複使用的工具提示

如果您想在頁面上多次使用工具提示，並且不喜歡在創建每個工具提示時編輯 HTML 及其內容的想法，就像在製作託管計劃定價頁面時一樣，如下所示：

2-託管計劃

您可能希望使用短代碼來創建這些工具提示。使用短代碼創建可重用的工具提示可以省去將每個塊編輯成 HTML 並鍵入每個工具提示內容的麻煩。

在我們開始之前，您需要將上面的自定義 CSS 添加到工具提示容器和樣式的主題定製器中，如果您想了解更多關於簡碼的信息，您可能需要閱讀我們之前關於為您的 WordPress 網站創建簡碼的教程。

對於本教程，我們將創建一個帶有屬性的短代碼來選擇工具提示內容，這樣您就不需要為每個不同的工具提示創建許多短代碼。

第 1 步：創建簡碼

要創建短代碼，首先從 WordPress 管理儀錶板前往 文件主題編輯器上的主題functions.php 文件  ，然後繼續將以下代碼添加到編輯器中。

function wpptooltip($atts= array(), $content= null){ shortcode_atts(array( ‘info’=>’default’ ), $atts); $content= do_shortcode($content); //我們使用「info」作為簡碼的屬性 if(!empty($atts)){ switch($atts[‘info’]){ case ‘att_value’: $output = ‘<span>Parent word<span >單詞的工具提示內容</span></span>’; 休息; //在此處添加更多屬性及其值 default: $output = ‘請輸入正確的屬性’; 休息; }返回$輸出；}else{ return “請指定屬性！”; } }add_shortcode(‘wptip’,’wpptooltip’);

在上面的代碼中，我們創建了 info 屬性，其中「 att_value 」作為 shortcode 屬性的第一個值。您將用於上述代碼的簡碼如下所示：

  • [wptip 信息=」att_value」]

它將顯示來自前端的以下結果。

6-example-of-the-tooltipshortcode-1

第 2 步：添加您的工具提示信息

下一步是添加您自己的工具提示信息及其父詞，以便您可以使用具有相應屬性的短代碼來顯示它。讓我們從為工具提示添加第一個選項開始。

為此，請將 case 的值從步驟 1 中的代碼更改 switch case 為 'att_value' 您想要的單詞，這將成為您的第一個屬性。

7 改變你的屬性

然後繼續將工具提示父詞和該屬性的內容更改為您的工具提示，您可以通過覆蓋 'tooltip' 父詞的詞和 變數'tooltip content for the word' 內容的句子 來實現$output 。

8 更改內容1

保存您所做的更改，您的第一個工具提示現在應該可以使用了。但是，我們仍然需要為不同的詞添加更多的工具提示選項。

在此階段，添加更多工具提示選項非常容易。case 您只需要從第一個到 語句複製代碼 break; 並將代碼粘貼到它下面。然後像對第一個屬性所做的那樣修改大小寫值、父詞和工具提示內容。

9 複製案例

將所有你想要的工具提示添加到代碼後，保存你對文件所做的更改，並隨意嘗試添加工具提示短代碼，其屬性與你要在網站上顯示的工具提示相對應。

底線

使用工具提示，您可以為某些詞或其他元素添加更多信息，而不會在您的網站頁面或帖子上佔用更多空間。本教程向您展示如何將工具提示添加到您在 WordPress 網站上選擇的任何單詞，以及如果您需要在頁面上多次添加工具提示，如何創建可重複使用的工具提示。

相關文章