無論您是要自定義主題、嘗試整理外掛繁多的儀表盤，還是隻想讓您的部落格在每個螢幕上都看起來美觀，CSS 仍然是在 WordPress 中完成任務的最快方法之一，無需再安裝其他外掛。
但現實情況是：並非每個 WordPress 使用者都有時間深入研究主題樣式表或解讀塊編輯器的怪癖。因此，我們整理了這份專為 WordPress 設計的實用省時 CSS 技巧列表。
這些技巧並非泛泛之談。相反，它們可以幫助您解決每天使用 WordPress 的博主、網站所有者、開發人員和自由職業者所面臨的常見問題。
本指南介紹如何：
- 修復固定欄錨連結問題
- 使用現代佈局技術加速長文章網格
- 無需外掛即可自定義登入螢幕
- 隱藏臃腫的外掛 UI 元素
- 以及更多……
無論您使用的是經典主題、區塊主題還是構建器，這些技巧都可以幫助您簡化工作流程並提升效能，只需幾行 CSS 程式碼即可實現。
1. 修復固定欄背後的錨連結問題
您是否有過點選頁面某個部分錨定連結時，發現目標標題隱藏在固定導航欄後面的情況？這是 WordPress 中常見的問題。它通常出現在使用目錄外掛的長篇文章中。
大多數主題對導航欄使用 position:sticky 或 fixed，這些導航欄與頁面頂部重疊。當使用者點選錨連結（例如 #faq 或 #pricing ）時，瀏覽器會將該部分滾動到最頂部，就在導航欄的正下方。
您可以使用 CSS 屬性 scroll-margin-top 來解決這個問題。它會在標題上方增加空間，使其不會卡在固定導航欄下方。
h2, h3 {
scroll-margin-top: 80px;
}
最佳做法是將該值與頁首高度匹配。如果您的粘性導航欄高度為 64px，請使用 scroll-margin-top: 64px 或略高。將其應用於錨連結中使用的標題級別 – 通常為 h2 或 h3。
2. 使用<body>類定位特定的WordPress管理介面
許多 WordPress 外掛會用追加銷售通知、橫幅或無樣式元素使管理介面變得雜亂無章。但在整個網站範圍內移除或調整它們並不總是可行的，尤其是當您只想在特定介面（例如 WooCommerce 設定或自定義文章型別編輯器）上進行更改時。
WordPress 會自動將上下文感知類新增到管理頁面的 <body> 標籤中。這些類包括頁面 slug、帖子型別和選單項引用 – 它們對於編寫僅在需要時應用的作用域 CSS 非常有用。
例如，假設您只想隱藏 WooCommerce 設定頁面上的通知。
body.toplevel_page_woocommerce .notice {
display: none;
}
要查詢這些類，請開啟 WordPress 管理後臺介面，右鍵單擊，然後選擇“檢查”（或按 Cmd+Option+I / Ctrl+Shift+I ）。查詢 <body> 標籤 – 它包含幾個有用的類。
例如，您可以從儀表板螢幕獲取以下內容：
<body class="wp-admin wp-core-ui index-php wp-dashboard theme-astra ...">
您可能會看到一些常見的類：
post-type-product：WooCommerce 產品編輯器edit-tags-php：分類/標籤管理settings_page_yoast：Yoast SEO 設定toplevel_page_woocommerce：WooCommerce 主設定頁面
要在 CSS 中使用這些類，您需要將自定義管理樣式表新增到佇列中。您無法透過定製器新增它們——這隻會影響前端。
將以下內容新增到主題的 functions.php 檔案中：
function my_custom_admin_styles() {
wp_enqueue_style(
'my-admin-css',
get_stylesheet_directory_uri() . '/admin.css'
);
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');
然後在主題資料夾中建立一個名為 admin.css 的檔案，並在其中新增作用域樣式。
3. 無需頁面構建器即可構建響應式網格
頁面構建器簡化了佈局，但也會導致頁面臃腫。如果您使用的是經典主題（例如 Astra 或 GeneratePress），或者正在建立自己的區塊模板，CSS 網格可以讓您更快、更簡潔地建立響應式佈局。
這尤其適用於：
- 主頁或存檔頁面上的部落格文章網格
- 自定義文章型別列表，例如活動、團隊成員或使用者評價
- 無需覆蓋模板檔案的 WooCommerce 產品佈局
您只需將其新增到子主題的樣式表中（或透過 functions.php 將其加入佇列）：
.post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
然後將迴圈包裝在容器中，如下所示：
<div class="post-list"> <?php while (have_posts()) : the_post(); ?> <div class="post-card"> <h2><?php the_title(); ?></h2> <p><?php the_excerpt(); ?></p> </div> <?php endwhile; ?> </div>
此 CSS 會自動建立儘可能多的列，確保每個專案的寬度至少為 280px，並在較小的螢幕上摺疊為更少的列——無需媒體查詢或外掛。
4. 使用clip()實現響應式字型大小（無需媒體查詢）
針對多種螢幕尺寸進行設計通常意味著需要使用媒體查詢來調整字型大小。但媒體查詢可能會變得混亂，尤其是在處理多個斷點或希望跨裝置保持一致縮放比例時。
這時，clamp() 就派上用場了，它是一個現代 CSS 函式，可讓您在一行程式碼中定義介於最小尺寸、首選尺寸和最大尺寸之間的可變值。
基本格式如下：
font-size: clamp(min, preferred, max);
它允許瀏覽器根據視口寬度自動調整字型大小，而無需單獨的媒體查詢。
大多數 WordPress 主題（尤其是區塊主題）都採用流暢的設計。但 Gutenberg 的區塊編輯器並不總是允許您完全控制字型縮放，尤其是在以下情況下：
- 英雄版塊標題
- 精選文章標題
- 全寬頁面佈局
clamp() 無需使用媒體查詢硬編碼多種字型大小，預設情況下可提供更簡潔的程式碼、更少的重複和更好的響應速度。您可以透過 theme.json 或 editor-style.css 在自定義塊樣式中將其用於標題、按鈕、塊引用等。
h1 {
font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
}
所有現代瀏覽器都支援 clip()。除非您使用極其過時的企業瀏覽器（例如 Internet Explorer 11，WordPress 本身已不再支援該瀏覽器），否則它可以安全地用於所有 WordPress 專案。
5. 使用content-visibility提升長頁面效能
如果您的首頁列出了部落格文章，您的商店頁面載入了數十種產品，或者您使用自定義查詢來顯示使用者評價，那麼您可能遇到了效能問題，尤其是在移動裝置上。滾動長列表時您會感覺到卡頓嗎？這是因為瀏覽器做了比實際需要更多的事情。
CSS 屬性 content-visibility 可以提供幫助，它告訴瀏覽器：“在此元素滾動到檢視中之前，請勿渲染它。”
.article-card {
content-visibility: auto;
contain-intrinsic-size: 400px;
}
這類似於 HTML 元素的延遲載入，可以減少螢幕外內容的佈局和繪製成本。contain-intrinsic-size 會為瀏覽器提供一個預估高度來預留空間，這樣佈局在內容載入時就不會移動。
您可以在編輯主題時為每個迴圈項新增類似 .article-card 或 .product-card 的類來實現這一點，然後將 CSS 拖放到子主題的樣式表中或透過 functions.php 將其加入佇列。
如果您使用的是 Gutenberg，則可以在塊中新增自定義類（在“高階設定”中），然後在“附加 CSS”部分或主題檔案中將其定位。
注：此技巧無法取代良好的快取或 CDN——但它是一種智慧的、僅使用 CSS 的方法，可以在渲染長內容列表時提升感知效能。它對圖片也不起作用（圖片在現代 WordPress 中已經支援延遲載入）。
7. 覆蓋外掛樣式時謹慎但巧妙地使用!important
在大多數 WordPress 專案中，你嘗試新增樣式，但什麼也沒發生。你編寫規則，檢查選擇器，重新整理……外掛的原始樣式仍然有效。
這是因為許多 WordPress 外掛新增的樣式具有以下特點：
- 高特異性（長類鏈）
- 內聯
style屬性 - 在樣式表載入後載入
與其追求複雜的選擇器，更簡潔的解決方案通常是在合理的情況下使用 !important。
例如，Contact Form 7 使用像 .wpcf7-form-control 這樣的特定類，但如果沒有 !important，其預設樣式很難被覆蓋。
以下是如何對錶單輸入進行四捨五入：
input.wpcf7-form-control {
border-radius: 6px !important;
}
有意識地使用它很重要。與其將 !important 散佈到各處，不如將覆蓋操作隔離到專用的管理或外掛修復樣式表中。這樣可以保持主主題 CSS 的簡潔，並避免以後發生意外衝突。
如果您正在開發客戶網站，這種方法可以幫助您控制激進的外掛樣式，而無需 fork 模板或新增其他外掛。
8. 使用:where()覆蓋區塊樣式避免特殊性問題
如果您曾經嘗試調整 Gutenberg 區塊的預設樣式，您就會明白其中的痛苦：WordPress 核心和基於塊的主題通常附帶極其特定的選擇器。即使是像調整按鈕邊距或移除塊間距這樣的小改動，也需要複雜的覆蓋操作或大量的反覆試驗。
您可以使用 :where() 偽類來解決這個問題，這是一個 CSS 選擇器包裝器，無論您在其中放入什麼，它始終具有零特殊性。
:where(.wp-block-button) {
margin-bottom: 0;
}
這會將樣式應用於 .wp-block-button，但與普通選擇器不同，它不會與其他 CSS 規則“競爭”，從而更加安全靈活。
假設您正在開發一個採用區塊主題的網站（例如 Twenty Twenty-Four 或 Astra 的塊啟動器）。您想移除按鈕下方的多餘邊距：
.wp-block-button {
margin-bottom: 0;
}
但這可能不起作用，因為 WordPress 核心或主題可能有更具體的規則，例如：
.entry-content .wp-block-button:not(.is-style-outline) {
margin-bottom: 1.5rem;
}
您可以新增更多特殊性（脆弱性），使用 !important （繁瑣性）或使用 :where() 來編寫更易於維護的 CSS，以便與其他程式碼更好地相容。
9. 無需外掛即可自定義WordPress登入螢幕
想要在登入頁面新增您的徽標？更改背景顏色？調整字型或按鈕樣式？您無需外掛即可完成這些操作。WordPress 讓您可以輕鬆地使用您自己的 CSS 自定義登入螢幕。您只需要一個操作鉤子。
只需使用 login_enqueue_scripts 鉤子將自定義樣式表加入佇列即可：
function custom_login_styles() {
wp_enqueue_style(
'my-login-styles',
get_stylesheet_directory_uri() . '/login.css'
);
}
add_action('login_enqueue_scripts', 'custom_login_styles');
然後在您的 login.css 檔案中新增如下樣式：
body.login {
background-color: #f9f9f9;
}
.login h1 a {
background-image: url('/wp-content/uploads/your-logo.png');
background-size: contain;
width: 100%;
height: 80px;
}
.login #loginform {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
這會讓您的網站更具專業感，避免再使用一個功能單一的外掛。
10. 防止圖片破壞佈局
新增超出其容器寬度的圖片可能會破壞 WordPress 佈局，尤其是在經典主題或頁面/文章內容中。如果圖片未受 CSS 約束，則可能會溢位其父級，導致水平滾動或部分內容錯位。
這種情況通常發生在：
- 內容編輯器貼上圖片時未設定對齊方式或大小
- 主題缺少預設的響應式圖片處理
- 您在自定義區塊或舊版短程式碼中新增圖片
要解決此問題，您需要設定最大寬度並重置佈局行為：
img {
max-width: 100%;
height: auto;
display: block;
}
其作用如下：
max-width: 100%：確保圖片不會溢位其容器height: auto：保留原始寬高比display: block：消除內聯佈局預設設定導致的圖片下方出現意外間隙
您可以應用相同的模式來限制影片：
iframe {
max-width: 100%;
height: auto;
display: block;
}
或者，如果您的主題支援現代 CSS，請使用具有 aspect-ratio 的包裝器。
小結
CSS 本身可能看起來並非什麼顛覆性技術，但在 WordPress 中，幾行精心設計的程式碼就能避免數小時的挫敗感。
無論您是自定義佈局、清理管理面板，還是提升前端效能，本指南中的技巧都旨在幫助您更高效地工作，而不是徒勞無功。
評論留言