记录成长
分享快乐

DUX主题首页显示置顶文章

之前有网友跟我要这个功能,实在是忙于生计一直没有时间写这方面的文章,最近这两天闲暇下来总算是有些时间了,其实这个功能说简单也简单,基本思路就是通过 get_option(‘sticky_posts’) 从数据库中获取到设置置顶的文章,然后想办法在首页显示出来。DUX4.0版本主题作者已经更新了这个功能,我也就偷个懒直接将这个功能抽离出来给大家分享出来,在此感谢主题作者的代码。

还是要提醒一下,主题修改前请务必备份一下文件以防误操作引起的网站崩溃。下面说一下具体的实现方法。

添加后台设置按钮

主题后台选项的设置之前已经说过很多次了,并且我还写了 浅淡 WordPress 主题选项框架 Options Framework 这篇文章具体说了下,这里就不多说了,我们直接将下面的代码丢在主题的 options.php 文件中去就好:

$multicheck_nums = array(
    '1' => '1',
    '2' => '2',
    '3' => '3',
    '4' => '4',
    '5' => '5'
);
$options[] = array(
    'name' => __('首页最新发布显示置顶文章', 'haoui').' (v4.0+)',
    'id' => 'home_sticky_s',
    'type' => "checkbox",
    'std' => false,
    'desc' => __('开启', 'haoui'));

$options[] = array(
    'id' => 'home_sticky_n',
    'options' => $multicheck_nums,
    'desc' => __('置顶文章显示数目', 'haoui'),
    'type' => 'select');

注意,之前我们虽然也修改过 options.php ,但是没有设置过数组,这里为了后面设置方便添加了个数组 $multicheck_nums ,这个数组一定不能丢,否则会报错!

index.php文件修改

值得注意的是DUX4.0之前的版本首页提供了首页不显示“某分类”或“某ID”下文章的功能,该功能相关代码在 index.php 文件中,具体代码如下:

<?php  
$args = array(
    'ignore_sticky_posts' => 1,
    'paged' => $paged
);

if( _hui('notinhome') ){
    $pool = array();
    foreach (_hui('notinhome') as $key => $value) {
        if( $value ) $pool[] = $key;
    }
$args['cat'] = '-'.implode($pool, ',-');
}

if( _hui('notinhome_post') ){
    $pool = _hui('notinhome_post');
    $args['post__not_in'] = explode("\n", $pool);
}
query_posts($args);
?>
<?php get_template_part( 'excerpt' ); ?>

DUX主题4.0之后因为作者又加入了“首页是否显示置顶文章”的判断,所以我们需要将上述代码修改为如下这样:

<?php 
    $pagenums = get_option( 'posts_per_page', 10 );
    $offsetnums = 0;
    $stickyout = 0;
    if( _hui('home_sticky_s') && in_array(_hui('home_sticky_n'), array('1','2','3','4','5')) && $pagenums>_hui('home_sticky_n') ){
        if( $paged <= 1 ){
            $pagenums -= _hui('home_sticky_n');
            $sticky_ids = get_option('sticky_posts'); rsort( $sticky_ids );
            $args = array(
                'post__in'            => $sticky_ids,
                'showposts'           => _hui('home_sticky_n'),
                'ignore_sticky_posts' => 1
            );
            query_posts($args);
            get_template_part( 'excerpt' );
        }else{
            $offsetnums = _hui('home_sticky_n');
        }
        $stickyout = get_option('sticky_posts');
    }


    $args = array(
        'post__not_in'        => array(),
        'ignore_sticky_posts' => 1,
        'showposts'           => $pagenums,
        'paged'               => $paged
    );
    if( $offsetnums ){
        $args['offset'] = $pagenums*($paged-1) - $offsetnums;
    }
    if( _hui('notinhome') ){
        $pool = array();
        foreach (_hui('notinhome') as $key => $value) {
            if( $value ) $pool[] = $key;
        }
        if( $pool ) $args['cat'] = '-'.implode($pool, ',-');
    }
    if( _hui('notinhome_post') ){
        $pool = _hui('notinhome_post');
        $args['post__not_in'] = explode("\n", $pool);
    }
    if( $stickyout ){
        $args['post__not_in'] = array_merge($stickyout, $args['post__not_in']);
    }
    query_posts($args);
    get_template_part( 'excerpt' );
    _moloader('mo_paging');
