日主题 PRO 广告小工具
AD广告移植自RIPRO，效果如下图。
代码:
提示，ripro广告小工具博主移植到日主题上，同宗的东西丢进去就能用。其他主题需要自己找对合适的位置。可能外层PHP还要补充一点。
#css
首先是样式，放到你主题的style.css内 注:css部分我有调整一些高度和行距字体等的值。日主题上显示更完美。
代码语言：javascript复制 /*添加AD小工具（移植自RIPRO）*/
.btn-outline {
color: #fff!important;
background-color: transparent!important;
border: 1px solid #fff!important;
margin-top: 15px;
}
.widget-adss {
overflow: hidden;
padding: 0!important;
border-radius: 0!important;
}
.widget-adss .asr {
display: block;
padding: 40px 15px;
text-align: center;
color: #fff !important;
background: #64ddbb;
border-radius:4px ;
}#小工具代码
放到日主题的/inc/codestar-framework/rizhuti下的widgets.rizhuti.php文件内
// CAO主题的广告展示小工具
CSF::createWidget('cao_widget_ads', array(
'title' => 'RIPRO-广告展示',
'classname' => 'widget-adss',
'description' => 'RIPRO主题的小工具，由钻芒博客移植',
'fields' => array(
array(
'id' => '_color',
'type' => 'color',
'title' => '背景颜色',
'default' => '#8d23dd',
),
array(
'id' => '_title',
'type' => 'text',
'title' => '主标题',
'default' => '向日葵全家桶',
),
array(
'id' => '_desc',
'type' => 'text',
'title' => '描述',
'default' => '聚合全网优质资源，尽在向日葵！',
),
array(
'id' => '_href',
'type' => 'text',
'title' => '链接地址',
'default' => 'http://www.K1v.cn/',
),
),
));
if (!function_exists('cao_widget_ads')) {
function cao_widget_ads($args, $instance)
{
echo $args['before_widget'];
// if ( ! empty( $instance['title'] ) ) {
// echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
// }
// start
$_color = $instance['_color'];
$_title = $instance['_title'];
$_desc = $instance['_desc'];
$_href = $instance['_href'];
echo '<div class="adsbg">';
echo '<a class="asr" href="'.$_href.'" target="_blank" style="background-color:'.$_color.'">';
echo '<h4 style="font-size: 20px;">'.$_title.'</h4>';
echo '<h5 style="font-weight: 100;">'.$_desc.'</h5>';
echo '<span class="btn btn-outline">立即查看</span>';
echo '</a>';
echo '</div>';
// end
echo $args['after_widget'];
}
}· · ·我是间隔符· · ·
Grace关注我们 小工具移植
移植自本站主题SUXING的Grace，效果就如本站一样，公众号弹窗用了之前写的一个。加略微修改，弹窗复习可参考
DIV JS CSS实现点击弹出图片效果
前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。 # ZMKI VLOG: VL…
下边的教程和代码已经打包了公众号弹窗。
#css
首先还是css 放到你主题的style.css内
代码语言：javascript复制.woff2) format('woff2'), url(//at.alicdn.com/t/font_235844_8ad82lt5grp.woff) format('woff'), url(//at.alicdn.com/t/font_235844_8ad82lt5grp.ttf) format('truetype'), url(//at.alicdn.com/t/font_235844_8ad82lt5grp.svg#iconfont) format('svg')
}
/*移植grace 关注我们 css开始*/
/*模块主体样式*/
.suxingme_social {
overflow: initial
}
.social-widget-link {
position: relative;
margin-bottom: 10px;
position: relative;
display: block;
font-size: 13px;
background: #fff;
color: #525252;
line-height: 40px;
padding: 0 14px;
border: 1px solid #DDD;
border-radius: 2px;
}
.social-widget-link-count i {
margin-right: 9px;
font-size: 17px;
vertical-align: middle
}
.social-widget-link-title {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
width: 100px;
text-align: center;
background: rgba(255, 255, 255, .08);
transition: width .3s;
border-radius: 0 3px 3px 0
}
.social-widget-link:hover .social-widget-link-title {
width: 116px
}
.social-widget-link a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.social-link-weibo {
border-color: rgba(236, 61, 81, .39)
}
.social-link-weibo i {
color: #ec3d51
}
.social-link-weibo .social-widget-link-title {
background-color: #ec3d51;
color: #fff
}
.social-link-tencent-weibo {
border-color: rgba(104, 166, 214, .39)
}
.social-link-tencent-weibo i {
color: #68a6d6
}
.social-link-tencent-weibo .social-widget-link-title {
background-color: #68a6d6;
color: #fff
}
.social-link-email {
border-color: rgba(42, 179, 154, .4)
}
.social-link-email i {
color: #2ab39a
}
.social-link-email .social-widget-link-title {
background-color: #2ab39a;
color: #fff
}
.social-link-qq {
border-color: rgba(18, 170, 232, .39)
}
.social-link-qq i {
color: #12aae8
}
.social-link-qq .social-widget-link-title {
background-color: #12aae8;
color: #fff
}
.social-link-wechat {
border-color: rgba(25, 152, 114, .4)
}
.social-link-wechat i {
color: #199872
}
.social-link-wechat .social-widget-link-title {
background-color: #199872;
color: #fff
}
/*//js全屏弹窗样式*/
.black_overlay {
display: none;
/*position: absolute;*/
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
z-index: 1001;
/*层*/
position: fixed;
/*背景层复合整屏*/
filter: alpha(opacity=50);
animation-duration: .5s;
-webkit-animation: fade-ins .5s;
}
/*控制文本*/
#light_weixin p {
position: fixed;
font-size: 28px;
color: #fff;
text-align: center;
margin-top: 230px;
}
/*控制图片*/
#light_weixin img {
position: fixed;
/*鼠标滚动我自岿然不动*/
border-radius: 10px;
/*圆角*/
max-height: 25%;
}
.white_content {
display: none;
position: absolute;
top: 30%;
left: 40%;
z-index: 1002;
/* 数字的大小指明了div的相对层，数字大的在上层 */
overflow: auto;
}
/*移动端自适应适配*/
@media (max-width:768px) {
.white_content {
border-radius: 20px;
display: none;
position: absolute;
top: 35%;
left: 25%;
background-color: #FFFFFF;
z-index: 1002;
overflow: auto;
}
#light_weixin img {
border-radius: 10px;
max-width: 50%;
}
#light_weixin p {
position: fixed;
font-size: 24px;
color: #fff;
text-align: center;
margin-top: 210px;
}
}
/*移植grace 关注我们 css结束 全*/然后是小工具部分
这一块代码放到你主题下的小工具文件内，一般在主题的/ing 文件夹下，文件一般以widget_XXX.php 格式开头
此部分图标引入了fontawesome图标，如果不显示图标请查看下边的文章引入（一般都带的）。
web开发中插入FontAwesome 图标字体库
Font Awesome是一套绝佳的图标字体库和CSS框架，它是可缩放的矢量图标，用户可以可以对图标的特性进行更改，比如…
#小工具代码
代码语言：javascript复制add_action('widgets_init', create_function('', 'return register_widget("suxingme_social");'));
class suxingme_social extends WP_Widget {
function __construct() {
$widget_ops = array( 'classname' => 'suxingme_social', 'description' => '集成社交网站链接入口，由钻芒博客移植适配' );
parent::__construct('suxingme_social', '关注我们 ', $widget_ops);
}
function widget($args, $instance) {
extract( $args );
$title = apply_filters('widget_name', $instance['title']);
$qq = $instance['qq'];
$sinaweibo = $instance['sinaweibo'];
$sinaweiboid = $instance['sinaweiboid'];
$mail = $instance['mail'];
$weixin = $instance['weixin'];
$tencent = $instance['tencent'];
$tencentid = $instance['tencentid'];
echo $before_widget;
echo $before_title.$title.$after_title;
echo suxingme_widget_social($title,$sinaweibo,$sinaweiboid,$tencent,$tencentid,$qq,$mail,$weixin);
echo $after_widget;
}
function form($instance) {
$instance = wp_parse_args( (array) $instance, array(
'title' => '关注我们 么么哒！',
)
);
$instance['sinaweibo'] = ! empty( $instance['sinaweibo'] ) ? esc_attr( $instance['sinaweibo'] ) : '';
$instance['sinaweiboid'] = ! empty( $instance['sinaweiboid'] ) ? esc_attr( $instance['sinaweiboid'] ) : '';
$instance['tencent'] = ! empty( $instance['tencent'] ) ? esc_attr( $instance['tencent'] ) : '';
$instance['tencentid'] = ! empty( $instance['tencentid'] ) ? esc_attr( $instance['tencentid'] ) : '';
$instance['qq'] = ! empty( $instance['qq'] ) ? esc_attr( $instance['qq'] ) : '';
$instance['mail'] = ! empty( $instance['mail'] ) ? esc_attr( $instance['mail'] ) : '';
$instance['weixin'] = ! empty( $instance['weixin'] ) ? esc_attr( $instance['weixin'] ) : '';
?>
<p style="clear: both;padding-top: 5px;">
<label>显示标题
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $instance['title']; ?>" />
</label>
</p>
<p>
<label> 微博ID：
<input id="<?php echo $this->get_field_id('sinaweiboid'); ?>" name="<?php echo $this->get_field_name('sinaweiboid'); ?>" type="text" value="<?php echo $instance['sinaweiboid']; ?>" class="widefat" />
</label>
</p>
<p>
<label> 微博链接（链接以http://开头）：
<input id="<?php echo $this->get_field_id('sinaweibo'); ?>" name="<?php echo $this->get_field_name('sinaweibo'); ?>" type="text" value="<?php echo $instance['sinaweibo']; ?>" class="widefat" />
</label>
</p>
<p>
<label> QQ微博ID：
<input id="<?php echo $this->get_field_id('tencentid'); ?>" name="<?php echo $this->get_field_name('tencentid'); ?>" type="text" value="<?php echo $instance['tencentid']; ?>" class="widefat" />
</label>
</p>
<p>
<label> QQ微博链接（链接以http://开头）：
<input id="<?php echo $this->get_field_id('tencent'); ?>" name="<?php echo $this->get_field_name('tencent'); ?>" type="text" value="<?php echo $instance['tencent']; ?>" class="widefat" />
</label>
</p>
<p>
<label> QQ客服号：
<input id="<?php echo $this->get_field_id('qq'); ?>" name="<?php echo $this->get_field_name('qq'); ?>" type="text" value="<?php echo $instance['qq']; ?>" class="widefat" />
</label>
</p>
<p>
<label> QQ邮箱地址：
<input id="<?php echo $this->get_field_id('mail'); ?>" name="<?php echo $this->get_field_name('mail'); ?>" type="text" value="<?php echo $instance['mail']; ?>" class="widefat" />
</label>
</p>
<p>
<label> 微信公众号ID（微信二维码请到js弹窗部分修改）：
<input id="<?php echo $this->get_field_id('weixin'); ?>" name="<?php echo $this->get_field_name('weixin'); ?>" type="text" value="<?php echo $instance['weixin']; ?>" class="widefat" />
</label>
</p>
<?php
}
}
function suxingme_widget_social($title,$sinaweibo,$sinaweiboid,$tencent,$tencentid,$qq,$mail,$weixin){
?>
<div class="attentionus">
<ul class="items clearfix">
<?php if( $sinaweibo ) { ?>
<span class="social-widget-link social-link-weibo"> <span class="social-widget-link-count"><i class="fa fa-weibo"></i><?php echo $sinaweiboid; ?></span> <span class="social-widget-link-title">新浪微博</span> <a href="<?php echo $sinaweibo ?>" target="_blank" rel="nofollow" ></a></span>
<?php } ?>
<?php if( $tencent ) { ?>
<span class="social-widget-link social-link-tencent-weibo"> <span class="social-widget-link-count"><i class="fa fa-tencent-weibo"></i><?php echo $tencentid; ?></span> <span class="social-widget-link-title">腾讯微博</span> <a href="<?php echo $tencent ?>" target="_blank" rel="nofollow" ></a> </span>
<?php } ?>
<?php if( $qq ) { ?>
<span class="social-widget-link social-link-qq"> <span class="social-widget-link-count"><i class="fa fa-qq"></i><?php echo $qq ?></span> <span class="social-widget-link-title">QQ号</span> <a href="http://wpa.qq.com/msgrd?v=3&uin=<?php echo $qq ?>&site=qq&menu=yes" rel="nofollow" ></a> </span>
<?php } ?>
<?php if( $mail ) { ?>
<span class="social-widget-link social-link-email"> <span class="social-widget-link-count"><i class="fa fa-envelope-o"></i><?php echo $mail ?></span> <span class="social-widget-link-title">QQ邮箱</span> <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=<?php echo $mail ?>" target="_blank" rel="nofollow" ></a> </span>
<?php } ?>
<?php if( $weixin ) { ?>
<span class="social-widget-link social-link-wechat"> <span class="social-widget-link-count"><i class="fa fa-weixin"></i><?php echo $weixin; ?></span> <span class="social-widget-link-title">微信公众号</span> <a id="contact_weixin" onclick="openWindow(this)" href="#"></a>
</span>
<?php } ?>
</ul>
</div>
<?php }?>最后就是 公众号JS和弹窗部分文件了，如果你不需要公众号弹出二维码图片，可以忽略这里。
公众号二维码图片修改下边源码里的链接即可。模仿日主题加入弹出延迟动画，修复了之前版本的全屏显示和滚动不跟随和移动端适配问题，如果要修改都在上边的css内
#js弹窗和弹窗前端代码
代码语言：javascript复制<!--// zmki - 全屏弹窗组件开始 配合移植社交小工具使用 zuanmang.net-->
<!--js部分-->
<script type="text/javascript">
function openWindow(obj){
var qq_or_weixin = "light_qq";
switch(obj.id)
{
case 'contact_weixin':
qq_or_weixin = "light_weixin";
break;
}
document.getElementById(qq_or_weixin).style.display='block';
document.getElementById('fade').style.display='block';
}
function closeWindow(){
document.getElementById('light_weixin').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<!--前端部分-->
<div id="light_weixin" class="white_content">
<!--二维码修改下边的链接-->
<img src='https://60yu.w4i.cn/2019/03/05/5c7de96bd4328.png' />
<p>关注我们的公众号</p>
</div>
<div id="fade" class="black_overlay" onClick="closeWindow()">
</div>
<!--//zmki- 全屏弹窗组件结束 配合移植社交小工具使用 zuanmang.net -->效果图
弹出效果演示
后台小工具
本来加入后台小工具直接修改公众号二维码图片，奈何PHP类跨文件调用问题没解决。以后会了在说吧
