The article content can be seen by entering the WeChat public account verification code Can be customized

be careful: The content code of this article is only suitable for traditional editors. If you use Gutenberg edited students, you can skip it directly!

A friend asked the blogger if he could write an article and input the visible function of the WeChat public account verification code, because the student was not satisfied with the code of the grasshopper leader. For example, the image address and the public account name need to be added in the code. He hoped that the blogger could write a code that can add these information directly in the editor.

No more nonsense, just code!

1. Add code in function.php

The code is very simple, just add two parameters directly!
be careful: Due to editing problems, all the“ 【 ”Change to“ [ “！

 function secret($atts, $content=null){ extract(shortcode_atts(array('wxgzh'=>null,'keyword'=>null,'key'=>null,'gzh_img'=>null), $atts)); if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){ return '<div class="secret-password">'.$content.'</div>'; } else { return ' <div class="post_hide_box"> <img class="erweima" align="right" src="'. $gzh_img.'" width="160" height="160" alt="QR code loading of public account failed~~"><div class="post secret"><i class="fa fa exception circle"></i>The content here has been mercilessly hidden by the author, please enter the verification code to view the content</div> <form action="'.get_permalink().'" method="post">  <span>Verification code:</span><input id="pwbox" type="password" size="20" name="secret_key"> <a class="a2" href="javascript:;"><input type="submit" value="Submit" name="Submit"></a> </form> <div class="details">Please follow the "<span>'. $wxgzh.'</span>" official public account, reply to the keyword "<span>'. $keyword.'</span>", and obtain the verification code< br/> <span>[Note]</span>Scan the QR code on your mobile phone to quickly follow the "<span>'. $wxgzh.'</span>" official public account. </div> </div>'; } } add_shortcode('ghide', 'secret'); //Article editor add button function wpsites_add_gzh_quicktags() { if (wp_script_is('quicktags')){ ?> <script type="text/javascript"> QTags. addButton ('hide ','hide the public account', ' n [hide wxgzh="text" keyword="keyword" key="0116" gzh_img=“ https://www.wenzika.com/wp-content/uploads/2018/03/Wechat-public-account.jpg "] Hide content [/hide] '," "); </script> <? php } } add_action( 'admin_print_footer_scripts', 'wpsites_add_gzh_quicktags' );

2. Add css style code

 .post_hide_box, .secret-password{ background: none repeat scroll 0 0 #fcffff; border: 1px dashed #24b4f0; color: #123456; padding: 10px; border-radius: 9px; margin: 18px 0px; overflow:hidden; clear:both; } .post_hide_box .post-secret{ font-size: 18px; line-height:20px;  color:#f0503c;  margin:5px; } .post_hide_box form{ margin:15px 5px;} .post_hide_box form span{ font-size:18px; font-weight:bold;} .post_hide_box .erweima{ margin: 15px;} .post_hide_box input[type=password]{ color: #00a0f0; padding: 5px; background-color: #fff; border: 1px solid #24b4f0; border-radius: 5px; font-size: 12px; margin: 0px 5px; -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: #24b4f0;  border: none;  padding: 5px; width: 88px;   color: #fff;  border-radius: 5px;  font-size: 16px; font-weight:bold; } .details{ color:#123456; font-size: 16px; line-height: 30px; margin: 5px; padding: 3px; } .post_hide_box .details span{color:#e74c3c;}

3. Instructions

In the text editing interface of the traditional editor, there will be an additional public account hiding button. Click it directly to replace the contents in double quotation marks with your own public account information!

 [ghide wxgzh="text" keyword="keyword" key="0116" gzh_img=“ https://www.wenzika.com/wp-content/uploads/2018/03/Wechat-public-account.jpg "] Hide content [/hide]

4. Effect preview

[ghide wxgzh="text" keyword="keyword" key="0116 ″ gzh_img=" https://www.wenzika.com/wp-content/uploads/2018/03/Wechat-public-account.jpg ”]Hide content [/hide]