嗨大家~

WP是一個非常自由的網頁建置軟體

不管是功能還是外觀都可以刻寫成自己想要的樣子

上一期也說到了佈景子主題的重要性! <很重要很重要很重要>

今天就來說說怎麼改吧!

PS.筆者本身並非畢業於網頁設計的相關科系,目前也非從事相關產業,但是透過用WP建置網頁快速學習到了CSS的一些基本概念,文章中也會分享我的一點小心得~~

大綱

  • 會影響wp外觀的因素?
  • 有哪些地方可以更改CSS呢?
  • 讀取的優先順序

會影響WP外觀的因素:

1.主題:主題本身會有基本外觀設計,而有些付費主題會有主題的控制選項來設定全站的CSS。

2.外掛:例如Elementor (https://elementor.com/) ,這個出色的編輯器從基本欄位到文字動畫都可以客製化,用拖曳的方式就可以添加進頁面,對初入CSS的新手或是不了解怎麼刻寫程式的人非常親切,可以很有效率的做好版面設計。

https://imgur.com/JzLvFEn.jpg

心得:Elementor裡面可以調適的東西非常多,初學者可以先摸這一塊,理解一下CSS能做到哪些特效與調整。

有哪些地方可以更改CSS?

  • 佈景子主題:(建立方法可以看看上一期的文章—> GO!)

https://imgur.com/hzvzdAs.jpg

  • 附加的CSS

https://imgur.com/LqpIZo1.jpg

https://imgur.com/S8VJsGQ.jpg

https://imgur.com/1jNYghb.jpg

雖然在這邊它有提供在各個寬度裝置上的呈現效果,但實際上呈現狀況跟預覽的不一樣,還是建議透過開發人員工具進行調測。

  • 父主題CSS

https://imgur.com/zkdA5jZ.jpg

https://imgur.com/4DI3LUL.jpg

  • 外掛CSS

https://imgur.com/sqeOXg0.jpg

更動順序

佈景子主題→ 附加的CSS→ 母主體CSS=外掛CSS

改動CSS注意事項

  • 好夥伴F12:除了在附加的CSS那邊可以即時預覽更改效果之外,最主要還是利用瀏覽器的「開發人員工具」尋找想要更改的地方,輸入各式各樣的條件就可以馬上預覽效果囉~但是要記得!這並不代表直接更改了CSS,還是要回到WP修改。

開發人員工具裡面的CSS樣式表,可以從右邊的灰字(如紅框所示)看到他的所在位置,以及他的行數,進而判斷它為什麼不被作用。(比如說行數較後面的程式會覆蓋前面的)

https://imgur.com/Sq8xAtv.jpg

  • 有時候改動HTML的時候會發現,雖然程式改了但是網頁刷新後卻沒有更改的狀況,可以嘗試先清除瀏覽器的快取或是使用無痕頁面來進行確認。
  • 一定要記得把修改的樣式存到佈景子主題!一定要記得存到佈景子主題!一定要記得存到佈景子主題!不然哪天起床發現主題更新…GG…前幾天的心血都會付諸東流了…

以上就是一些關於WP的CSS修改心得~看著網頁一步步往自己理想的樣式接近實在是一件很有成就感的事情呢!