logoWP主题

今天，我们将完成样式化的内容并且开始将index.php文件拆分为多个小的文件。在本节的开始部分你需要style.css文件，稍后你将会一直和index.php文件打交道，并且要新建一些文件。最后呢？嗯，你差不多就完成今天的内容了。

打开Xampp、主题文件夹、Firefox、IE、index.php和style.css文件。

第一步

给footer DIV添加一个10像素的顶部内边距，还记得怎样添加内边距吧？这次我不会给你代码了哦。

第二步

给页脚(footer)中的P标签添加一个18像素的行高，就是#footer p{}。(今天有关style.css文件的内容就结束了。)

第三步

• 新建一个名为header.php的文件，要确保新建的是php文件而不是文本文档。
• 将index.php文件中的header DIV结束的</div>以上的所有的内容复制黏贴到header.php文件中。

链接里是我的header.php文件，不要复制黏贴我的文件，要从你的index.php文件中复制黏贴。

第四步

将刚才你在index.php文件中复制的那些内容用<?php get_header(); ?>代替。

<?php get_header(); ?>是WordPress主题系统中包含header.php文件的一个函数，而不需要使用<?php include (TEMPLATEPATH . ‘/header.php’); ?>了。

保存文件然后刷新浏览器，你不会看到任何变化，如果你的主题看起来不完整了那就说明中间出现错误了。

第四步

• 第四步和第三步很相似，这次新建的是sidebar.php文件。
• 将Sidebar DIV里的所有内容都复制黏贴到sidebar.php文件中。
• 然后在index.php文件中将上面复制的内容替换为<?php get_sidebar(); ?>
• 保存文件然后刷新页面，这次你也不会看到任何变化。
• 链接里是我的sidebar.php文件。

第五步

• 对于footer.php文件也重复上面的步骤。
• 链接里是我的footer.php文件。

本节回顾

• 你新建了三个新文件：header.php、sidebar.php和footer.php。
• 你学到了三个新的函数：get_header()、get_sidebar()和get_footer()。
• 在本节的结束部分，我链接上我的所有的文件：index、style、header、sidebar和footer。

不要复制我的代码也不要用我的文件替代你的文件，如果你的主题出现错误或者主题没有正确的显示，你可以对照我的文件来检查你的代码。

返回WordPress主题系列教程的开始