Press "Enter" to skip to content

开发WordPress文章部分加密插件 – Partial Lock

这篇文章给大家分享如何开发一个可以对文章部分内容加密的插件,我们在一些论坛上用过需要用户输入密码才可见的文章内容,这里我们开发的插件就是类似于这个功能。WordPress提供了一种对文章加密码锁的方式,但是这种方式的缺点是,用户在输入密码之前是看不到页面内容的,这可能会影响到用户体验以及SEO。

我们的开发分为以下几步:

创建项目

创建readme.txt

Plugin Readme Generator网站可以在线生成wordpress插件readme文件,将生成的数据拷贝到项目目录下的readme.txt文件中即可。

创建代码文件 partiallock.php

在项目根目录下创建partiallock.php文件,我们的代码将会放在这个文件里面。打开刚创建的这个文件,在文件开头添加插件信息。

<?php
/*
Plugin Name: partiallocl
Plugin URI: https://zhaoshuquan.com
Description: 对文章内容加密码锁
Version: 1.0
Author: JKol
Author URI: https://zhaoshuquan.com
*/

实现短代码函数

实现这个短代码,我们需要两个函数,第一个用来显示密码输入框以及判断用户输入的密码是否正确。第二个函数用来启动session,如果用户输入过密码,则将密码存储到当前session中,这样用户就不用频繁输入密码了。

这个短代码的格式是:

xxx

key是密码,tip是提示内容,tip是选填的,可以不使用。

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');
function register_session(){
    if( !session_id() )
        session_start();
}
add_action('init','register_session');

添加样式文件

这一步我们通过添加样式文件,让我们的密码输入框漂亮一点。首先在项目目录下创建style.css,添加一下代码到style.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;
}

打开partiallock.php文件,把注册我们刚创建的style.css文件:

function add_style() {
  wp_register_style("partiallock", plugins_url("partiallock/style.css"));
  wp_enqueue_style("partiallock");
}
add_action('wp_enqueue_scripts', 'add_style' );

到目前为止,我们已经实现了插件的逻辑部分。下面我们要对插件进行测试,检查插件运行是否正确。

测试

  1. 将插件打包成压缩包格式partiallock.zip
  2. 进入wordpress后台,打开插件面板,点击安装插件 -> 上传插件,选择刚创建的项目压缩包,上传成功之后启用插件
  3. 创建一个测试文章

输入密码解锁加密内容

源码下载

partiallock.zip

参考

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注