自定義 WordPress 網站的最佳 CSS 代碼

已發表: 2022-03-15

您是否正在尋找一些自定義 WordPress 的最佳 CSS 代碼？如果是這樣，我們將向您展示一些最常用的 CSS 腳本，您可以使用它們來編輯您的 WordPress 網站。

我們知道有很多選項可以使用插件、主題選項和默認設置自定義 WordPress。但是您也可以使用 CSS 代碼編輯網站的各個區域。因此，讓我們看看為什麼您可能首先需要它們來自定義您的網站。

為什麼在 WordPress 中使用 CSS 代碼來自定義網站？

WordPress 中使用 CSS 腳本或代碼來更改網站的視覺外觀。如果您想進行一些未包含在主題選項或默認 WordPress 設置中的特定設計更改，CSS 腳本可能對您非常有幫助。

您可以安裝 WordPress 插件進行自定義，但插件會給您的網站框架增加一定的權重，這可能會減慢它的速度。使用插件對網站的外觀進行微小的更改不值得性能下降。所以如果你有基本的編碼知識，使用 CSS 代碼是最好的選擇。

為了確保您在進行視覺修改時不會失去網站速度，我們強烈建議您使用 CSS 代碼來自定義您的 WordPress 網站。此外，有時您可能想在您的網站上實施一些獨特的設計。如果沒有為其構建自定義插件，CSS 腳本是您唯一的選擇。

自定義 WordPress 網站的最佳 CSS 代碼

雖然有許多 CSS 代碼可用於自定義 WordPress 網站，但我們將向您展示我們發現的最佳 CSS 腳本。在 WordPress 網站的前端工作時，它們是一些最常用的代碼，用於對各種問題進行分類並實現出色的設計。

但是，以下腳本列表僅用於演示目的，它們可能無法在您的網站上運行，因為使用的選擇器與示例網站相關。在大多數情況下，您需要編輯選擇器，因此您需要具備 CSS 的基本知識才能將這些腳本應用到您的網站。如果您想了解有關使用開發人員工具將 CSS 腳本應用到 WP 網站的更多信息，請查看這篇文章。

此外，您會在最後找到一個額外的部分，您將在其中學習以三種不同的方式將 CSS 腳本應用於 WordPress。現在，讓我們通過腳本

1.隱藏元素

這可能是最廣泛使用的 CSS 規則。當您需要刪除前端或後端的任何元素時，它非常有用。

1.1。隱藏標題：

 標頭{
    顯示：無；
}

1.2. 隱藏“加入購物車”按鈕

.single_add_to_cart_button.button{
    顯示：無；
}

1.3. 隱藏麵包屑

.woocommerce-麵包屑{
    顯示：無；
}

注意：在某些情況下不建議這樣做，因為只要對瀏覽器控制台有基本了解，就可以將隱藏元素變為可見。例如，您可能需要刪除表單以使用戶無法填寫。然後，您不想使用 CSS 腳本執行此操作，因為任何具有基本知識的人都可以使它們可見並發送表單。

但是，它為樣式或設計問題提供了快速簡便的解決方案，我們仍然可以毫無問題地使用它。

如果您需要有關如何隱藏和刪除“添加到購物車”按鈕的更多幫助，我們也有詳細的指南。同樣，如果需要，您還可以在我們的博客中找到有關如何在 WordPress 中編輯標題和麵包屑的更多信息。

2.移動元素

如果您需要移動某些元素來調整頁面的設計，您可以使用以下方式輕鬆地將其移動到任何方向：

 #qlwapp{
    底部：45px；
    左：25px；
    位置：相對；
}

如果元素之前已定位，您可能需要設置position:relative在某些情況下。

注意：這僅對較小的調整有用，元素不應移出其容器。您可以使用 top、right、bottom、left 並為每個賦值。

3. 移動模式的 CSS 代碼

我們也可以僅將 CSS 應用於移動設備。可以使用媒體查詢來完成。

它們像條件語句一樣工作。媒體查詢中的所有 CSS 規則將僅在屏幕尺寸低於 768 像素時應用。

