简单说一下我的主题展示页面实现方法

昨天周日看着blog的时候,我突然想起还没有为最近发布的黑色WordPress主题-Js Noire做一个访问页面,因为懒。然后又想如是这样不是办法,因为当日后每做一个新主题后,自己除了需要为它添加一个新页面作介绍之外,还得在一个汇总页面上添加上它,以方便访客一览。这样的“手尾”好生麻烦,然后就想了个AUTO一点的办法做了个汇总页面。就象目前大家在导航栏中看到的第二个按钮,点它就会出现我发布过的所有主题汇总。

熟悉一点WordPress的朋友自然会想到利用分类或者标签功能,比如为每一篇发布主题的文章定义一个指定的分类或者标签,然后访问这个分类或标签的页面链接,它自然就是一个汇总页面了。当然我也是基于这个方向来考虑,但我还想在汇总页面上为各个主题添加一个缩略图,这样就更为直观,不是吗?还有就是只显示简略介绍就够了,不用什么日期啊评论啊的信息。所有这些就必须要自己制作一个页面模板了。OK,那就做一个页面模板,然后在后台新建一个页面,选取该模板方法。

如何在WordPress做一个页面模板?熟悉的朋友跳过,不太熟悉的朋友可以参照这篇文章建立一个。因为要筛选显示那些只是发布主题用的日志,所以在模板内的主循环代码部分

<?php while ( have_posts() ) : the_post() ?>

的前面添加筛选用的代码:

<?php
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('tag=idesign&showposts=' . $limit=15 . '&paged=' . $paged);
$wp_query->is_archive = true; $wp_query->is_home = false;
?>

红字部分是指定筛选标签为“idesign”的所有文章,如果你是通过分类来区别的话,把“tag=”换成“cat=分类ID号”则可。“15”就是指定读取的文章数。

到此是一个筛选功能的完成,至于需要在汇总页面中添加各个主题的图片,我希望它能自动读取该篇日志中的图片。因为发布主题的日志一定(一般情况下)带有主题的预览图,所以直接读取它并显示出来就行了。

在模板的主循环里,在你需要显示图片的位置中添加如下代码:

<img src="<?php echo catch_that_image() ?>" alt="" />

建议为该代码前后添加一个<div>的以方便控制它的样式,比如大小,是否浮动显示等。不要忘记的是,你必须在主题模板的function.php文件内同时添加上下面的功能代码,否则图片不会自动读取:

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "在这里指定如果没有图片则显示的默认图片路径";
}
return $first_img;
}

这样,系统就能自动读取在该篇文章中的第一个图片,注意是第一个;所以请把需要作为缩略图显示的图片放在日志中的首位。

所有上面操作都完成后,在后台新建页面,选取刚建立的页面模板,也不用写什么内容的了,存档后访问该页面,就会显示那些需要显示的文章,还有文章内的第一个图片。

因为我这里是利用JQuery直接读取这个模板,如果你也需要这样,你需要把上述的模板文件更改一下。在其开头位置添加:

<?php
if ($_SERVER["REQUEST_METHOD"] != "POST") {
header('Allow: POST');
header("HTTP/1.1 405 Method Not Allowed");
header("Content-type: text/plain");
exit;
}
$db_check = true;
function kill_data() {
return '';
}
function check_db() {
global $wpdb, $db_check;
if($db_check) {
// Check DB
if(!$wpdb->dbh) {
echo('Our database has issues. Try again later.');
} else {
echo('We\'re currently having site problems. Try again later.');
}
die();
}
}
ob_start('kill_data');
register_shutdown_function('check_db');
require_once(dirname(__FILE__)."/../../../wp-config.php");
$db_check = false;
ob_end_clean();
nocache_headers();
function fail($s) {
header('HTTP/1.0 500 Internal Server Error');
echo $s;
exit;
}
?>

然后指定一个激活的js效果,比如通过点击动作后读取这个页面;在你的模板js文件中添加:

$('激活链接的样式名字').click(function(){
$.ajax({
url : "/wp-content/themes/主题文件夹名字/上面制作的模板文件.php",
type: 'POST',
beforeSend: function() {
/*
这里是读取数据前的一系列动作,比如要隐藏什么,显示什么的,根据主题不同不同
*/
},
success : function (data) {
/*下面一行是读取成功后数据显示方式。比如我是把数据附加到一个名称为"#qs-area"区块内并通过"slideDown"的方式显示出来。*/
$("#qs-area").html(data).slideDown('slow');
}
});
return false;
});

