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

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 的工作原理
• 如何將 CSS 添加到 WordPress

注意：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或在沒有它的情況下進行試驗，看看您的代碼是否正常工作。 只需添加您的 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選擇器用於向頁面頂部添加填充，以便內容不會被固定標題覆蓋。

為部分添加背景顏色

您想為網站的某個部分添加背景顏色嗎？ 然後使用以下 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 selector 用於設置表單中各種輸入字段的樣式。 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 設計師，如果您想更深入地了解如何將 CSS 與 WordPress 結合使用，這些額外的 CSS 教程將幫助您擴展知識和技能：

• 為 WordPress 學習 CSS 的 10 個簡單技巧 – 為想要學習專門用於 WordPress 的 CSS 的初學者提供的實用技巧。 它涵蓋了從理解 CSS 語法到使用 CSS 框架的所有內容。
• Learning and Referencing CSS for WordPress – 學習和參考 CSS 的綜合指南，專門用於 WordPress。 它涵蓋了使用 WordPress Customizer、了解 CSS 選擇器和使用子主題等主題。
• 尋找 CSS 片段和靈感的 7 個最佳網站 – 為您的 CSS 代碼尋找一些靈感？ 本文列出了七個提供 CSS 片段和示例的網站，您可以在自己的 WordPress 網站中使用這些片段和示例。
• 如何使用 CSS 在您的 WordPress 網站上設置圖像樣式 – 圖像是任何網站的重要組成部分，本文提供了有關如何使用 CSS 設置圖像樣式的提示。 您將學習如何添加邊框、更改圖像大小和對齊方式等。
• 如何將自定義 CSS 添加到您的 WordPress 網站 – 本文將引導您使用內置的定制器和插件將自定義 CSS 添加到您的 WordPress 網站。
• 用於實時編輯 WordPress 網站的免費 CSS 插件 – 本文列出了一些免費的 CSS 插件，可讓您實時編輯 WordPress 網站，從而更輕鬆地實時查看 CSS 更改的效果。
• 14 個適用於 WordPress 的酷炫 CSS 動畫工具 – 如果您想使用 CSS 向您的 WordPress 網站添加一些動畫，本文列出了一些您可以使用的酷炫工具。
• 使用 CSS 將砌體和網格佈局添加到您的 WordPress 網站 – 本文介紹瞭如何使用 CSS 將砌體和網格佈局添加到您的 WordPress 網站，從而創建更具視覺吸引力的設計。
• 25 條 WordPress 更簡潔 CSS 編碼的專家技巧 – 如果您想提高 CSS 代碼的整潔度和可讀性，本文提供了 25 條專家技巧。
• 25 Pro Tips for Improving Your CSS Workflow – 改進 CSS 工作流程的技巧，從使用 CSS 預處理器到使用瀏覽器開發工具調試代碼。

單擊鏈接以了解更多信息並立即開始改進您的 WordPress 網站。

貢獻者

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

***

注意：我們不接受來自外部來源的文章。 但是，WPMU DEV 成員可以通過博客 XChange 為我們博客上的教程和文章提供想法和建議。

我們是否遺漏了您在此過程中學到的任何漂亮的 CSS 技巧？ 我們很樂意在評論中了解它們！