Css打造伸縮時間軸樣式的WordPress歸檔頁面archive.php

archive.php檔案 又稱文章歸檔頁面，在WordPress中，文章歸檔頁面是一個非常重要的頁面，特別是當你的wordpress網站文章很多的時候，它將文章以年月日的分類方式對文章進行歸類，可以讓讀者很方便的迅速找到某年某日的文章，現在，很多博客，比如騰訊微博，QQ空間都有時間軸的顯示方式，今天我們用也用時間軸的形式來記錄顯示我們的wordpress網站文章歸檔頁面，并且加入伸縮功能，首先看看效果：

1、在我們的主題更目錄下建立archive.php(文章歸檔頁面)
輸入以下代碼：

<?php
/**
 * The template for displaying archive pages
 * BootstrapWp 0.1
 */
get_header(); ?>
<div class="container">
<div class="archives">
<?php
			$previous_year = $year = 0;
			$previous_month = $month = 0;
			$ul_open = false;
			$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
				foreach($myposts as $post) :
				setup_postdata($post);
			$year = mysql2date('Y', $post->post_date);
			$month = mysql2date(‘n’, $post->post_date);
			$day = mysql2date('j', $post->post_date);
				if($year != $previous_year || $month != $previous_month) :
				if($ul_open == true) :
				echo '</ul>';
				endif;
				echo '<h4 class="m-title">'; echo the_time('Y-m'); echo '</h4>';
				echo '<ul class="archives-monthlisting">';
				$ul_open = true;
				endif;
			$previous_year = $year; $previous_month = $month;
			?>
			<li>
			<a href="<?php the_permalink(); ?>"><span><?php the_time('Y-m-j'); ?></span>
			<div class="atitle"><?php the_title(); ?></div></a>
			</li>
			<?php endforeach; ?>
			</ul>
			</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

由于主題是采用了Bootstrap框架所以加了，

<div class="container">

根據你自己的主題，可以選擇適當的布局，
2、打開主題根目錄下的style.css檔案，加入以下css代碼

/*
 * 文章歸檔頁面樣式
 */
.archive-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px} 
.archives li{list-style-type:none}
.archives li a{padding:8px 0;display:block}
.archives li a:hover .atitle:after{background:#ff5c43}
.archives li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px}
.archives li a .atitle{display: inline-block;padding:0 15px;position:relative}
.archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}
.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}
.archives{position:relative;padding:10px 0}
.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:130px;content:"";top:0}
.m-title{position:relative;margin:10px 0;cursor:pointer} 
.m-title:hover:after{background:#ff5c43}
.m-title:before{position:absolute;left:127px; background:#fff; height:18px;width:18px;border-radius:6px;top:3px;content:""}
.m-title:after{position:absolute;left:127px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}

如果你引入以上CSS顯示效果錯亂的話，那么你就得調整上面的css布局了，
3、點擊年月實作伸縮功能的話需要引入以下js

$('.archives ul.archives-monthlisting').hide();
$('.archives ul.archives-monthlisting:first').show();
$('.archives .m-title').click(function() {
    $(this).next().slideToggle('fast');
    return false;
});

如何你對Wordpress引入js有困惑的話，建議你閱讀 WordPress引入css/js兩種方法，如果你不想使用 伸縮功能的話，也可以采用分頁的技術處理你的歸檔頁面，

您可能感興趣的文章:

? 利用Bootstrap構建你的回應式WordPress主題( 五）

? wordpress把JavaScript files 移動到HTML檔案底部

? wordpress主題開發集成影像延遲加載

? 純css實作指向圖片放大

? 第三課511遇見WordPress主題開發教程基本檔案的建立

? WordPress 快速添加友情鏈接的另類方法

? 第十課:wordpress主題制作主題布局

? Html5設計程序中必須遵循的幾個原則

? wordpress限制非管理員訪問管理面板

? WordPress函式：comment_form() 讓你的 WordPress 評論表單隨心所愿