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的，黑客