為 WordPress 用戶提供的 17 個節省時間的 CSS 技巧

已發表: 2023-03-13

WordPress 為設計和客製化網站提供了無限的可能性。在本文中，我們將專門為 WordPress 用戶分享一些實用的 CSS 技巧，從設計標題樣式到調整字體。

雖然 WordPress 提供了大量預製主題和模板，但有時您需要親自處理並使用 CSS 進行自訂。

如果您在使用 WordPress 網站時曾經問過以下任何問題：

“如何刪除‘閱讀更多’按鈕？”
“我怎麼能改變這個連結的顏色？”
“如何使該連結不可點擊，但將文字保留在頁面上？”

……然後繼續閱讀，了解一些對您的網站有價值的 CSS 技巧。

在本教程中，我們將介紹：

WordPress CSS 技巧
1. 將元素水平和垂直居中
2. 更改連結顏色
3. 刪除連結
4. 停用連結（連結保持可見，但用戶無法點擊它）
5. 更改懸停時連結的顏色
6. 樣式連結
7. 設定按鈕樣式
8. 更改部分的字體
9. 創建黏性標題
10. 創建具有陰影效果的黏性標題
11. 在部分中新增背景顏色
12. 變更正文的背景顏色
13. 更改特定單字或短語的顏色
14. 在圖像周圍創建邊框
15. 在影像上建立懸停效果
16. 設計表單樣式
17. 建立響應式佈局
將您的 CSS 技能提升到新的水平

WordPress CSS 技巧

要實施這些技巧，您只需了解兩件事：

CSS 的工作原理
如何為 WordPress 新增 CSS

注意：CSS 沒有風險，所以如果你犯了一個錯誤，你可以刪除你的程式碼或修改它......它不會破壞任何東西:)

拋開這些，讓我們直接跳到一些實用的 CSS 技巧和範例，以便您可以在自己的 WordPress 網站上嘗試：

將元素水平和垂直居中

若要讓元素（例如圖像、文字或 div）水平和垂直居中，請使用以下 CSS 程式碼：

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在此程式碼中， position: relative屬性用於相對於其最近的定位祖先來定位元素。 top: 50%和left: 50%屬性將元素移到其容器的中心。最後， transform: translate(-50%, -50%)屬性透過將元素向後移動其自身寬度和高度的 50% 來使元素在水平和垂直方向上居中。

更改連結顏色

.item-class{
color : blue;
}

您可以使用白色、黑色、藍色、紅色等顏色……但您可能想使用特定的顏色。

在這種情況下，你可以這樣做：

.item-class{
color : #F7F7F7;
}

如果您想為您的網站設計創建調色板，請嘗試使用 Paletton 工具。這非常有幫助！

注意：如果你想組合元素，這很容易。

例如，假設您想要停用點擊並將連結恢復為黑色。

您可以使用此程式碼：

.item-class{
pointer-events : none;
color : black;
}

刪除連結

.item-class{
display : none;
}

注意：有時您可能需要在類別後面添加a才能使其正常工作，如下所示：

.item-class a{
display : none;
}

嘗試新增a或不加 a 進行試驗，看看您的程式碼是否正常運作。只需添加您的 CSS，儲存並檢查您的前端。

停用連結（連結保持可見，但用戶無法點擊它）

注意：為了做到這一點，修改 HTML 總是更好，但如果 CSS 可能更容易或唯一可能的解決方案，請使用以下程式碼：

.item-class{
pointer-events: none;
}

更改懸停時連結的顏色

您可以使用以下 CSS 程式碼使連結在使用者將滑鼠懸停在連結上時改變顏色：


a:hover {
color: red;
}

在此程式碼中， a:hover選擇器定位使用者目前懸停在頁面上的所有連結。 color: red屬性將文字的顏色變更為紅色。

樣式連結

要設定網站上連結的樣式，請使用以下 CSS 程式碼：


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

在此程式碼中， a器用於設定頁面上所有連結的樣式。 color屬性設定連結的顏色， text-decoration屬性刪除預設底線。 border-bottom屬性添加了微妙的下劃線效果。當使用者將滑鼠懸停在連結上時， transition屬性會創建平滑的過渡效果。 a:hover選擇器用於當使用者將滑鼠懸停在連結上時設定連結的樣式。

設定按鈕樣式

使用以下程式碼設定按鈕樣式：


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

在此程式碼中，使用各種屬性來設定按鈕的樣式，包括按鈕外觀的background-color和color屬性、按鈕大小的padding屬性以及將cursor懸停在按鈕上時更改滑鼠指標的遊標屬性。

