Select Page

WordPress Link Hover Effects – 文章連結效果

WordPress Link Hover Effects – 文章連結效果

WordPress Link Hover Effects 透過增加網站內容文章連結效果,提升訪客對於網站的閱覽。

架設 WordPress 網站這麼長時間以來,一直希望網站的文章內容,可以幫助訪客獲得最好的閱讀效果,所以文章內容中帶到的連結,沒有使用連結式樣效果,與內文設計一體。但是最近兩年觀察下來,很多訪客對於文章的閱讀比較沒有耐心,忽略了文章中提到的相關訊息,因此重複性的問題一直出現在詢問的信件中。所以從 8 月份開始,網站文章內容中提到的連結,新增加了顏色漸進的效果,重點式的標示出文章相關資訊連結,希望透過這樣的修改,讓訪客可以更清楚的取得更完整的教學資訊。

 

WordPress Link Hover Effects

  • 這次的連結效果使用的是 transition 式樣,記錄一下網站的修改過程,同時也分享給有興趣的朋友。
  • 網站的佈景主題版就附有連結的式樣效果,不過我並不想要網站的全部連結都套用一樣的效果。
  • 因此,透過瀏覽器的工作管理員,找到文章內容區塊,並進行連結的式樣設計,讓連結式樣設計的效果只出現在文章中。
  • 這次連結的式樣效果設計是參考 CSS TRICKS,式樣語法如下。

  • transition 可以調整的屬性可以分為: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
    • transition-property:定義哪些 CSS properties 會被轉場效果影響。
    • transition-duration: 定義轉場所花費的時間。
    • transition-timing-function:設定轉場時所依據的速度曲線。
    • transition-delay:定義多久之後開始發生轉場。
  • transition-timing-function:除了可以自行定義效果外,也有幾個已經定義好的效果。
    • ease:指定緩慢啟動的轉換效果,然後快速,然後緩慢結束。
    • linear:指定從開始到結束具有相同速度的轉換效果。
    • ease-in: 指定慢慢開始的轉換效果。
    • ease-out:指定慢慢結束的轉換效果。
    • ease-in-out:指定慢慢開始與慢慢結束的轉場效果。
  • 不同的佈景主題對於文章內容的定義並不相同,這一點在修改式樣設計時需要留意。
  • 式樣設計的修改同樣的透過子佈景主題的式樣檔(style.css)。

滑鼠移到這裡,可以看到連結效果。

 

結論

隨時檢視網站的統計資訊,適時的調整網站內容的相關設計,是這一篇文章分享的最主要目的。網站建置好以後,不是放著就可以,透過不斷的修改,找到最適合訪客的閱讀模式,也找出網站管理者的最佳維護方式,這才是網站架設最終目的。

 

如果對於網站式樣修改有興趣的話,還可以參考 WordPress Theme Customize – 佈景主題修改示範,有更多詳細的說明。

About The Author

max

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

Leave a reply

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

網站架設

WordPress 虛擬主機免費安裝設定