纯代码为WordPress添加微信吸粉功能

2018年11月30日21:21:44 发表评论 阅读872次

纯代码为WordPress添加微信吸粉功能

 

对于关注公众号获取验证码查看全部内容以实现涨粉这一功能,网上除了插件版自然也是有很多代码版的,但是有一些代码版在实际测试时发现效果并不理想,这里我就将自己收集整理并亲测可用的代码版分享出来以供大家使用,代码来源于网络,原作者已不可考,在此就不再申明。

还是那句话,修改之前希望大家先将网站备份一下以避免误操作引起的网站崩溃。

由于自己误操作造成网站不可恢复,且在老刘的提醒下没有提前备份,一切后果与老刘无关

下面开始

首先打开 主题下的/inc/shortcode.php

纯代码为WordPress添加微信吸粉功能

由于求助的朋友是使用的知更鸟主题,先讲讲知更鸟主题的修改方法,然后再将其他主题的通用方法

知更鸟只需要修改shortcode.php , 所以小白修改前请先备份好原文件

复制下方代码 完整替换66~84行

// 加密内容
function secret($atts, $content=null){
extract(shortcode_atts(array('key'=>null,'keyword'=>null), $atts));
if ( current_user_can('level_10') ) {
	return '<p class="secret-password"><i class="be be-clipboard"></i>加密的内容:<br />'.do_shortcode( $content ).'</p>';
}
if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){
	return '<p class="secret-password"><i class="be be-clipboard"></i>加密的内容:<br />'.do_shortcode( $content ).'</p>';
	} else {
		return '
<div class="post_hide_box">
            <img class="erweima" align="right" src="公众号的图片地址" width="160" height="160" alt="公众号二维码加载失败时的提示文字"><div class="post-secret"><i class="fa fa-exclamation-circle"></i>此处内容已经被作者无情的隐藏,请输入验证码查看内容</div>
            <form action="'.get_permalink().'" method="post"> 
                <span>验证码:</span><input id="pwbox" type="password" size="20" name="secret_key">
                <a class="a2" href="javascript:;"><input type="submit" value="提交" name="Submit"></a>
            </form>
            <div class="details">请关注“公众号名字”官方公众号,回复关键字:<br>“<span>'.$keyword.'</span>”,获取验证码。<br>
            <span>【注】</span>手机扫描二维码快速关注“公众号名字”官方公众号。
	    </div>
         </div>';
      }
}

 

CSS样式文件修改

值得注意的是,以下样式是我根据主题风格及个人喜好调整的前端样式,大家可以自行根据自己主题修改下面的样式内容,一般情况下我们将下面的代码添加到主题的 style.css 文件中去即可,但是部分主题可能不调用 style.css 文件,详情请问主题作者,例如我所使用的 知更鸟主题则只需要将此段代码添加至 后台管理 - 自定义风格 里面即可

/* 网站添加公众号涨粉功能样式代码 */
/*涪陵博客出品,www.FuLing.org,转载说明出处,谢谢*/
.post_hide_box, .secret-password{
	background: none repeat scroll 0 0 #fcffff;
	border: 1px dashed #24b4f0;
	color: #123456;
	padding: 10px;
	border-radius: 9px;
	margin: 18px 0px;
	overflow:hidden;
	clear:both;
	}
.post_hide_box .post-secret{
	font-size: 18px;
	line-height:20px; 
	color:#f0503c; 
	margin:5px;
	}
.post_hide_box form{ margin:15px 5px;}
.post_hide_box form span{ font-size:18px; font-weight:bold;}
.post_hide_box .erweima{ margin: 15px;}
.post_hide_box input[type=password]{
	color: #00a0f0;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #24b4f0;
	border-radius: 5px;
	font-size: 12px;
	margin: 0px 5px;
	-moz-transition: border .25s linear,color .25s linear,background-color .25s linear; 
	-webkit-transition: border .25s linear,color .25s linear,background-color .25s linear; -o-transition: border .25s linear,color .25s linear,background-color .25s linear; 
	transition: border .25s linear,color .25s linear,background-color .25s linear;}
.post_hide_box input[type=submit] { 
    background: #24b4f0; 
	border: none; 
	padding: 5px;
	width: 88px;  
	color: #fff; 
	border-radius: 5px; 
	font-size: 16px;
	font-weight:bold;
	}
.details{
	color:#123456;
    font-size: 16px;
	line-height: 30px;
	margin: 5px;
	padding: 3px;
	}
.post_hide_box .details span{color:#e74c3c;}

 

到此为止,知更鸟主题的使用方法就做好了,在文本编辑框的短代码功能中选择密码保护即可

然后加上一句

【password key=密码 keyword=你要别人回复的关键词]加密的内容[/password]

把上面的【换成[

效果由下图参考

纯代码为WordPress添加微信吸粉功能

 

下面开始讲讲其他主题的通用方法

将下面的代码按照文字提示进行简单的修改并添加到你主题的 functions.php 文件中去,部分主题的自定义函数可能不是放在这个文件中,如果不确定可以咨询主题作者确认具体的添加位置。

// 网站添加公众号涨粉功能核心代码
function secret($atts, $content=null){
    extract(shortcode_atts(array('key'=>null,'keyword'=>null), $atts));
    if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){
        return '<div class="secret-password">'.$content.'</div>';
      }
	else {
    return '
        <div class="post_hide_box">
            <img class="erweima" align="right" src="公众号二维码图片的地址" width="160" height="160" alt="公众号二维码加载失败时的替代文字"><div class="post-secret"><i class="fa fa-exclamation-circle"></i>此处内容已经被作者无情的隐藏,请输入验证码查看内容</div>
            <form action="'.get_permalink().'" method="post"> 
                <span>验证码:</span><input id="pwbox" type="password" size="20" name="secret_key">
                <a class="a2" href="javascript:;"><input type="submit" value="提交" name="Submit"></a>
            </form>
            <div class="details">请关注“你公众号名字”官方公众号,回复关键字“<span>'.$keyword.'</span>”,获取验证码。
            <span>【注】</span>手机扫描二维码快速关注“你公众号名字”官方公众号。
	    </div>
         </div>';
      }
}
add_shortcode('flhide', 'secret');

 

css样式修改复制上面的即可

文章编辑器添加简码按钮

一般情况下,如果我们正确配置好了前两步,则在编辑文章时通过以下短代码既可以实现隐藏部分内容,等访客关注公众号获取验证码并提交后显示隐藏内容的效果。

flhide keyword="关键字" key="验证码"]隐藏内容[/flhide

为了使文章编辑更加简单,我们可以通过下面的代码在文章编辑器中添加一个简码按钮,通过点击该按钮即可自动添加上面这段简码。

//文章编辑器添加简码按钮
//涪陵博客 www.FuLing.org 转载注明出处
function wpsites_add_gzh_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'flhide', ' 公众号隐藏', '\n【flhide keyword="关键字" key="验证码"]隐藏内容[/flhide】', "" );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'wpsites_add_gzh_quicktags' );

 

添加代码的时候注意将上方代码中的【】字符修改为[]。

因为发文的时候如果代码中我使用了 [] 那么代码会在本业直接生效了

此方法是经过我自己实测没有问题才发出来的.由于我没有公众号,所以没有使用,仅仅使用了默认的主题密码查看

到此教程就结束了,希望可以帮上你们.发文不易,转载注明出处.

MissLover
广告也精彩

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: