你想建立自己的部落格，但你不想用現有的設計來顯得俗氣。建立你自己的主題可能會讓人望而生畏，但是有了一些幫助，你可以很快為你的部落格設計出一個獨特的設計。這篇文章將幫助你使用WordPress，最流行的（和免費的）部落格軟體把它放在一起。

當你從頭開始建立一個WordPress主題時，可能需要花費大量的工作，因為在你建立網站的外觀和感覺之前，你必須把相當多的PHP程式碼（WordPress使用的程式語言）放在一起。我們將為您提供那些為您預先**的檔案，再加上您將需要的CSS框架結構，以使您的WordPress站點看起來像您想要的那樣，從而為您省去麻煩。PHP程式碼基於Ian Stewart的工作，但是已經為WordPress 3.3.1進行了更新。如果您已經準備好開始，以下是您需要的：

• WordPress，已安裝並準備就緒。在主題開發期間，我們強烈建議執行一個安裝了PHP和WordPress的本地web伺服器，這樣您就不會在web伺服器上測試您所做的任何更改。這也使得開發速度大大加快。完成後，只需在web伺服器上安裝完成的主題，就可以開始了。如果您想在本地開發，最簡單的入門方法是使用自包含的web伺服器WAMP（Windows）或MAMP（osx）。它們包含apacheweb伺服器和PHP和MySQL，因此您可以快速輕鬆地下載和安裝WordPress。一旦你準備好了你的主題，在一個合適的伺服器上安裝WordPress通常是很容易的。例如，我們最喜歡的初學者主機Dreamhost的特點是一次點選WordPress安裝。
• 我們的空白主題檔案。下載並解壓縮。
• HTML和CSS的基本知識（您可以在這裡獲得）。
• 你為你的WordPress網站做的設計（你可以在這裡學習如何在Photoshop中做）。
• 可選：如果你不想使用內建在WordPress中的主題編輯器，你應該得到一個程式設計友好的文字編輯器(下麵是我們為Windows和OS X挑選的。）
• 可選：由於您的WordPress站點可能是空的，並且在沒有內容的情況下很難建立主題，因此您可以下載示例內容（並匯入）以用於開發目的。在您不打算使用內容的本地開發環境中，這可能是一個很大的幫助。您可能不想將其新增到活動站點，因為1）它將可見，2）您希望在完成開發後將其刪除。

一旦你擁有了一切，你就可以開始**你的主題了！

瞭解並安裝你的主題檔案

當你解壓縮下載的lh\u wordpress\u blank\u theme.zip檔案時，你會有一個資料夾，裡面裝滿了一堆檔案和兩個資料夾。下麵是他們是什麼和他們做什麼的快速列表：

• 404.php—負責顯示404NotFound錯誤的頁面，用於當使用者試圖轉到WordPress站點上不存在的頁面時。
• php-顯示歸檔文章列表，與主頁非常相似，但用於歸檔中的文章。
• php-顯示特定作者的所有文章。基本上和檔案頁是一樣的，但是隻有一個作者。
• php-顯示給定類別中的所有帖子。
• comments.php-當在單個post頁面上接受評論時，此檔案將用於顯示評論表單。
• php-將**頁面底部的頁尾。您需要編輯此檔案並新增要在頁尾中顯示的內容。
• functi***.php-主題的自定義函式。除非你瞭解PHP並且知道你在做什麼，否則你應該把它放在一邊。
• header.php-在WordPress站點的每個頁面頂部顯示標題。這是生成選單的程式碼。
• img-一個資料夾的自定義影象，你正在使用你的主題。如果不使用自定義影象，可以將其保留為空或刪除。
• index.php-顯示主要部落格滾動頁。與許多其他頁面（如author.php、page.php、search.php等）一樣，中包含header.php、sidebar.php和footer.php檔案以顯示整個站點。
• page.php-顯示任何單個頁面。這不包括文章，而是您在WordPress管理中建立的單個靜態頁面。
• php-顯示使用者透過WordPress站點上的搜尋小部件請求的搜尋結果。如果找不到結果，它將通知使用者它無法顯示任何結果。
• php-此檔案包含側邊欄小部件的主要和次要區域。您可以透過WordPress管理員向這些區域新增小部件，不需要編輯此檔案。
• single.php-顯示帶有或不帶註釋的單個帖子。
• css-這是我們將在本指南中編輯的檔案，因此它以紅色突出顯示。這包含了CSS的框架結構，你需要讓你的WordPress網站看起來像你想要的樣子。你的大部分工作都在這個檔案裡。
• 樣式-包含您可能使用或匯入的任何其他CSS檔案的資料夾。如果你不使用這個，你可以刪除它。
• tags.php-顯示給定標記的文章。

這個列表可能看起來有點嚇人，但很可能你不需要編輯這些檔案中的大部分。我們只是想讓你知道每件事都做些什麼。至少，您只需要編輯styles.css，或者footer.php（如果您想向頁尾新增內容）。既然你知道你的目的，讓我們在WordPress中安裝這個空白主題。為此，只需執行以下步驟：

1. 登入你的WordPress管理區。你可能知道它在哪裡，但如果不知道，預設情況下，在http://yourdomain.com/wp-admin （或者，如果您執行的是WAMP/MAMP，則預設情況下，在http://localhost：8888/wp管理）。
2. 轉到左側選單上的外觀選項卡，然後選擇外觀->主題。
3. 從選單頂部（只有兩個選項卡），選擇安裝主題。
4. 單擊上載連結。
5. 單擊“選擇檔案…”。。。按鈕選擇下載的lh\u wordpress\u blank\u theme.zip檔案，然後單擊“立即安裝”。
6. 安裝完主題後，單擊back to Appearance->Themes並找到它。它應該被稱為空白，沒有預覽影象。當您看到它時，單擊啟用連結使其成為活動主題。

或者，如果您喜歡透過FTP安裝或只是將檔案移動到本地計算機上的正確目錄，請解壓縮lh\u wordpress\u blank\u theme.zip並將其重新命名為“blank”（或任何您想要的）。現在在WordPress安裝目錄中找到wp content資料夾並開啟它。你會在裡面看到一個名為“themes”的目錄。將blank複製到其中，然後按照上面步驟中的最後一步在您的WordPress站點上啟用它。

設計你的wordpress主題

隨著空白主題的安裝，你準備開始讓你的WordPress主題看起來很棒。然而，目前它看起來像是一個醜陋的混亂的藍色，綠色，黑色。如果您沒有新增選單、小部件或任何內容，它甚至可能看起來不太好。如果仍然需要新增內容，請下載示例內容或建立一些自己的內容。即使您安裝了示例內容，您仍然需要進入WordPress管理，單擊外觀部分，編輯選單和小部件子部分。只需進入Widgets子部分，將一些widget拖入主側邊欄和輔助側邊欄空間，然後在Menus子部分中建立一個選單。一旦你準備好了所有的（可能是假的）內容，你就會在你的WordPress網站上看到它們。它可能看起來像右邊的影象。

現在一切就緒，我們需要開始編輯styles.css檔案。您可以在您喜愛的程式設計友好文字編輯器中開啟它，也可以轉到WordPress管理部分的外觀選項卡，選擇編輯器，然後從右側選單中選擇styles.css（如果預設情況下尚未選中）。不管是哪種方式，現在都應該看到將要使用的框架CSS結構。它不包括您可能想要編輯的每一個樣式，而是您需要將大部分樣式組合在一起的主要樣式(稍後我們將討論如何發現其他元素以及如何對它們進行樣式化，因此，如果您想進一步瞭解我們提供的模板以外的內容，那麼您可以輕鬆地完成這些工作。）因為每個人的設計都會有一點不同，我們將討論大多數樣式的作用，而不是提供您可以使用的特定程式碼。你需要把你自己的設計和CSS知識帶到桌子上，所以如果你感覺有點不穩定，你可以透過我們的CSS夜校課程來提高你的技能。所以，不用多說，這裡有一個styles.css檔案的概要。我們涵蓋的每一個專案都將展示它現在的樣子，以及一旦你添加了一些樣式，它會變成什麼樣子。

全域性：常規樣式預設值

常規樣式預設值已經為您準備好了，即使您不太瞭解CSS，也應該非常熟悉。在大多數情況下，這些樣式只是設定文件的邊距（當前為0畫素）、頁面上使用的預設字型、背景和文字的顏色、連結在各種狀態下的外觀等等。您可以保留此資訊，也可以根據需要進行常規更改。在大多數情況下，WordPress站點的外觀不會受到這些樣式的太大影響，如果有的話，您所做的更改主要與字型和顏色有關。

頁面佈局

styles.css檔案的頁面佈區域性分只包含兩個程式碼塊：一個用於div容器，另一個用於div內容。在這兩種情況下，我們的目標都是DIV標簽。一個叫做容器的東西包含了頁面上幾乎所有的東西，而不是頁首或頁尾。這意味著您已經將文章、靜態頁面或部落格捲、評論和側邊欄小部件全部打包到這個容器中。預設情況下，我們給它一個4px的邊距來**所有這些內容，就在標題的一小部分。你可以調整它，但你喜歡，並新增任**的風格，你想在這裡。另一方面，content DIV只包括post、靜態頁面或blog roll（以及評論，如果它們可見的話）。您在此處新增的任何樣式都只會影響該內容。你首先要做的一件事就是把這個DIV放在頁面的某個地方。傳統上，使用以下CSS程式碼將其左對齊：

很可能你還想定義它的寬度，任何邊距或填充，以及任何你想在你的站點的特定區域有所不同的東西。以下是我的網站的content DIV樣式：

如您所見，它的寬度為640px。它也會向左側浮動，就像我們前面提到的。另外，我在左側添加了51畫素的邊距，在右側添加了18畫素的填充。我如何知道哪些數字對應於哪些邊？在CSS邊距和填充程式碼中，它是這樣的：上、右、下、左。這很容易記住，因為縮寫起來，它看起來像TRBL。聽上去像是麻煩或是可怕的。不管怎樣，這都是一個快速簡單的記憶方法。

收割臺

頁首是一個有趣的部分，你的頁面樣式，因為你可以決定如何選單看起來。如果您決定在主題中新增一些新的東西，那麼儘管在header.php檔案中可能會有額外的元素，但是選單仍然是主要的吸引點。選單項是以列表樣式提供的，如果不設定樣式，它看起來很像：

• 第一頁
• 第二頁
• 第三頁
• 第四頁
• 第五頁

這些點不是綠色的，但你基本上會得到一個列表。你不想這樣，大概你想讓選單沿著頁面頂部執行。我們為您處理了這個問題，並對選單進行了樣式化，使其顯示為一條直線的選項，而不是無序的列表。有兩個CSS可以實現這一點。第一個屬於.menu類的ul（無序列表）元素：

預設情況下，此程式碼會刪除無序列表中的點和任何邊距調整。第二個相關程式碼塊如下所示：

這段程式碼告訴列表以內聯方式顯示，這意味著它將以一行而不是傳統列表的形式顯示。此外，每個列表項（li）都被告知向左浮動（這將給我們更多的自由來移動每個項），並且在右側有8px的填充空間，在左側有4px的填充空間（這樣文字就不會這麼擠在一起了）。所有這些都足以為您提供一個基本的選單，但是我們還希望設定a元素（a href中的a，link標記）的樣式，以使選單中的所有連結看起來像我們想要的那樣。為此，我們需要以下CSS：

所有這些程式碼都將字型大小（30px）、字型顏色設定為綠色（具體為#3eaf00），並刪除預設情況下出現在連結下的下劃線（文字裝飾：無）。懸停狀態只指定使用者滾動任何選單連結時顯示的稍微深綠色（#5d8a05）。這是非常簡單的，基本的CSS，但它允許您使您的選單看起來不同於您的頁面上的其他文字，而不訴諸影象。如果您想更改更多的文字，可以考慮使用不同的字型，或者將所有內容轉換為大寫或小寫文字。如果你需要一些好的網頁字型選項，你可以在谷歌網頁字型目錄中找到數百個。

一旦你做了這些樣式的選擇，你就差不多完成了選單和標題的樣式設計。當然，你也可以找到其他的風格，但我們將在文章的最後討論如何定位這些風格。

內容：文章和頁面

還記得我們之前定義的div#content樣式嗎？這篇文章和下麵兩個內容部分中的幾乎所有內容都與該分割槽中存在的樣式有關

.entry title這是與不同頁首相關的樣式。在styles.css檔案中，您會發現它通常附加到h1s、h2s和h3s。文章標題採用.entry title樣式，而不管它們是什麼h#標記，因此您可以透過首先指定h#標記，然後向其新增.entry title來分別定義每個標題。您可以在styles.css檔案中的幾個預定義程式碼塊中看到這一點，例如h1.entry-title和h2.entry-title。靜態頁面標題的工作方式相同，但是它們的樣式是.page title，並且它們通常只使用h1標記和該樣式。這意味著您不需要為h1.page-title以外的頁面標題定義任何標題樣式。設定這些標題的樣式就像設定任何其他文字的樣式一樣，但是您希望它們很大。如果它們像其他文字一樣小，它們就不會像它們應該的那樣突出。

.alignright和.alignleft這兩種樣式只是將影象與條目的左側和右側對齊（您可能可以猜出哪個是哪個）。您還會註意到，在styles.css檔案中，填充應用於影象的三個面，而不是一個面。為什麼？沒有填充的邊就是不在文字旁邊的邊。這是右對齊影象的右側和左對齊影象的左側。這樣做是為了使影象不會在環繞它的文字塊中尷尬地縮排。當你建立你的WordPress文章和頁面並向其中新增影象時，你可以在編輯器中選擇影象的對齊方式。這些樣式將自動應用於帖子中的任何對齊影象。除非您想增加/減少填充，或者新增其他樣式，否則您可以將這兩個類放在一邊。

.條目內容條目內容樣式應用於您在WordPress中建立的部落格文章和靜態頁面的內容。這個類幾乎將其樣式應用於任何文字、影象或最終出現在您建立的內容正文中的任何內容。在大多數情況下，你在這裡不必做太多。您可以設定所需的文字樣式，確定標題（h1、h2、h3等）的外觀、樣式列表，以及基本上您希望在內容部分中具有特定樣式的任何其他元素。

.entry實用程式entry實用程式是一個類，用於在每個提供上下文的文章末尾的一個小部分。它將提供諸如文章類別和標簽等資訊，以及RSS提要。如果你不僅僅是一個讀者，而是你的WordPress站點上的一個作家，你也會在這個部分看到一個“編輯”連結。將樣式新增到.entry實用程式將決定此節的外觀。

.entry meta很容易混淆entry meta和entry utility，但它是不同的。它包含作者姓名、日期和其他後設資料。如果您想更改它的外觀，例如使文字變小，因為它不是重要的資訊，那麼您需要編輯這個類。

.navigation是一個用於設定主題底部導航連結樣式的類。導航連結是指向較舊和較新帖子的連結。

內容：評論

雖然評論部分看起來很簡單，但實際上它是部落格中最複雜的部分之一。評論表單本身非常簡單，但是當人們回覆評論，然後再回覆那些回覆時，你會得到很多巢狀的評論。還有大量的後設資料，以及一個頭像，顯示在使用者的評論旁邊。這意味著你有很多元素可以設計。

註釋主要有三種：h3、ol、li和img。當然，h3指的是註釋頭。因為註釋是在有序列表中釋出的，所以ol（有序列表）和li（列表項）元素是必需的。在大多數情況下，你會想借用一些樣式從你的標題選單，因為你不會真的想要數字旁邊的評論。您可能還需要更改列表中每個註釋的背景色或新增其他樣式。您可以透過設定.comments類的ol和li元素的樣式來實現這一點。最後，img元素的樣式化很重要，因為註釋將包含使用者的化身。這個頭像可能是空白的或普通的，但它仍然會出現在每個評論。在comments類（.comments img）中設定img標簽的樣式將使您能夠控制這些化身的外觀以及它們與註釋文字配對時的行為。

.comment與上一個類的名稱非常相似，.comment是應用於特定註釋的樣式。

.children是用於針對評論的回覆的類。這些答覆被視為評論的子項。對答覆的答覆也被視為兒童。

回覆div是持有評論回覆表單的div。如果有人想留下評論，他們需要使用此表單。你需要設計這個DIV的樣式，以便使窗體看起來像你想要的那樣。在大多數情況下，您只需更改文字，但也可以為表單元素和按鈕設定樣式，以獲得特別獨特的外觀。

內容：側欄

設計側邊欄的樣式其實很簡單，但是如果你想變得非常具體的話，它可能會變得更複雜。WordPress提供了兩個小部件區域：div#primary和div#primary。您可以分別以這些div為目標，也可以使用.widget區域類為它們新增樣式。此外，您新增到小部件區域的每個小部件都被新增為驚喜-列表項。xoxo類應用於這個列表，可以用來按照您想要的方式分離和設定每個小部件的樣式。但是，如果您想變得非常具體，就需要直接針對每個小部件。我們將在下一節討論如何做到這一點。

其他樣式

既然我們已經討論了將這個空白主題轉化為您自己的主題所需的所有基本樣式，那麼讓我們來討論一下如何將其進一步擴充套件。WordPress主題包含了大量的元素，所以毫無疑問，你會想要更多的樣式。為了在開發過程中容易地發現它們是什麼，您所需要的只是正確的工具。

如果你使用的是Chrome，那麼這個開發工具就是內建的。只需在開發主題時預覽它，並開啟開發人員工具。您可以透過進入“檢視”選單並選擇“開發人員”->“開發人員工具”來完成。在Firefox（和許多其他瀏覽器）中，只需下載並安裝Firebug，然後單擊Firebug擴充套件即可啟用它。不管你用哪種工具，它都會把螢幕分成上下兩部分。上半部分包含頁面，下半部分包含頁面程式碼。如果將滑鼠移到頁面上的任何元素上，您將看到它在程式碼中高亮顯示，以便進一步檢查。這將很快告訴您該元素的名稱，並顯示已應用於該元素的任何樣式。然後可以使用這些知識為該元素（或應用於該元素的類）新增新樣式。繼續這樣做，直到找到要新增到styles.css檔案中的所有樣式。當你完成，你就有一個完整的主題！

如果你以前做過一個WordPress主題，並且有其他的技巧讓它更簡單，請在評論中分享。另外，如果你使用這個過程來**一個WordPress主題，一定要在評論中貼一個截圖。主題快樂！