WordpressCMS主題開發03-如何製作幻燈片和tab式新聞框

這一講中，我們將學習：如何製作幻燈片和tab式新聞框

幻燈片很容易理解，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張圖片是我隨便選擇的，你可以根據這個範圍的大小，選擇合適的圖片。

現在，我們來實戰：新增這樣一張圖片到這個幻燈片中：

把這個圖片檔案放到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下的內容：

現在“最新資源”這個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>

來到前臺重新整理：

我們希望通過拿最新文章的模板標籤，來實現對文章的遍歷，這裡需要用到這段程式碼：

<?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>