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

分类：WordPress, theme skill | 标签： JQuery,theme,WordPress,模板 | 浏览次数：1,303

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