創建自定義 WordPress 網站 – 選項

已發表: 2020-10-16

今天有大量的 WordPress 網站是使用預先構建的主題創建的。在許多情況下，該主題將提供一些可以導入的“演示”網站。儘管您想要定制您的 WordPress 網站的可能性很高，有時甚至需要大量定制，以實現最適合您的業務或博客的視覺風格。

在深入定制您的 WordPress 網站之前，重要的是首先仔細考慮您想要從新設計中獲得什麼，因為這將在一定程度上決定用於實現此目的的方法。重要的是，您所做的任何更新都可以保存並且不會被覆蓋，這顯然至關重要，例如在更新主題文件或 WordPress 核心本身時。

一個常見的誤解是，自定義 WordPress 網站時的“正確”步驟是首先創建子主題。這個子主題位於我們的父主題旁邊，是進行任何設計更改（特別是主題的 CSS 文件）的地方。毫無疑問，在自定義網站樣式或調整功能時創建和使用子主題可能是最佳實踐。但是，有很多方法可以自定義您的 WordPress 網站，而無需您這樣做。這是創造新聞，特別是如果您是非編碼人員，因為子主題確實增加了網站的複雜性。任何可以降低複雜性並使編輯網站設計更容易的事情都必須受到歡迎！

如果需要對主題進行廣泛的自定義，那麼使用子主題是有意義的。然而，對於簡單的調整和更新，子主題是矯枉過正的。我們有一些關於如何在沒有子主題的情況下快速輕鬆地自定義網站的建議。最重要的是，它們是強大的方法，可以保留您在以後更新主題或 WordPress 核心時所做的任何更新。讓我們來看看。

WordPress 定制器

WordPress 了解您需要調整網站的外觀。為了幫助解決這個問題，它們包括一個默認的內置定制器，無論您使用什麼主題，它都允許您對網站設計進行一系列更新。 WordPress 定制器非常易於使用，可以通過 WP-Admin 訪問外觀 > 定制菜單。讓我們看看這在實踐中是如何工作的。

下圖顯示了當前默認 WordPress 主題（二十二十）處於活動狀態時簡單帖子的外觀。

自定義 WordPress 網站 - WordPress 定制器 - 默認帖子標題

現在讓我們玩一下我們的定制器選項。從 WP-Admin 中前往外觀 > 自定義，或單擊頁面和帖子上顯示的黑色菜單欄中的自定義鏈接。

當它加載時，您會看到一系列選項，所有這些選項都控制著您網站的不同元素，例如配色方案和徽標。在這種情況下，我們可以通過單擊“站點標識”來更改我們的網站徽標。我們不僅在此部分上傳了新徽標，還添加了網站圖標和標題/標語。

完成後，我們點擊“顏色”並從那裡更改我們網站的背景顏色以及添加背景紋理圖像。

只需點擊幾下，我們就徹底改變了我們網站的外觀，並且全部使用默認的 WordPress 定制器。好的！

如果您擁有一些 CSS 技能，您可以在使用 CSS 更改網站設計方面走得更遠。 WordPress 定制器具有出色的“附加 CSS”編輯器，可讓您添加 CSS 並實時查看其影響。但是，在您單擊定制器左上角的“發布”按鈕之前，更改不會生效。

這是我們用一些簡單的 CSS 實現的：

我想你會同意顏色現在匹配得更好了。我們還讓“搜索”一詞從放大鏡圖標下方消失，看起來更整潔。此外，我們更改了字體系列和顏色。

主題定制器

為您的網站選擇正確的主題可以為您節省大量自定義時間，因為無論如何，主題開發人員已經完成了很多使網站看起來“恰到好處”的工作。畢竟，既然您本可以選擇一個主題來為您提供更接近您一開始想要的設計，為什麼還要花費數小時編寫 CSS 和更新選項。

許多主題將包括額外的自定義選項，通常通過他們自己定制的“選項面板”提供。此選項面板的功能和可用性因主題而異。也許不足為奇的是，與不太複雜的主題相比，編碼更好且維護得更好的主題往往具有更豐富、更強大的選項面板。

我們最喜歡的主題之一是 Astra。擁有超過 1,000,000 名用戶，由於其強大的編碼、良好的設計和定期更新，它顯然非常受歡迎。

正如您所料，Astra 帶有一個有用的選項面板，允許您更改一系列設置，包括顏色、側邊欄選項、佈局樣式等等。如果您安裝主題並從 WP-Admin 中前往外觀菜單，您將能夠通過“Astra 選項”子菜單訪問此面板。

許多主題將包括一個選項面板，該面板提供了類似的一系列功能，使其成為一種快速簡便的方式來自定義您的網站，而無需觸摸一行代碼或不需要子主題。這種易用性是 WordPress 與主題結合成為快速創建令人驚嘆的網站的強大方式的眾多原因之一。

使用 CSS 插件進行自定義

毫無疑問，從設計角度在網站上實施更改的最有效方法之一是添加或更改 CSS 代碼。 CSS（或層疊樣式表）描述了 HTML 元素如何在屏幕上顯示——換句話說，它們的外觀。如果沒有 CSS，您的網站將根本沒有樣式元素，因此它非常重要。

即使您以前從未編寫過代碼，CSS 實際上也很容易學習和使用。當然，高級 CSS 可能需要一些時間來學習編寫，但您會驚訝於通過谷歌搜索和練習可以實現的目標！

為了更新您網站上的 CSS，您需要 a) 直接編輯您網站上已經存在的 CSS 文件或 b) 使用允許您更新 CSS 的插件。選項 A 更難，因為您需要使用 FTP 客戶端來訪問您網站的 CSS 文件，而插件可以提供一個易於使用的編輯器，可以直接從 WordPress 管理員中訪問。讓我們看一下下面的幾個 CSS 插件選項。

簡單的 CSS 插件

一個流行的 CSS 插件是 Tom Usborne 的 Simple CSS。

簡單的 CSS 使我們能夠快速輕鬆地將 CSS 添加到我們的網站。更好的是，它在定制器中提供了一個實時預覽編輯器，這意味著您可以立即查看您的代碼是否正在生成您想要的外觀。作為獎勵，您還可以將 CSS 添加到特定頁面或帖子，而不是（通常會發生）您的 CSS 更改更新站點範圍。

自定義 WordPress 網站 - CSS 插件 - 簡單的 CSS 插件菜單

簡單的自定義 CSS & JS

Simple Custom CSS & JS 是另一個很棒的 CSS 插件。它的工作原理類似於上面提到的簡單 CSS 插件，它允許您從 WordPress 管理員中更新您網站上的 CSS（和另一種編程語言 JS）代碼。您還可以指定您的自定義 CSS 是否應在網站的頁眉、頁腳或正文中打印代碼，這為您提供了更大的靈活性。