一個網站除了內容/功能之外, 畫面呈現美感和協調性也是很重要的, 也是讓使用者能停留時間長短的一個重要因素, 它就是佈景主題(theme)! 如果也能同時支援RWD(響應式網頁設計),那就可以省掉更多時間去調整了!
而在WordPress(WP)的環境中, 提供許多免費的佈景主題, 而當中也有付費的, 畢章付費的可調性更彈性更多, 以初學者來說, 使用免費的主題就很足夠了! 下圖是在WP後台裡去新增佈景主題!
有不同類型的佈景主題, 也可以使用[功能篩選]去找尋自訂功能的佈景主題.
這裡使用Frontier theme來做簡易的使用以及做局部美化調整方式.
每個人對美感也都不盡相同, 所以並無最好與最差的畫面顯示, 端看網站主的巧思搭配了!
這是原先佈景主題的畫面.
我們以這個主題套用在一個測試用的網站, 用意是利用它來做一些畫面/元件的調整修改與美化.
而每一個主題都會有一些基楚的設定可以供使用者去調整, 每個主題都有各不相同的設定做提供使用,
這次要介紹是原本佈景主題所沒有提供選項的方式去做CSS的調整.
網站簡易來說, 是以HTML為主架構, 而CSS就像是裝潢用意, 所以透過CSS語法去針對需要的元件/文字/圖像/顏色..等等做變化調整! 而原先的主題內,有許多設定去改變顏色, 這部份就不描述了!
範例一: 修改按鈕中的文字內容
如下圖所示, 要修改的是紅色框中按鈕文字–>[Previous Post], 要改成和右邊同等字數, 變更為–>[Prev Post], 如此一來, 才不容易受到字型變更而排列不對齊.
先進入cPanel主控台, 直接找到要修改的[loop-single.php]這一個檔案, 路徑為wp-content–>themes–>frontier(此為本次的佈景主題名稱)–>loop-single.php
然後打開編輯它, 利用Ctrl+F搜尋功能查[Previous]這一個字, 就可以發現相同有6個, 最後一個才是我們需要更改的內容名稱, 直接改成[Prev Post]之後, 就可以直接儲存了! 回到網站就可以看到此按鈕就順利改好了!
[溫馨提醒] 修改任何文件內容之前, 需先做好完整備份, 才不會有任何問題導致網站不正常而停止!
範例二:改變按鈕的樣式.
網路提供許多線上修改按鈕的功能, 可以節省許多時間在CSS的修改增加上, 下面連結是其中一個好用的線上修改的網站.
下圖為一個CSS按鈕產生器, 同時也有其他不同的功能, 利用下方不同的屬性去做喜歡樣式的調整, 像是陰影/字體大小/四角是否要成圓型/顏色/按鈕大小…等等.
最後調整完之後, 直接按下[按鈕]就可以產生CSS code, 這就是等會要加入到網站裡的代碼了.
再來我們就要利用Google Chrome瀏覽器中的右鍵[檢查]功能來找到需要修改元件的正確類別名稱, 像是div.link-next!
如下圖所示, 找到要修改的類別名稱[div.link-next],
再來進入WordPress後台中, 找到[外觀]–[編輯CSS]–[附加的CSS]裡, 加入以下內容:
div.link-next{
//這裡放從CSS按鈕產生器中得到的代碼.
}
貼上自訂好的代碼進去到上面的紅色文字的區域中, 就可以看到右下角按鈕圖示的樣式改變了!
以上二個範例, 只是針對佈景主題原先的設定不足,而自行更改, 整個CSS能用的地方還有很多, 背景圖/外框寬度/顏色..等等, 這些就留給大家去研究了, 最後還是要再次提醒, 在修改之前, 切記要做好備份, 才不會不小心改錯了, 導致網站掛掉就不好了!!
