2種添加WordPress工具提示的方法(免費插件或CSS)

[ad_1]

有時候,您需要向網站的用戶提供更多信息,但頁面資源不足。您總是可以包括指向其他​​頁面的鏈接,但是在許多情況下,最方便的方法是添加一個簡單的WordPress工具提示,以顯示用戶所需的所有信息。

藉助WordPress工具提示(也稱為CSS懸停工具提示),訪問者所需的所有信息都可以通過「滑鼠懸停」在正確的元素上而直接存在。

在本文中,我們將向您展示一些我們最喜歡的CSS懸停工具提示實用示例。然後,我們將教您如何在不使用插件的情況下將它們添加到您的網站。

讓我們深入探討!

CSS懸停工具提示簡介

WordPress工具提示的概念很簡單。它們是浮動的容器,當您將滑鼠懸停在特定元素上時會「彈出」。

動畫工具提示的兩個示例。

通常,懸停工具提示會提供您不想包含在原始設計中的其他信息。

例如,如果您要建立定價表,則工具提示可以幫助您分解每個功能的功能,而又不佔用大量設計空間:

包含CSS懸停工具提示的表格示例。

其他用例包括單詞定義,向內容添加源,編輯評論,地圖以及您能想到的幾乎所有其他元素。

包含工具提示的地圖。兩種添加WordPress工具提示的方法

在向網站添加工具提示時,WordPress使您可以使用多種方法。您可以手動執行此操作(這涉及添加一些代碼),也可以使用插件。

我們將首先向您展示如何使用免費的WordPress工具提示插件添加工具提示。然後,我們將深入研究手動CSS方法。

1.使用WordPress工具提示插件

使用插件的全部目的是為了節省您手動添加功能的時間。考慮到這一點,Shortcodes Ultimate為WordPress用戶提供了最簡單的工具提示實現之一。

啟用插件後,您將可以訪問數十個短代碼,可用於添加任何內容,包括按鈕,滑塊,圖像輪播,分隔線等。

當然,工具提示是Shortcodes Ultimate支持的元素列表之一。更好的是,每個短代碼都可以使用內置設置和CSS進行完全自定義。

首先,請打開您要添加第一個WordPress工具提示的頁面的「塊編輯器」。然後,在任何現有模塊的菜單上尋找新的“插入簡碼”按鈕:

插入新的簡碼。

立即,您會看到可用的簡碼列表。選擇“工具提示”選項:

添加工具提示簡碼。

現在,您可以自定義工具提示的樣式。我們決定採用基本的深色設計,並將其放置在滑鼠懸停的元素上方:

自定義您的工具提示。

向下滾動直到到達“工具提示內容”欄位,然後輸入要元素顯示的文本:

添加工具提示的內容。

注意,您還可以配置工具提示的行為方式。默認選項將隱藏容器和文本,直到將滑鼠懸停在其父元素上。您還可以配置工具提示,這樣除非您單擊父元素,否則它們不會顯示,但這會給訪問者帶來麻煩。

在代碼塊編輯器中,新的短代碼如下所示:

工具提示的簡碼示例。

如果您在前端進行預覽,則以下是工具提示的工作方式:

一個簡單的Shortcodes Ultimate工具。

請記住,您可以使用正確的簡碼在幾乎任何位置添加工具提示。這適用於常規文本,表格,圖標和其他元素。

但是,根據經驗,您想添加一些視覺指示器以使用戶知道他們應該將滑鼠懸停在父元素上。下劃線或顏色變化效果很好。您還可以使用信息表情符號(ℹ️)。

2.手動設置CSS懸停工具提示

在上一節中,我們討論了如何使用插件添加懸停工具提示。該插件實際上為您設置了多種CSS樣式。這意味著您可以從設置列表中進行選擇,然後插件會生成必要的簡碼。

但是,沒有理由不能使用代碼手動完成此操作。向主題中添加一些新CSS類的最簡單方法是使用WordPress Customizer。

要訪問定製器,請從儀錶板導航至“外觀>主題”,然後在左側菜單底部查找“其他CSS”選項卡:

其他CSS選項卡。

接下來,向您的主題添加三個CSS類:

  1. 一個用於工具提示容器
  2. 換文字
  3. 最後一個隱藏一切

這是代碼的基本示例:

.tooltip-box {
  職位:相對
    顯示:inline-block;
}
.tooltip-box .tooltip-text {
  可見性:隱藏;
    寬度:100px;
背景顏色:黑色;
顏色:#fff;
文本對齊:居中;
填充:6px 0;
位置:絕對;
z索引:1;
}
.tooltip-box:懸停.tooltip-text {
  能見度:可見;
}

簡而言之,此代碼生成一個空容器,並設置其相對於父元素的位置。接下來,它向要包含的文本添加一些樣式,例如填充,對齊,顏色和整體寬度。最後,它將容器設置為隱藏,直到將滑鼠懸停在父元素上。

將自定義CSS保存到主題後,您可以從網站上的任何頁面調用工具提示。為此,請訪問要在其中添加工具提示的頁面的「塊編輯器」。

選擇要在其中添加第一個工具提示的塊,然後轉到“另存為HTML”選項:

將塊編輯為HTML。

現在,添加一個div,其中包含工具提示的父文本以及您希望其包含的信息:

上層文字
您的工具提示文字在這裡!

確保將工具提示文本CSS類添加到div中。這是您使用定製程序添加到主題的CSS類。如果您為班級設置了其他名稱,請繼續進行更改。

在編輯器中,我們的工具提示如下所示:

為我們的CSS懸停工具提示添加HTML。

如果將更改保存到頁面並轉到前端,則可以看到更改:

工具提示的父元素。

將滑鼠懸停在父文本上後,將顯示工具提示:

運行中的CSS工具提示。

而已!

請記住,您可以像其他網站元素一樣設置CSS懸停工具提示的樣式。這意味著使用不同的顏色,修改容器等,以便它們都符合您網站的風格。

為此,您可能需要學習一些基本的CSS。 Codecademy有很好的CSS課程。

結論

在網站上添加WordPress工具提示,可以通過添加有用的信息來幫助您改善網站的用戶體驗。

在WordPress中添加CSS懸停工具提示時,您可以採用兩種方法:

  1. 使用WordPress工具提示插件為您進行設置。
  2. 使用定製程序手動設置CSS懸停工具提示。

有關創建更用戶友好的WordPress網站的其他方法,您還可以查看我們的指南,以改善WordPress導航並消除網站上的混亂情況。

您對如何自定義WordPress懸停工具提示有任何疑問嗎?讓我們在下面的評論部分中對它們進行研究!

相關文章