• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

WordPress文章部分内容隐藏输入密码后可见

WordPress 云落 来源:E享乐 2年前 (2016-05-19) 1496次浏览 已收录 7个评论
文章目录[隐藏]

WordPress 使用短代码实现部分内容输入密码才可以浏览,另外使用按需加载样式

WordPress 文章部分内容隐藏输入密码后可见

前言

代码

首先是建立短代码啦

function e_secret($atts, $content=null){
    extract(shortcode_atts(array('key'=>null), $atts));
    if(isset($_POST['e_secret_key']) && $_POST['e_secret_key']==$key){
        return '
<div class="e-secret">'.$content.'</div>
';
    }
    else{
        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>
';
    }
}
add_shortcode('ssecret','e_secret');

然后就是加载样式啊,这里是云落自己写的代码,我在这里设定了一下,只有上面那个短代码的页面才加载样式,其他页面一律不加载,这个是比较不错的地方的

//加载密码可见的样式
function secret_css() {
	global $post,$posts;
		foreach ($posts as $post) {
			if ( has_shortcode( $post->post_content, 'ssecret') ){
    echo '<style type="text/css">.e-secret{margin:20px 0;padding:20px;height:60px;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=password],input.euc-y-i[type=text]{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=password]:hover,input.euc-y-i[type=text]:hover{border:1px solid #56b4ef;box-shadow:0 0 4px #56b4ef}</style>';}}}
add_action('wp_head', 'secret_css');

最后就是给编辑器添加个按钮啦

//添加编辑器密码可见按钮
function mmkj_tags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'mimakejian', '密码可见', '[ssecret key="输入密码"]', '[/ssecret]' );
function yunluo_shortcode() {
}
</script>
<?php
}
add_action('after_wp_tiny_mce', 'mmkj_tags');

OK!大功告成!

预览

密码是:2233


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress 文章部分内容隐藏输入密码后可见
喜欢 (16)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 密码失效了还是怎么回事
    海油2017-10-20 14:59 回复 Windows 7 | Chrome 59.0.3071.115
  2. 其中文本编辑加入代码按钮的,那个“ssecret”请更改为“secret”多了一个s
    sbyyin2017-07-02 21:53 回复 Mac OS X | Safari浏览器 603.2.4
    • 云落
      是的
      云落2017-07-04 21:37 回复 Windows 10 | Chrome 50.0.2661.102
  3. 输入加密的密码之后,直接跳转到了文章头部。这是作者设置的么?还是怎么回事?我的网站弄了后,文章里面就是直接明文代码显示出来的,没有任何效果。怎么回事呢?[ssecret key=”122333″]密码页面测试密码页面测试密码页面测试密码页面测试密码页面测试密码页面测试密码页面测试[/ssecret]就这样直接显示出来的
    HDM2017-02-13 21:46 回复 Windows 7 | Chrome 50.0.2661.102
  4. 感谢,最近正需要这个呢。很棒。
    Win7en乐园2016-11-25 11:15 回复 Windows 10 | Chrome 54.0.2840.99