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