WordPress 小工具移植/添加关注我们小工具/公众号关注弹窗

WordPress 小工具移植/添加关注我们小工具/公众号关注弹窗

效果图: WordPress 小工具移植/添加关注我们小工具/公众号关注弹窗 关注我们 小工具移植

#css

首先还是css 放到你主题的style.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: 40%;
	left: 40%;
	z-index: 1002;
	/* 数字的大小指明了div的相对层,数字大的在上层 */
	overflow: auto;
}

	/*移动端自适应适配*/
@media (max-width:768px) {


	.white_content {
		border-radius: 20px;
		display: none;
		position: absolute;
		top: 35%;
		left: 30%;
		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;
	}
}

然后是小工具部分。这一块代码放到你主题下的小工具文件内,文件一般以widget_XXX.php 格式开头,如果不知道具体的位置,可以使用搜索功能!此部分图标引入了Material Design Icon图标,这里需要自行修改。一般的主题都是使用的FontAwesome图标,这里操作方法都一样!

#小工具代码

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:
		<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="mdi mdi-sina-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="mdi mdi-telegram"></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="mdi mdi-qqchat"></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="mdi mdi-email-outline"></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="mdi mdi-wechat"></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弹窗和弹窗前端代码

放到footer.php文件即可
<!--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='#' /> 
</div>
<div id="fade" class="black_overlay"  onClick="closeWindow()">
</div>
如果想要添加一些其它的什么可以自行修改!
分享到 :

发表评论

登录... 后才能评论