WordPress 内容部分加密

WordPress本身是提供文章加密功能的,但是那个会对整个文章进行加密,不可以设置文章预览,只有获得密码之后才可以阅读全文。现在我们来实现只加密文章中的部分内容,其他部分依然对用户可见,这样用户仍然可以阅读文章,但是对于加密的部分,只有提供密码之后才能解锁查看。下面这个是预览图:

WordPress 加密文章部分内容示例

可以点开这里,尝试这个功能。

首先我们进入仪表盘,然后在左侧导航栏依次点击 外观 -> 主题编辑器 -> 选中你使用的主题 -> functions.php

将下面这段代码放在functions.php这个文件的末尾处:

//Usage: [secret key="密码"]加密内容[/secret]
function e_secret($atts, $content=null) {
	extract(shortcode_atts(array('key' => null, 'tip' => null), $atts));
	if (
		isset($_SESSION[hash('md5', $key)]) ||
		(isset($_POST['e_secret_key']) && $_POST['e_secret_key'] == $key)
	) {
		$_SESSION[hash('md5', $key)] = $key;
		return '<div class="e-secret">' . $content . '</div>';
	} else {
		if (isset($_POST['e_secret_key'])) {
			$tip = '<p class="secret_tip">密码输入错误!</p>' . $tip;
		}
		return '<form class="e-secret" action="'.get_permalink().'" method="post" name="e-secret"><label>输入密码查看加密内容:</label><input type="password" name="e_secret_key" class="euc-y-i" maxlength="50"><input type="submit" class="euc-y-s" value="确定">
      <div class="euc-clear"></div></form>' . '<p class="secret_tip">' . $tip . '</p>';
	}
}
add_shortcode('secret', 'e_secret');

这段代码分为两个部分,e_secret($atts, $content=null)函数实现了加密功能,$atts包含设置的参数,这里我们默认包含两个参数一个是key 用来存储加密密码,另一个是tip,用来存储提示信息,这个提示信息显示在密码输入框的下面,可以添加任意内容,我一般都是填写获取密码的方式。这个函数还会将用户输入过的密码存入session,这样就避免了重复输入,用session的好处就是用户不需要注册账号也可以存储自己输入过的密码,缺点就是换了个浏览器又需要重新输入密码。

上面这段代码第二部分是定义短代码,段代码相当于文章中的一个锚点,将函数和绑定到文章中的特定位置。

下面这段代码就是这个段代码在文章中的使用方法:

[secret key="密码" tip="我是提示信息"]加密内容[/secret]

将要加密的内容用secret短代码包裹起来就可以了。

最后,我们来添加一下CSS代码,装饰一下密码输入框

打开style.css文件。

将下面这段代码加入到styles.css文件中。

.e-secret {
 margin: 20px 0;
 padding: 20px;
 background: #f8f8f8;
}
.e-secret input.euc-y-i[type="password"] {
 float: left;
 background: #fff;
 width: 100%;
 line-height: 36px;
 margin-top: 5px;
 border-radius: 3px;
}
.e-secret input.euc-y-s[type="submit"] {
 float: right;
 margin-top: -47px;
 width: 30%;
 margin-right: 1px;
 border-radius: 0 3px 3px 0;
}
input.euc-y-s[type="submit"]{
	background-color:#3498db;
	color:#fff;
	font-size:21px;
	box-shadow:none;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition:.4s;
	-webkit-backface-visibility:hidden;
	position:relative;
	cursor:pointer;
	padding: 13px 20px;
	text-align: center;
	border-radius: 50px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border: 0;
	height: auto;
	outline: medium;
	line-height: 20px;
	margin: 0;
}
input.euc-y-s[type="submit"]:hover{
	background-color:#5dade2;
}
input.euc-y-i[type="text"],input.euc-y-i[type="password"]{
	border:1px solid #F2EFEF;
	color:#777;
	display:block;
	background: #FCFCFC;
	font-size:18px;
	transition:all .5s ease 0;
	outline:0;
	box-sizing:border-box;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius:25px;
	padding:5px 16px;
	margin: 0;
	height: auto;
	line-height: 30px;
}
input.euc-y-i[type="text"]:hover,input.euc-y-i[type="password"]:hover{
	border:1px solid #56b4ef;
	box-shadow:0 0 4px #56b4ef;
}

p.secret_tip {
	clear: both;
}

下面就可以在文章中加密你的内容了。

总结

当初想到做这个是因为想做个内容付费的功能。

发表评论