更改部分的字體

使用以下 CSS 程式碼更改網站某個部分的字體：


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

在此程式碼中， font-family屬性將字體設為 Arial 或類似的無襯線字體， font-size屬性將字體大小設為 16 像素， line-height屬性將文字行之間的間距設為 1.5倍於字體大小。

創建黏性標題

如果您想建立一個當使用者捲動時保持固定在頁面頂部的標題，您可以使用以下 CSS 程式碼：


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

在此程式碼中， position: fixed屬性將標題固定在視窗的頂部， top: 0屬性將其定位在頁面的最頂部。 width: 100%屬性確保標題跨越視口的整個寬度。 background-color 、 color用於設定標題的樣式， z-index: 9999屬性確保標題出現在頁面上所有其他元素的頂部。

創建具有陰影效果的黏性標題

若要建立具有陰影效果的黏性標題，並在使用者捲動時固定在頁面頂部，請使用以下 CSS 程式碼：


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

在此程式碼中， position: fixed屬性用於將標題固定到頁面頂部。 top: 0和left: 0屬性將標題定位在頁面的左上角。 width: 100%屬性將頁首的寬度設定為頁面的完整寬度。 background-color屬性設定標題的背景顏色， z-index屬性確保標題出現在頁面上其他元素的頂部。最後， box-shadow屬性為標題添加了微妙的陰影效果。 .content選擇器用於在頁面頂部新增填充，以便內容不會被固定標題覆蓋。

免費電子書

您通往獲利的網路開發業務的分步路線圖。從吸引更多客戶到瘋狂擴張。

免費電子書

順利規劃、建立並啟動您的下一個 WP 網站。我們的清單使過程變得簡單且可重複。

在部分中新增背景顏色

您想為網站的某個部分添加背景顏色嗎？然後使用以下 CSS 程式碼：


.section {
background-color: #f2f2f2;
padding: 20px;
}

在此程式碼中， background-color: #f2f2f2屬性將背景顏色設為淺灰色，而padding: 20px屬性在該部分內的內容周圍添加 20 像素的空間。

變更正文的背景顏色

新增此程式碼以更改網站正文的背景顏色：


body {
background-color: #f5f5f5;
}

在此程式碼中， background-color屬性將背景顏色設定為淺灰色。

更改特定單字或短語的顏色

若要變更文字區塊中特定單字或短語的顏色，可以使用以下 CSS 程式碼：


p span {
color: red;
}

在此程式碼中， p span選擇器針對出現在p元素中的任何span元素。然後，您可以在 HTML 中使用span元素包裝您想要定位的單字或短語，如下所示：

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

這將使短語“consectetur adipiscing elit”顯示為紅色。

在圖像周圍創建邊框

以下是如何在圖像周圍添加邊框：


img {
border: 2px solid #ccc;
}

在此程式碼中， border屬性設定邊框的寬度、樣式和顏色。 2px值將邊框寬度設為 2 像素， solid將樣式設為實線， #ccc將顏色設為淺灰色。

在影像上建立懸停效果

使用此程式碼片段在圖像上建立懸停效果：


img:hover {
opacity: 0.8;
}

在此程式碼中，當使用者將滑鼠懸停在圖像上時， img:hover選擇器會定位圖像。 opacity屬性設定影像的透明度。在本例中，該值設為 0.8，當使用者將滑鼠懸停在圖像上時，圖像會稍微透明。

設計表單樣式

使用以下 CSS 程式碼在您的網站上設定表單樣式：


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

在此程式碼中，各種屬性用於設定表單的樣式，包括用於表單整體外觀的background-color 、 padding和border-radius屬性。 form label選擇器用於設定與每個表單欄位關聯的標籤的樣式。 form input[type="text"], form input[type="email"], form textarea選擇器用於設定表單中各個輸入欄位的樣式。 form input[type="submit"]選擇器用於設定提交按鈕的樣式。

建立響應式佈局

如果您想建立適應不同螢幕尺寸的響應式佈局，請使用以下 CSS 程式碼：


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

在這段程式碼中， @media規則用於為不同的螢幕尺寸指定不同的樣式。第一個@media規則針對最大寬度為 768px 的螢幕，第二個@media規則針對最小寬度為 769px 的螢幕。每個@media規則中的各種選擇器用於根據螢幕尺寸調整頁面的佈局和外觀。

還有一個 CSS 技巧…

