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

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

日主题 PRO 广告小工具

AD广告移植自RIPRO,效果如下图。

代码:

提示,ripro广告小工具博主移植到日主题上,同宗的东西丢进去就能用。其他主题需要自己找对合适的位置。可能外层PHP还要补充一点。

#css

首先是样式,放到你主题的style.css内   注:css部分我有调整一些高度和行距字体等的值。日主题上显示更完美。

	/*添加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内

.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://a-oss.zmki.cn/2019/03/05/5c7de96bd4328.png' /> 
    <p>关注我们的公众号</p>
</div>
<div id="fade" class="black_overlay"  onClick="closeWindow()">
</div>

<!--//zmki- 全屏弹窗组件结束 配合移植社交小工具使用 zmki.cn -->

效果图

弹出效果演示

后台小工具


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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress添加友情链接-后台链接选项

    部分模板安装后后台会不显示链接。在WordPress安装根目录的 functions.php文件添加如下代码即可开启

    AlexTao
  • CSS3实现“图片阴影”效果

    利用多投影重叠的原理,实现曲线阴影与翘边阴影的效果,花一个小时看完的课程,理解的似懂非懂。直接发一下老师写的成品吧。用到来取。css都补上了注释。

    AlexTao
  • Suxing Grace主题葫芦娃救爷爷头像清除

    代码在functions_suxingme.php的1022行,删除或注释掉就行了。

    AlexTao
  • 用ethtool 命令解决Linux 网卡丢包【转】

    转自:https://blog.csdn.net/chengxuyuanyonghu/article/details/73739516

    用户3033338
  • 系统架构师论文-论基于Web服务的企业应用集成

    去年,我所在的公司承担了一项为X巻烟厂建立企业应用集成的项目。主要目标是将该厂原使用的办公系统、人力资源系统、生产管理系统等系统进行集成,使之成为一个无缝连接的...

    cwl_java
  • 写一个问卷调查的功能(熟悉一下Array数组的操作以及对Radio的使用)

    首先感谢这个大神的css和js,让我得以实现这个效果,我只是将基本的js实现了,大部分的工作都是这个朋友完成的,他将效果实现的很完美,我只是拿过来将功能完善了一...

    何处锦绣不灰堆
  • 《Java虚拟机原理图解》 1.2.2、Class文件中的常量池详解(上)

    知道了常量池的位置后,然后让我们来揭秘常量池里究竟有什么东西吧~     

    bear_fish
  • 《Java虚拟机原理图解》 1.2.2、Class文件中的常量池详解(上)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://louluan.blog.c...

    亦山
  • 文献翻译Complex integrated analysis of lncRNAs-miRNAs-mRNAs in oral squamous cell carcinoma(1)AbstractRe

    本研究旨在通过基因表达数据揭示口腔鳞状细胞癌(OSCC)中lncRNAs-miRNAs-mRNA的调控网络。

    用户1359560
  • 《Java虚拟机原理图解》 1.2、class文件中的常量池

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://louluan.blo...

    亦山

扫码关注云+社区

领取腾讯云代金券