当前位置:首页 > 凡人Wordpress > 正文

WP主题模板制作新手教程之制作博客模板的方法

时间:2012年11月29日作者:全职凡人查看次数:795 views评论次数:0

博客模板是WP模板制作中最简单的一种模板,不需要太多的各式各样的php文件,也不需要太多的各种文件的调用代码。制作博客模板的方法,只需要做好index.php,style.css,single.php,page.php,archive.php就行了,至于search.php和404.php,根据需要做就可以了。至于制作博客模板的方法,我们就先从最主要的index.php说起吧!

制作博客模板的方法,index.php的制作是第一步。那么index.php都包含有什么内容呢?大家可以随便打开一个WP主题文件,就可以看到这个东东了。

上一篇文章:WP模板结构简介里,介绍了怎样获得制作WP模板需要的静态页面。我们就从这里选一个静态页面来示范吧!这是我下载来的静态页面,里面有我们制作博客模板需要的index.php和style.php:

制作博客模板的方法

双击打开index.html,就会有一张完整的页面:制作博客模板的方法

我们现在就来看看具体怎样制作博客模板。希望大家都有了DW(dreamweaver)这个软件。

第一步,直接把index.html改成index.php,或者复制后再改,可以用来复原出错的地方。然后就用DW打开这个文件,如图:制作博客模板的方法

这就是index.php里面的内容。由于篇幅的原因,今天就只讲一下,怎样找到这里面的顶部位置、底部位置和侧边栏位置。制作博客模板的方法,甚至其他类型的WP模板,找到这些是必须的。因为博客模板每个页面都有相同的顶部、底部和侧边栏,我们必须要把这几个东东从index.php中分离出来,再使用WP的标签把它调用回来,就能实现这个要求了。

从上面打开的页面可以看出,绿色部分及以上的地方就是顶部。在DW的“设计”选项中,也可以清楚的看到顶部是从<div=”logo”>这整句代码及以上的部分,属于顶部。讲到这里提醒大家学会使用火狐浏览器或者谷歌浏览器,火狐浏览器需要下载插件firebug,才能使用审查元素,而谷歌浏览器不需要下载,可以直接使用。通过这两个浏览器可以非常方便的找出网页中每一个细微之处的具体标签,以及定义这些标签所在的CSS中的详细信息和具体位置。如果还有不会使用的,请看下次的谷歌和火狐的使用方法介绍。

上面找出了顶部,我们就把这一部分全部“剪切”掉,然后再文件夹中新建一个header.php,打开后把剪切的顶部复制到这里,保存下来,然后回到index.php,在剪切的位置写下<?php get_header();?>,保存即可。在进行这些操作之前,希望各位已经通过本地建站程序运行并打开了这个主题,才能检查到自己制作的效果,以及随制作而改变的正确性。这一步一定要在所有操作之前就做好!如果还不知道怎样在本地建站,请看凡人建站之牛刀初试-WordPress本地搭建,全职凡人详细的介绍了本地建站的方法。

找到了顶部,分离成功后,接下来就是侧边栏。在静态页面中很明显右边的就是侧边栏,在DW中也清楚的提示sidebar的位置:制作博客模板的方法

点击<div id=”sidebar”>,再点下面的<div#sidebar>,就可以全部选中sidebar了:制作博客模板的方法

同样,右键“剪切”,在文件夹中新建一个sidebar.php,用DW打开,复制剪切的内容-保存。回到index.php,在剪切的位置写上<?php get_sidebar();?>,保存,那么侧边栏也分离出来了。同样在本地网站中刷新页面,没有变化就证明操作的正确。通过上述方法找到底部,剪切-新建footer.php-粘贴-保存,在index.php剪切的位置写上<?php get_footer();?>,三个主要内容就操作完成了。

接下来就是具体的制作index.php内容了。详细操作因篇幅有限,下次再讲了。这里提示大家,在制作模板时,一定要开启本地网站,启用要制作的主题,并进入网站首页,你的制作和修改才会被显示出来,修改的对与错,才能被发现,错了就在DW“编辑”中“撤销”重新来过。每修改一个地方就到页面去检查一下对错,养成一个良好的习惯,否则,就很难找到错误的原因,无法恢复,浪费时间。另外,这三个我用红色标记的调用标签一定要完全记住,或者把它复制到记事本中,在需要的时候,再复制过来就可以了。

转载请注明文章转载自: 全职凡人_博客  本文链接地址:http://www.qzfrn.com/wordpress/349.html
0条评论

暂时没有评论!

发表评论

*

*