也想出現在這里?聯系我們

開發WordPress主題的初學者指南(5個步驟)

  • 文章介紹
  • 升級版本
  • 評價&建議

在本指南中,我們將討論如何開始進行主題開發。然后,我們將帶您逐步完成創建全新的自定義主題的過程。

如果您想正確地做某事,則可能必須自己做。盡管有許多可用的WordPress主題,但要找到具有所需確切外觀和功能的主題可能很困難。實際上,您可能會想創建自己的主題。但是,主題開發的入門似乎似乎很困難-尤其是對于初學者。

幸運的是,為WordPress創建自定義主題是一個相對簡單的過程。它還不需要太多的網絡開發技術知識或經驗。此外,構建自己的主題非常值得付出努力,因為您可以使網站看起來和運行得恰到好處。

WordPress主題開發簡介

您希望自己的網站看起來很棒,并具有所需的所有功能,因此請查看WordPress主題目錄。不幸的是,您所看到的一切都無法滿足您的所有要求,并且您不想在視覺上妥協。也許您想要獨特的東西來使您的網站脫穎而出,或者您只是不想將錢花在高級主題上

此時,您可能會開始考慮創建自己的主題。幸運的是,為WordPress開發主題并不是您可能想象的那么復雜。由于平臺固有的用戶友好性和可用的眾多工具,幾乎任何人都可以創建自定義主題。

我們將帶您完成創建第一個主題的過程。首先,您需要做兩件事:

  • 您自己的WordPress網站
  • 一個優質的托管計劃

您還將受益于使用本地暫存環境的經驗,因為您將使用一個環境來創建主題。對CSSPHP有所了解也將有所幫助(如果沒有必要)。

最后,您需要擁有一個重要的工具,它將使創建主題的過程變得更加容易:入門主題。

什么是入門主題(以及為什么要使用入門主題)

入門主題是WordPress的準系統主題,您可以使用該主題來創建自己的主題。使用啟動程序使您可以構建一個堅實的框架,而不必擔心從頭開始編寫主題所涉及的復雜性。通過向您展示主題的基本結構及其各個部分如何協同工作,它還將幫助您了解WordPress的工作原理。

有很多優秀的入門主題在那里,其中包括我們自身的主題

下面的示例將使用Underscores。對于初學者來說,這是一個不錯的選擇,因為它僅包含基礎知識。另外,此啟動程序主題是由Automattic開發的,從長遠來看,使其更有可能變得安全,兼容并得到良好的支持。

如何開發您的第一個WordPress主題(5個步驟)

隨著準備工作的進行,您終于可以開始創建第一個主題了。如前所述,本演練將使用入門主題。

但是,如果您想嘗試創建沒有模板的所有內容,則可以隨意這樣做。請記住,這將需要更多的編碼能力和對Web開發的理解。

步驟1:設置本地環境

wordpress本地環境配置

您需要做的第一件事是創建本地開發環境。這實際上是一臺安裝在計算機上的服務器,可用于開發和管理本地WordPress網站。本地站點是一種開發主題的安全方法,而不會以任何方式影響您的實時站點。

創建本地環境的方法有很多,但是我們將使用DesktopServer。這是一種免費安裝本地版本WordPress的快速,簡便的方法,并且與Mac和Windows兼容。首先,選擇免費版本的DesktopServer,完成注冊過程,然后下載安裝程序。

下載安裝程序后,即可運行它。

wordpress插件開發

安裝完成后,您可以打開程序,在該程序中將要求您配置新的本地環境。這是一個簡單的過程,幾分鐘后您就可以準備好本地WordPress網站。安裝后,新站點的外觀和工作原理將與實時WordPress網站完全相同。

步驟2:下載并安裝您的入門主題

像大多數入門主題一樣,Underscores非常容易上手。實際上,您要做的就是訪問網站并命名您的主題。

如果需要,還可以單擊“高級選項”以進一步自定義基本主題。在這里您可以填寫更多信息,例如作者姓名,并為主題提供描述。

還有_sassify!選項,它將為您的主題添加語法很棒的樣式表(SASS)文件。SASS是CSS的預處理語言,使您可以使用變量,嵌套,數學運算符等。

