無作為
不僅僅是一種態度!

红运快三开奖一定牛一定牛:WordPress主題首頁添加最新更新文章列表功能

红运快三高手计划 www.syvwfz.com.cn 如何在WordPress的主題首頁添加一個最新文章列表的功能呢?

許多主題都無法直接顯示最新文章,特別是cms的主題,在首頁最開始往往都會顯示各種???。

那么自己添加一個最新文章列表就更加方便老用戶觀看了,這里分享的方法同樣適用于dux主題。

首頁添加最新文章列表

首先然我們開看看添加之后的效果圖吧:

這個列表顯示的地方大家可以自定義選擇。

教程開始

這里以dux主題為例,其他的主題一樣操作即可:

新建 module_recently_updated_posts.php 文件

新建一個名為 module_recently_updated_posts.php 的文件,然后復制以下代碼至文件中即可,注意選擇 UTF-8 編碼格式。

將保存后的文件丟到主題文件夾下,DUX 主題丟到 modules 文件夾下即可。

<?php
/**
* 無作為分享:红运快三高手计划 www.syvwfz.com.cn
*/

$num = QGG_Options('recently_updated_posts_num');
$days = QGG_Options('recently_updated_posts_days');
function recently_updated_posts($num = 5,$days = 7) { 
if( !$recently_updated_posts = get_option('recently_updated_posts') ) {
$i=0;
$args = array( 
'post__not_in' =>get_option('sticky_posts'),
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby'=> 'modified',
); 
query_posts($args);
while ( have_posts() && $i < $num ) : the_post();
if (current_time('timestamp') - get_the_time('U') > 60*60*24*$days) {
$i++;

$t1=get_the_modified_date("Y-m-d H:i:s");
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/86400;
if( $diff < 1){ 
$color = red;
} else {
$color = "";
} 

$the_title_value = get_the_title(); 
$recently_updated_posts.= '<li style="color:'.$color.';"><a style="color:'.$color.';" href="'.get_permalink().'" title="'.$the_title_value.'">'.$the_title_value.'</a><span style="color:'.$color.';"> 更新于:'.get_the_modified_time('Y.m.d').'</span></li>';
}
endwhile;
wp_reset_query();
if ( !empty($recently_updated_posts) ) update_option('recently_updated_posts', $recently_updated_posts);
}
$recently_updated_posts = ($recently_updated_posts == '') ? '<li>暫無最新更新文章</li>' : $recently_updated_posts;
echo '<div class="posts_list_block">
<div class="title"><h3>'.QGG_Options('recently_updated_posts_title').'</h3></div>
<div class="posts_list_block_bg"><ul>'.$recently_updated_posts.'</ul></div>
</div>';
}
recently_updated_posts($num,$days);

?>

代碼主要用于生成最近更新的文章列表,然后將其保存在名為 recently_updated_posts 的數據庫字段里,你可以在 wp_options 數據表里找到它。主要是為了減少數據庫查詢量而設置的。

functions.php 文件修改

由于上面生成的文章列表以靜態的形式保存在了 wp_options 數據表里,為了我們每次發布/更新文章后都能生成新的最新更新文章列表,需要清空原有 recently_updated_posts 字段信息并生成新的信息,所以需要將以下代碼丟到主題的 functions.php 文件中,以確保每次發布/更新文章時都能清空 recently_updated_posts 的字段信息。

//新發表文章/修改文章時清空 recently_updated_posts 選項
function clear_rup_cache() {
    update_option('recently_updated_posts', ''); 
}
add_action('save_post', 'clear_rup_cache');

options.php 文件修改

由于博客目前使用的主題采用的 然后我們修改下主題下的 Options Framework 做的后臺控制選項,所以我也基于此設置了對應的后臺選項。當然其他主題直接修改 module_recently_updated_posts.php 文件中的代碼以符合自己網站也是可以的。

// 首頁最新更新文章列表
$options[] = array(
'name' => __('最新更新文章', 'QGG'),
'desc' => __('開啟', 'QGG'),
'id' => 'recently_updated_open',
'std' => true,
'type' => 'checkbox');

$options[] = array(
'name' => __('最新更新文章-標題文字', 'QGG'),
'desc' => __('顯示在最新更新文章列表左上角的標題文字', 'QGG'),
'id' => 'recently_updated_posts_title',
'std' => __('最新更新文章', 'QGG'),
'type' => 'text');

$options[] = array(
'name' => __('最新更新文章-顯示文章數', 'QGG'),
'desc' => __('純數字,最多允許多少篇最新文章顯示', 'QGG'),
'id' => 'recently_updated_posts_num',
'std' => 5,
'class' => 'mini',
'type' => 'text'); 

$options[] = array(
'name' => __('最新更新文章-多少天外', 'QGG'),
'desc' => __('純數字,多少天以外的文章更新后才顯示。不明白?<a rel="nofollow" href="//www.syvwfz.com.cn/link?url=aHR0cHM6Ly9ibG9nLnF1aWV0Z3VvZ3VvLmNvbQ==">點擊這里</a> 進行留言。', 'QGG'),
'id' => 'recently_updated_posts_days',
'std' => 7,
'class' => 'mini',
'type' => 'text');

將以上代碼丟到 options.php 文件中去即可,修改完成后應該會在主題后臺看到如下選項:

控制前端顯示代碼
在主題的 index.php 文件中合適的位置插入如下代碼,注意代碼中的路徑改成第一步中 module_recently_updated_posts.php 文件的實際路徑。

<?php 
if( QGG_options('recently_updated_open') ){
include get_stylesheet_directory() . '/modules/module_recently_updated_posts.php';
}
?>

保存后臺配置選項,刷新首頁應該就能看到前端顯示的內容了。

CSS 樣式美化
默認的樣式不太好看,這里簡單美化一下,CSS 不合適的大家自行調整下即可。

/* 最新更新文章列表 */
.posts_list_block{
margin: 5px 0px; 
}
.posts_list_block_bg {
background:#FFF;
padding:1px 20px;
margin:10px 0px; 
border-radius:4px;
}
.posts_list_block_bg ul{
padding: 20px 10px;
list-style-position: inside !important; 
list-style: disc;
overflow: hidden;
}
.posts_list_block_bg li{
line-height: 24px;
white-space: nowrap; 
overflow: hidden; 
clear: both;
text-overflow: ellipsis;
}
.posts_list_block_bg ul>li>span{
color: #999;
font-size: 12px;
line-height: 24px;
float: right;
}

最后,為了避免復制代碼導致的錯誤,上面所有用到的代碼文后會提供下載。

歷史上的今天:
贊(42) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:红运快三高手计划 www.syvwfz.com.cn红运快三高手计划 » WordPress主題首頁添加最新更新文章列表功能

留下評論 搶沙發

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