給定的屏幕寬度取自移動設備的公認標準，即 768 像素。您可以編輯此值以應用於更大或更小的屏幕尺寸設備。

 @media only screen and (max-width:768px){
    div.masthead{
        顯示：內聯塊；
        寬度：50%；
        邊距：自動；
    }
}

4. 編輯文本

CSS 偽選擇器是自定義 WordPress 網站的絕佳資源。通過明智地使用它們，我們也可以對您的網站進行許多修改。因此，我們也可以使用這些 CSS 代碼來自定義您的 WordPress 網站的文本。

:before和:after偽選擇器允許我們在任何其他 HTML 元素之前或之後插入“偽元素”。通過這種方式，我們可以隱藏一個文本並將其替換為任何其他文本：

 p.text{
    可見性：隱藏；
}
p.text::之前{
    可見性：可見；
    content:'這裡有新的文字';
    顯示：塊；
}

5. 使用 CSS 代碼的翻譯

:lang()偽類允許我們根據頁面語言應用 CSS 規則。即使它是使用 WPML 或 Polylang 等翻譯插件之一翻譯的，當前的 lang 屬性也將始終位於網站 HTML 輸出的<html>主標記上。

WordPress 的最佳 CSS 腳本

因此，如果我們使用:before偽選擇器，就像在前面的示例腳本中看到的那樣，結合:lang()偽類，我們將能夠翻譯網站上的任何字符串。

這也適用於多語言網站。

 p.text:lang(en){
    可見性：隱藏； 
} 
p.text:lang(en)::before{ 
    可見性：可見；
    content:'翻譯文本';
    顯示：塊； 
}

6.添加滾動條

當您有一些大型內容（如列表、圖片庫或部分）時，滾動條可以增強網站的用戶體驗。它們還有助於維護帖子和頁面而不會過長。

這對於在側邊欄或任何其他小部件區域使用特別有用。此外，當高度超過可用尺寸時，它還可以幫助修復丟失或切碎的小部件問題。

我們還可以在帖子和頁面中插入滾動條：

該腳本將在列表中添加一個滾動條，使所有文檔更短。

 ul {
    高度：370px；
    溢出-y：滾動；
}

WordPress 的最佳 CSS 腳本

7. 使用圖像作為圖標的 CSS 代碼

