wzxb44.com
有的不仅仅是兼职

DUX主题修改:首页添加自定义文章列表

最新手机赚钱平台推荐,长期更新!

看下面的图片:

很多和手机兼职网一样用DUX主题的朋友想在自己主题首页添加一些自定义文章(如上),方便推广或者放置一些优秀文章。那么要怎么做呢?今天君莫笑来给大家讲解一下!

注意:需要修改多个代码文件,害怕出错请提前备份!

添加后台选项

将以下代码添加到主题的 options.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' => '每行一条,回车换行即可。不明白?<a href="http://www.wzxb44.com">点击这里</a> 进行留言。',
 'id' => 'qgg_diy_postlist',
 'std' => '<a href="http://www.wzxb44.com">手机兼职网 | 就是那么爱瞎搞</a>',
 'type' => 'textarea');

新增 qgg_diy_post_list.php 文件

为了方便管理,我这里将显示的主要代码封装在了一个 PHP 文件中,你可以将以下代码复制保存为一个名为 qgg_diy_post_list.php 的文件中,也可以从后面我提供的链接地址直接下载。文件放到主题下的 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');
    }
?>

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;
}

/*上面的都完成了?最后一步就是把下面的代码放到DUX设置下的“君莫笑功能”选项卡下*/
<p>右侧提示内容</p><a href="http://www.wzxb44.com">手机兼职网 | 复制这些代码到“君莫笑功能”下</a>
赞(2) 打赏作者
转载请注明出处:手机兼职网 » DUX主题修改:首页添加自定义文章列表

评论 抢沙发

  • Q Q (选填)
  • 网址 (选填)
  • 昵称 (必填)
  • 邮箱 (必填)

手机兼职网 | 专注手机赚钱教学

散人研博客橘子云视频

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

支付宝扫一扫打赏

微信扫一扫打赏