Some content of WordPress articles can be seen after following WeChat official account

one thousand four hundred and twenty-one
article

September 15, 2017 19:16:41 WordPress comment two hundred and thirty-two Reading mode

Only after following the public account and replying to the keyword to obtain the verification code can you view the hidden content in the article. But I haven't figured out how to use it. Let's pick it up and use it today~

1 Core code

Put the following code into functions.php (PS: I hid the code to make a DEMO~):

/**
?*? Some content of WordPress articles can be seen after following WeChat official account? -? The dragon laughs at the world
?*? http://www.ilxtx.com/view-contents-by-following-wechat-official-accounts.html
?*/
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 ?'< div? class = "secret-password" >'. $content .'</div>';
????}? else ? {
???????? return
????????????'< div? class = "post_hide_box" >
?????????????< img? class = "erweima" ? align= "right" ? src= "Change to the URL of the QR code picture" ? width= "150" ? height= "150" ? alt= "Your QR code name" ><div? class = "post-secret" ><i? class = "fa?fa-exclamation-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 official QQ official account of "your name" and reply to the keyword "<span>' $keyword . '</span>"to obtain the verification code. [Note] You can follow the official QQ official account of "your name" by scanning the QR code on the right with mobile QQ</ div>
?????????????</ div>';
????}
}
add_shortcode('gzh2v',?' lxtx_secret_content');

Pay attention to the relevant content in the code!

2 Front CSS style

Put the following code in your theme's style.css file:

.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 ;}

3 Integrated short code

To facilitate use, the short code is integrated in the background text editor. Put the following code into functions.php:

//? Add public account hidden simplified code button in background text editing box
function ? lxtx_wpsites_add_gzh_quicktags()? {
???? if ? (wp_script_is('quicktags')){
?>
????< script?type= "text/javascript" >
???? QTags.addButton(?' gzh2v',?'? Public ID hidden ',?' \n[gzh2v?keyword= Keywords ? key= Verification code ]Hidden content [/gzh2v] ',? "" ?);
????</ script>
<? php
????}
}
add_action(?' admin_print_footer_scripts',?'lxtx_wpsites_add_gzh_quicktags'?);

4 Usage

4.1 Using short codes in articles

Of course, it is OK not to write the simple code button. When writing an article, use the following output code:

Insert the following simplified code and modify relevant contents:

[gzh2v?keyword= Keywords ? key= Verification code ]Hide content [/gzh2v]

4.2 WeChat official account

Here we take the WeChat public account as an example (the same should be true for the QQ public account). Set the keywords (corresponding to the keyword in the code above) and verification code (corresponding to the key in the code above) in the "Automatic reply - keyword automatic reply" of the WeChat public account.

5 Extension

In fact, this article is consistent with the common code principle of "part of the content of the article can be seen after reply" or "part of the content of the article can be seen after login", but it is just combined with the public account. You can integrate it into your own theme!

This procedure is not tested and is stored for use.

1 Core code

2 Front CSS style

3 Integrated short code

4 Usage

5 Extension

Comment