您可以使用 CSS 腳本添加任何類型的圖像，並且可以通過幾種方式實現。但是使用偽選擇器:before ，我們可以添加圖像並使其看起來也像圖標。
請務必將圖片上傳到媒體庫並使用圖片的永久鏈接作為url('image-link-here')

 .entry-content > p:nth-child(3)::before{
    content:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

或者我們可以使用真實的圖標，也可以使用相同的選擇器：

 .entry-content > p:nth-child(3)::before{
	font-family: "Font Awesome 5 Free"; 
        字體粗細：400； 
        內容：“\f0f3”；
}

為了使用真正的圖標，在我們的示例中，圖標的鏈接 HTML 標籤設置為 font awesome 5 Free。它必須加載到網頁的<head>部分。

8.更改字體

您也可以使用 CSS 代碼自定義 WordPress 網站的字體。與圖標類似，字體也必須加載到主題標題中，以便我們可以使用它們。我們可以通過查看頁面的<head>部分來驗證字體集是否可用。

在這裡，已經在 PHP 腳本的幫助下添加了 Google 字體鏈接。

WordPress 的最佳 CSS 腳本

在您確認您要使用的圖標或字體集已經加載到<head> HTML 部分後，您可以在整個網站上自由使用它

h1,h2,h3,p,a,li{
    font-family: 'Hubballi'，草書；
}

獎勵：將 CSS 應用於 WordPress 網站的 3 種方法

我們為您提供了一些最常用的 CSS 代碼來自定義您的 WordPress 網站。但是您還需要知道如何將它們添加到您的網站。為此，我們還將在本文中向您展示一個簡短的教程作為獎勵。

因此，這裡有 3 種將 CSS 應用到 WordPress 網站的常用方法。

1.主題定制器

要通過主題定制器添加 CSS 腳本，您只需將 CSS 腳本粘貼到主題定制器上即可。它通常可以應用於小型定製或修復。

轉到外觀 > 自定義 > 附加 CSS以打開樣式編輯器。然後在此處粘貼您的 CSS 腳本。

wordpress 的最佳 CSS 腳本

點擊“發布”按鈕後，此處的腳本將保存在數據庫中。預覽後，您將能夠看到網站中的更改。

2.子主題CSS文件

對於此步驟，您必須在開始之前以編程方式或使用其中一個子主題插件為您的網站創建子主題。然後，確保您的網站有一個活動的子主題，並在style.css文件中添加 CSS 代碼。如果您也備份整個網站會更好，因為我們將修改您網站的精細核心文件。

打開您的代碼編輯器將您的腳本粘貼到那裡，或在外觀 > 主題文件編輯器上使用 WP 內置編輯器。現在，打開樣式表或子主題的style.css文件。

這是您應該粘貼所有自定義腳本的地方。添加 CSS 代碼後，單擊更新文件。但如果它變成一個大文件，創建一個或多個新文件可能是個好主意。

3. 子主題的functions.php文件

您還可以使用 PHP 函數插入 CSS 樣式。以這種方式應用的所有樣式都將作為內聯樣式插入到前面。

就像以前的方法一樣，確保子主題對您的網站是活動的。然後，從主題編輯器中打開functions.php文件並在此處粘貼以下代碼。

 add_action('wp_head','QuadLayers_headlink');
函數 QuadLayers_headlink(){
	迴聲'<樣式>
    .entry-content > p:nth-child(3)::before{
	    font-family: "Font Awesome 5 Free"; 
	    字體粗細：400； 
	    內容：“\f0f3”；
    }
    h1,h2,h3,p,a,li{
	    font-family：“Hubballi”，草書；
    }</style>';
}

使用這種方式的最大優勢是您可以應用 PHP 條件，充分利用 WP 鉤子和函數的強大功能。

如果您想了解有關將 CSS 應用到您的網站的更多信息，請查看我們的指南，了解如何將 CSS 應用到 WordPress。

結論

這些都是自定義 WordPress 網站最常用的 CSS 代碼。我們向您展示了所有流行的腳本，您可以使用這些腳本更改網站的視覺外觀並為其添加獨特的設計。總而言之，我們使用 CSS 腳本進行了以下修改：

隱藏元素
移動元素
移動設備的 CSS
編輯文本
翻譯
添加滾動條
使用圖像作為圖標
更改字體

您可以輕鬆地使用 CSS 代碼來自定義 WordPress 網站的這些元素。為了幫助您，我們甚至向您展示了在 WordPress 中應用 CSS 的幾種方法。

此外，如果您想了解 WordPress 中的 CSS，我們還介紹了在特定頁面或帖子上應用 CSS。同樣，CSS 腳本甚至可以與頁面構建器一起使用。最常見的示例之一是使用 CSS 自定義 Divi 菜單。

那麼您如何看待 CSS 來編輯 WP 網站？你用過它們嗎？他們有幫助嗎？請在評論中告訴我們。

同時，這裡還有一些您可能感興趣的文章：

如何創建自定義 WordPress 插件
修復 WordPress 儀表板未加載問題
如何以編程方式創建 WordPress 自定義字段

自定義 WordPress 網站的最佳 CSS 代碼

為什麼在 WordPress 中使用 CSS 代碼來自定義網站？

自定義 WordPress 網站的最佳 CSS 代碼

1.隱藏元素

1.1。 隱藏標題：

1.2. 隱藏“加入購物車”按鈕

1.3. 隱藏麵包屑

2.移動元素

3. 移動模式的 CSS 代碼

4. 編輯文本

5. 使用 CSS 代碼的翻譯

6.添加滾動條

7. 使用圖像作為圖標的 CSS 代碼

8.更改字體

獎勵：將 CSS 應用於 WordPress 網站的 3 種方法

1.主題定制器

2.子主題CSS文件

3. 子主題的functions.php文件

結論

1.1。隱藏標題：