全百科精品资源分享
免费优质资源下载平台

WordPress纯代码美化DUX主题添加首页四栏推荐模块

纯代码为DUX主题添加首页四栏推荐模块是如何实现的,请跟随全百科一起来设置一下。

其实代码很简单,直接修改 options.php、 index.php、 html 代码和 css 代码即可!这里贴一张小编的修改后的效果图,如果觉得可以,那就动手折腾起来吧!

纯代码为DUX主题添加首页四栏推荐模块

纯代码为DUX主题添加首页四栏推荐模块

1.添加 options.php 代码

在主题根目录的 options.php 文件中 return $options; 代码前,添加下面代码:

 $options[] = array(
 'name' => __('首页四栏推荐', 'haoui'),
 'id' => 'wzk_diy_ad_open',
 'std' => true,
 'desc' => __('开启', 'haoui'),
 'type' => 'checkbox');
 
 $options[] = array(
 'name' => '首页四栏自定义',
 'id' => 'wzk_diy_ad',
 'std' => '<div class="asb asb-indexd asb-indexd-01"><div class="container">
          <ul class="eboxx">
              <li class="eboxx-i eboxx-01">
                <h4>全百科</h4>
                <p>一个不学无术的伪程序员</p>
                <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.quanbaike.com">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-02">
                <h4>全百科</h4>
                <p>一个追梦的地方</p>
                <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.quanbaike.com">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-03">
                <h4>全百科</h4>
                <p>一个不学无术的伪程序员</p>
                <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.quanbaike.com">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-04">
               <h4>全百科</h4>
                <p>一个追梦的地方</p>
                <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.quanbaike.com">访问网站</a>
              </li>
            </ul>
          </div></div>',
 'type' => 'textarea');

添加完上面代码就可以后台的 DUX 主题设置选项里中会出现首页四栏推荐板块。

2. html 代码

将下面代码复制到后台 DUX 主题设置选项里的 “首页四栏自定义” 的代码框中(只有已经添加第三步 options.php 代码,后台才会有这个选项)!

<!--首页4栏-->	
<div class="home-firstitems">
	<div class="containerphl">
		<ul>
			<li>
				<a href="http://www.quanbaike.com" target="_blank" rel="nofollow">
					<i class="fa fa-bell" aria-hidden="true"></i>
					<strong>观点</strong>
					<p>我不赞成你的观点,但我捍卫你说话的权利</p>
					<span class="btn btn-primary">观点</span>
				</a>
			</li>
			<li>
				<a href="http://www.quanbaike.com" target="_blank" rel="nofollow">
					<i class="fa fa-picture-o" aria-hidden="true"></i>
					<strong>微讨论</strong>
					<p>讨论的目的是交流思想,不是衡量不同观点的优劣</p>
					<span class="btn btn-primary">微讨论</span>
				</a>
			</li>
			<li>
				<a href="http://www.quanbaike.com" target="_blank" rel="nofollow">
					<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
					<strong>为你写诗</strong>
					<p>有些美好根植于心,有些诗意成为生命的一部分</p>
					<span class="btn btn-primary">为你写诗</span>
				</a>
			</li>
			<li>
				<a href="http://www.quanbaike.com" target="_blank" rel="nofollow">
					<i class="fa fa-tree" aria-hidden="true"></i>
					<strong>百科职场</strong>
					<p>职场或情场,你的核心竞争力永远是你自身的价值</p>
					<span class="btn btn-primary">直达链接</span>
				</a>
			</li>
		</ul>
	</div>
</div>

3. 添加 css 代码

在 main.css 中添加下面代码:

/*首页四栏*/
.home-firstitems{margin-top:3px;border:1px solid #eaeaea;padding:10px 0px 10px 0px;overflow:hidden;background-color:#fff;margin-bottom:15px;border-radius:4px;}
.home-firstitems ul{text-align:center;border-right:1px solid #eee;overflow:hidden}
.home-firstitems ul li{float:left;width:25%;border-left:1px solid #eee;padding:20px 20px;height:135px;overflow:hidden}
.home-firstitems ul li a{display:block;position:relative;top:0;-webkit-transition:top .28s ease-in-out;transition:top .28s ease-in-out}

.home-firstitems ul li a .fa{font-size:3rem;font-weight:200;margin-bottom:10px;color:#55595c;opacity:1;-webkit-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}
.home-firstitems ul li a strong{display:block;color:#55595c}

.home-firstitems ul li a p{color:#999;margin:5px 0 20px}
.home-firstitems ul li a:hover{top:-60px}
.home-firstitems ul li a:hover .fa{opacity:0}
@media (max-width: 991px){.home-firstitems{display:none}}

4. 调用上面代码

在 index.php 中的适当位置添加下面代码:

<?php 
    if( _hui('wzk_diy_ad_open') ){
        echo _hui('wzk_diy_ad');
    }
?>

注意:加了缓存插件或者 CDN 的同学,清理缓存刷新页面后,就可看到自己设置的样式了!

WordPress纯代码美化DUX主题添加首页四栏推荐模块

WordPress纯代码美化DUX主题添加首页四栏推荐模块

教程结束!小伙伴们可以刷新看看效果了,真的蛮好看的!

Download Nulled WordPress Themes
Download Nulled WordPress Themes
Download Best WordPress Themes Free Download
Download WordPress Themes
online free course
download intex firmware
Download Nulled WordPress Themes
free download udemy paid course

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0) 打赏
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » WordPress纯代码美化DUX主题添加首页四栏推荐模块
分享到: 更多 (0)

评论 抢沙发

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

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

支付宝扫一扫打赏

微信扫一扫打赏