WordpressCMS主题开发03-如何制作幻灯⽚和tab式新闻框这⼀讲中，我们将学习：如何制作幻灯⽚和tab式新闻框
幻灯⽚很容易理解，tab式新闻框指的是这块区域：
清空图⽚⼴告位置
⾸先，清空图⽚⼴告位置：
You must be 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，
这⾥需要重新的替换图⽚的路径，把：
localhost/wordpress/wp-content/themes/weike_cms
替换为：
localhost/localwp/wp-content/themes/wp_xuhss_cms
那当你要在互联⽹上使⽤时，需要把图⽚的路径加⼊你的域名。
这⾥⽤到的2张图⽚是我随便选择的，你可以根据这个范围的⼤⼩，选择合适的图⽚。
现在，我们来实战：添加这样⼀张图⽚到这个幻灯⽚中：
把这个图⽚⽂件放到img⽂件夹中，然后添加js中的代码：
imag[2]="localhost/localwp/wp-content/themes/wp_xuhss_cms/img/zhubajie.jpg";
link[2]="";
text[2]="标题 2";
imag[3]="localhost/localwp/wp-content/themes/wp_xuhss_cms/img/xuhss.png";
link[3]="";
text[3]="标题 3";
修改tab式新闻框
⾸先，我们来到wordpress后台，新增⼀篇⽂章，这样⽅便测试tab下的内容：
现在“最新资源”这个tab标签下，有很多篇⽂章，我们希望删到只剩第⼀篇⽂章：
最后删到只剩这段代码：
<div class="dis" id="tbc_11"><div class="c1-body">
<div class="" ><div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" b </div>
来到前台刷新：
我们希望通过拿最新⽂章的模板标签，来实现对⽂章的遍历，这⾥需要⽤到这段代码：
<?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="" >
<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="" >
<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" ><div class="" > <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 >4种不适合做⽹络兼职赚钱的⼈分析</span></a> </div> <div class="f-right">03-16</div> <div class="clear"></div> </div></pre>
来到⽹站前台，这样就出来了默认的wordpress⽂章，并且格式和原来⼀模⼀样。
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="" >
<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="" ><div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" b <?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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。