翻译:Wordpress主题制作教程#3:开始制作index.php

原文作者Small Potato翻译Leon

本文是我关于Wordpress主题制作系列教程的第三课。如果你没有读过我的教程一教程二,建议你先学习他们。否则,你不会明白我这节课将要展现的内容。

现在就开始从阅读教程转到真正着手制作吧。在这节课中,你将会被Wordpress的代码搞得一团糟。这就是为什么你真的应该在你的本地电脑上安装一个Wordpress,而并非是一个在线Wordpress,因为这样的话会更加方便。

第一步:打开Xampp控制面板。
指定你的Xampp目录,通常是 My Computer > xampp 或者是 C:\xampp

双击 xampp-control.exe。一个窗口会弹跳出来,点击Start,运行起 Apache 和 MySQL。你的弹出窗口应该是如下图所示:

xampp-control.gif

保持它的运行,你可以把它缩小到任务栏中。

第二步: 建立你的主题文件夹。
进入你的Wordpress主题文件夹。它应该在 xampp/htdocs/wordpress/wp-content/themes.。建立一个新的目录,把它命名为tutorial

第三步: 创建 index.phpstyle.css 文件。
打开记事本或者其他文本编辑器。记事本位于 开始菜单 > 程序 > 附件 > 记事本。

index.txt这个文件中的所有内容复制粘贴到你的记事本窗口中。

在你的tutorial文件夹中保存你的记事本文档为 index.php
save-as-indexphp.gif

save-as-indexphp2.gif

新建另外一个记事本文档,内容留空,保存为 style.css 在同一个文件夹中关闭记事本。

这样你就有了两个文件: index.php 和 style.css。 index-and-style.gif

index.php 文件内容解释:

indexphp-explain.gif

点击这个图片会放大。我将为你解释每一圈出的部分都是做什么用的。

Doctype - 声明你在你的主题文件中是使用的哪种代码。Doctype 在这里并不重要,我已经给出了 Doctype 因此你就不必深究它。

<html> 是网页文件的开始。

<head> 是网页文件头部( head)的开始。每个web页面都有一个头部(head)和主体(body)。 </head> 是头部的结束。

<?php bloginfo(’stylesheet_url’); ?> 是一个引用style.css文件位置的PHP函数,由此这个主题就能够与它建立链接从而在页面中显示出样式来。每当代码被 <?php?>包含时,那就是PHP语言,而与其他代码不同。在PHP中, <?php 意味着开始?> 意味着结束。

因此:

  • <?php - 开始PHP。
  • bloginfo(’stylesheet_url’) - 引用 style.css的位置。
  • ; - 结束对 style.css的引用。这个分号是结束一系列PHP代码的一中方式。
  • ?> - 结束PHP。

继续我们的学习…

<body> - 这是主体(body)开始的标志。主体(body)是所有网页上能读到看到的信息。你在阅读这份教程,也就是说你在阅读这个网页的主体(body)。 </body> 是主体结束的标志。

</html> 是页面结束的标志。在它之后什么也没有。

第四步: 复制并粘贴这个文件 style.txt 中的所有内容到你的 style.css 文件中。保存并关闭。

第五步: 设置你的主题。
打开你的浏览器。

输入: http://localhost/wordpress/wp-login.php。打开它,并且登录到你的Wordpress控制面板。(你之所以能够看到登录页面是因为你在第一步中打开了Xampp控制,否则,你的浏览器将给出一个找不到页面的错误提示。)

在控制面板中,单击 Presentation ,并选中叫做 Tutorial 的主题,激活它。

theme-empty-screenshot.gif

注意,你的主题现在并没有缩略图以显示。因此这个框图是空白的。一旦激活,Wordpress将会给出你提示。

theme-activated.gif

现在打开一个新的浏览页面,进入 http://localhost/wordpress。你应该能得到一个空白页面。我的意思是完全空白,如果不是这样,那么一定是你在一个错误的页面。

你的主题已经初步搭建起来了,这就是这节课的内容。下一步,我们将着手页眉(header)模板。

别忘记关闭你的 Xampp 控制。双击任务栏中的图标,单击 Apache 和 MySQL的Stop按钮,然后单击 exit。

xampp-control-close.gif

还存在问题吗?在下面的评论框中给我留言吧。

Follow this WordPress Theme Tutorial Series from the beginning.

Related Posts

«上一篇  CSS的盒子模型
Leon在小憩  下一篇»

9 Responses to “翻译:Wordpress主题制作教程#3:开始制作index.php”

  1. 天马 says:

    大哥接下来的教程呢,快点写啊,辛苦拉,等着学呢呵呵

  2. 天马 says:

    期待ing

  3. Leon says:

    谢谢关注,每当有时间Leon就会简单的译一下。可以读原文,只要英语不是很菜哦。

  4. 月光使者 says:

    你好!在WINDOWS平台,可以用XAMPP么?是不是还要装MYSQL 和IIS

  5. Leon says:

    可以。XAMPP是一个集成环境,包括了Apache和Mysql等组件。IIS是微软自带的东西,不如用apache更顺手

  6. chanfat says:

    你好,请问XAMPP和IIS是不是不能共存?

  7. Leon says:

    apache和iis可以共存吧?只要端口不一样就没问题吧

  8. 浩子 says:

    xampp我用了后发现还是没有phpnow好用吧
    呵呵

  9. Leon says:

    phpnow没用过,xampp有点庞大感觉,现在用appserv感觉不错,挺精简的

Leave a Reply

  • 全文搜索

  • 按月存档

  • 请猛点这里

    标签云

  • 最新评论

    • BARNETT34Julie: It is understandable that money makes us independ...
    • glwzu: 我唯一的一次心甘情愿的点了下广告...
    • 老鼠: @nic 在那上面右击就知道怎么做了...
    • 浩浩: 如何写入自己的内容和链接啊,希望...
    • temp: 哈哈,就是,被个鸡巴毛...
    • tattoo: 感謝分享,這是偉大的...
    • 蛋蛋: 拿走试试看啦!!也点击了广告了!...
    • strayboy: hehe,小师弟,慢慢的了解社会了。计...
    • 午夜客: 支付宝的确做的非常好...
    • 午夜客: 手绘功底不错呀...
  • 纵横坐标