Select Page

WordPress Tooltips With CSS – 如何新增註解提示

WordPress Tooltips With CSS – 如何新增註解提示

WordPress Tooltips With CSS 要如何在文章的內容新增註解提示呢?

最近朋友問到在其他朋友架設的 WordPress 網站,看見註解有提示功能的展示,想要知道可不可以也在自己的 WordPress 網站套用。關於註解提示的出現場合,一般是對於某些關鍵字是訪客經常需要的資訊,或是網站作者想要對字串下特別說明的註解或是提示,這些功能的目的都是在幫助訪客接收更完整的文章訊息。接下來的文章會跟大家分享如何透過式樣設計來達成這個效果,如果您也有這一類的需求,不妨參考看看。

 

WordPress Tooltips With CSS

  • 第一個分享的方法是透過式樣設計,參考的文件來源是 Envato Tuts+ 在 codepen 上寫的 CSS Tooltip Magic
  • 這個式樣設計分為上下左右四款,今天範例文章就擷取其中的上(UP)來說明。
  • 首先打開自己子佈景主題的 style.css 檔案,填入以下語法。

CSS 式樣語法設計:

  • 式樣設計完成以後,回到文章編輯的頁面,將編輯模式切換到文字,在想要新增文字註解或是提示的地方,插入以下語法。

  • [註1] 可以一自己的需求設計成任何文字,這一段是註解提示文字:改成自己的註解提示文字內容。
  • 以上完成(如下圖所示)。

 

WordPress Tooltips With CSS - 如何新增註解提示完成效果
WordPress Tooltips With CSS – 如何新增註解提示完成效果

 

結論

CSS 式樣設計對於網頁設計來說是很有趣的一項學習,今天文章推薦的 codepen 網站,就是一個非常棒的線上學習網站,開立帳號以後就可以在上面設計學習,有非常多的資源可以參考。建議每一位有心從事網站設計的朋友,都應該到上面好好學習。即使是新手朋友,都建議可以去註冊帳號,這會是一個開始學習式樣設計的好地方。

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

Leave a reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *