How to Create Your Own Wordpress Theme如何創建自己的WordPress的主題

Have you ever wanted to create your own custom wordpress theme? 你有沒有想創建自己的自定義WordPress的主題？ I’ll show you how to start learning to hack away at your own WP theme in this tutorial in just a matter of minutes… 我會告訴你如何開始學習破解了在您自己的可濕性粉劑主題的本教程中只是一個時間的問題分鐘...

This is the second installment in the這是第二次在分期付款 Managing Wordpress More Effectively Series WordPress的管理更有效地系列 - so you can get control of your blog and wring every last bit out of your content and visitors, saving you time and making you more money! -讓您能夠控制您的博客並擰任何一個角落都在你的內容和遊客，以節省您的時間，使你更多的錢！

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme!如果你是一個經常此博客的讀者，您可能會注意到JTPratt的博客誤區現在有一個新的主題！ I think that a blog grows with the blogger, and the biggest mistake you can make is not modifying your blog to display your progress.我認為隨著博客的Blogger ，以及最大的錯誤你可以不修改您的博客顯示您的進展。 I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional.我開始在2007年有非常好的主題（ Prosense ） ，因為它沒有什麼最想和期待專業。 But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like.但我和黑客攻擊和黑客入侵了一些更慢慢擺脫的東西我不喜歡。 Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it.最後-我不得不說，夠了，並建立自己的W ordPress的主題是公正的方式正是我想它。

Wordpress Theme Hacking WordPress的主題黑客

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you.如果你好奇，你知道一些HTML和CSS （即使僅是危險的）這個指南是為你。 This isn’ta definitive guide or anything, but it will get you started and I’m sure it will give you some good ideas to create your own “custom Wordpress theme”.這不是一個明確的指導或任何東西，但它可讓您一開始，我相信它會給你一些好點子，以創建自己的“自定義WordPress的主題” 。 This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”.這是“如何創建自己的WordPress的主題”補習，或“如何哈克WordPress的主題” 。 The first thing you need to do is get the首先，你需要做的就是在 Theme Test Drive 主題試駕 plugin.插件。 I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live.我用這個插件了兩個星期，所以我可以破解和測試我的新主題死刑之前，把它生活。 You see, it allows you to set a theme that only the admin will see when logged into the Wordpress.你看，它讓您可以設定一個主題，只有管理員時將看到登錄到WordPress的。 So as long as you’re logged in, you will see the new custom theme you’re building but all your visitors will see the regular one.所以，只要你登錄，您將看到新的自訂主題你建設，但所有的遊客將會看到一個經常。

Creating Your Own WP Theme from a Copy創建自己的可濕性粉劑主題的副本

