WordPress 短代码功能非插件实现方法

本文是 WordPress 彩色短代码功能在 WordPress 上非插件的实现方法 文章的完整代码使用说明,wordpress 短代码的基本原理和具体实例展示已经在上一篇文章中介绍了,如还不清楚详细可以查看:

彩色短代码功能在 WordPress 上非插件的实现方法

首先,在当前主题的 function.php 文件中添加如下代码:

  1. /*---WordPress-Short-Code---*/
  2. function alertbox($atts, $content=null, $code="") {
  3. $return = '<div class="dw-box-alert">';
  4. $return .= $content;
  5. $return .= '</div>';
  6. return $return;
  7. }
  8. add_shortcode('red' , 'alertbox' );
  9. function warningbox($atts, $content=null, $code="") {
  10. $return = '<div class="dw-box-warning">';
  11. $return .= $content;
  12. $return .= '</div>';
  13. return $return;
  14. }
  15. add_shortcode('yellow' , 'warningbox' );
  16. function downloadbox($atts, $content=null, $code="") {
  17. $return = '<div class="dw-box-download">';
  18. $return .= $content;
  19. $return .= '</div>';
  20. return $return;
  21. }
  22. add_shortcode('blue' , 'downloadbox' );
  23. function tipbox($atts, $content=null, $code="") {
  24. $return = '<div class="dw-box-tip">';
  25. $return .= $content;
  26. $return .= '</div>';
  27. return $return;
  28. }
  29. add_shortcode('green' , 'tipbox' );
  30. function infobox($atts, $content=null, $code="") {
  31. $return = '<div class="dw-box-info">';
  32. $return .= $content;
  33. $return .= '</div>';
  34. return $return;
  35. }
  36. add_shortcode('black' , 'infobox' );

其次,在使用的主题目录下 style.css 文件中添加样式代码:

  1. /*---CSS样式---*/
  2. .dw-box{text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);border: 1px solid;clear:both;margin:15px}
  3. .dw-box-alert,.dw-box-warning,.dw-box-download,.dw-box-info,.dw-box-tip{padding:15px 20px 15px 20px}
  4. .dw-box-warning{background:#FCF8E3;border-color:#FBEED5;color: #C09853}
  5. .dw-box-alert{background:#F2DEDE;border-color:#EED3D7;color:#B94A48}
  6. .dw-box-download{background:#D9EDF7;border-color:#BCE8F1;color:#3A87AD}
  7. .dw-box-info{background:#e7e7e7;border-color:#E0DEDE;color:#333}
  8. .dw-box-tip{background:#DFF0D8;border-color:#D6E9C6;color:#468847}

最后,短代码在后台编写文章时的调取使用:

wordpress彩色短代码

wordpress短代码使用方法

好了,现在可以去自己的网站编辑试试看了!

 

转载请注明链接地址:荐爱小站 » WordPress 短代码功能非插件实现方法

赞 (2) 赏 !

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 计算 (必填)

觉得文章有用就打赏一下吧,赠人玫瑰手有余香!

支付宝扫一扫打赏

微信扫一扫打赏