WordPress 小工具移植 Grace关注我们 么么哒

下边的教程和代码已经打包了公众号弹窗。

#css

首先还是css  放到你主题的style.css内

.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框架,它是可缩放的矢量图标,用户可以可以对图标的特性进行更改,比如…

#小工具代码

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弹窗和弹窗前端代码

<!--// zmki - 全屏弹窗组件开始 配合移植社交小工具使用 zmki.cn-->
<!--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- 全屏弹窗组件结束 配合移植社交小工具使用 zmki.cn -->

效果图

WordPress 小工具移植 AD广告展示&关注我们 源自日主题RIPRO&Grace模块-钻芒博客

弹出效果演示

WordPress 小工具移植 AD广告展示&关注我们 源自日主题RIPRO&Grace模块-钻芒博客

后台小工具

WordPress 小工具移植 AD广告展示&关注我们 源自日主题RIPRO&Grace模块-钻芒博客

本来加入后台小工具直接修改公众号二维码图片,奈何PHP类跨文件调用问题没解决。以后会了在说吧

WordPress 小工具移植 AD广告展示&关注我们 源自日主题RIPRO&Grace模块-钻芒博客
温馨提示:本文最后更新于2023-03-22 14:54:02,某些文章具有时效性,若有错误或已失效,请在下方留言或联系向日葵全家桶
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞1 分享
评论 抢沙发
头像
来说点什么吧!
提交
头像

昵称

取消
昵称表情代码图片

    请登录后查看评论内容