在这里关于AJax的方法我写得较为简单,因为并不是本文的重点;或者大家需要折腾的话,有问题也可以在这里说下,看我能否帮上忙好了。通过上面的方法后,日后当我有新主题发布,我就只需要在撰写该篇文章的同时为它添加一个指定的标签后,它就会自动被添加到我的主题汇总页面中去,当然还带了张缩略图。一个很适合我的懒方法,呵呵。当然,如果你也需要汇总一些带图片的文章,此方法也适用,按需灵活处理一下则可。

分类:WordPress, theme skill;标签:, , , ;收藏本文的永久链接

22 Responses to “简单说一下我的主题展示页面实现方法”

  1. chisdy 回复此留言 2009/10/20 02:52 #comment-10024

    这个功能暂时还用不上,不过可以学习下。

  2. zwwooooo 回复此留言 2009/10/20 03:44 #comment-10027

    js怕怕,不过有空时再折腾下

  3. ZH CEXO 回复此留言 2009/10/20 04:48 #comment-10030

    js不懂, 才懂些皮毛,不过你介绍的这些方法很好,作品多的博客主很适合,当然并不仅仅是指主题作品,其他的都一样,呵呵

  4. Pfau 回复此留言 2009/10/20 09:08 #comment-10043

    正准备在Lightbox搞定之后问你这个效果是怎么做的,你就写出来了……多谢多谢

  5. 小墨 回复此留言 2009/10/20 14:14 #comment-10048

    那个自动显示第一张图片的,如果要指定一个默认图片 ~要这么写呢

  6. 小墨 回复此留言 2009/10/20 14:14 #comment-10049

    要怎么写?

  7. zEUS. 回复此留言 2009/10/30 06:45 #comment-10401

    多谢分享!
    收益非浅!
    如果语法处有中文注释就好了 :-P

  8. 印第安小狮 回复此留言 2009/11/17 16:58 #comment-10877

    执行时,function那块第六句错误...有点难理解这句呢.

  9. leegang 回复此留言 2009/12/28 15:11 #comment-11954

    $output = preg_match_all('//i', $post->post_content, $matches);

    这句是不是有问题啊
    总报错

    • QiQiBoY 回复此留言 2010/01/02 12:14 #comment-12011

      因为正则表达式中那个不是单引号,而是键盘数字键左边那个键了,替换一下就正确了。。可能是WP自动给作者转换了。。。不过要转也应该是转为中文的引号啊。。。奇怪。。

    • Jinwen 回复此留言 2010/04/12 12:46 #comment-13829

      这一句应该是这样的:
      $output = preg_match_all('//i', $post->post_content, $matches);
      可能给WordPress后台自动转换了。

  10. 左手烟 回复此留言 2010/01/01 21:36 #comment-11995

    :?: 测试以失败而告终。

  11. happyet 回复此留言 2010/03/02 14:58 #comment-13145

    统就能自动读取在该篇文章中的第一个图片,注意是第一个;所以请把需要作为缩略图显示的图片放在日志中的首位。

    一定要把图片发表在日志的最前面吗?在内容中的图片会自动提取显示在首页吗?

  12. happyet 回复此留言 2010/03/23 08:27 #comment-13491

    你好,我用了调用图片的函数后,首页提示下面这一行错误。
    $output = preg_match_all('//i', $post->post_content, $matches); :???:

    • Jinwen 回复此留言 2010/04/12 12:47 #comment-13830

      这句WordPress转换了,正确的在本篇留言里面有提到过。

  13. mcooo 回复此留言 2010/04/12 12:39 #comment-13828

    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); :!: 是这样才对吧!

    • Jinwen 回复此留言 2010/04/12 12:47 #comment-13831

      是这样才对,不知道WordPress为什么把前台显示的改了 :?:

    • mcooo 回复此留言 2010/04/12 12:52 #comment-13832

      @Jinwen 呵呵,WordPress把前台显示改了,这个我就不知了!


The trackbacks and pingpacks: