• 国庆快乐,放假三天

  • 准备增加一个免登录支付功能

  • 微信扫码登录功能已经 ok 了

  • 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

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

WordPress 云落 来源:E享乐 3年前 (2016-05-19) 5911次浏览 13个评论
文章目录[隐藏]

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

嗨,查看密码的傻叉们


-- 完 --
WordPress文章部分内容隐藏输入密码后可见
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress文章部分内容隐藏输入密码后可见

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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 这些代码分别添加哪个文件里呢?
    ysjhlnu2019-05-26 11:37 回复 Windows 10 | Chrome 55.0.2883.87
  2. 楼下是疯子。哈哈
    2pf2019-05-07 16:48 回复 Windows 7 | 未知浏览器
  3. 嗨,查看密码的傻叉们(为什么代码在我的网站上没用啊。 :smile: :sad:
    pxsk2018-07-11 18:53 回复 Windows 10 | Chrome 68.0.3440.15
  4. 已经用上了,谢谢
    三刀电影网2018-07-04 20:43 回复 Windows 8.1 | Chrome 66.0.3359.117
  5. 应该加个密码输入错误提示
    未来2018-06-01 20:48 回复 Windows 10 | Chrome 53.0.2785.104
  6. 输入密码不能看了啊
    zcr2018-04-05 20:37 回复 Windows 7 | Chrome 55.0.2883.87
  7. 密码失效了还是怎么回事
    海油2017-10-20 14:59 回复 Windows 7 | Chrome 59.0.3071.115
  8. 其中文本编辑加入代码按钮的,那个“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
  9. 输入加密的密码之后,直接跳转到了文章头部。这是作者设置的么?还是怎么回事?我的网站弄了后,文章里面就是直接明文代码显示出来的,没有任何效果。怎么回事呢?[ssecret key=”122333″]密码页面测试密码页面测试密码页面测试密码页面测试密码页面测试密码页面测试密码页面测试[/ssecret]就这样直接显示出来的
    HDM2017-02-13 21:46 回复 Windows 7 | Chrome 50.0.2661.102
  10. 感谢,最近正需要这个呢。很棒。
    Win7en乐园2016-11-25 11:15 回复 Windows 10 | Chrome 54.0.2840.99