人氣 5996°c

WP建立文章彙整頁

WordPress的彙整放在頁面的側邊欄,感覺不友好而且太單調了,每次瀏覽文章增加伺服器的加載負擔。

讀者想按月份瀏覽文章或想快速閱讀文章,不妨建立獨立的文章彙整頁,增加Blog博客的閱讀體驗。

除了以上的幾點外,手機用戶也可以切換到文章彙整頁,通過標題導覽的效果,打開頁面就能夠很方便地閱讀文章了。

小篇最近Google一下!看到有部份網站建立文章彙整頁,用作HTTP 404錯誤頁提示,也是非常不錯的技巧唷....!

文章彙整頁教學:

1. 首先在WP風格主題建立一份單頁模板文件,例如: archives.php,文件內容輸入以下的代碼,然後使用FTP上傳文件。

2. 在網站的管理控制台 >> 頁面 >> 新增頁面 >> 標題:文章彙整(Archives) >> 固定網址:archives >> 在右邊欄選擇:文章彙整頁 >> 按:更新

<?php
/*
Template Name: 文章彙整頁
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<meta name="keywords" content="彙整,歸檔,文章彙整,內容歸檔,Archives" />
<meta name="description" content="文章彙整﹑內容歸檔" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
body {
background:#272727;
}
img {
border:none;
}
.mc_archive {
margin:1.5em 0;
}
.mc_archive a {
color:#C4E1FF;
outline:medium none;
text-decoration:none;
}
.mc_archive a:hover {
background-color:#d54e21;
color:#fff;
}
.mc_archive .mc_linone {
list-style-type:none;
margin:10px 0 0 20px;
color:#fff;
font-size:14px;
}
.mc_archive h3 {
border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
background-color:#fff;
color:#000;
cursor:move;
padding:5px;
margin-top:3px;
}
.mc_archive ul li {
list-style:circle;
margin:10px 0;
text-indent:8px;
color:#F5FFE8;
}
</style>
<div class="mc_archive">
<div class="mc_linone">您現在的位置: <a href="./" title="月光部落">主頁</a> &raquo; 頁面: <?php the_title('<b>', '</b>'); ?>
<p><a href="#" id="control">全部展開 / 收起</a> - 文章共有: <?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?> 篇
</p>
</div>
<?php
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
?>
<?php foreach($myposts as $post) : ?>
<?php
setup_postdata($post);
$year = mysql2date('Y', $post->post_date);
$month = mysql2date('n', $post->post_date);
$day = mysql2date('j', $post->post_date);
?>
<?php if($year != $previous_year || $month != $previous_month) : ?>
<?php if($ul_open == true) : ?>
</ul>
<?php endif; ?>
<h3><?php the_time('Y年 m月'); ?></h3>
<ul>
<?php $ul_open = true; ?>
<?php endif; ?>
<?php $previous_year = $year; $previous_month = $month; ?>
<li><span><?php the_time('m-d'); ?> : <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>
<?php endforeach; ?>
</ul>
<span class="mc_linone"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> - <a href="http://www.addus.info" title="聯絡我們 | Contact US" target="_blank">聯絡我們</a> - <span class="scrolltop" onclick="window.scrollTo(0,0);" title="回頂部" style="cursor:pointer"><b>TOP</b></span></span>
</div>
<script type="text/javascript">
jQuery(function($){
$('.mc_archive ul:gt(1)').hide();//第0和1 列默認顯示,其他默認隱藏
$('.mc_archive h3').click(function() {//點擊標題動作
$('.mc_archive ul').slideUp(300);//展開選擇列
$(this).next('ul').slideDown(500);//縮放同級其他元素
});
//一下是全局的操作
$('#control').toggle(
function(){
$('.mc_archive ul').slideUp();
},
function(){
$('.mc_archive ul').slideDown();
});
});
</script>
</body>
</html>

彙整頁演示︰ https://www.moonlol.com/archives

相關文章:
Dagon Design Sitemap Generator不生成空白問題
標籤: