www.aiyixun.com
原创汉服设计稿交易平台

worspress主题 大前端DUX2023版 首页添加自定义文章列表模块

大前端DUX主题设计简单美观,使用比较方便,确实深受一些用户的喜爱。

一个通过代码修改在DUX主题首页添加自定义文章列表的方法,简单、实用。

说修改方法之前,大家先看一下效果,觉得符合自己要求再使用。

 

 

如上图红框内的显示效果,大家可以通过此文章的修改方法来实现。好处是首页显示的文章,自己通过后台主题设置就可以进行指定,灵活性很高,并且列表标题、文章标签名字都可以根据自己需要进行修改。

下面进入主题,以上的功能如何实现。

一、添加文章列表功能

首先我们找到DUX主题当中的“option.php”文件,把下面代码复制到option.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' => '

<p>右侧提示内容</p><a href="http://aqlxo.yhzu.cn\">专门为您省钱的网站,每日更新天猫淘宝大额优惠券,领券狂省低至1折</a>', 'type' => 'textarea');

 

二、新增一个文件

作者为了方便管理,大家使用起来方便,把将显示的主要代码封装在了一个PHP文件中,你可以将以下代码复制保存为一个名为qgg_diy_post_list.php的文件中或者直接点击这里下载qgg_diy_post_list成品文件。并且把此文件放到主题的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');
}
?>

2023.11.23更新:

作者对显示样式做了修改,显示效果如下图。主要修改了CSS样式文件,目前蜗牛已经把代码加到了原来的样式代码当中。另外显示如下图红框内容,需要在后台添加文章列表时使用下面代码:

1、“<p> </p>”之间填写你要显示的右侧提示内容。

2、“<a href="http://aqlxo.yhzu.cn">省钱快报-全网真折扣,超过1亿消费者选择省钱快报</a>”。把下面代码中显示的“href="http://aqlxo.yhzu.cn”地址改成你要显示文章的网址,“省钱快报-全网真折扣,超过1亿消费者选择省钱快报”修改成你要显示文章标题。

 

<p>省钱快报</p><a href="http://aqlxo.yhzu.cn">省钱快报-全网真折扣,超过1亿消费者选择省钱快报</a>
<p>汉服特卖</p><a href="http://aqlxo.yhzu.cn/?r=/l&kw=%25E6%25B1%2589%25E6%259C%258D&origin_id=&sort=1">每日更新汉服特卖信息、天猫淘宝大额优惠券</a>
<p>今日特卖</p><a href="http://aqlxo.yhzu.cn">专门为您省钱的网站,每日更新天猫淘宝大额优惠券,领券狂省低至1折</a>
未经允许不得转载:爱衣讯 » worspress主题 大前端DUX2023版 首页添加自定义文章列表模块

相关推荐

  • 暂无文章

评论 抢沙发

评论前必须登录!