即使您正確執行了所有操作，您也可能會發現您的程式碼無法正常運作。這可能是因為已經有一個 CSS 程式碼與您的程式碼不同。

要覆蓋它，只需添加!important即可，如下所示：

.item-class{
pointer-events: none !important;
}

這些只是使用 CSS 增強 WordPress 網站的實用方法的幾個範例。

借助 CSS，自訂網站外觀的可能性幾乎是無限的。透過學習和應用這些技巧，您可以創建一個不僅具有視覺吸引力，而且還經過優化以獲得更好的用戶體驗的網站。

將您的 CSS 技能提升到新的水平

無論您是初學者還是經驗豐富的專業 Web 開發人員或 Web 設計師，如果您想更深入地了解在 WordPress 中使用 CSS，這些額外的 CSS 教學將幫助您擴展您的知識和技能：

學習 WordPress CSS 的 10 個簡單技巧 – 為想要學習專門用於 WordPress 的 CSS 的初學者提供的實用技巧。它涵蓋了從理解 CSS 語法到使用 CSS 框架的所有內容。
學習和引用 WordPress 的 CSS – 學習和引用專門用於 WordPress 的 CSS 的綜合指南。它涵蓋的主題包括使用 WordPress 定制器、了解 CSS 選擇器以及使用子主題。
7 個尋找 CSS 片段和靈感的最佳網站 – 正在尋找 CSS 程式碼的靈感嗎？本文列出了七個提供可在您自己的 WordPress 網站中使用的 CSS 片段和範例的網站。
如何使用 CSS 在 WordPress 網站上設定圖片樣式 – 圖片是任何網站的重要組成部分，本文提供了有關如何使用 CSS 設定圖片樣式的提示。您將學習如何新增邊框、更改圖像大小和對齊方式等等。
如何將自訂 CSS 新增至您的 WordPress 網站 – 本文將引導您完成使用內建自訂器和外掛程式將自訂 CSS 新增至您的 WordPress 網站的過程。
用於即時編輯 WordPress 網站的免費 CSS 插件 – 本文列出了一些免費的 CSS 插件，可讓您即時編輯 WordPress 網站，從而更輕鬆地即時查看 CSS 更改的效果。
14 個適用於 WordPress 的酷 CSS 動畫工具 – 如果您想使用 CSS 添加一些動畫到您的 WordPress 網站，本文列出了一些您可以使用的酷工具。
使用 CSS 將砌體和網格佈局添加到您的 WordPress 網站 – 本文介紹如何使用 CSS 將砌體和網格佈局添加到您的 WordPress 網站，從而創建更具視覺吸引力的設計。
WordPress 更簡潔 CSS 編碼的 25 個專家提示 – 如果您想提高 CSS 程式碼的簡潔性和可讀性，本文提供了 25 個專家提示來實現這一目標。
改進 CSS 工作流程的 25 個專業技巧 – 改進 CSS 工作流程的技巧，從使用 CSS 預處理器到使用瀏覽器開發人員工具來偵錯程式碼。

點擊連結以了解更多資訊並立即開始改進您的 WordPress 網站。

貢獻者

感謝來自 Incensy 的 WPMU DEV 成員Antoine貢獻了這篇文章的想法以及上面使用的幾個 CSS 範例。查看 Incensy 的代理商合作夥伴資料以了解更多詳細資訊。

我們是否錯過了您在過程中學到的任何巧妙的 CSS 技巧？我們很樂意在評論中了解它們！

為 WordPress 用戶提供的 17 個節省時間的 CSS 技巧

WordPress CSS 技巧

將元素水平和垂直居中

更改連結顏色

刪除連結

停用連結（連結保持可見，但用戶無法點擊它）

更改懸停時連結的顏色

樣式連結

設定按鈕樣式

更改部分的字體

創建黏性標題

創建具有陰影效果的黏性標題

免費電子書

您通往獲利的網路開發業務的分步路線圖。 從吸引更多客戶到瘋狂擴張。

免費電子書

順利規劃、建立並啟動您的下一個 WP 網站。 我們的清單使過程變得簡單且可重複。

在部分中新增背景顏色

變更正文的背景顏色

更改特定單字或短語的顏色

在圖像周圍創建邊框

在影像上建立懸停效果

設計表單樣式

建立響應式佈局

還有一個 CSS 技巧…

將您的 CSS 技能提升到新的水平

貢獻者

您通往獲利的網路開發業務的分步路線圖。從吸引更多客戶到瘋狂擴張。

順利規劃、建立並啟動您的下一個 WP 網站。我們的清單使過程變得簡單且可重複。