想实现鸟类网这样美丽的效果吗?—— 下面我就手把手的教你如何使用WordPress模板文件创建一个漂亮的缩略图页面。
目前来说,在后台“添加新页面”,在页面内容编辑框中加入代码是错误的,不管是放在“可视化”还是“HTML”都是错误的,插件代码必须放置在模板文件中!当然,我在插件下一版会考虑直接通过“添加新页面”的方式使插件生效。—— 新版(3.2.0版)已经改进了。也就是说,你既可以按我下面的方法,在模板文件中添加WP-Thumbnails的代码;也可以不改动模板文件,直接“新添加页面”,在页面内容中放置短代码。短代码的放置参考插件用法第10部分。
自定义页面缩略图
WP-Thumbnails的缩略图分为两种:页面缩略图和文章缩略图。这两种缩略图分别又有许多分类,我在插件首页已经详细介绍过了。
像首页页面缩略图、分类页面缩略图、搜索页面缩略图、标签页面缩略图都是页面缩略图。那么这些页面缩略图是如何实现的呢?WordPress通过模板文件控制页面的显示,什么是模板文件呢?
点击“后台-外观-编辑”,展现在你面前的就是模板文件,看到下面的图没,那些中文名称的模板文件都是WordPress自带的(当然,你的主题包含的文件不一定相同),如category.php文件控制分类页面的显示,所以category.php就是“分类页面模板”,index.php控制首页的显示,index.php就是“首页模板”,等等。
主题文件(模板文件)
如果你要创建一个自定义风格的页面,怎么办?—— 自己弄一个页面模板就行了。
这些步骤有点麻烦,你得一步一步来,
不要想当然的跳过某些步骤或敷衍过去!
第一步、打开你的FTP,打开wp-content/themes/,theme的意思是“主题”,这里是你使用的主题所在的文件夹,看下你后台当前使用的是哪个主题,就打开哪个主题的文件夹,如我的网站使用的是dilectio主题,那我就打开dilectio文件夹,看到了吗,所有的模板文件都在这。
使用FTP上传自定义的页面模板文件
第二步、把page.php这个文件下载下来(也就是复制到本地),随便改个名字,比如改成video.php,然后再把video.php上传到刚才同一个目录。这是干嘛呢——我们要在page.php这个默认模板内容的基础上进行修改。好了,关闭FTP吧。
当然也可以在本地把video.php完全编辑好再上传,但是请使用能识别utf-8编码的文字编辑器进行编辑(如Ultraedit),千万不能使用记事本、Word进行编辑。
第三步、点击“后台-外观-编辑”,看到没,刚上传的video.php已经展现在你面前了,点击video.php就可以编辑了。
编辑模板文件
这里有两个工作:
首先,给自己的模板文件起个名字,即在文件开头加上以下内容(一般开头都会有这些内容,你只需要改下Template Name后面的名字):
然后,放置我的插件代码。代码怎么放呢,我在插件用法中已经详细说明了代码使用方法,请参考:
代码放在包含了the_content的那句话下面(前面也可以,不过可能显示出来的效果稍有不同),比如你要显示20篇最新文章,并且每篇文章的尺寸为75像素宽,75像素高,那么在the_content那句话下面放置如下代码:
其他种类的缩略图在上面给出的链接中都有详细的介绍,不再赘叙了。
现在你明白了,插件代码一定要放在模板文件中,php代码当然放置在php文件中嘛。
第四步、点击“后台-添加新页面”,看到了吧,点击模板列表,里面有个“视频模板”,正是我们通过FTP上传的,选中它,随便在新页面内容中写点文字,发布,查看,缩略图效果出来了!
新的模板产生了!
可见,你写的文字内容要想以什么外观出现,完全是模板文件决定的,你在模板文件中放置了缩略图代码,那么基于该模板的页面就会显示缩略图效果。
剩下最后一个问题:
我想要的就是鸟类网《精华文章:鸟类网最受欢迎的100篇文章》的效果,怎么办?这个嘛,说起来就有点复杂了,如果你完全看不懂php代码,我还真不好教你。说句实话,其实我也不懂php代码,哈哈,一个不懂php代码的人写出一个插件了。没错,确实是这样,靠的就是模仿加反复试验,就会发现php代码其实也很简单。
回到正题,一般模板文件控制页面显示为两栏或者三栏,通常在模板文件中,the_content附近的代码都是控制显示主体内容,剩下siderbar附近的内容控制显示侧边栏,你要做的就是,删掉siderbar附近的代码(也就是去掉侧边栏),然后在the_content最外层的div中加一个
style="width:960px;"
意思是让主题内容宽度显示为960像素,这样正好铺满页面,具体宽度数值请根据自己的网站调整。
我把《鸟类网最受欢迎的100篇文章》这个页面的模板文件内容贴出来,你可以模仿参考下:
好了,以上就是WordPress中利用模板文件创建自定义页面的全过程。如有错误,望指正!