WordPress beautification: short code adds color beautification box+button to the article

Watson Blog
Watson Blog
Watson Blog
one thousand four hundred and twenty-one
article
nine
comment
September 3, 2018 00:15:46 WordPress comment seven hundred and twenty-three two Reading mode

WordPress beautification: short code adds color beautification box+button to the article

I have seen many blogs using this beautification box. I feel it is good, and it is also used to try it. Here we are talking about the pure code version. The same function can be achieved with the plug-in G-Shortcode, but I have a habit of not using plug-ins because too many plug-ins can slow down the website.

Let's take a look at the renderings first:

WordPress beautification: short code adds color beautification box+button to the article

Code deployment:

1. Edit the functions.php file under the WordPress theme directory and add the following code:

  1. /*Watson Blog Short Code Message Box Start*/
  2. function  toz( $atts ,  $content =null){
  3.      return  '<div id= "sc_notice" >'. $content .'</div>';
  4. }
  5. add_shortcode('v_notice','toz');
  6. function  toa( $atts ,  $content =null){
  7.      return  '<div id= "sc_error" >'. $content .'</div>';
  8. }
  9. add_shortcode('v_error','toa');
  10. function  toc( $atts ,  $content =null){
  11.      return  '<div id= "sc_warn" >'. $content .'</div>';
  12. }
  13. add_shortcode('v_warn','toc');
  14. function  tob( $atts ,  $content =null){
  15.      return  '<div id= "sc_tips" >'. $content .'</div>';
  16. }
  17. add_shortcode('v_tips','tob');
  18. function  tod( $atts ,  $content =null){
  19.      return  '<div id= "sc_blue" >'. $content .'</div>';
  20. }
  21. add_shortcode('v_blue','tod');
  22. function  toe( $atts ,  $content =null){
  23.      return  '<div id= "sc_black" >'. $content .'</div>';
  24. }
  25. add_shortcode('v_black','toe');
  26. function  tof( $atts ,  $content =null){
  27.      return  '<div id= "sc_xuk" >'. $content .'</div>';
  28. }
  29. add_shortcode('v_xuk','tof');
  30. function  tog( $atts ,  $content =null){
  31.      return  '<div id= "sc_lvb" >'. $content .'</div>';
  32. }
  33. add_shortcode('v_lvb','tog');
  34. function  toh( $atts ,  $content =null){
  35.      return  '<div id= "sc_redb" >'. $content .'</div>';
  36. }
  37. add_shortcode('v_redb','toh');
  38. function  toi( $atts ,  $content =null){
  39.      return  '<div id= "sc_orange" >'. $content .'</div>';
  40. }
  41. add_shortcode('v_orange','toi');
  42. /*Watson blog short code message box completed*/

2. Add the following code to the style.css file, or directly add it in Theme Options - Custom Style - Custom Style.

  1. /*Color message box*/
  2. #sc_notice {
  3.      color :  #7da33c ;
  4.      background :  #ecf2d6   url ('img/sc_notice.png') - 1px  - 1px   no-repeat ;
  5.      border :  1px   solid   #aac66d ;
  6.      overflow :  hidden ;
  7.      margin :  10px  0;
  8.      padding :  15px   15px   15px   35px ;
  9.  }
  10. #sc_warn {
  11.      color :  #ad9948 ;
  12.      background :  #fff4b9   url ('img/sc_warn.png') - 1px  - 1px   no-repeat ;
  13.      border :  1px   solid   #eac946 ;
  14.      overflow :  hidden ;
  15.      margin :  10px  0;
  16.      padding :  15px   15px   15px   35px ;
  17.  }
  18. #sc_error {
  19.      color :  #c66 ;
  20.      background :  #ffecea   url ('img/sc_error.png') - 1px  - 1px   no-repeat ;
  21.      border :  1px   solid   #ebb1b1 ;
  22.      overflow :  hidden ;
  23.      margin :  10px  0;
  24.      padding :  15px   15px   15px   35px ;
  25.  }
  26. #sc_tips {
  27.      color :  #777 ;
  28.      background :  #eaeaea   url ('img/sc_tips.png') - 1px  - 1px   no-repeat ;
  29.      border :  1px   solid   #ccc ;
  30.      overflow :  hidden ;
  31.      margin :  10px  0;
  32.      padding :  15px   15px   15px   35px ;
  33. }
  34. #sc_blue {
  35.      color :  #1ba1e2 ;
  36.      background : rgba(27, 161, 226, 0.26)  url ('img/sc_blue.png') - 1px  - 1px   no-repeat ;
  37.      border :  1px   solid   #1ba1e2 ;
  38.      overflow :  hidden ;
  39.      margin :  10px  0;
  40.      padding :  15px   15px   15px   35px ;
  41. }
  42. #sc_black {
  43.      border-width :  1px   4px   4px   1px ;
  44.      border-style :  solid ;
  45.      border-color :  #3e3e3e ;
  46.      margin :  10px  0;
  47.      padding :  15px   15px   15px   35px ;
  48. }
  49. #sc_xuk {
  50.      border :  2px   dashed   rgb (41, 170, 227);
  51.      background-color :  rgb (248, 247, 245);
  52.      margin :  10px  0;
  53.      padding :  15px   15px   15px   35px ;
  54. }
  55. #sc_lvb {
  56.      margin :  10px  0;
  57.      padding :  10px   15px ;
  58.      border :  1px   solid   #e3e3e3 ;
  59.      border-left :  2px   solid   #05B536 ;
  60.      background :  #FFF ;
  61. }
  62. #sc_redb {
  63.      margin :  10px  0;
  64.      padding :  10px   15px ;
  65.      border :  1px   solid   #e3e3e3 ;
  66.      border-left :  2px   solid   #ED0505 ;
  67.      background :  #FFF ;
  68. }
  69. #sc_organge {
  70.      margin :  10px  0;
  71.      padding :  10px   15px ;
  72.      border :  1px   solid   #e3e3e3 ;
  73.      border-left :  2px   solid   #EC8006 ;
  74.      background :  #FFF ;
  75. }

