WP Theme 教程 #3：开始 Index.php
June 4th, 2007 at 09:57pm 雪山飞猪 浏览: 4,985
开始 Index.php 是我创建 WordPress 主题系列教程的第三篇。如果你没有看过该教程的一和二，我建议你先看它们。否则你会对我这篇讲什么迷惑。
现在是开始动手创建你的 WordPress 主题了的时候。在这篇中，你将要着手写些 WordPress 代码。在这里你真正需要把 WordPress blog 安装到你的电脑上，不是安装到服务器上，因为本地更方便测试。
第1步：打开 Xampp 控制面板。
转到你的 xampp 文件夹。通常是：C:\xampp。
双击 xampp-control.exe 将会弹出一个新的窗口。单击 Apache 和 MySQL 的启动按钮。如下图所示：
启动之后你看最小化窗口了。
第2步：创建你的主题文件夹。
转到你的 WordPress 主题文件夹，应该在xampp/htdocs/wordpress/wp-content/themes。创建一个新的文件夹，命名为 tutorial。
第3步：创建 index.php 和 style.css 文件。
打开记事本或者你选择的文本编辑器，记事本是在开始 > 程序 > 附件 > 记事本。
把 index.txt 这个文件的所有内容拷贝到你的记事本。
保存为 index.php 到 tutorial 文件夹。
打开另外一个记事本，直接保存为 style.css 到相同的文件夹下.
现在有两个文件了: index.php and style.css.
index.php 解释：
点击上面的图片查看大图。我会向你解释每个红色圆圈区域是什么意思。
Doctype - 指明哪种类型的代码你用来编码你的主题。Doctype 此时还不必去思考它的确切的意思。
<html> 是网页开始的地方。
<head> 是你的网页头部开始的地方。每个网页都有一个头部和主体。</head> 是头部结束的地方。
<?php bloginfo(’stylesheet_url’); ?> 是一个 PHP 函数，它能取得 style.css 文件所在的路径，这样主题就能链接到它并能样式化页面上所有元素。任何时候，PHP 代码都是在 <?php 和 ?> 之间的。PHP 代码和其他的代码不一样的，在 PHP 中，<?php 时开始 PHP 代码而 ?> 是结束 PHP 代码。
所以：
- <?php - 开始 PHP 代码
- bloginfo(’stylesheet_url’) - 调用 style.css 文件所在的路径
- ; - 停止调用函数。分号是用来结束一个 PHP 语句。
- ?> - 结束 PHP 代码
继续……
<body> - 这是网页主体开始的地方。你能在网页上看到和读到的东西就是主体部分。你正在阅读的这个教程说明你在正在看当前这个网页的主题部分。</body> 是网页主体结束的地方。
</html> 是网页结束的地方，没有东西在它的后面了。
第4步：把 style.txt 中所有的东西拷贝到你的 style.css 文件中。保存和关闭它。
第5步：安装你的主题。
打开浏览器。在地址栏输入输入http://localhost/wordpress/wp-login.php。登录到你的 WordPress 管理界面。（这里能够看到 WordPress 登录页面是因为你在第1步的时候启动了 Xampp。否者的话，在这里你的浏览器会报找不到的错误。）
在管理界面下到 Presentation 菜单并点击名字为 Tutorial 的主题去激活它。
注意，你的主题文件没有屏幕缩略图，所以是空白的。一旦激活了，WordPress 就会告诉你激活信息。
现在打开一个新的浏览器或者标签页（如果你的浏览器支持标签页浏览）并在地址栏输入 http://localhost/wordpress。你应该得到一个空白页面，恩，完全空白的页面。如果不是，那你就是在错误的页面上了。
你的主题已经创建好了，这就是这个课程，下一步我们将讨论头部模板。
不要忘记关闭 Xampp。双击它在任务栏中小图标，点击 Apache 和 MySQL 的停止按钮，然后点击推出。
有问题吗？给我留言吧。
请查看教程目录：WordPress 主题教程系列
翻译自：WP Theme Lesson #3: Starting Index.php
创建 WordPress 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。
作者：雪山飞猪
原文链接：WP Theme 教程 #3：开始 Index.php
我爱水煮鱼版权所有，转载时必须以链接形式注明作者和原始出处及本声明。
1. 紫天 | June 5th, 2007 at 1:38 pm
汗，一时不理解，把Xampp当成了编写工具...远离是集成环境吖...
嗯...都可以看明白...继续看
[回复该留言]
2. 雪山飞猪 | June 5th, 2007 at 3:22 pm
XAMPP 是一个易于安装且包含 MySQL、PHP 和 Perl 的 Apache 发行版。XAMPP 的确非常容易安装和使用：只需下载，解压缩，启动即可。
具体你可以参考 http://www.apachefriends.org/zh_cn/xampp.html
[回复该留言]
3. keke | June 14th, 2007 at 7:30 pm
正在使用当中，谢谢！
[回复该留言]
4. lisa | June 17th, 2007 at 6:24 pm
获益非浅呐！！！！激动... 第一次用wordpress，要学的还很多。咳
[回复该留言]
5. kendy | July 10th, 2007 at 2:27 pm
记事本保存编码应该为UTF-8 吧,还是没有关系呢
[回复该留言]
6. 雪山飞猪 | July 10th, 2007 at 2:37 pm
最好保存为UTF-8，如果你的主题文件里面没有中文，可以保存为Anti
[回复该留言]
7. lyons | August 17th, 2007 at 1:45 pm
为什么在进入http://localhost/wordpress/wp-login.php时，网页显示“Your PHP installation appears to be missing the MySQL which is required for WordPress.”
[回复该留言]
8. 雪山飞猪 | August 17th, 2007 at 2:07 pm
to Lyons，请看如何安装 WordPress 那篇文章
[回复该留言]
9. 个 | September 25th, 2007 at 9:27 am
index.txt这个文件打不开啊??
[回复该留言]
10. lex | October 5th, 2007 at 10:30 am
我下载了你的教程，.PDF格式的那个。但是里面用到的好多文件没有，能不能把它们整合到附件里面，比如这篇文章中的index.txt和style.txt以及一些图片。
谢谢你的教程，它真的很有用。
[回复该留言]
11. 雪山飞猪 | October 5th, 2007 at 3:47 pm
@ lex，如果你愿意帮忙整理，我会很感谢！
[回复该留言]
12. otouch | October 7th, 2007 at 12:21 pm
style.txt打不开。。。
[回复该留言]
13. Persehone | November 26th, 2007 at 2:15 pm
index.txt打不开啊，能不能重新传一下啊？
[回复该留言]
14. Persephone | November 27th, 2007 at 8:39 am
老大，有空麻烦一下重新传一下index.txt文件嘞，真的打不开啊！拜托了！
[回复该留言]
15. 雪山飞猪 | November 27th, 2007 at 8:56 am
@Persephone 使用代理，因为我链接到也是原英文博客！
[回复该留言]
16. Persephone | November 27th, 2007 at 3:22 pm
谢谢回答，但是小妹愚昧啊，使用代理？什么意思？
还有原英文博客？在哪里啊？
坦白说我是把你这篇文章真当作教程来看了，现在就卡死在那里，学不下去了，所以还望您多帮忙啊！
[回复该留言]
17. Persephone | November 27th, 2007 at 3:27 pm
使用代理？原英文博客？小女子愚昧，看不太懂啊，望老大明示！
是说要找原来的英文博客吗？能给个网址吗？
请原谅小女子迫切的心情，因为现在把你这篇文章当作教程，因为这个文件而卡死在半当中实在是难受啊！
[回复该留言]
18. 雪山飞猪 | November 27th, 2007 at 3:48 pm
我这个教程是翻译的，所有 index.txt 也是原英文博客上的，我们保存到我自己的服务器上。你可以看到他的地址是：
http://www.wpdesigner.com/wp-content/files/wp-tutorial/index.txt
[回复该留言]
19. Persephone | November 27th, 2007 at 4:42 pm
非常感谢飞猪大人一次又一次耐心地回答小的的问题。小的已经去原英文的博客上看过了，真是写的人好，翻译的人也好，小的无比佩服啊！（会不会太献媚了？呵呵）
好了，对于我三番两次提出的index问题，我已经解决了，其实原先的链接地址，我鼠标左击后弹出的页面还是空白，这个问题在原先的英文版博客中也有不少人问，我试着用了各种方法，后来才明白原来我们是思维定式了。
INDEX文件不是左击，而是右击另存为保存在电脑上（我是保存在桌面上的），然后右击文件打开方式用TXT就行了。
[回复该留言]
20. countyinfo | February 12th, 2008 at 7:44 pm
按你的本节的指导，操作到到第五步，输入http://localhost/wordpress/wp-login.php后，在进入Presentation菜单后，出现以下信息：
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
Tutorial Template is missing.
显示不是缩略图，请问如何解决？
[回复该留言]
21. countyinfo | February 12th, 2008 at 9:49 pm
在建立的tutorial 文件夹中，用笔记本已经粘贴并存好了index和style。但到第五步后，就进行不下去了。请指教，如何化解？
[回复该留言]
22. countyinfo | February 13th, 2008 at 9:47 pm
老大，很忙吗？
[回复该留言]
23. MrHe | February 18th, 2008 at 3:30 pm
我也是遇到index.txt下载不了的问题，最后解决了，很简单，用迅雷直接下就可以了（可以多种方式启动迅雷：把链接拖到迅雷的悬浮窗上，或者新建一个迅雷任务，或者在右键弹出的菜单里选迅雷下载均可。
很感谢本文的作者和翻译，学到了很多东西。SO，自己也来贡献一下
[回复该留言]
24. 善用佳软 | February 27th, 2008 at 5:19 pm
刚刚转向wordpress，不过是小众友情搬家的。正在自学中，读了此教程，对我快速理上手帮助很大啊。
一个错字：“在 PHP 中，<?php 时”，应为“是”
[回复该留言]
雪山飞猪 reply on February 27, 2008:
娃哈哈，我很多错别字的。谢谢提醒，什么时候一起改了！
[回复该留言]
25. 善用佳软 | February 27th, 2008 at 5:58 pm
此教程确实很好，尤其对初学者。所以，值得出修订版。
（我的上一条留言多了一个“理”字）
[回复该留言]
26. 小虫 | March 5th, 2008 at 12:29 pm
按照教程做下来，一路都正确，但是当我输入http://localhost/wordpress/wp-login.php后网页显示依然是报错~~
为什么？
[回复该留言]
27. 颦儿 | March 13th, 2008 at 12:13 pm
浅显易懂哦，谢谢了，继续看下去……
[回复该留言]
28. smits | March 30th, 2008 at 2:00 pm
怎样安装WP blog 到电脑上？
[回复该留言]
29. bofei | April 2nd, 2008 at 3:40 am
在到第五步的时候我点击：http://localhost/wordpress/wp-login.php
出现
Warning: require(C:\xampp\htdocs\wordpress/wp-config.php) [function.require]: failed to open stream: No such file or directory in C:\xampp\htdocs\wordpress\wp-login.php on line 2
Fatal error: require() [function.require]: Failed opening required 'C:\xampp\htdocs\wordpress/wp-config.php' (include_path='.;C:\xampp\php\pear\') in C:\xampp\htdocs\wordpress\wp-login.php on line 2
请问老大这个问题怎么解决,谢谢
[回复该留言]
30. 醉云 | May 29th, 2008 at 9:28 pm
厄，为什么结尾加粗强调不要忘记关闭 Xampp，这个东西长期开着对电脑有害么？
还是容易被入侵？我是新手
[回复该留言]
31. Lean | June 10th, 2008 at 4:45 am
非常感谢你的教程！对于新手来说实在是太重要了、太有帮助了！
感谢阁下花费的心血！
另外，我尝试使用绿色版的wordpress,结果在输入http://localhost/wordpress/的时候导致服务器出错，然后，换成非绿色版就解决了这个问题。
如果有人发现同样的问题，不知道这个会不会管用。
[回复该留言]