五月 21st, 2009
动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 1 – 布局篇
74 views, 原创、翻译, 网络、博客, by Sulow.动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 1 – 布局篇
原文出处：cypherhackz.net
翻译：by Sulow @ ONEDUST – 浮塵草堂
在我发布了第一个Wordpress主题后，我又为自己的网站建了一个新的主题，CypherFS Royale。结果一个想法突然浮现在我脑中。我为什么不发表一篇关于如何打造Wordpress主题(Theme)的文章呢？我肯定很多人都想为他们自己的网站做一个专属的主题。所以我们开始吧。
在开始之前，我想告诉你们，这篇教程只包含了：如何让你的Wordpress的布局(layout)、标签(tag)、函数(functions)可以完美的运行。只是一些最基础的部份，在此文中，我不会教你html, css和php语言，你必需自己去学这些东西，在网上很多的教程，我相信你可以很轻易找到。
Ok，我把教程分成了七个部份，以下是每个章节：
Part 1 – 布局 (The Layout)
Part 2 – 标头 (Heaer)
Part 3 – 索引 (Index)
Part 4 – 评论 (Comment)
Part 5 – 侧边栏 (Sidebar)
Part 6 – 底部 (Footer)
Part 7 – 结束语 (Finish!)
我们开始 Part 1 – 布局 (The Layout) 吧！
使用Wordpress最棒的一件事就是，我们可以把模板(theme)分成好几块，如：header.php, index.php, 等等。但是在那之前，我们首先需要设计我们的布局。所以，我们首先需要一个空白的html文件。附带一提，我们即将要制作的模板(theme)是一个两栏式(two columns?)的页面。
现在，打开你最喜欢的文字编辑器，如：写字板，我用的是EditPlus，这个软件很容易使用，而且每个标签都有对应的颜色。(Sulow注，Sulow用的是vi啊，嘎嘎～）在你打开了文字编辑器后，我们就开始搭建布局(Layout)了。
在你的index.html文件中键入以下文字：
<code>
1.
2. <html>
3. <head>
4. <title>My Wordpress Theme</title>
5. </head>
6. <body>
7.
8. </body>
9. </html>
10.
</code>
这真的很基本。接着我们要开始在index.php里建立不同的模块(sections)了，我们将使用<div>标签。所以准备好你的CSS来装扮你的模板(theme)吧。我们把<div>标签加进去。
1.
2. <html>
3. <head>
4. <title>My Wordpress Theme</title>
5. </head>
6. <body>
7. <div id=”wrapper”>
8.
9. <div id=”header”>
10. header
11. </div> <!– close header (关闭header) –>
12.
13. <div id=”content”>
14. <div id=”main”>
15. main
16. </div> <!– close main (关闭main)–>
17. <div id=”sidebar”>
18. sidebar
19. </div> <!– close sidebar (关闭sidebar)–>
20. </div> <!– close content (关闭content)–>
21.
22. <div id=”footer”>
23. footer
24. </div> <!– close footer (关闭footer)–>
25.
26. </div> <!– close wrapper (关闭wrapper) –>
27. </body>
28. </html>
29.
如你在上面的代码所看到，我用备注标签来表明每个div的结束，让我清楚的可以追踪每个不同的div标签。(Sulow注：<!– 在这两个标签中的字不会被执行或编译，所以叫做备注标签 –>)
Ok，我们现在有了想要的模块，下一步我们要做的是为每个模块(section)创建自己的PHP文件。这在未来会为我们编辑主题(theme)节省大量的时间。
我们需要建立的PHP文件如下：
header.php – 包含网页标头（头部）
index.php – 主要文件
sidebar.php – 侧边栏部份
footer.php – 网页底部
header.php:
1.
2. <html>
3. <head>
4. <title>My Wordpress Theme</title>
5. </head>
6. <body>
7. <div id=”wrapper”>
8.
9. <div id=”header”>
10. header
11. </div> <!– close header –>
12.
13. <div id=”content”>
14.
index.php
1.
2. <div id=”main”>
3. main
4. </div> <!– close main –>
5.
sidebar.php
1.
2. <div id=”sidebar”>
3. sidebar
4. </div> <!– close sidebar –>
5.
footer.php
1.
2. </div> <!– close content –>
3.
4. <div id=”footer”>
5. footer
6. </div> <!– close footer –>
7.
8. </div> <!– close wrapper –>
9. </body>
10. </html>
11.
原创文章如转载，请注明：转载自ONEDUST-浮塵草堂 [ http://www.onedust.com/ ]
本文联结：http://www.onedust.com/archives/281
延伸阅读：
- 动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 2 – 标头篇
- 动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 6 – 底部篇
- 动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 3 – 索引篇
- 动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 5 – 侧边栏篇
- 动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 7 – 结语篇
- 动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 4 – 评论篇
- 动手打造你自己的Wordpress主题, 模板 (Template、Themes)系列
- Wordpress Popular Posts 文章阅读次数统计 插件 及 中文化
- 在Blogger中添加阅读全文选项
抱歉，最近比较忙一点，过段时间再更新
1千多次阅读竟然没有人愿意发表一下留言评论…唉…
博主辛苦了，本人最近刚好要找建WP主题的相关教程呢。3Q。