下边的教程和代码已经打包了公众号弹窗。
#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 -->
效果图
弹出效果演示
后台小工具
本来加入后台小工具直接修改公众号二维码图片,奈何PHP类跨文件调用问题没解决。以后会了在说吧
感谢您的来访,获取更多精彩文章请收藏本站。
© 版权声明
THE END
请登录后查看评论内容