前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >DUX 主题 3.0 添加首页置顶文章过程记录

DUX 主题 3.0 添加首页置顶文章过程记录

作者头像
魏艾斯博客www.vpsss.net
发布2018-06-01 15:51:46
1.1K3
发布2018-06-01 15:51:46
举报

魏艾斯博客使用的是 DUX 主题 3.0 版本,这款主题看着蛮大气,适合科技类博客使用。现在最新 5.0 版本支持首页文章置顶。那么这个功能如何用在 3.0 版本上呢?当然是需要添加一部分代码来实现了,也不是很难,动动手分分钟就可以拥有这个功能了,也就有了DUX 主题 3.0 添加首页置顶文章过程记录。

置顶文章的方法是用 get_option(‘sticky_posts’) 从数据库获取设置置顶的文章,然后在首页显示出来。本文代码来源于@蝈蝈要安静 https://blog.quietguoguo.com/2268.html,操作期间还有一点分页显示方面的小问题,老魏反映给作者后,也解决掉了。

改动代码之前请务必先备份网站文件和数据库,无论新手老鸟,备份是你敢于折腾的前提,不啰嗦马上开始操作。

1、添加设置选项

首先要在 wodpress 后台里添加关于 DUX 主题首页显示置顶文章的代码。在 dux 主题文件夹下面的 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');

2、修改 index.php 代码

我们要把 DUX3.0 版本 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' ); ?>

以上代码替换成以下代码:

<?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' );
?>

这里代码中有关首页文章显示数量的设置是在 WordPress 后台“/设置/阅读/博客页面至多显示”。

3、修改 excerpt.php 代码

修改 index.php 文件是获取数据库的置顶文章并在首页显示,不过没有明显标识,如果你想让大家知道这是置顶文章,就需要添加上置顶标识。把下面代码添加到 dux 主题 excerpt.php 文件的 echo ‘</header>’; 代码上面。

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

4、添加 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;
}

最后出来的效果大家可以查看魏艾斯博客首页置顶文章就明白了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-04-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档