WP主题教程#14:页脚和拆分index.php文件(Footer and Dividing Index)

今天,我们将完成样式化的内容并且开始将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文件中复制的那些内容用代替。

是WordPress主题系统中包含header.php文件的一个函数,而不需要使用了。

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

第四步

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

第五步

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

本节回顾

  • 你新建了三个新文件:header.phpsidebar.phpfooter.php
  • 你学到了三个新的函数:get_header()get_sidebar()get_footer()
  • 在本节的结束部分,我链接上我的所有的文件:indexstyleheadersidebarfooter

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

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