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

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

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

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

清空图片广告位置

首先，清空图片广告位置：

You must be ​​logged in​​ to view the hidden contents.

然后添加一个说明：此处为图片广告位置，如需修改，在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;?>

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

<pre class="pure-highlightjs" style="margin: 0px; padding: 0px; font-weight: 400; font-family: inherit; background-color: transparent; border: none; color: rgb(69, 69, 69); font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">​​<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>​​</pre>

来到网站前台，这样就出来了默认的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>