无作为
不仅仅是一种态度!

wordpress首页添加自定义文章列表模块_dux主题为例

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

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

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

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

这里分享的代码教程不仅仅只适用于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 rel="nofollow" href="https://www.wuzuowei.net/link?url=aHR0cDovL3d3dy53dXp1b3dlaS5uZXQ=">点击这里</a> 进行留言。',
'id' => 'qgg_diy_postlist',
'std' => '<a rel="nofollow" href="https://www.wuzuowei.net/link?url=aHR0cDovL3d3dy53dXp1b3dlaS5uZXQ=">无作为分享:wuzuowei.net</a>',
'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>

文件丢到主题下的 modules 文件夹中即可。

前端显示代码

在主题的 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;
}

修改完成后后台文章列表以如下形式添加(每行一个):

<p>右侧提示内容</p><a href="http://www.wuzuowei.net/">无作为分享</a>

更多美化修改或者意见,还原评论留言。


历史上的今天:
赞(7) 打赏
所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » wordpress首页添加自定义文章列表模块_dux主题为例

留下评论 抢沙发

无作为-不仅仅是一种态度

登录/注册广告合作

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

支付宝扫一扫打赏

微信扫一扫打赏