Now login to your web site in FTP and download the theme you’re using now to your desktop.現在，登錄到您的網站， FTP和下載的主題您使用的是現在到您的桌面。 Give the folder a unique name like “custom-theme” or something.給文件夾一個獨特的名稱，比如“定制的主題是”什麼的。 I’m going to show you how to create your own theme by starting to modify a second copy of the one you’re currently using (without anyone but you knowing about it).我要告訴您如何創建自己的主題，開始修改的第二個副本之一您目前使用的（無任何人，但您知道它） 。 Now, using Notepad (or any text editor) open the “style.css” file.現在，使用記事本（或任何文字編輯器）打開“ style.css ”文件。 At the top of the file are some comment lines.在文件頂部有一些評論線。 When you go to “Presentation -> Themes” in your Wordpress dashboard, the titles and descriptions of the themes you have installed come from the “style.css” file of those themes.當你來到“簡報-> ”主題“在您的W ordPress的儀表板，標題和描述的主題您已經安裝來自” s tyle.css“文件的主題。 The style file you just opened should already have comments like this as the first few lines like this:風格檔案您剛剛打開應該已經這樣評論的前幾行這樣的：

 /* Theme Name: JTPratts Custom Theme Theme URI: http://www.jtpratt.com Description: No nonsense custom theme developed in house. Author: JTPratt's Blogging Mistakes Author URI: http://www.jtpratt.com 

Modify all those lines with your own details, delete the “screenshot.png” file from the folder, and then upload the entire folder back to your theme directory in FTP.修改所有這些線，你自己的詳細資料，刪除“ screenshot.png ”文件從文件夾，然後上傳整個文件夾回到您的主題目錄中的FTP 。 If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme.如果您有一個圖形編輯器，你可以打開而不是畫面文件，並修改它去你的主題。 I created a custom one so I could tell my backup from my live one like this:我創建了一個自定義之一，所以我可以告訴我的備份從我的生活一個這樣的：

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab.一旦你的文件夾上傳到您的主題目錄，返回您的儀表板和可濕性粉劑“演示-> ”主題“標籤。 Your new theme should now be an option.您的新主題，現在應該是一種選擇。 If you also created a “screenshot.png” (it must be named exactly that) and uploaded it in the folder too - the new picture of your theme will show up as well as in my example above.如果您還設立了一個“ screenshot.png ” （它必須被命名正是）和上傳文件夾中的太-新的圖片您的主題將出現，並以我上面的範例。

How to Test a Wordpress Theme as Admin Only如何測試WordPress的主題，只有管理員

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already.現在，啟用“主題試駕”插件您下載和安裝如果您尚未。 Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button.轉到“演示-> ”主題測試驅動器“ ，選擇新的主題從下拉，然後點擊”啟用“按鈕。

That’s it - now your ready to start theme hacking!這就是它-現在您準備開始主題的黑客！ Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this:轉到“演示-> ”主題編輯器“標籤，在下拉菜單中的”當前“的主題將列出這樣的：

That’s my current theme everyone sees.這是我目前的主題是每個人都看到。 Before I start editing the test theme only I will see as admin I need to switch to that one in the theme editor like this:在我開始編輯的測試主題只有我會看到管理員我需要切換到一個主題中編輯這樣的：

Now in the right hand list of files, find the one labeled “Main Index” and click on it.現在右手檔案清單中，找到一個標示為“主要指標” ，並點擊它。 10 or 20 lines in you should see something like this: 10或20線，您應該會看到這樣的事情：

 <div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> 

Right after the div entry tag add a bunch of random text, save the file, and in another tab or browser window load up your blog home page.右後進入標記專區新增一串隨機文本，保存文件，並在另一個標籤，或瀏覽器窗口中加載了您的博客主頁。 Does it contain the random text?它是否包含隨機文字？ If it does - great!如果沒有-太棒了！ If not, go back and follow the directions again to see what you did wrong.如果沒有，回去，然後按照指示再次看到你沒有錯。 Now I don’t know how much HTML and CSS code you know - so if you need a reference be sure to visit and bookmark現在我不知道有多少HTML和CSS代碼你知道-因此，如果您需要參考請務必訪問和書籤 W3Schools which is a free online resource for web coding.這是一個免費的在線資源網站編碼。 They have a reference page for each and every tag, and many free tutorials.他們有一個參考網頁，每個標記，而且很多免費的教程。

What is the “Wordpress Loop”?什麼是“ WordPress的循環” ？

Depending on how much HTML and CSS code you know (and are willing to mess with) now you remove the random text and start messing around with your theme.根據多少HTML和CSS代碼你知道（並願意與混亂）現在您刪除隨機文本，並開始與周圍搞亂您的主題。 Remember - only you can see the changes (while you’re logged in as admin), and you can even make major changes to the sidebar, header, and footer.請記住-只有你可以看到的變化（當你登錄的管理員） ，甚至可以作出重大修改補充工具欄，頁眉和頁腳。 The code I just showed you is what puts the posts on the main page.代碼我只是表明你就是把職位的主網頁。 Not the titles or meta information, just the post content itself.沒有標題或中繼資料，只是張貼內容本身。 You home page (Main Index) contains a “loop”.您的主頁（主要指標）載有“循環” 。 It’s called the “Wordpress loop” because by default your Main Index shows 10 posts.這是所謂的“ WordPress的循環” ，因為默認情況下，您的主要指數顯示， 10個職位。 The PHP code for the look basically says (in English) “once you find the first posts, do these things over and over until you reach the tenth post. PHP代碼的外觀基本上說（英文） “一旦你找到的第一個職位，做這些事情，多直到您到達後的第十屆。 So if you put something “in the loop” (like a picture or text) is would display on your Main Index page 10 times before or afer the content for each post beginning with the first until it reached the last.所以，如果你把東西“在循環” （如圖片或文字）是將顯示在您的主索引頁前的10倍或afer的內容每篇文章開頭的第一次，直至達到最後一次。

I’m telling you this because if you want a graphic at the top of your page before the posts (like mine) you have to place it “before the loop”.我告訴你這一點，因為如果你想在圖形上方的網頁之前，職位（如排雷）你必須將它“之前的循環” 。 If you want it after all the posts, like the 336×280 ad at the bottom of my Main Index page, it has to go “after the loop”.如果你想後，所有的職位，如336 × 280廣告底部的我國主要索引頁，它已去“之後的循環” 。 While EVERY theme is a bit different I this is what you look for:雖然每個主題是有點不同的I這是您尋找：

 <?php if (have_posts()) : ?> <?php endwhile; ?> 

The Wordpress loop starts with the have_posts line and ends with the endwhile line.在WordPress的循環始於have_posts線兩端的endwhile線。 Before and after those 2 lines would be “before and after the loop”.之前和之後的第2線將是“之前和之後的循環” 。 Somewhere in between those 2 lines would be placing something “in the loop”.在兩者之間的2行會放置一些“在循環” 。 I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place.我想解釋這個給你，然後再開始攻擊周圍和不知道為什麼你的變化出現在奇怪的地方。 For practice, try adding some kind of code or script for an ad (or just a linked image if you know the code) before or after the loop on your Main index page.對於實踐中，嘗試加入某種形式的代碼或腳本的廣告（或只是一個形象聯繫起來，如果你知道代碼）之前或之後的迴路在您的主索引頁。 If you’re new at this it’s good practice, and you should be figuring out why so many of us hack our theme by hand - it’s just impossible to have a plugin for every little modification you want to make.如果您在這個新的良好做法，你應該搞清楚為什麼有如此多的黑客，我們的主題用手工-它只是不可能有一個插件的每一個小的修改您要。

Your First Wordpress Theme Hack你的第一個WordPress的主題破解

Now I’m going to teach you your first real ‘hack’.現在我教你第一次真正的'黑客' 。 Let’s say you want to show some kind of text, image, or ad further down your Main Index page, but not before or after “the loop” and not after all 10 posts.比方說，您要顯示某種形式的文字，圖片或廣告進一步下降的主要索引頁，而不是之前或之後“循環” ，而不是在所有10個職位。 You have to insert a line of code to tell “the loop” to display it only once (and where)您已插入的代碼行告訴“循環” ，以顯示它只有一次（凡）

 <?php if ($count==2) { include('main-index-ad.php'); } ?> <?php $count = $count + 1; ?> <?php endwhile; ?> 

The first line is the one you copy and paste into your Main Index file, put it before the count and endwhile lines just like in my example.第一行是一個您複製並粘貼到您的主要指標文件，把它面前的數量和endwhile線就像我的榜樣。 That line of PHP code says to the loop (in English) “while you counting, after the second post print the contents of the main-index-ad.php file”.該行的PHP代碼表示的迴路（英文） “ ，而你計數後，第二次後打印的內容主要指數， ad.php檔案” 。 This means of course, you have to create a file called ‘main-index-ad.php’ (or whatever you want to call it) and add the script or code or whatever you want to put after the second post.這意味著，當然，你必須創建一個名為'主索引ad.php ' （或任何您想將它命名） ，並添加腳本或代碼或任何你想提出後的第二次職位。 Make the change in your Main Index file and “save”.更改您的主要指標文件和“保存” 。 Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack.上傳的主要指標， ad.php檔案到您的主題文件夾，然後重新載入您的主頁，以測試你的第一個主題破解。 Did it work?沒有工作？

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks.到目前為止，我們已經工作的只有“主要指標”或的index.php文件的主題破解。 Although every theme is a bit different, nearly every one has a Main Index, a Single Post, a Page file, 404 Template (file not found), Sidebar (sometimes 2), Comments, and Archives page.雖然每個主題是有點不同，幾乎每一個有一個主要指標，單後，頁面文件， 404模板（找不到檔案） ，側欄（有時2人） ，評論，和檔案網頁。 Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too.有些主題也有類別網頁，但如果他們不網頁的Archives.php將用於類的網頁太多。 I point this out because if you ad something to the homepage, you might also want it to appear on single posts, or pages, or category pages.我指出了這一點，因為如果你的廣告一些網頁，您也可能會希望它出現在單一的職位，或網頁，或類別的網頁。 Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory.像在前面的例子可以考慮讓幾個文件的廣告，文字或圖像，上傳到您的主題目錄。 You can use the same line of code in the previous example to include any file before or after the loop.您可以使用相同的代碼行在前面的例子，包括任何文件之前或之後的循環。 Just remove the count statement like this:只要刪除伯爵聲明這樣的：

 <?php include('name-of-my-file.php'); ?> 

It’s much smarter to add things to your pages with a file like this if it’s going to be in multiple places.這是很多聰明的東西添加到您的網頁上有這樣的文件，如果這將是在多個地方。 Otherwise, you have to manually modify multiple files.否則，您必須手動修改多個文件。 If you do it like this, in the future when you need to change that content, you just edit the one file.如果你是做這樣，在未來當你需要改變的內容，你只需修改一個文件。

Your Second Wordpress Theme Hack你的第二個WordPress的主題破解

For quite a while I had wanted to add the comment count under my post titles on my index page where they would be linked to actually post a comment.對於相當長的一段時間我曾希望將伯爵的評論我的帖子標題上我的索引頁，他們將聯繫實際張貼評論。 Oh - an I wanted a little comment graphic beside them too.啊-我想是有點意見的圖形符號太多。 Basically “inside the loop” you just add the following PHP code somewhere are your post title:基本上是“內循環”你剛才添加下面的PHP代碼某處你的帖子標題：

 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php $comments_img_link= '<img src="/wp-content/images/comments-icon.gif"  title="comments" alt="comments" />'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . '  Comments(%)');?> 

The first line is the code you need to find “in the loop” which prints out the post title heading.第一行代碼是你需要找到“在循環”的打印出帖子標題標題。 Your may look slightly different, just look for “the_title” in the line.你可能看起來稍有不同，只是尋找“ the_title ”在線。 Right after that paste the two lines in my example.權後，貼上兩條線在我的榜樣。 You’ll meed to modify the first line with the name of and correct path to your comment icon.您獎品修改第一行的名稱和正確的道路，以您的評論圖標。 You’ll need to create one or find a free suitable one on the web.您需要創建一個或找到一個合適的一個免費的網絡上。

Adding a plugin to do the Hacking for You新增插件做黑客為你

There’s still a few things that Wordpress “won’t do” what I prefer to have on my blog that are easily added with a plugin.還有一些東西， WordPress的“不會做”什麼是我喜歡上我的博客很容易添加一個插件。 For most of these things I use對於大多數的這些事情我使用 Lester Chan’s Wordpress Plugins萊斯特成龍的WordPress的插件 . 。 I use WP-PageNavi for the navigation at the bottom of my home page, and replaced the horrible “previous” and “next” default wordpress navigation links with it.我使用渦噴PageNavi的導航底部的我的主頁上，並取代了可怕的“以前”和“下一個”默認WordPress的導航鏈接它。 I use WP-PostRatings for the star voting on each post.我使用渦噴PostRatings的明星投票的每個職位。 WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar.可濕性粉劑，郵政瀏覽量顯示計數後每篇文章的，除了“最看待”在我的職位欄。 The WP-Print plugin is for the printer friendly page link for posts.在渦噴打印插件是打印機友好的頁面鏈接的職位。 With all these Lester Chan Wordpress plugins, once you install and activate them, all you have to do is copy and paste the line of PHP code on the pages and places you want the plugin to display something.所有這些萊斯特陳WordPress的插件，一旦安裝和激活它們，所有您需要做的就是複製和粘貼線PHP代碼的網頁和地方您想要的插件顯示的東西。 You get that code on the documentation “usage” page for each plugin on Lester’s site.你代碼的文件“使用”網頁上為每個插件對萊斯特的網站。 After doing the first two hacks, it should be pretty easy to add the code to your template pages for the plugin hacks to work.經過這樣的頭兩個竅門，應該很容易將代碼添加到您的模板頁的黑客插件工作。

In addition to the Lester Chan plugins, on my pages after the posts on my main page you’ll see some options for visitor’s like “subscribe to this feed”, “email this”, “digg this”, etc. These features actually come from Feedburner.除了萊斯特陳插件，在網頁上的職位後，我的主網頁你會看到一些遊客選擇的，如“訂閱此飼料” ， “電子郵件本” ， “ Digg的這一”等等，這些功能實際上來自Feedburner 。 I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites.我知道在很多網站上我看到的人增加了“社會”插件以顯示bazillion選擇所有的標籤網站。 I use Feedburner for my feed (like most bloggers do), and they have a “Feedburner Feedsmith” plugin that will add that “flare” after your posts - which I think have much more helpful options than any social plugin around.我用我的Feedburner飼料（最喜歡做博客） ，他們有一個“ Feedburner Feedsmith ”插件，將補充說， “照明”後，您的文章-我想有更多有益的選擇比任何社會插件周圍。 If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well.如果您下載並啟用該插件從Feedburner ，你必須增加提供PHP代碼到您的模板以及。

Hacking Your Theme Stylesheet黑客的主題樣式

Your stylesheet contains all properties of all the colors and sizes of items on your blog.您的樣式表包含了所有性質的所有的顏色和大小的物品在你的博客。 It has background and link colors, font sizes, bold, italics, you name it.它的背景和鏈接的顏色，字體大小，粗體，斜體，你將它命名。 In your dashboard theme editor click on “Stylesheet” to bring up this file.在您的儀表板主題編輯器點擊“樣式” ，使這個文件。 It’s the same one you added the theme properties to on your computer in a text editor at the very beginning of this article.這是同一個你說的主題屬性在您的計算機在文本編輯器在非常本文開頭。 YOUR stylesheet is more than likely going to be completely different than mine, and editing it won’t be as easy as the earlier copy and paste hacks.您的樣式更可能將完全不同於地雷，和編輯它不會一樣容易較早複製和粘貼技巧。 What you need to know is that every web page is a “document” that has “elements”.您需要知道的是，每一個網頁是一個“文件”有“要素” 。 The elements are setup in a “box model”, and items like div’s, paragraphs (p’s), spans, the body, headings (h’s), blockquote, and list tags (ul, ol, li or underordered list, ordered list, and list) are all “boxes”.其組成部分安裝在一個“框模型” ，並項目，如股利的，第（ P的） ，跨越，身體，標題（ H公司） ，引用，並列出標籤（ UL認證，醇，利或underordered名單，命令清單，清單）都是“盒子” 。 In CSS code everything “nests” and “properties” can be assigned to elements at any level.在CSS代碼一切“鳥巢”和“性能”可分配到的內容在任何水平。 Here’sa diagram example:以下圖為例：

That image is an example of how all the boxes would look if you drew them all out.這是一個形象的例子，說明所有的箱子看起來如果您提請所有這些了。 Here’s how those boxes look as (well formatted) HTML code:以下是如何將這些箱子看起來像（以及格式） HTML代碼：

 <body> <div> <p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </p> </div> </body> 

I wanted you to visualize this before you started stylesheet hacking so you would know about how nesting works.我想你想像這之前，你開始樣式黑客所以你會知道如何築巢工程。 If you change the (font) “color” to grey at the “body” level all the text on the page will be grey.如果你改變了（字體） “顏色” ，以灰色的“機構”一級所有網頁上的文字將是灰色的。 If you also change the font color to green at the “li” or list item level, all the text on the page will be grey except the list items, which will be green.如果您還改變字體顏色為綠色的“利”或清單項目一級，所有網頁上的文字將是灰色的，但清單項目，這將是綠色。 If you change the paragraph or “p” font color to red, then both the P and UL text will be red, the LI text will be green, but the rest of the body and div text above those levels will still be grey.如果你改變了段或“ P ”字體顏色為紅色，那麼P和UL認證文本將紅色的李文本將綠色，但其餘的機構和省以上這些文字的水平仍然是灰色的。 This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain.這就是所謂的“繼承” ，並啟動性能的最高級別和住宿的財產，直到改變降低產卵鏈。

The first thing you might want to hack is your link colors and properties.的第一件事，您可能要砍你的鏈接的顏色和性能。 There are sooooo many ways to change your links to make them stand out.有sooooo許多辦法來改變您的聯繫，使他們脫穎而出。 A hyperlink is an “a” or anchor tag.超連結是一個“ A ”或錨定標記。 There are 3 states of a link which are normal, visited, and hover.有3個國家的聯繫是正常的，訪問，並懸停。 Normal is what the color of the link is before you click it.正常是什麼顏色的鏈接，然後按一下。 Visited is the color of the link once you’ve visited it.訪問是彩色的聯繫，一旦您訪問過它。 And hover is the color of the link when your mouse goes over it.和懸停是彩色的聯繫，當您的鼠標不用權。 For all three of these states of a link you can change the color, text-decoration, background, and many other properties.對於所有這三個國家的聯繫，您可以改變顏色，文字修飾，背景，和許多其他屬性。 In my stylesheet I have entries to change link properties for the entire body of all my pages like this:在我的樣式我有項目，改變鏈接屬性為整個機構的所有我的網頁這樣的：

 body a { color: #0033CC; text-decoration: none; } body a:visited { color: #003399; } body a:hover { text-decoration: underline; color: #003399; background: #000000; } 

As you see, you can change the color for the 3 different states of links, you can change the text decoration (for any state), or the background color (for any state).正如你看到，你可以改變顏色的3個不同國家的聯繫，您可以變更文字裝飾（任何國家） ，或背景顏色（任何國家） 。 You can also leave any of these properties out.您也可以留下任何的這些屬性了。 For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed.全文裝修財產你可以使用任何這些價值觀：固體，強調， overline ，線路通過， 0票反對，星羅棋布，或破滅。 While my code example above controls the link color for an entire body of a page, you can also change them at any level, like maybe your sidebar:雖然我的代碼上面的範例控制鏈接顏色為整個機構的網頁，還可以改變它們在任何級別，也許你喜歡欄：

 #sidebar a:hover { text-decoration: underline; } 

Experiment by modifying the link colors in your stylesheet now.實驗，修改了鏈接的顏色在您的樣式了。 Then experiment further by changing font sizes and colors.然後進一步實驗通過改變字體大小和顏色。 To find cool color schemes to change colors of text, links, or backgrounds為了找到冷色計劃，以改變顏色的文字，鏈接或背景 Use this CSS color chart for reference 使用此顏色的CSS參考圖 . 。 It’s probably the best color chart I’ve seen in years, mainly because it is based on pantone colors and paint strip samples from a hardware store.這也許是最好的彩色圖我看過了，主要是因為它是基於潘通色彩和塗料樣品帶從硬件商店。

The last wordpress theme hack (in this article) I’ll show you is for headings.最後WordPress的主題破解（本文中）我會告訴您的是標題。 A heading is an “H” tag like <H1> <H2> <H3> <H4>, etc. Every post should have a (title) heading, and every widget or section in your sidebar has a heading.標題是一個“ H ”類似這樣的標記<H1> <H2> <H3> <H4>等各個崗位上應該有一個（標題）標題，每一個部件或一節中有你的欄標題。 As shown earlier in my diagram - a heading is a “box” and that box has properties, like background, padding, margin, (text) color, (link) color, border, border-style, and more.正如我前面圖-標題是“盒子” ，並框屬性，如背景，填充，利潤， （文字）顏色， （鏈接）的顏色，邊界，邊界的風格，等等。 By default in Wordpress the post headers are just linked text.默認情況下，在後WordPress的標題只是連結文字。 While that’s ok, as you can see on my Main page and my post pages I prefer a black border, a background color, and some padding.雖然這沒關係，因為你可以看到我的主網頁和我的文章網頁上我喜歡的黑色邊界，背景顏色，有些填充。 In my sidebar I gave the sections headings a background image, a bottom border, and some margines.我在我給補注的章節標題的背景圖片，自下而上邊界，一些margines 。 The list elements also have a bottom border.該清單的內容也有底部邊界。

 #sidebar ul { margin-bottom:5px; padding-left:5px; } #sidebar .sidebar_left ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } #sidebar h2 { background: #B0E2FF  url('/wp-content/images/header-bkg.gif') no-repeat; padding-left: 7px; padding-bottom: 0px; } #sidebar .sidebar_right ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } 

In the code example above I showed you nearly all my sidebar stylesheet properties so you can get an idea of the many different ways you can customize a header and list item.在上述例子代碼我展示你我的幾乎所有欄樣式屬性，讓您能夠了解許多不同的方式，您可以自定義的標題和清單項目。 You can see how I gave the sidebar H2 header a backround image instead of just a color.你可以看到我怎麼了氫氣的標題欄一背景圖片，而不只是一種顏色。 This the code I used to format the properties of the post headings:這種代碼我用的格式的內容後標題：

 .post h2 { background: #CCCCCC; border: 1px solid; border-color: #000000; padding-left: 10px; padding-right: 10px } 

Instead of just having linked text I gave my post headings a background color of grey, a solid 1 pixel black border, and some padding on the left and right sides.不是僅僅有聯繫的文字我給我的職務標題背景顏色的灰色，堅實的黑色1像素邊界，有些填充的左，右兩岸。 Now I think it’s much easier to see where one post ends an the next begins on my pages.現在，我認為這是很容易看到一個個兩端的未來開始在我的網頁。

Use What You’ve Learned to Hack Your Theme More使用你已經學會破解您的主題更

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it.我已經給你一個辦法破解了你的WordPress的主題是如何在不改變您的訪客看到它。 I’ve told you about the Wordpress loop, and how to add things before, after, and inside it.我告訴你的WordPress的循環，以及如何加入前的事情後，和裡面。 We hacked and added some PHP code, and then hacked our theme stylesheet to change properties to affect the layout and design of the page.我們黑客和增加了一些PHP代碼，然後侵入我們的主題樣式的變化影響到物業的佈局和設計網頁。 I can’t teach you everything you need to know to create your own entire custom theme in just one post - but I can get you started!我不能教給你一切你需要知道創建自己的整個習慣的主題只有一個職位-但我可以讓你開始了！ Now you know enough about Wordpress themes to be dangerous and customize your own.現在，你不夠了解WordPress的主題是危險的和定制你自己的。 Visit and bookmark訪問和書籤 W3Schools.com for your HTML and CSS reference needs.為您的HTML和CSS的參考需要。 Research and read more articles explaining how to hack and customize your Wordpress theme further like the研究和閱讀更多的文章，說明如何破解和自定義您的WordPress的主題是進一步像 tutorials at WPDesigner.com教程在WPDesigner.com . 。

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add!請評論此文章，如果幫助你，你有問題，或一個偉大worpress主題定制黑客或添加！ I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page!我希望你發現此信息寶貴的-如果有的話，請隨時書籤， d igg以及失敗此網頁！

Tags:標籤： tutorial教程 , ， wordpress-hack WordPress的，黑客