做出選擇后,可以單擊Generate,這將下載一個包含入門主題的.zip文件。這是您開發自己的主題的核心,因此請將其安裝在本地站點上。安裝主題后,您可以預覽您的網站以查看其外觀。現在這是非常基本的,但是不會持續很長時間了!

步驟3:了解WordPress在幕后的運作方式

在自定義主題之前,您需要了解其組件的用途以及它們如何組合在一起。首先,讓我們討論模板文件,它們是WordPress主題的主要構建塊。這些文件確定網站上內容的布局和外觀。例如,header.php用于創建標頭,而comments.php用于顯示注釋。

WordPress通過遍歷模板層次結構來確定要在每個頁面上使用的模板文件。這是WordPress每次在您網站上的頁面加載時將尋找匹配的模板文件的順序。例如,如果您訪問URL?http://example.com/post/this-post,WordPress將按以下順序查找以下模板文件:

  1. 與該段匹配的文件,例如this-post
  2. 與帖子ID匹配的文件。
  3. 通用的單個發布文件,例如single.php
  4. 存檔文件,例如archive.php
  5. 的index.php文件。

由于所有主題都需要index.php文件,因此如果找不到其他文件,則為默認設置。下劃線已經包含最常見的模板文件,它們將立即可用。但是,如果您想了解它們如何協同工作,可以嘗試對其進行編輯。

您需要掌握的另一個重要元素是The Loop。這是WordPress用于顯示內容的代碼,因此在許多方面,它都是您網站的跳動心臟。它出現在所有顯示帖子內容的模板文件中,例如index.phpsidebar.php

循環是一個復雜的主題,如果您想更好地掌握WordPress顯示帖子內容的方式,我們建議您閱讀更多信息。幸運的是,由于有了Underscores,循環已經集成到您的主題中,因此現在無需擔心。

步驟4:配置主題

容易想到主題僅僅是出于裝飾目的,但實際上它們對您網站的功能有巨大影響。讓我們看一下如何進行一些基本的自定義。

使用“掛鉤”添加功能

掛鉤是插入模板文件中的代碼段,使您可以在網站的不同區域上運行PHP操作,插入樣式并顯示其他信息。大多數掛鉤都直接實現到WordPress核心中,但是有些掛鉤對于主題開發人員也很有用。

讓我們看一些最常見的鉤子以及它們可以用于什么:

  • wp_head()?—添加到header.php中的<head>元素,并啟用樣式,腳本和其他信息,這些信息在網站加載后立即運行。
  • wp_footer()?—在</ body>標記之前添加到footer.php。通常用于插入Google Analytics(分析)代碼。
  • wp_meta()?-通常顯示在sidebar.php中,以包括其他腳本(例如標簽云)。
  • comment_form()-在文件結束</ div>標記之前直接添加到comment.php中,以顯示注釋數據。

這些將已包含在您的Underscores主題中。但是,我們仍然建議您訪問Hooks數據庫以查看所有可用的鉤子并了解有關它們的更多信息。

使用CSS添加樣式

級聯樣式表(CSS)定義網站上所有內容的外觀。在WordPress中,這是使用style.css文件完成的。您已經將這個文件包含在主題中,但是目前它僅包含基本的默認樣式。

wordpress自定義CSS

如果要快速了解CSS的工作原理,可以在此處編輯任何樣式并保存文件以查看效果。例如,您可以找到以下代碼(通常在485行上):

a {color: royalblue;}

這可以控制未訪問的超鏈接的顏色,默認情況下,其顯示為寶藍色:wordpress自定義css

步驟5:導出主題并將其上傳到您的網站

完成主題修改后,是時候確保其正常工作了。您可以通過測試主題來確保這一點。為了快速確保您的主題在大多數情況下都能正常運行,可以使用“主題單元測試”數據。這是一組虛擬數據,您可以上傳到您的網站,其中包含樣式和內容的許多不同變體。它使您能夠查看主題如何應對不可預測的數據。

當您對主題進行了全面測試并確信其符合要求的標準時,剩下的就是將其導出。最簡單的方法就是簡單地找到網站在本地計算機上的安裝位置,最有可能在默認“文檔”目錄內名為“網站”的文件夾中。打開網站的文件夾,然后訪問/ wp-content / themes /,在其中可以找到您的主題。

有用0
  • 2020.10.16初次和大家見面了!

等待您對該主題的建議

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
彩神-助手