落尘之木
TO BE THE BEST!

DUX主题添加专题推荐小工具

今天在嗯哌网上看到一款专题推荐的小工具,自己很喜欢。随即学习了这款小工具并对其进行了简单的修改应用到了自己的网站上,前端显示效果如下图,大家如果喜欢的话可以按照下面的方法应用在自己的网站上。

这次主题修改的文件主要有main.css、widget-index.php以及添加的一个小工具文件widget-topics.php,大家在修改前做好备份,如果出现什么情况可直接替换避免网站崩溃。

main.css文件修改

DUX主题的核心CSS是main.css文件,不支持style.css文件,直接将下面代码复制到main.css文件末尾即可。对于其它主题可能只需要将CSS添加到style.css中即可,当然对于一些后台有输入CSS样式文本框选项的主题,直接复制以下代码添加到CSS样式文本框选项中也可。

    /* ebox =========================================== */
    .ebox {
    overflow:hidden;
    font-size:12px;
    text-align:center;
    background-color:#fff;
    }
    .ebox-i {
    position:relative;
    float:left;
    width:50%;
    padding:15px 15px 20px;
    background-color:#fff;
    color:#777;
    border-bottom:1px dashed #ddd;
    }
    .ebox-01,.ebox-03 {
    border-right:1px dashed #ddd;
    }
    .ebox-i:hover {
    background-color:#F9F9F9;
    }
    .ebox-100 {
    width:100%;
    margin-bottom:0;
    border-bottom:none;
    }
    .ebox-i::after {
    content:”;
    position:absolute;
    right:0;
    top:0;
    border-top:20px solid #ECF0F1;
    border-left:20px solid transparent;
    }
    .ebox-i p {
    height:36px;
    overflow:hidden;
    color:#bbb;
    }

 

widget-index.php文件修改

widget-index.php是DUX管理各种小工具的一个文件,添加专题推荐小工具我们需要在文件的$widgets = array()最后添加”topics”代码,编辑完成后的代码如下:

 $widgets = array(
 	'sticky',
	'statistics',
	'ads',
	'textads',
	'comments',
	'posts',
	'readers',
	'tags',
	'topics',
 );

 

widget-topics.php文件编辑

新建一个记事本文件并更改文件名及扩展名为widget-topics.php,使用Notepad++编辑并添加如下代码。保存完成后上传至DUX主题widget目录下即可。

<?php

class widget_ui_topics extends WP_Widget
{
	public function widget_ui_topics()
	{
		$widget_ops = array('classname' => 'widget_ui_topics', 'description' => '显示主题广告(包括富媒体)');
		$this->WP_Widget('widget_ui_topics', '专题推荐', $widget_ops);
	}

	public function widget($args, $instance)
	{
		extract($args);
		$title = apply_filters('widget_name', $instance['title']);
		$code = $instance['code'];
		echo $before_widget;
		echo '<h3>' . $title . '<h3>';
		echo '<div class="item">' . $code . '</div>';
		echo $after_widget;
	}

	public function form($instance)
	{
		$defaults = array('title' => '专题推荐', 'code' => '<ul class="ebox">
	<li class="ebox-i ebox-01">
		<h4>闲言碎语</h4>
		<p>没错,就只是闲言碎语而已</p>
		<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/gossip/">直达专题</a>
	</li>
	<li class="ebox-i ebox-02">
		<h4>Tips</h4>
		<p>各种IT相关小技巧收集整理</p>
		<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/tips/">直达专题</a>
	</li>
	<li class="ebox-i ebox-03">
		<h4>Linux</h4>
		<p>Linux系统及其周边常见问题全搜罗</p>
		<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/linux/">直达专题</a>
	</li>
	<li class="ebox-i ebox-04">
		<h4>Windows</h4>
		<p>全球最多用户使用系统常见问题搜罗</p>
		<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/wordpress/">直达专题</a>
	</li>
	<li class="ebox-i ebox-100">
		<h4>WordPress</h4>
		<p>一个注重美学、易用性和网络标准的个人信息发布平台<br>WP插件|WP主题|WP常见问题</p>
		<a class="btn btn-danger btn-sm" target="_blank" href="http://blog.quietguoguo.com/wordpress/">直达专题</a>
		<a class="btn btn-default btn-sm" href="http://blog.quietguoguo.com/">了解更多</a> 
	</li>
</ul>
');
		$instance = wp_parse_args((array) $instance, $defaults);
		echo '<p>' . "\r\n" . '<label>' . "\r\n" . '主题名称:' . "\r\n" . '<input id="';
		echo $this->get_field_id('title');
		echo '" name="';
		echo $this->get_field_name('title');
		echo '" type="text" value="';
		echo $instance['title'];
		echo '" class="widefat" />' . "\r\n" . '</label>' . "\r\n" . '</p>' . "\r\n" . '<p>' . "\r\n" . '<label>' . "\r\n".'	广告代码:' . "\r\n" . '<textarea id="';
		echo $this->get_field_id('code');
		echo '" name="';
		echo $this->get_field_name('code');
		echo '" class="widefat" rows="12" style="font-family:Courier New;">';
		echo $instance['code'];
		echo '</textarea>' . "\r\n" . '</label>' . "\r\n" . '</p>' . "\r\n" . '';
	}
}
?>

需要注意的是:如果你只是将widget-topics.php文件上传至widget目录下而没有在widget-index.php中添加上“topics”代码,刷新网站的时候会报500错误,所以一定要注意上述步骤及文件编码是否有误。

赞(3) 赞赏
落尘之木公众号
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《DUX主题添加专题推荐小工具》
文章链接:https://www.luochenzhimu.com/archives/3196.html
免责声明:根据我国《计算机软件保护条例》第十七条规定:“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24小时之内删除,否则后果均由用户承担责任。

相关推荐

评论 抢沙发

评论前必须登录!

 

您的支持将鼓励我们继续创作!

支付宝扫一扫打赏

微信扫一扫打赏