這次主題分享是增加縮圖功能到前/後文章導航上, 用意是讓Visitor可以更清楚先概略了解此篇文章的特色與方向, 而此種方式會比單純文字顯示連結會更增加來訪者的意願再多看其內容.
一般的佈景主題不太會有顯示縮圖功能, 付費版也許會有, 但不是每個佈景主題都會具備此功能.
所以上網找了一些資料,把它整合到Wordpress網站內, 在開始之前, 還是溫馨提醒一下, 此功能的加入會修改到主機後台的文件, 所以在更改內容之前, 會建議先備份好主機內容, 以及記錄修改的地方與檔案名稱, 才不會萬一修改錯誤而導致網站無法使用!
也建議所有修改的內容,都是在子佈景主題裡,也可以參考這裡!
下圖所示, 當功能加入之後, 在桌面版時,會如同藍色框顯示, 左/右各一個文章連結與縮圖.而在行動版上,則會因螢幕寬度/解析度大小而做變更.
進入主機後台cPanel裡, 一開始要修改的文件是[functions.php], 先自訂縮圖的長/寬比, 若是沒有設定, 也可以不加入紅色框代碼, 直接使用預設佈景主題中的比例.
再來開啟佈景主題中的[single.php], 在上/下二個藍色框中, 加入紅色框裡的代碼, 在單引號中的檔案名稱可以任意更改. 用意是利用php語法載入外部使用的php檔. 而此檔大部份內容都是固定,所以也可以從這裡直接下載套用就可以了, 後續內容會再進一步說明.
而這裡是用CSS語法去做美化/比例/樣式的調整, 下方代碼簡單來說, 就是前一篇/後一篇的寬度比例為50%,而且各處於最左邊/最右邊, 以及連結有顏色的變代當滑鼠指標經過時.
而.post-previous 與.post-next這二組ID名稱也是可以隨意更改的, 在下載的檔案中, 預設名稱就是這二組.
<div class=”post-previous”> / <div class=”post-next”>
檔案名稱:wp-post-navigation-6.php, 建議與子佈景主題的資料夾內一起.
而下方二張圖為此檔案中的全部內容, 網路上也有許多相似文章內容, 9成以上內容與下方一樣, 除了紅色框內容之外, 還有一個就是少定義了 global $post這個變數, 而導致在切換前/後篇文章時, 會發生順序對不上,這一點要注意一下!
紅色框內可以隨意改變文字大小/ 或是添加任何圖示表示方向或改變字型, 個人認為圖示的顯示, 不是很需要, 也可能會影響網站連線些許的效能, 畢竟只有左/右二篇文章, 所以決定把它移除了!
總結:
儘管此功能可以透過外掛也可以做到, 但也有可能因為外掛的好/壞, 而影響網站的效能, 如果能少用外掛而用代碼的添加方式, 比較不會造成主機的負擔! 也就多少能改善主機的連線速度!
