dux主题首页添加自定义文章列表模块

dux主题首页添加自定义文章列表模块

许多的wordpress的模板挺好看的,例如Dux这种,不过就是少个文章列表,这里分享一下如何给wordpress添加自定义文章列表功能。

dux主题首页添加自定义文章列表模块

再此之前有发过“大前端DUX主题首页添加文章列表模块:设置热门文章”这么一篇文章,就算不是Dux主题其他的wordpress主题也都适用。

不过目前只能是根据阅读量或者评论数从数据库中直接调取相应文章,不够灵活,所以今天来分享如何自定义添加wordpress首页文章列表的代码教程。

wordpress首页添加自定义文章列表模块

这里分享的代码教程不仅仅只适用于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’ => ‘每行一条,回车换行即可。不明白?点击这里 进行留言。’,
‘id’ => ‘qgg_diy_postlist’,
‘std’ => ‘新哥博客:wuzuowei.net’,
‘type’ => ‘textarea’);

新增 qgg_diy_post_list.php 文件

为了方便管理,这里将显示的主要代码封装在了一个 PHP 文件中,你可以将以下代码复制保存为一个名为 qgg_diy_post_list.php 的文件中。

<!– 自定义文章列表模块 –>
<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;
}
到这里文章列表就增加完毕了。

增强功能:新增右侧自定义提示信息

总感觉文章列表右侧空荡荡的,于是决定给右侧加些自定义的内容,其实也只是修改了下样式代码,修改完成后如下所示:

修改方法:就是在原有css样式代码的基础上添加下面这段代码:

.qgg_diy_postlist li p{
line-height: 1.8;
font-size: 12px;
color:#AAA;
float: right;
}
到这里文章列表就增加完毕了。

增强功能:新增右侧自定义提示信息

dux主题首页添加自定义文章列表模块

总感觉文章列表右侧空荡荡的,于是决定给右侧加些自定义的内容,其实也只是修改了下样式代码,修改完成后如下所示:

修改方法:就是在原有css样式代码的基础上添加下面这段代码:

.qgg_diy_postlist li p{
line-height: 1.8;
font-size: 12px;
color:#AAA;
float: right;
}
修改完成后后台文章列表以如下形式添加(每行一个):

<p>右侧提示内容</p><a href=”https://www.xingeblog.com/”>新哥博客</a>

本文来源:新哥博客 https://www.xingeblog.com/
本文标题:dux主题首页添加自定义文章列表模块
本文链接:https://www.xingeblog.com/232.html
1. 本站所有资源来源于用户上传或网络,仅作为参考研究使用,如有侵权请邮件联系站长!
2. 本站VIP获取途径以及用途的解读,想在本站混的好,请务必认真阅读!
3. 本站强烈打击盗版/破解等有损他人权益和违法作为,请各位会员支持正版!谢谢!^^
0

评论0

  • 昵称
  • 邮箱
  • 网址
没有账号? 注册忘记密码?
'); })();