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 – 佈景主題修改示範，有更多詳細的說明。