?>

还需要说明一下的是,这里主题作者还顺便添加上了首页文章显示数量的设置 $pagenums = get_option( ‘posts_per_page’, 10 ); 该选项的设置不是在DUX主题设置中,而是在 WordPress 后台“/设置/阅读/博客页面至多显示”处进行设置。

excerpt.php文件修改

上面 index.php 文件的修改只是调取了数据库中设置的置顶文章并在首页做了个判断,但是我们发现虽然这样确实使得置顶文章显示在了首页文章列表的顶部,但是并没有什么标识显示这就是置顶文章,所以我们要为其添加上“置顶”的标识,具体添加方法可参照我之前写的 DUX主题为新发布的文章添加NEW图标 ,方法类似,这里将以下代码添加到主题excerpt.php 文件的  echo ‘</header>’; 代码之上就好。

if( _hui('home_sticky_s') && is_sticky() ){
    echo '<span class="sticky-icon">置顶</span>';
}

在 excerpt.php 文件中找到 _moloader(‘mo_paging’); 删除之。

添加CSS样式

最后将以下代码添加到 main.css 文件中,对“置顶”文字进行美化。

.sticky-icon{
    line-height: 1;
    padding: 4px 4px 3px;
    font-size: 12px;
    background-color: #FF5E52;
    color: #fff;border-radius: 2px;
    display: inline-block;
    position: relative;
    margin-left: 5px;
    top: -2px;
}

至此,DUX主题首页添加置顶文章显示完成。

2018年03月31日更新:发现分类页面底部分页丢失,将上述修改方式更改为删除上述index.php修改代码中 _moloader(‘mo_paging’); 保留excerpt.php的_moloader(‘mo_paging’);

赞(7) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » DUX主题首页显示置顶文章
分享到: 更多 (0)

评论 22

  • Q Q(选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #7

    可能感觉是我和你的版本不一样吧,我下载的是3.0的版本 ,哎 好喜欢这个,但是又设置不好 ,好尴尬11去买最新版本的吧,又没有那么多钱

    BuShiVIP--欢乐窦1个月前 (05-10)回复
  2. #6

    不知道是我设置的不对 还是怎么的 ,反正用你的教程 全都试了一下,没有一个可以正常使用啊 哎 太苦逼了 我都重复设置了两次 结果都不行 不能正常运行,不知道什么原因

    BuShiVIP--欢乐窦1个月前 (05-10)回复
  3. #5

    加了代码之后在哪里设置文章?只有开启选项和显示文章数目

    luochenzhimu2个月前 (04-24)回复
  4. #4

    我的网站www.vpsss.net上了SSL证书,但是右上角那个搜索按钮不好使了,点不开
    首页图文模式,图片没了,图片地址全都变成了https://www.vpsss.net/wp-content/themes/dux/img/thumbnail.png

    以上两个问题能帮忙看看如何解决吗?

    魏艾斯博客3个月前 (04-07)回复
  5. #3

    文章内容很好,很详细,谢谢博主。
    有一个问题求教博主,现在的列表无限加载,是PC和WAP同步的,有没有办法只让wap端无限加载?PC端不加载。

    Submit3个月前 (04-04)回复
  6. #2

    博主厉害了,你的文章内容很好,每次逛一逛都有新收获!

    无梦博客3个月前 (04-01)回复
  7. #1

    按照你这个教程添加完毕后,首页最下面出现两排翻页按钮,这是为什么呢?

    魏艾斯博客3个月前 (03-31)回复

蝈蝈要安静——一个不学无术的伪程序员!

联系我们给我留言

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