Wordpress代码实现文章内容通过公众号回复关键字获取密码可见,美化优化柒比贰主题编辑器

Wordpress代码实现文章内容通过公众号回复关键字获取密码可见,美化优化柒比贰主题编辑器

最终效果如上图,基于钻芒博客整理的美化教程实现。该教程在原有的基础上,完美适配柒比贰主题和quill编辑器,优化原教程隐藏内容只是文本的问题。不引用第三方css,其他主题需要做修改!

前端css样式

/**  WordPress文章部分内容关注微信公众号后可见 **/ 
.post_hide_box, .secret-password{background: none repeat scroll 0 0 #efe;border-left: 5px solid #e74c3c;color: #555;padding: 10px 0 10px 10px;border-radius: 5px;margin-bottom: 15px;overflow:hidden; clear:both;}
.post_hide_box .post-secret{font-size: 18px; line-height:20px; color:#e74c3c; margin:5px;}
.post_hide_box form{ margin:15px 0;}
.post_hide_box form span{ font-size:18px; font-weight:700;}
.post_hide_box .erweima{ margin-left:20px; margin-right:16px;}
.post_hide_box input[type=password]{ color: #9ba1a8; padding: 6px; background-color: #f6f6f6; border: 1px solid #e4e6e8; font-size: 12px;-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: #F88C00; border: none; border: 2px solid;border-color: #F88C00; border-left: none; border-top: none; padding: 0px;width: 100px; height: 38px; color: #fff; outline: 0;border-radius: 0 0 2px 0; font-size: 16px;}
.post_hide_box .details span{color:#e74c3c;}
.dungeihide .dungeicode{position:absolute;width:100px;height:100px;right:20px;top:50%;margin-top:-50px}
.dungeihide{background:#fff;border-radius:10px;padding:20px;margin:15px 0;position:relative;box-shadow:0 0 20px #d0d0d0}
.dungeihide .dungeititle{position:relative;font-size:17px;font-weight:700;color:#6c80a7;padding:6px 140px 0 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dungeihide .dungeititle .fa{position:absolute;left:0;font-size:25px;top:0}
.dungei-content{padding:20px 140px 15px 0;font-size:14px;color:#777}
.dungeibox{padding:0 140px 10px 0}
.dungeibox input{width:45%;	border:none;color:#737373;font-size:13px;height:35px;line-height:35px;background:#f2f2f2;border-radius:4px;outline:none;float:left;padding:0 10px}
.dungeibox button{width:20%;margin-left:15%;border:none;background:#3b8cff;color:#fff;padding:5px 0;font-size:14px;border-radius:5px}
.dungeihide .dungeicode{position:absolute;width:100px;height:100px;right:20px;top:50%;margin-top:-50px}
.dungeibox{padding:0}
.dungei-content{padding:20px 90px 15px 0}
.dungeihide .dungeicode{width:80px;height:80px}
隐藏内容,您需要满足以下条件方可查看

为了方便使用,在后台文本编辑器中集成该短代码。将以下代码放入 functions.php 中即可:

由于wordpress会自动转义文章里的代码造成冲突,请复制后删除下面代码中的两个“删除我”

/***************************************************************************************************************************************************************************************************************************
* Start 文章部分内容密码可见
* 盾给网络原创美化:www.dungei.com
*/
function lxtx_secret_content($atts, $content=null){
extract(shortcode_atts(array('key'=>null,'keyword'=>null), $atts));
    if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){
    		return '
隐藏内容:密码可见span>
i>'.do_shortcode($content).'div>';

    } else {
    	return
          '
div>
          
i>span>抱歉!隐藏内容,请输入密码后可见!div>

请打开微信扫描右边的二维码回复关键字“

'.$keyword.'b>span>”获取密码,也可以微信直接搜索“盾给网络”或“dungei”关注微信公众号获取密码。div> 立即提取button>form>div>div>';  } } add_shortcode('dungeiPWHide', 'lxtx_secret_content'); //END 

后台文本编辑框中添加公众号隐藏简码按钮

// 后台文本编辑框中添加公众号隐藏简码按钮
function lxtx_wpsites_add_gzh_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'dungeiPWHide', ' 密码可见', '\n[删除我dungeiPWHide keyword="关键字" key="验证码"]隐藏内容[/删除我dungeiPWHide]', "" );
    script>
'admin_print_footer_scripts', 'lxtx_wpsites_add_gzh_quicktags' );

WordpressQuill编辑器修改,核心内容。修改比较麻烦。所以提供两个文件。直接替换就好。感兴趣的可以比对代码,自己研究

隐藏内容,您需要满足以下条件方可查看

隐藏内容,您需要满足以下条件方可查看

隐藏内容,您需要满足以下条件方可查看

隐藏内容,您需要满足以下条件方可查看

[/content_hide]

该教程参考文章:

https://www.ilxtx.com/view-contents-by-following-wechat-official-accounts.html

WordPress 文章部分内容关注微信公众号后可见_龙笑天下

最终效果如上图,基于钻芒博客整理的美化教程实现。该教程在原有的基础上,完美适配柒比贰主题和quill编辑器,优化原教程隐藏内容只是文本的问题。不引用第三方c

https://www.zmki.cn/3304.html

纯代码实现WordPress文章设置隐藏内容公众号可见

最终效果如上图,基于钻芒博客整理的美化教程实现。该教程在原有的基础上,完美适配柒比贰主题和quill编辑器,优化原教程隐藏内容只是文本的问题。不引用第三方c

人已赞赏
建站教程

Wordpress柒比贰主题增强美化Quill编辑器添加自定义功能按钮(1)_增加回复可见标签插入按钮

2019-9-6 13:27:14

建站教程

WordPress 文章部分内容关注微信公众号后可见_龙笑天下

2019-9-6 15:58:45

6 条回复 A文章作者 M管理员
  1. 这个应该可以一直其他主题上面吧

    • 可以的。任何主题都能加

  2. 赶紧豪华的很纳。~

  3. 这个应该可以一直其他主题上面吧

    • 理论上来说都可以,个别主题可能不行,需要修改

  4. 理论上来说都可以

个人中心
今日签到
有新私信 私信列表
有新消息 消息中心
搜索