WordPress 簡單套用自訂 CSS

WordPress 如何自訂 CSS

首先要知道怎麼在 WordPress 網站找到你要修改的地方。

▼假設我要修改這個 WordPress 網站的 logo ,我想要用 CSS 去自定他的屬性讓他變成圓形。

▼我用 Chrome 瀏覽器在網頁上的任何一個地方按右鍵 > 檢查

▼右上角這個區塊是整個頁面的程式碼,我們在上面滑動,左邊會閃藍色的區塊範圍,以這個例子來說,我們滑鼠移到 <header> 區塊時,左邊頁面上半部整個區塊反藍,而我們要修改的 logo 就位在這個區塊裡面,但他還不是很準確,因為現在反藍的範圍比我們的 Logo 大多了,所以我們要在網這個區塊的「內部」去找,好像一個大盒子裡面,又有小盒子,小盒子裡面又有小小盒子的概念。

▼我們按 <header> 前面的三角形,可以展開裡面的項目

▼一直往下找,一邊注意左邊藍色的區塊。最後找到這個區塊是屬於 Logo 的區塊,這個區塊是從 <p class=”site-title”> 開始。如果我們看到 class=”XXX” 意思就是這個區塊要套用名為 XXX 的CSS 屬性。這個區塊顯然是套用名為 site-title 的 CSS 屬性。

而我們看到 <p class=”site-title”> 下面還有一個 <a ….. 的標籤,以及一個 <img src ….. 的標籤,裡面才是我們 Logo 的圖片。

所以我們現在知道我們要改的圖片是位在 site-title CSS屬性下的 a 標籤,再下面的 img 標籤( html 標籤看藍色的字就好)。

*通常我會建議找到那個要修改的元素後,如果它本身沒有套用 CSS 樣式,那就往上層找到最近的 div 或 p 標籤,看看有沒有套用 CSS 樣式,如果有就從那個 CSS 選擇器開始下手。但這不鐵律,也有可能可以從像是 li 標籤上的 CSS 樣式去修改,反正都可以嘗試看看,只是自訂CSS不會把網站搞壞的,不用擔心。

▼現在我們要寫入自訂的CSS,從「外觀 > 自訂 > 進階 > 附加的CSS」進入(不一樣的佈景主題,選項用詞可能會略有不同)。

進去之後我們先寫一個點,因為我們在宣告 class 選擇器名稱時會先打一個點。接在後面的是一個空格然後「a」在空一格然後「img」,這個意思就是我們要控制的項目是位在「site-title」CSS選擇器下面的 a 標籤下面的 img 標籤。然後我們打兩個大括弧 { } ,這兩個大括弧裡面我們就可以設定屬性。(關於CSS選擇器的類型可以參考這篇:class 與 id 選擇器

 

用這種方式我們就可以找到 WordPress 裡面的每個元素的位置,並且找到控制它的CSS 去修改他的屬性,來達成各種效果。

▼比如說如果這一段我們要讓 Logo 變圓形,我們就會設一個倒圓角的屬性,並且把值設為 50%,這樣 Logo 就變成圓形了。

如果還是不太清楚怎麼找到元素所屬 CSS 的位置,可以參考這一篇:自訂CSS 調整 WordPress 文字、顏色、背景、寬度等


以下就列出幾個常用的屬性,就算還不懂 CSS 也可以直接套用。

常用 CSS 語法

border:5px solid #fff; 邊框的粗細、樣式(虛線貨實線)、邊框顏色
border-radius:15px; 倒圓角,可以用 px (pixel)表示,也可以用百分比表示。如果想要四個角分開設定,可以寫 border-radius:15px 50px 0px 5px;
這4個值由前到後分別用來設定「左上角」「右上角」「右下角」「左下角」*要設定圓角前,要先定義 border 屬性。
如:border: solid 1px #555;
width: 50%;

height: 500px;

width 屬性用來設定、height 用來設定,值可以是百分比(以父元素為基準),也可以用 px 來表示。
color: #ffffff; color 用來設定「文字」的顏色,用16進位法表示,如果想要查詢色碼的話,可以用 Google 搜尋「color picker」
background-color:red; 設定背景顏色,和上一個屬性一樣,可以用16進位色碼,也可以直接寫入色彩名稱。
display: none; 直接讓那個元素不顯示
opacity: 0.5; 透明度
值:0~1
padding: 30px; 區塊內元素距離區塊邊緣的距離
line-height:30px; 行距
box-shadow: 3px 3px 5px #eee; 區塊陰影,四個值分別為「水平位置」「垂直位置」「模糊程度」「陰影顏色」
text-shadow: 0.2em 0.5em 0.1em #600 文字陰影:和區塊陰影一樣,只是是設定文字陰影。
font-size: 18px; 文字尺寸
font-weight:600; 文字粗細,值越大越粗
XXX:hover{… } 滑鼠滑上去時:XXX 這個CSS 樣式滑鼠滑上去時的變化樣式寫在{…}裡面。
.XXX:hover img{
animation: mymove 1s infinite;
}
@keyframes mymove {
50% {transform: rotate(20deg);}
}
滑鼠移上去後讓圖片旋轉:其中「XXX」要改成 CSS 選擇器的名字,而這個區塊下面的圖片會套用這個 CSS 屬性。

其中「1s」這個值是表示一次動作的時間,時間設越短動作越快。

而「20deg」是代表旋轉的角度。

這兩個值可以自己修改看看變化會怎樣。

.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
呼吸閃爍
transform 變形效果 參考:CSS: transform:旋轉 rotate、縮放 scale、平移 translate、歪斜 skew、3D 透視 perspective
animation 動畫效果 參考:CSS animation 動畫效果
a:link {
color: green;
}a:visited {
color: green;
}a:hover {
color: red;
}a:active {
color: yellow;
}
a:link 連結的樣式

a:visited 連結訪問過的樣式

a:hover 滑鼠移上去時的樣式

a:active 點擊時的樣式

.abc {
position: relative;
top: -10px;
}
position: relative
宣告元件的相對位置,後面可以接 top, left, bottom, right 的值。意思是元件往上移、往左移、往下移、往右移多少,可以是負值。

如果想了解更多 CSS 屬性,可以參考:CSS 課程