WP主题开发11：wordpress主题trans，右侧边栏的数据怎样调用？

在前面的章节中，我们修改好了WordPress主题trans的首页头部和左侧的代码，实现了我们想要的效果。今天，我们再来给trans主题首页的右侧边栏进行修改，把静态的代码修改成动态的。一般情况下，右侧边栏才是网站的主要侧边栏，而左侧一般是页面的主体部分。所以，右侧边栏大多是放置最新文章、热门文章排行等等这类信息。

我们打开trans主题的index.html静态模板，我们可以看到，它的右侧边栏主要有3个板块：最新文章、热门文章、热门标签。目前，它们的数据都是写死的，我们要实现的是：从wordpress数据库中调用数据，让这些数据活起来。

第一步：从wordpress数据库中调用10篇最新文章。

trans主题右侧边栏最新文章列表的静态代码如下：

< ul class="c_right_article">
< a href="">aaaadadafdadfadfadfadf1
< a href="">aaaadadfadfadfads2
< a href="">aaaad3
< a href="">aaadadfadfadfadfsadfadfada4afdadfadfasd
< a href="">aaaadfadfadf5
< a href="">aaaaadfadfadfdf6
< /ul>

我们先把

• 标签内的所有内容（所有a标签）都删除掉，变成如下代码：

< ul class="c_right_article">

然后，在这个ul标签内部添加wordpress最新文章的调用代码：

< ?php
query_posts('posts_per_page=10&caller_get_posts=1&orderby=new');
while (have_posts()) : the_post();
echo '< a href="'.get_the_permalink().'" title="'.get_the_title().'">';
echo get_the_title();
echo '';
endwhile;
wp_reset_query();
?>

代码中，我们用到了WordPress程序的一个查询函数——query_posts()，它的作用是：从wordpress数据库的wp-posts数据表中按条件查询文章。上面的代码中，给了3个条件：

posts_per_page=10 => 查询10篇文章；
caller_get_posts=1 => 排除置顶文章；
orderby=new => 排序按最新的

接着又用到了while循环语句。这里再强调一下，循环语句一定要结束它（endwhile) 或者用大括号把循环体包括起来。另外，使用了query_posts()查询语句，就一定要使用 wp_reset_query()来结束它，否则，后面的代码数据就可能会出错。

第二步：从wordpress数据库中调出10篇文章，按评论多少排序。

原静态模板右侧边栏中的热门文章代码如下：

< ul class="c_right_con">
< div class="hot_left">
< a href="/">< img src="./images/index_17.jpg" alt="">
< /div>
< div class="hot_right">
< li>
< a href="/">百度站长工具抓取诊断失败的原因有哪些
< /li>
< li>
< span class="dashicons-before dashicons-calendar-alt">5月21日
< span class="dashicons-before dashicons-visibility">274
< /li>
< /div>
< /ul>

这是一篇热门文章的代码，我们要在右侧边栏显示10篇，所以，我们依然是要使用循环语句，修改后的代码如下：

< ?php
query_posts('posts_per_page=8&caller_get_posts=1&orderby=comment_count');
while (have_posts()) : the_post();
?>
< ul class="c_right_con">
< div class="hot_left">
< a href="">
< ?php
if(has_post_thumbnail()) { //如果有特色图片，就调用特色图片
the_post_thumbnail( //直接显示特色图片
'thumbnail' , //以缩略图的形式显示
array(
'alt' => trim(strip_tags( $post->post_title )), //img标签的alt属性
'title' => trim(strip_tags( $post->post_title )),//img标签的title属性
'class' => 'home-thumb'
)
);
}else { //否则调用文章第一张图片
echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';
}
?>
< /a>
< /div>
< div class="hot_right">
< li>< a href=""> < /li>
< li>
< span class="dashicons-before dashicons-calendar-alt">

< /span>
< span class="dashicons-before dashicons-visibility">
< ?php get_post_meta($post->ID,"views",true); ?>
< /span>
< /li>
< /div>
< /ul>

上面代码中的query_posts()参数，我们用到了 orderby=comment_count ，这表示按评论多少来排序文章。代码中其它的wordpress函数，我们在前面的章节中都已经介绍过，这里就不多说了。 

第三步：从wordpress数据库中调用40个热门标签。

tag标签是wordpress的一个非常独特的内容，它可以像分类列表页一样地展示所有包含某个标签的文章列表，而那些所谓的搜索引擎，却非常地喜欢这个tag标签，收录量超大。闲话少说。我们先来看一下tras

< ul class="c_right_tag">
< a href="">aaaadad1
< a href="">aaaad2
< a href="">aaaad3
< a href="">aaadsa4
< a href="">aaa5
< a href="">aaaadf6
< /ul>

我们也是先把ul标签里的所有a标签删除，如下：

< ul class="c_right_tag">
< /ul>

然后，在这个ul标签中添加tag热门标签的调用代码，如下：

<?php
wp_tag_cloud('number=40&orderby=count&order=DESC&smallest=13&largest=13&unit=px');
?>

上面的代码中，我们使用了wordpress提供的一个标签云函数wp_tag_cloud()，如要不添加任何参数，它会显示当前wordpress网站中的所有的tag标签。我们这里给它添加了6个参数：

number=40 => 显示多少个标签
orderby=count => 按文章数量排序
order=DESC => 倒序
smallest=13 => 字体最小13
largest=13 => 字体最大13 ，要以根据自己的需求来设置大小
unit=px => 字体的单位，px表示像素

通过上面的几步，我们就为WordPress主题trans的首页右侧边栏修改好，我们从wordpress数据库的中调用了最新发表的文章和热门文章、热门标签，让整个右侧边栏也动了起来，达到了我们想要的效果。当然，我们还可以给右侧边栏添加更多的功能模板，如：文章归档、日历、近期评论、广告等等，这些，我们需要根据自己或客户的需求而定。发子，本章就介绍到这里，如有疑问，欢迎点评和关注我。