建站
咨詢
售后
建站咨詢
新聞中心
在本教程中，我們將討論如何開始主題開發(fā)。然后，我們將帶您逐步完成創(chuàng)建全新自定義主題的過程。
10年積累的網(wǎng)站設(shè)計制作、做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有潼關(guān)免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
如果你想把某件事做對，你可能必須自己做。雖然有很多wordpress主題可用，但要找到一個具有您需要的外觀和功能的主題可能很困難。事實上，您可能會嘗試創(chuàng)建自己的主題。然而，主題開發(fā)的入門似乎勢不可擋——尤其是對于初學(xué)者而言。
幸運的是，為WordPress創(chuàng)建自定義主題是一個相對簡單的過程。它也不需要太多的技術(shù)知識或Web開發(fā)經(jīng)驗。此外，構(gòu)建您自己的主題非常值得付出努力，因為您可以讓您的網(wǎng)站看起來和運行得恰到好處。
WordPress主題開發(fā)簡介
您希望您的網(wǎng)站看起來很棒并擁有您需要的所有功能，因此您可以查看WordPress主題目錄或者我們提供的WordPress原創(chuàng)主題。不幸的是，您看到的任何東西都不能滿足您的所有要求，而且您不想在您的愿景上妥協(xié)。也許您想要一些獨特的東西來讓您的網(wǎng)站脫穎而出，或者您只是不想將錢花在高級主題上。
此時，您可能會開始考慮創(chuàng)建自己的主題。幸運的是，為WordPress開發(fā)主題并不是您想象的那么復(fù)雜。由于該平臺固有的用戶友好性和眾多可用工具，幾乎任何人都可以創(chuàng)建自定義主題。
我們將帶您完成創(chuàng)建第一個主題的過程。要開始，您需要做兩件事：
- 您自己的WordPress 網(wǎng)站
- 一個優(yōu)質(zhì)的服務(wù)器
您還將受益于擁有本地臨時環(huán)境的經(jīng)驗，因為您將使用一個環(huán)境來創(chuàng)建您的主題。對CSS和PHP有一些了解也會有所幫助（如果沒有必要）。
最后，您需要擁有一個重要的工具，它可以使創(chuàng)建主題的過程變得更加容易：入門主題。
什么是入門主題
入門主題是一個基本的WordPress主題，您可以使用它來創(chuàng)建自己的主題。使用starter使您能夠建立在一個可靠的框架上，而不必?fù)?dān)心從頭開始編寫主題所涉及的復(fù)雜性。它還將通過向您展示主題的基本結(jié)構(gòu)及其所有部分如何協(xié)同工作，幫助您了解WordPress的工作原理。
有很多優(yōu)秀的入門主題在那里，其中包括下劃線，UnderStrap和Bones（僅舉幾例）。
我們將在下面的示例中使用下劃線。對于初學(xué)者來說，這是一個不錯的選擇，因為它只包含基礎(chǔ)知識。另外，這個入門主題是由Automattic開發(fā)的，從長遠(yuǎn)來看，這使得它更有可能是安全的、兼容的并且得到很好的支持。
如何開發(fā)您的第一個WordPress主題
隨著準(zhǔn)備工作的進行，您終于可以開始創(chuàng)建您的第一個主題了。正如我們提到的，我們將在本演練中使用入門主題。
但是，如果您想嘗試在沒有模板的情況下自己創(chuàng)建所有內(nèi)容，您應(yīng)該隨意這樣做。請記住，這將需要更多的編碼能力和對Web開發(fā)的理解。
Step 1：設(shè)置本地環(huán)境
您需要做的第一件事是創(chuàng)建本地開發(fā)環(huán)境。這實際上是您安裝在計算機上的服務(wù)器，您可以使用它來開發(fā)和管理本地WordPress站點。本地站點是開發(fā)主題的安全方式，而不會以任何方式影響您的實時站點。
有很多方法可以創(chuàng)建本地環(huán)境，但本次示例我們將使用DesktopServer。這是一種免費安裝本地版本W(wǎng)ordPress的快速、簡單的方法，并且與Mac和Windows兼容。要開始使用，請選擇DesktopServer的免費版本，完成注冊過程，然后下載安裝程序。
下載安裝程序后，您可以運行它。
安裝完成后，您可以打開該程序，系統(tǒng)會要求您配置新的本地環(huán)境。這是一個簡單的過程，您將在幾分鐘內(nèi)準(zhǔn)備好您的本地WordPress站點。安裝后，您的新網(wǎng)站的外觀和工作方式將與實時WordPress網(wǎng)站完全相同。
Step 2：下載并安裝您的入門主題
與大多數(shù)入門主題一樣，Underscores非常容易上手。事實上，您需要做的就是訪問網(wǎng)站并命名您的主題。
如果需要，您還可以單擊Advanced Options以進一步自定義基本主題。在這里您可以填寫更多信息，例如作者姓名，并提供主題描述。
還有_sassify！選項，這會將Syntactically Awesome StyleSheets (SASS)文件添加到您的主題。SASS是一種CSS預(yù)處理語言，它使您能夠使用變量、嵌套、數(shù)學(xué)運算符等。
當(dāng)您做出選擇后，您可以單擊Generate，這將下載一個包含您的入門主題的.zip文件。這是您將圍繞它開發(fā)自己的主題的核心，因此請將其安裝在您的本地站點上。安裝主題后，您可以預(yù)覽站點以查看其外觀。注：這只是一套最最最基礎(chǔ)的主題，還需要您對其深加工！
Step 3：了解WordPress在幕后的工作原理
在自定義主題之前，您需要了解其組件的用途以及它們?nèi)绾谓M合在一起。首先，讓我們討論模板文件，它們是 WordPress 主題的主要構(gòu)建塊。這些文件決定了您網(wǎng)站上內(nèi)容的布局和外觀。例如，header.php用于創(chuàng)建標(biāo)題，而comments.php允許您顯示評論。
WordPress通過瀏覽模板層次結(jié)構(gòu)來確定在每個頁面上使用哪些模板文件。這是每次加載您網(wǎng)站上的頁面時WordPress查找匹配模板文件的順序。例如，如果您訪問URL地址http://example.com/post/this-post，WordPress將按以下順序查找以下模板文件：
由于所有主題都需要index.php文件，因此如果找不到其他文件，則默認(rèn)使用該文件。Underscores已經(jīng)包含了最常見的模板文件，它們開箱即用。但是，如果您想了解它們?nèi)绾螀f(xié)同工作，您可以嘗試編輯它們。
您需要掌握的另一個重要元素是Loop。這是WordPress用來顯示內(nèi)容的代碼，因此在許多方面，它是您網(wǎng)站的跳動心臟。它出現(xiàn)在所有顯示文章內(nèi)容的模板文件中，例如index.php或sidebar.php。
循環(huán)是一個復(fù)雜的主題，如果您想更好地掌握WordPress如何顯示文章內(nèi)容，我們建議您閱讀更多相關(guān)內(nèi)容。幸運的是，由于Underscores，Loop已經(jīng)集成到您的主題中，因此現(xiàn)在無需擔(dān)心。
Step 4：配置您的主題
很容易認(rèn)為主題純粹是為了裝飾目的，但它們實際上對您網(wǎng)站的功能產(chǎn)生了巨大的影響。讓我們看看如何進行一些基本的自定義。
使用“鉤子”添加功能
鉤子是插入到模板文件中的代碼片段，它使您能夠在站點的不同區(qū)域運行PHP操作、插入樣式并顯示其他信息。大多數(shù)鉤子直接在WordPress核心中實現(xiàn)，但有些鉤子對主題開發(fā)人員也很有用。
讓我們來看看一些最常見的鉤子以及它們的用途：
- wp_head() — 添加到header.php中的
元素，并啟用網(wǎng)站加載后立即運行的樣式、腳本和其他信息。 - wp_footer() — 在
標(biāo)簽之前添加到footer.php。這通常用于插入Google Analytics代碼。 - wp_meta() — 這通常出現(xiàn)在sidebar.php中，以包含其他腳本（例如標(biāo)簽云）。
- comment_form() — 在文件結(jié)束
這些將已包含在您的Underscores主題中。但是，我們?nèi)匀唤ㄗh您訪問Hooks數(shù)據(jù)庫以查看所有可用的鉤子并了解有關(guān)它們的更多信息。
使用CSS添加樣式
層疊樣式表 (CSS)定義了您網(wǎng)站上所有內(nèi)容的外觀。在WordPress中，這是使用style.css文件完成的。您已經(jīng)將這個文件包含在您的主題中，但目前它只包含基本的默認(rèn)樣式。
如果您想快速了解CSS的工作原理，可以在此處編輯任何樣式并保存文件以查看效果。例如，您可以找到以下代碼（通常在第 485 行）：
a {color: royalblue;}
這控制未訪問的超鏈接的顏色，默認(rèn)情況下顯示為寶藍色：
讓我們看看如果我們嘗試通過用以下代碼替換它來改變它會發(fā)生什么：
a {color: red;}
保存文件，然后立即查看您的本地站點。正如您所料，所有未訪問的鏈接現(xiàn)在將顯示為鮮紅色：
您可能會注意到頂部的訪問鏈接沒有改變顏色。那是因為它實際上由樣式表中的下一部分控制：
a:visited {color: purple;}
這是一個非?；镜氖纠f明編輯style.css將如何影響您網(wǎng)站的外觀。CSS 是一個龐大的主題，如果您想了解有關(guān)創(chuàng)建網(wǎng)頁設(shè)計的更多信息，我們建議您進一步探索。有很多關(guān)于CSS主題的資源供初學(xué)者使用。
Step 5：導(dǎo)出主題并將其上傳到您的網(wǎng)站
當(dāng)您完成對主題的修改后，是時候確保它正常工作了。您可以通過測試主題來確保這一點。為了快速確保您的主題在大多數(shù)情況下都能正常運行，您可以使用Theme Unit Test數(shù)據(jù)。這是一組您可以上傳到您的網(wǎng)站的虛擬數(shù)據(jù)，其中包含許多不同的樣式和內(nèi)容變體。它將使您能夠了解您的主題如何處理不可預(yù)測的數(shù)據(jù)。
當(dāng)您徹底測試了您的主題并確信它符合要求的標(biāo)準(zhǔn)時，現(xiàn)在剩下的就是導(dǎo)出它。最簡單的方法就是找到網(wǎng)站在本地計算機上的安裝位置，最有可能在默認(rèn)文檔目錄中名為網(wǎng)站的文件夾中。打開網(wǎng)站的文件夾并訪問/wp-content/themes/，您將在其中找到您的主題。
您現(xiàn)在可以使用壓縮工具（例如WinRAR）來創(chuàng)建基于文件夾的.zip文件。只需右鍵單擊文件夾，然后選擇可以壓縮它的選項，例如壓縮“文件夾”。
當(dāng)文件夾被壓縮后，它就可以上傳并安裝在任何WordPress站點上，就像您在開始時安裝Underscores主題一樣。如果您對結(jié)果感到特別滿意，您甚至可以將您的主題提交到WordPress主題目錄。
小結(jié)
從頭開始創(chuàng)建自定義WordPress主題是一項不小的壯舉。然而，這個過程可能并不像您之前想象的那么困難。通過將過程分解為多個階段并使用Codex文檔站點上的信息，幾乎任何人都可以創(chuàng)建新主題。
當(dāng)然，上述的主題開發(fā)教程只是一個基礎(chǔ)、入門教程，要開發(fā)一個功能完善、前端交互一流的WordPress主題，并不是一蹴而就的事情。你可能需要對PHP、WordPress、CSS、JavaScript等代碼知識有非常深入的了解和學(xué)習(xí)。
當(dāng)前名稱：WordPress主題開發(fā)入門基礎(chǔ)教程
網(wǎng)頁鏈接：http://m.5511xx.com/article/ccddooi.html
