如果您已經安裝了WordPress主題，但它不太適合您，則您可能會感到沮喪。有很多選項可用於自定義WordPress主題。
挑戰在於找到正確的方法。
在這篇文章中，我將引導您完成自定義WordPress主題的選項，幫助您確定最適合您的主題，並向您展示如何安全有效地做到這一點。
只需移至Kinsta，即可將WordPress網站的速度提高200％。
今天免費遷移
定製主題的選項
在我們深入探討並開始更改您的主題之前，有必要了解一下這些選項的含義，因為它們適合不同的情況。
以下是為您提供的選項的概述：
如果要向主題添加功能，請安裝插件。
- 根據您的主題，在WordPress管理屏幕中使用定製程序自定義字體，顏色以及布局。
- 如果您使用的是頁面構建器主題，請使用其功能來自定義網站的設計。
- 如果您已安裝框架主題，請使用可用的子主題之一來自定義您的網站，以及可在管理屏幕中使用的所有自定義選項。
- 如果您的主題特定於您的網站，並且您願意這樣做，請直接編輯該主題的代碼。
- 如果要編輯第三方主題的代碼，請創建一個子主題。
如果要編輯代碼，可以使用許多選項，從使用塊編輯器到定製程序，再到編輯文件。我們將在本文中介紹所有內容，但讓我們從最簡單的選項開始：安裝插件。
您實際上是否需要自定義主題？
有時，您根本不需要自定義主題：相反，您需要安裝插件。
主題決定了網站的設計：網站的外觀和內容的顯示方式。插件增加了額外的功能。
如果您要進行的更改專註於功能而不是設計，請考慮自己安裝插件。這可能是您需要編寫的插件，可以是從插件目錄下載的插件，也可以是購買的插件。
如果發現自己想要編輯主題中的functions.php文件，請問自己：
如果將來切換主題，是否要保留此功能？
如果答案是肯定的，那麼該代碼應該放在插件中，而不是您的主題中。
關於使用插件而不是主題的好例子，包括添加小部件，註冊自定義帖子類型和分類法，創建自定義欄位以及添加諸如商店或SEO增強功能之類的額外功能。
通過WordPress管理員屏幕自定義WordPress主題
如果您要進行的更改是針對設計且相對簡單的，則可以通過管理屏幕進行更改。定製器為您提供了多種調整主題的選項：可用的內容取決於您的主題。並且您可能會在外觀菜單中看到稱為「編輯器」的內容。避開這個，出於簡短的原因，我將在稍後進行描述。
通過定製器定製主題
自定義WordPress主題的最簡單方法是使用WordPress Customizer。
您可以通過以下兩種方式之一進行訪問：
- 在查看您的網站時（登錄時），請單擊屏幕頂部管理欄中的自定義鏈接。
- 在管理屏幕中，單擊外觀>自定義。
這將帶您到定製器。
WordPress定製器
在上面的屏幕截圖中，我安裝了一個名為ColorMag的免費主題，該主題具有很多自定義選項。它在「定製器」中添加了用於設計功能的部分，包括標題圖像，社交媒體，類別顏色以及「設計選項」標籤，可帶您進入更多標籤，您可以在其中更改網站的布局和設計。
不同的主題具有不同的自定義選項，但是較新的主題似乎一直都在增加它們。如果您找到了自己喜歡的主題，但不合適的主題，則可能會發現自定義主題可以準確地提供您所需的設計和布局。
主題編輯器（以及為什麼不使用它）
在管理屏幕中，您可能會注意到一個名為「主題編輯器」的選項，您可以通過「外觀」>「主題編輯器」將其關閉。
WordPress主題編輯器
這使您可以訪問主題中的文件，這意味著您可以直接編輯它們。
別。
即使您習慣於編寫CSS或PHP，按這樣的方式編輯主題中的文件也是一個非常糟糕的主意，原因有兩個：
- 如果您購買或下載了第三方主題，則您在下次更新主題時所做的任何更改都將丟失（出於安全性考慮，應保持主題更新）。
- 更重要的是，如果您進行的更改會破壞您的網站，則不會對其進行跟蹤，並且文件的先前版本也不會更改。您可能無法撤消該站點。
如果要編輯主題中的代碼，則應使用代碼編輯器進行編輯，並且除非在臨時站點上進行了測試，否則不要在實時站點中編輯文件。如果需要編輯第三方主題，則應通過子主題進行編輯。在本文的後面，將詳細介紹這兩個方面。
WordPress知道使用主題編輯器有多不安全：嘗試訪問它時，它甚至會向您發出警告。
警告不要使用WordPress主題編輯器
因此，請採納WordPress的建議：請勿使用主題編輯器！
使用頁面構建器和框架來自定義WordPress主題
大部分WordPress主題都有自定義選項，這意味著您可以通過「自定義程序」對設計和布局進行更改。
但是某些主題對此進行了進一步的設計，旨在進行擴展和顯著定製。這些主題稱為主題框架。
使用WordPress，我們的流量增長了1,187％。
我們將向您展示如何。
加入20,000多個其他人，他們每周都會收到有關WordPress內部技巧的新聞！
現在訂閱
成功！感謝您的訂閱
您將在一周內收到下一期的Kinsta新聞通訊。
訂閱Kinsta新聞通訊
訂閱
我同意條款和條件以及隱私政策
另一種選擇是使用一個插件，該插件使您可以使用用戶友好的界面來設計網站：這些插件稱為頁面構建器。
使用頁面構建器自定義主題
Page Builder插件的設計使您可以輕鬆使用界面來查看網站內容，從而輕鬆設置網站的設計。
您安裝具有兼容主題的頁面構建器插件，然後使用它提供的選項來按照自己的方式設計網站。
Elementor是最著名的頁面構建器之一，但是您可以在我們的頁面構建器綜述中找到一些替代方法。
頁面構建器使您可以通過拖放界面來編輯帖子和頁面，這意味著您可以看到內容的外觀並使每個頁面都獨一無二。
在下面，我使用的是與Hello Elementor主題兼容的Elementor頁面構建器。
Elementor界面
頁面構建器使您在頁面的布局和設計上具有很大的靈活性。如果您習慣使用Wix這樣的網站構建器，那麼它們可以幫助簡化向WordPress的過渡。而且，如果您更喜歡WordPress內容的WYSIWYG界面，它們可以幫助您快速設計頁面。
使用主題框架自定義主題
頁面構建器的替代方法是主題框架。這些是旨在協同工作的主題套件。框架是一個父主題，您可以選擇一系列子主題來自定義主主題，並使主題看起來像您想要的那樣。
主題框架的一個例子是Divi，它具有自定義選項，可讓您進一步調整子主題的設計，包括類似於頁面構建器的拖放界面。
Divi主題
編輯您的WordPress主題代碼
如果您願意編輯CSS和/或PHP，則可以在主題中編輯代碼以自定義主題。
這給您最大程度的控制。
如果您要編輯自己的主題，該主題特定於您的網站，並且是專門為其開發的，則可以直接對該主題進行編輯。但是，如果您正在使用第三方主題並要對其進行編輯，則應創建一個子主題，以免下次更新主題時丟失所做的更改。
編輯主題文件
編輯WordPress主題的第一步是了解哪些主題文件控制哪些主題，以及哪些主題需要編輯。
樣式表
每個WordPress主題都有一個樣式表，稱為style.css。它包含用於樣式化網站的所有代碼：布局，字體，顏色等。
例如，如果要更改主題的顏色，則可以對樣式表進行編輯。如果要添加新字體，則可以使用樣式表將其應用於不同的元素，例如正文和標題。
編輯樣式表時要注意：特殊性意味著元素的代碼並不總是來自您認為的位置。元素將從頁面層次結構中位於其上方的其他元素繼承樣式，除非您添加特定於下部元素的樣式。
要發現哪些CSS影響了頁面上的哪些元素，您可以在瀏覽器中使用檢查器查看CSS（此示例中為Chrome DevTools）：
使用Chrome DevTools在WordPress網站中檢查代碼
然後，您可以使用它編寫針對頁面上單個元素或一系列元素或類的新CSS。
如果所有有關元素，類和特殊性的討論對您來說都是新手，那麼您可能希望避免直接編輯主題的CSS。至少直到您對CSS及其工作方式有了更多的了解。
功能文件
幾乎每個主題都有的另一個文件是功能文件（functions.php）。這是使主題中的一堆東西工作的文件。在其中，您可以找到代碼來註冊主題功能，例如特色圖像，小部件等。
如果您想在主題中添加功能代碼，則可以在其中添加代碼。但要注意：在大多數情況下，您實際上應該在編寫插件。問你自己：
如果將來切換主題，是否要保留此功能？
如果答案是肯定的，請編寫一個插件，而不要在功能文件中添加代碼。插件不必很大：沒有什麼可以阻止您為幾行代碼創建一個插件。
函數文件都是用PHP編寫的，因此您需要熟悉一下。不要盲目複製通過Google搜索找到的代碼：花時間弄清楚該代碼的作用並理解它。這樣一來，您不太可能添加不太理想的代碼。
主題模板文件
主題中的大多數文件都是主題模板文件。這些文件確定WordPress在給定頁面上輸出的內容，並根據模板層次結構進行選擇。
如果要更改在給定帖子類型，頁面或存檔上輸出內容的方式，則需要編輯其中一個文件或創建一個新文件。
例如，假設您的主題有一個archive.php文件，該文件用於輸出類別和標籤的存檔頁面。您要更改標籤的輸出方式。因此，您創建了一個名為「 tag.php」的文件，該文件將基於archive.php進行調整。
同樣，請小心編輯文件：它們可能會破壞您的網站。始終首先在本地安裝和/或登台站點上進行測試。
無論您需要編輯這些文件類型中的哪一種，都應正確進行操作。閱讀以下有關最佳做法的部分，以了解如何以不會破壞您的網站並且不會引起安全問題的方式來編輯代碼。
使用子主題自定義第三方主題
如果您在網站上運行的主題來自第三方，並且您想要編輯代碼，則需要創建一個子主題。
這是因為，如果直接編輯主題然後進行更新（應該進行更新），則會丟失所做的所有更改。
創建子主題包括四個步驟：
厭倦了慢的主機？ Kinsta的構建考慮了速度和性能。查看我們的計劃
- 在wp-content / themes中創建一個新文件夾。
- 在該文件夾中，創建一個樣式表。在該樣式表中，告訴WordPress這是您現有主題的子主題。
- 將您要編輯的文件的副本添加到子主題並在那裡進行編輯。
- 在您的站點中激活子主題。
WordPress將始終使用子主題中的文件來輸出內容，除非父主題的層次結構中有更高的文件。如果同一文件有兩個版本，它將使用子主題中的一個。這意味著子主題中的新文件將覆蓋父主題中的新文件。
自定義WordPress主題的最佳做法
因此，您打算自定義主題。在繼續進行更改之前，請遵循以下提示，以確保您安全地進行操作，並且不會破壞您的網站，不會使其受到攻擊或丟失代碼。
如果可能，自定義而不編輯代碼
如果您可以通過「定製程序」或管理屏幕中的其他位置進行定製，那麼這比編輯代碼更安全。
僅當您熟悉CSS（對於樣式表）和PHP（對於其他主題文件）並且知道如何安全地進行操作時，才可以編輯代碼。
使用本地開發站點進行更改
如果您正在編輯主題中的代碼或創建子主題以進行更改，則應在安裝了主題並從實時站點複製內容的本地WordPress上進行開發工作。
這樣，您就可以擁有一個實時站點的鏡像來測試您的更改。在本地站點上工作不會對您的實時站點產生影響，並且速度更快。
即使您使用的是Customizer，使用站點的本地版本進行測試也會很有幫助，因為您可以發布更改並進行測試，而不會影響實時站點。
測試對主題的更改後，可以將其上載到實時站點，甚至更好的是，可以在臨時站點上對其進行測試，然後將其發布。
使用版本控制
更改主題時，應使用版本控制來跟蹤更改。
簡單來說，這意味著更改主題的版本號並保留兩個版本的副本。但是，如果您要正確執行版本控制，則需要使用GitHub之類的服務來跟蹤您的更改。
這樣，如果更改引起問題，您可以輕鬆地將其回滾而無需進行手動編輯。
如果您是團隊成員，則版本控制會更加有用，因為您可以查看其他成員的工作。
使用暫存站點測試更改
如果您可以訪問登台站點（例如所有計劃附帶的Kinsta免費登台），那麼在活動站點上激活主題的新版本（或新的子主題）之前進行此測試是最安全的方法。
myKinsta分期
這是因為任何本地站點都會與您的實時站點有所不同：它在不同的伺服器上（在本地計算機上創建了一個），可能正在運行不同版本的PHP或運行您站點的其他任何工具。
在登台伺服器上複製實時站點，然後上載並激活新主題。徹底測試您的站點，以確保一切正常，然後可以將所做的更改推送到實時站點。
使您的主題響應
您需要對主題進行的任何更改都可以在移動設備以及台式機上使用。
隨著越來越多的人通過手機訪問互聯網以及Google提供的「移動優先」索引，讓您的主題在移動設備上的作用比在桌面上變得重要。因此，您對主題所做的任何更改都必須適合移動設備使用，或者在相關情況下最好是移動設備優先。
這主要適用於您對樣式或布局所做的任何更改：請檢查新布局是否可在移動設備上使用，並檢查是否添加了媒體查詢，以使布局適應不同的屏幕尺寸。
如果您的主題沒有響應，則會對您的搜索引擎排名和轉化率產生負面影響。
如果您無權訪問許多不同的移動設備進行測試，則可以使用BrowserStack之類的工具來查看您的網站在不同設備上的外觀。您還可以在瀏覽器中使用開發人員工具，在定製程序中使用響應視圖。
WordPress Customizer中的響應式工具
確保您的自定義設置不會影響可訪問性
殘障或感官受損的用戶還需要可以訪問您的主題的任何更改。
這不僅僅是要確保您的網站可以在屏幕閱讀器上運行，還需要考慮許多其他因素，例如配色方案和字體大小。
如果您對主題進行的更改是使顏色更亮或文本更小，請再考慮一遍：這可能使人們難以閱讀或與您的網站進行交互。
在進行任何更改之前，請使用輔助功能檢查器來測試您的網站，並確保它不排除其他人。
堅持WordPress編碼標準
如果您要在主題中編輯代碼或創建子主題，則必須確保代碼符合WordPress編碼標準。
這些標準的存在是為了確保代碼的一致性和質量，並避免混亂的代碼。有針對PHP，CSS和JavaScript的標準，因此請花一些時間檢查與您相關的標準，並確保您遵循它們。
如果您現有的WordPress主題編碼正確，並且您以與此一致的方式編寫了任何新代碼，那麼您就可以確保自己的代碼符合要求。確保在對主題所做的任何更改中添加註釋，以使您或其他人知道以後再次使用該代碼時所做的工作。您可能會認為自己不會忘記，但是幾個月過去了，卻很容易忘記為什麼編輯了一行代碼。
是否需要自定義#WordPress主題以使其獨特？有很多選擇！在我們的深入指南中為您選擇合適的一個！ ??
點擊鳴叫
摘要
自定義您的WordPress主題並不那麼困難。有時候，這是使用「定製程序」來更改字體或顏色的簡單情況。有時，您必須創建一個新的子主題才能向主題添加新的模板文件。
用於自定義主題的選項包括使用插件或自定義程序，直接編輯WordPress主題的代碼或創建子主題。
為您找到正確的選擇，並安全進行自定義，所有這些都不會破壞您的網站。
0分享
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
.essb_links .essb_links_list li a {
margin-top：0px;
}
@media only屏幕和（最小寬度：64em）{
.container–narrow.pb–60，
.knowledgebase .user-content {
職位：相對
}
.widget-share {
位置：絕對；
左：-200px;
頂部：0px；
高度：100％;
寬度：200像素；
框大小：border-box；
}
.widget-share-aligner {
寬度：200像素；
padding-right：62px；
框大小：border-box；
}
html（lang =「 nl」）.widget-share-aligner {
寬度：210像素；
}
.widget-share-inner {
padding-bottom：62px;
}
.knowledgebase .user-content .widget-share-inner {
padding-top：0；
}
.widget-share .amount {
顯示：flex;
align-items：居中;
證明內容：flex-end;
寬度：100％;
右邊距：11px;
font-size：14px;
font-weight：500;
底邊距：10px;
}
.widget-share .amount svg {
右邊距：8px;
margin-left：10px;
}
.essb_links .essb_links_list {
flex-direction：列;
align-items：flex-end;
}
.essb_links .essb_links_list li {
顯示：塊；
margin-bottom：5px！important;
}
.widget-share__total {
margin-bottom：0px！重要;
}
.widget-share__total .heading–small {
顏色：＃999999;
font-size：14px;
字體粗細：300；
}
.essb-total-value {
margin-right：4px;
}
}
.essb_links {
保證金：0px;
填充：0px;
}
.essb_counter_right {
顯示：無！重要；
}
.essb_links.essb_template_circles-retina .essb_link_hackernews一個，
.essb_links.essb_template_circles-retina .essb_link_reddit a，
.essb_links.essb_template_circles-retina .essb_link_mail a，
.essb_links.essb_template_circles-retina .essb_link_mwp一個，
.essb_links.essb_template_circles-retina .essb_link_buffer a，
.essb_links.essb_template_circles-retina .essb_link_linkedin a，
.essb_links.essb_template_circles-retina .essb_link_facebook a，
.essb_links.essb_template_circles-retina .essb_link_twitter a
{
顏色：＃43414e！important;
背景：＃f3f3f6！important;
}
.essb_links.essb_template_circles-retina li a：focus，.essb_links.essb_template_circles-retina li a：hover {
border-color：#fff！important;
背景：＃43414e！重要；
}
.essb_links.essb_template_circles-retina a {
border-color：＃f3f3f6！important;
背景：＃f3f3f6;
}
.essb_links .essb_icon：之前{
font-size：15px！important;
頂部：8px;
左：9px;
}
.essb_links .essb_icon {
寬度：32px;
高度：32px;
}
.essb_links.essb_counter_modern_right .essb_counter_right {
背景：＃f3f3f6！important;
}
@media only屏幕和（最大寬度：63.999em）{
.widget-share-aligner {
位置：相對！重要；
top：0！重要；
}
.essb_links .essb_links_list li {
margin-right：8px！important;
}
}