首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WP主题开发11:wordpress主题trans侧边栏数据怎样调用?

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

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

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

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

< a href="">aaaaadfadfadfdf6

我们先把标签内的所有内容(所有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篇文章,按评论多少排序。

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

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

< ?php

query_posts('posts_per_page=8&caller_get_posts=1&orderby=comment_count');

while (have_posts()) : the_post();

?>

< ?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" />';

}

?>

< ?php get_post_meta($post->ID,"views",true); ?>

热门文章效果

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

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

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

< a href="">aaaadf6

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

< ul class="c_right_tag">

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

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数据库的中调用了最新发表的文章和热门文章、热门标签,让整个右侧边栏也动了起来,达到了我们想要的效果。当然,我们还可以给右侧边栏添加更多的功能模板,如:文章归档、日历、近期评论、广告等等,这些,我们需要根据自己或客户的需求而定。发子,本章就介绍到这里,如有疑问,欢迎点评和关注我。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200619A05GW600?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券