蜗牛789
主机测评与优惠

#转载#通过修改代码来实现DUX主题首页添加自定义文章列表模块



提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议现在本博客搜索商家名称,先充分了解商家动态。
交流:蜗牛粉丝QQ群号1074630828、软文投稿QQ群123345557(进群后投稿每篇5元 原价100元/篇)。
文章目录

大前端DUX主题设计简单美观,使用比较方便,确实深受一些用户的喜爱。目前蜗牛789使用的就是DUX主题,所以对于DUX主题的修改关注的比较多。今天看到@蝈蝈要安静博客发布了一个通过代码修改在DUX主题首页添加自定义文章列表的方法,简单、实用,于是把方法转载过来了。对修改DUX感兴趣的朋友可以多关注下蝈蝈要安静博客,博主经常会发布一些修改主题的原创文章。说修改方法之前,大家先看一下效果,觉得符合自己要求再使用。

如上图红框内的显示效果,大家可以通过此文章的修改方法来实现。好处是首页显示的文章,自己通过后台主题设置就可以进行指定,灵活性很高,并且列表标题、文章标签名字都可以根据自己需要进行修改。

下面进入主题,以上的功能如何实现。

一、添加文章列表功能

首先我们找到DUX主题当中的“option.php”文件,把下面代码复制到option.php文件当中,就在DUX主题设置页面添加了一个“首页文章列表”功能。

$options[] = array(
 'name' => __('首页文章列表', 'haoui'),
 'type' => 'heading' );
 
 $options[] = array(
 'name' => __('自定义文章列表', 'haoui'),
 'id' => 'qgg_diy_postlist_open',
 'std' => true,
 'desc' => __('开启', 'haoui'),
 'type' => 'checkbox');
 
 $options[] = array(
 'name' => '自定义文章列表标题',
 'desc' => '',
 'id' => 'qgg_diy_postlist_title',
 'std' => '特别推荐文章列表',
 'type' => 'text');
 
 $options[] = array(
 'name' => '自定义文章列表标签',
 'desc' => '',
 'id' => 'qgg_diy_postlist_lable',
 'std' => '特别推荐',
 'type' => 'text');
 
 $options[] = array(
 'name' => '自定义文章列表',
 'desc' => '每行一条,回车换行即可。',
 'id' => 'qgg_diy_postlist',
 'std' => '<p>右侧提示内容</p><a href="https://www.wn789.com/16941.html">最低1核512M内存/28.19美元/年</a>',
 'type' => 'textarea');

二、新增一个文件

作者为了方便管理,大家使用起来方便,把将显示的主要代码封装在了一个PHP文件中,你可以将以下代码复制保存为一个名为qgg_diy_post_list.php的文件中或者直接点击这里下载qgg_diy_post_list成品文件。并且把此文件放到主题的modules文件夹中。

<section>
    <?php
        echo '<div class=title><h3>'._hui('qgg_diy_postlist_title').'</h3></div>'
    ?>
    <div class="qgg_diy_postlist">
        <div style="list-style: none;">
        <?php $sitemsg = explode(PHP_EOL,_hui('qgg_diy_postlist'));
        foreach ($sitemsg as $value) {
            echo '<li><span class="qgg_diy_postlist_lable">'._hui('qgg_diy_postlist_lable').'</span>&nbsp&nbsp'.stripslashes($value).'</li>';
        } 
        ?>
        </div>
    </div>
</section>

三、添加首页显示调用

在主题index.php文件当中添加下面显示调用代码,具体添加到什么位置,大家可以根据自己需要放置到适当位置即可。

<!--自定义文章列表--> 
<?php 
    if( _hui('qgg_diy_postlist_open') ){
        _moloader('qgg_diy_post_list');
    }
?>

四、美化显示效果

在主题的”main.css”文件当中添加下面代码。然后清除本地浏览器缓存,你就可以看到如文章开头一样的显示效果了。

/*自定义文章列表样式*/
.qgg_diy_postlist_lable{
    line-height: 1;
    padding: 7px;
    font-size: 14px;
    background-color: #FF5E52;
    color: #fff;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    margin-left: 5px;
}
.qgg_diy_postlist{
    background:#FFF;
    padding:10px 20px;
    margin:10px 0px;
    border-radius:4px;
}
.qgg_diy_postlist li{
    margin:5px 3px;
    white-space: nowrap; 
    overflow: hidden; 
    clear: both;
    text-overflow: ellipsis;
}
.qgg_diy_postlist li p{
 line-height: 1.8;
 font-size: 12px;
 color:#AAA;
 float: right;
}

2018.4.23更新:

作者对显示样式做了修改,显示效果如下图。主要修改了CSS样式文件,目前蜗牛已经把代码加到了原来的样式代码当中。另外显示如下图红框内容,需要在后台添加文章列表时使用下面代码:

1、“<p> </p>”之间填写你要显示的右侧提示内容。

2、“<a href=”http://www.wn789.com/”>蜗牛789 | 关注免费资源,用心与你分享</a>”。把下面代码中显示的“http://www.wn789.com/”地址改成你要显示文章的网址,“蜗牛789 | 关注免费资源,用心与你分享”修改成你要显示文章标题。

<p>右侧提示内容</p><a href="http://www.wn789.com/">蜗牛789 | 关注免费资源,用心与你分享</a>

DUX无限制版下载方法

蜗牛789博客DUX无限制版本下载方案,使用微信扫描下面二维码关注蜗牛789微信公众号。注意是关注微信公众号, 微信公众号每天晚上推送当日热门促销活动。然后在微信公众号回复“DUX主题”即可获取下载链接。

About 蜗牛

【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

赞(0) 打赏
未经允许不得转载:蜗牛789 » #转载#通过修改代码来实现DUX主题首页添加自定义文章列表模块
分享到: 更多 (0)


评论 1

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

    这个特别推荐标签的四个字怎么让他靠左边呢,看着怪怪的

    zyk2年前 (2019-10-24)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