额,事情是这样的,之前网站上分享过一篇 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://blog.quietguoguo.com">点击这里</a> 停止留言。', 'id' => 'qgg_diy_postlist', 'std' => '<a href="http://blog.quietguoguo.com">蝈蝈要安静 | 一个不学无术的伪程序员</a>', 'type' => 'textarea');
新增 qgg_diy_post_list.php 文件
为了便当管理,我这里将显现的主要代码封装在了一个 PHP 文件中,你能够将以下代码复制保管为一个名为 qgg_diy_post_list.php 的文件中,也能够从后面我提供的链接地址直接下载。
<!-- 自定义文章列表模块 蝈蝈要安静 | http://www.blog.quietguoguo.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>  '.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; }
2018年04月22日更新:新增右侧自定义提示信息
总觉得文章列表右侧空荡荡的,于是决议给右侧加些自定义的内容,其实也只是修正了下款式代码,修正完成后如下所示:
修正办法的话就是在原有款式代码的根底上添加下面这段代码:
.qgg_diy_postlist li p{ line-height: 1.8; font-size: 12px; color:#AAA; float: right; }
修正完成后后台文章列表以如下方式添加(每行一个):
<p>右侧提示内容</p><a href="http://blog.quietguoguo.com/">蝈蝈要安静 | 一个不学无术的伪程序员</a>
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
![头像](/wp-content/themes/zibll/img/avatar-default.png)