Note: Remember to change the image material address in the code to the directory address you saved (the material is downloaded to the bottom of the article).

3. Usage: Just insert the following code when editing the article. Note that "] [" should be changed to "{{}"

{v_notice] green prompt box [/v_notice}

{v_error] Red prompt box [/v_error}

{v_warn] yellow prompt box [/v_warn}

{v_tips] gray prompt box [/v_tips}

{v_blue] Blue prompt box [/v_blue}

{v_black] black prompt box [/v_black}

{v_xuk] dotted prompt box [/v_xuk}

{v_lvb] green edge prompt box [/v_lvb}

{v_redb] Red edge prompt box [/v_redb}

{v_orange] Orange edge prompt box [/v_orange}

 

4. How to add shortcut buttons to the background article text editor:

If you add a prompt box and fill in so many codes every time, it will be boring and troublesome! So how to solve it?

The simplest way is to avoid such repeated input by adding some buttons on the background text editor.

OK, just give us the complete code. Add the following code to the functions.php file, and you can add the following short code to the background text editor:

  1. //Add HTML editor custom shortcut label button
  2. add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
  3. function  bolo_after_wp_tiny_mce( $mce_settings ) {
  4. ?>
  5.     <script type= "text/javascript" >
  6. QTags. addButton ('v_notice ',' green box ','<div id= "sc_notice" >Green prompt box</div>n ' ""  );
  7. QTags. addButton ('v_error ',' red box ','<div id= "sc_error" >Red prompt box</div>n ' ""  );
  8. QTags. addButton ('v_warn ',' yellow box ','<div id= "sc_warn" >Yellow prompt box</div>n ' ""  );
  9. QTags. addButton ('v_tips', 'gray box', '<div id= "sc_tips" >Grey prompt box</div>n ' ""  );
  10. QTags. addButton ('v_blue ',' blue box ','<div id= "sc_blue" >Blue prompt box</div>n ' ""  );
  11. QTags. addButton ('v_black ',' black box ','<div id= "sc_black" >Black prompt box</div>n ' ""  );
  12. QTags. addButton ('v_xuk ',' dotted line ','<div id= "sc_xuk" >Dashed prompt box</div>n ' ""  );
  13. QTags. addButton ('v_lvb ',' green edge ','<div id= "sc_lvb" >Green edge prompt box</div>n ' ""  );
  14. QTags. addButton ('v_redb ',' red edge ','<div id= "sc_redb" >Red edge prompt box</div>n ' ""  );
  15. QTags. addButton ('v_orange ',' orange edge ','<div id= "sc_orange" >Orange edge prompt box</div>n ' ""  );
  16. function  bolo_QTnextpage_arg1() {
  17.     }
  18.     </script>
  19. <? php
  20. }

Code description:

  1. QTags.addButton(  '' ,  '' ,  '' ,  ''  );

Four pairs of quotation marks represent the ID of the button, the display name of the button, click the input content, and then click the close content (if the last pair of quotation marks is empty, enter all the content at once), and n represents a new line;

Image description: QTags. addButton ('button ID ',' button display name ',' click to enter content ',' click to close content ');

You can customize and add multiple rows of QTags. addButton ('', '', '', ''); Add multiple buttons!

The final effect picture is as follows:

WordPress beautification: short code adds color beautification box+button to the article

Image material download: https://pan.baidu.com/s/16JjdzcvZfd7pFzhfrQcB6w Password: eza9

Important note: This tutorial is only for recording code, so the steps are a bit cumbersome. If only this function is realized, just press steps 2 and 4.

Original link: https://www.seoqe.com/52.html

Watson Blog
  • This article is written by Published on September 3, 2018 00:15:46
  • This article is collected and sorted by the website of Mutual Benefit, and the email address for problem feedback is: wosnnet@foxmail.com , please keep the link of this article for reprinting: https://wosn.net/1392.html

Comment