首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框
2018
05-13

WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框

这一讲中,我们将学习:如何制作幻灯片和tab式新闻框

幻灯片很容易理解,tab式新闻框指的是这块区域:

tab新闻框 - WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框

清空图片广告位置

首先,清空图片广告位置:

图片广告区 - WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框

然后添加一个说明:此处为图片广告位置,如需修改,在index.php中,进行图片添加。

    <div class="left run_news">
	此处为图片广告位置,如需修改,在index.php中,进行图片添加。
     </div>

添加幻灯片的位置

接着我们删除掉之前的js代码,代之的是封装好的外部js文件:

    <div id="jdt">
		<script src="<?php bloginfo('stylesheet_directory'); ?>/flash.js"></script>
	</div>

保存一下,接下来,进入到主题文件夹下的flash.js,

这里需要重新的替换图片的路径,把:

http://localhost/wordpress/wp-content/themes/weike_cms

替换为:

http://localhost/localwp.com/wp-content/themes/wp_xuhss_cms

那当你要在互联网上使用时,需要把图片的路径加入你的域名。

这里用到的2张图片是我随便选择的,你可以根据这个范围的大小,选择合适的图片。

现在,我们来实战:添加这样一张图片到这个幻灯片中:

xuhss - WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框

把这个图片文件放到img文件夹中,然后添加js中的代码:

imag[2]="http://localhost/localwp.com/wp-content/themes/wp_xuhss_cms/img/zhubajie.jpg";
link[2]="";
text[2]="标题 2";
imag[3]="http://localhost/localwp.com/wp-content/themes/wp_xuhss_cms/img/xuhss.png";
link[3]="";
text[3]="标题 3";

修改tab式新闻框

首先,我们来到wordpress后台,新增一篇文章,这样方便测试tab下的内容:

wordpress文章数 - WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框

现在“最新资源”这个tab标签下,有很多篇文章,我们希望删到只剩第一篇文章:

最后删到只剩这段代码:

<div class="dis" id="tbc_11"><div class="c1-body">
<div class="" style="padding:3px 0px;"><div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" border="0"/> <a href="wzjc/519.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank"><span style="">4种不适合做网络兼职赚钱的人分析</span></a></div><div class="f-right">03-16</div><div class="clear"></div></div>
</div>

来到前台刷新:

tab通用 - WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框

我们希望通过拿最新文章的模板标签,来实现对文章的遍历,这里需要用到这段代码:

<?php $rand_posts = get_posts('numberposts=9&orderby=date');foreach($rand_posts as $post) : ?>

<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endforeach;?>

在这里为了保留以前的样式,所以不能通过li的方式去显示,而是需要把以前的div中的样式拷贝进来:

<?php $rand_posts = get_posts('numberposts=9&orderby=date');foreach($rand_posts as $post) : ?>
<div class="" style="padding:3px 0px;">
	 <div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" border="0"/>
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	 </div>
	 <div class="f-right">03-16</div>
	 <div class="clear"></div>
 </div>
<?php endforeach;?>

接着是3月16号的时间,需要改为文章发布的时间:

<?php $rand_posts = get_posts('numberposts=9&orderby=date');foreach($rand_posts as $post) : ?>
<div class="" style="padding:3px 0px;">
	 <div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" border="0"/>
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	 </div>
	 <div class="f-right"><?php the_time('m-d') ?></div>
	 <div class="clear"></div>
 </div>
<?php endforeach;?>

现在,我们把之前的列表文章格式代码给删除掉,这个代码要最后才删除,因为要借用它的样式代码。

<div class="" style="padding:3px 0px;">
	 <div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" border="0"/>
	 <a href="wzjc/519.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank"><span style="">4种不适合做网络兼职赚钱的人分析</span></a>
	 </div>
	 <div class="f-right">03-16</div>
	 <div class="clear"></div>
 </div>

来到网站前台,这样就出来了默认的wordpress文章,并且格式和原来一模一样。

那对于“热点关注”tab标签下的文章,我们采用随机文章来实现:

<?php $rand_posts = get_posts('numberposts=9&orderby=rand');foreach($rand_posts as $post) : ?>

<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endforeach;?>

然后,再加上样式:

<?php $rand_posts = get_posts('numberposts=9&orderby=rand');foreach($rand_posts as $post) : ?>
<div class="" style="padding:3px 0px;">
	 <div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" border="0"/>
	 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	 </div>
	 <div class="f-right"><?php the_time('m-d') ?></div>
	 <div class="clear"></div>
 </div>

<?php endforeach;?>

那对于“热点推荐”tab标签下的文章,我们采用热门文章来实现:

<?php

$post_num = 9; // 设置调用条数

$args = array(

'post_password' => '',

'post_status' => 'publish', // 只选公开的文章.

'post__not_in' => array($post->ID),//排除当前文章

'caller_get_posts' => 1, // 排除置頂文章.

'orderby' => 'comment_count', // 依評論數排序.

'posts_per_page' => $post_num

);

$query_posts = new WP_Query();

$query_posts->query($args);

while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>

<div class="" style="padding:3px 0px;"><div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" border="0"/><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">

<?php the_title(); ?></a></div><div class="f-right"><?php the_time('m-d') ?></div><div class="clear"></div></div>

<?php } wp_reset_query();?>

最后,我们把tab标签改为对应的名称:

      <li onclick="HoverLi(1,1,3);" class="curr" id="tb_11">最新文章</li>
      <li onclick="HoverLi(1,2,3);" id="tb_12">随机文章</li>
      <li onclick="HoverLi(1,3,3);" id="tb_13">热门文章</li>

 

最后编辑:
作者:虚幻
这个作者貌似有点懒,什么都没有留下。

留下一个回复