多年手赚资深者
免费分享各种手赚软件与线报

dux主题网赚博客如何增加首页自定义推荐文章板块

dux主题原本的模板是没有首页自定义推荐文章板块的,而我看很多网赚博客的网站都有类似的自定义文章推荐,有的是主题自带的,有的是自己加代码的,添加上这种自定义文章推荐可以大大的增加自己想要重点推荐的项目的曝光率,而且也可以填补dux主题首页前面空荡荡的页面,前面我给大家分享过《网赚博客应该怎么样添加热门推荐文章排行榜》的文章,主要是根据阅读量或者评论数从数据库中直接调取相应文章,后来我觉得这样首页太长了,如果想要看最新文章的发布,还要往下拉一下,所以把它给删了,但我不需要不代表别人不需要,有兴趣的可以去瞧瞧,两种文章推荐方式大家可以根据自己的需求添加一种或者两种都添加,我们来看看自定义文章推荐的前端显示:

我的推荐活动只有三个,当然你可以自己调整,三个五个七个都可以,这个不影响什么的,看个人喜好,至于我什么只有三个,是因为我文章还不多,所以还没有来得及增加。

前端的样式就如上图显示的一样,可能并不符合你的眼光,大家有需要的话可以自行调整下。如果按照下面的修改流程操作的话后台会显示一个自定义文章后台面板,这个后台面板位于后台主题设置的熊掌号后面,后台面板有三个选项,分别用于设置标题、标签及自定义文章。后台界面如下图所示:

由于目前我所使用的是WordPress下的DUX 主题,一切修改以dux主题为准,WordPress的修改大同小异,其他程序的修改大家见机行事,因为我也是个代码小白

此次对主题的修改操作主要涉及 options.php、index.php以及css文件夹中的main.css,并且我们需要新建一个名为 qgg_diy_post_list.php 的php文件填写相关代码丢到主题的modules文件加下,在主题修改之前还是提醒大家备份一下相关文件以防误操作引起的网站崩溃。

接下来下面手赚线报网简单说下增加自定义文章的修改流程:

添加自定义文章后台选项

将以下代码添加到主题的 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="https://www.wszqz.com/">点击这里</a> 进行留言。',
 'id' => 'qgg_diy_postlist',
 'std' => '<p>右侧提示内容</p><a href="https://www.wszqz.com/">手赚线报网 | 免费分享各种手机赚钱软件与网上赚钱项目</a>',
 'type' => 'textarea');

新增 qgg_diy_post_list.php 文件

将显示的主要代码封装在了一个 PHP 文件中,你可以将以下代码复制保存为一个名为 qgg_diy_post_list.php 的文件中,这个把黑色框内的代码要复制完全哦。

<!-- 自定义文章列表模块 手赚线报网 | https://www.wszqz.com -->
<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>

文件丢到dux主题下的 modules 文件夹中。这里分享一个小窍门,不会PHP文件,可以桌面新建文本文档然后上述代码复制到文档里,文档名重名为qgg_diy_post_list.php ,实在不会还可以直接下载一个PHP文件,然后把内容和文件名改了就成。

前端显示代码

在主题的 index.php 文件中添加如下代码,具体位置自行选择。

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

CSS样式美化

这是我目前所使用的样式代码,当然你也可以自行调整。

/*自定义文章列表样式*/
.qgg_diy_postlist_lable{
    line-height: 1;
    padding: 6px;
    font-size: 12px;
    background-color: #FF5E52;
    color: #fff;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    margin-left: 5px;
}
.qgg_diy_postlist{
    background:#FFF;
    padding:9px 18px;
    margin:9px 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;
}

如果你是虚拟主机和服务器,可以FTP上传PHP文件或者修改文件代码很方便,具体的FTP软件百度搜索有很多就不过多介绍了,如果你安装了宝塔面板,那就更方便了,直接在【文件】上传PHP文件或者修改文件代码就行了。

最后,完成以上四个修改步骤就可以在首页显示自定义文章列表了,然后大家可以在后台根据自己的需要添加内容,具体的内容大家可以仿照后台自定义文章列表里的内容,或者来我的网站看看我的推荐内容,然后按照格式回到自己的网站修改即可。

赞(0) 打赏
未经允许不得转载:手赚线报网 » dux主题网赚博客如何增加首页自定义推荐文章板块
分享到: 更多 (0)

评论 抢沙发

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

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

支付宝扫一扫打赏

微信扫一扫打赏