WordPress彩色边框美化短代码

2018年1月9日12:03:48 发表评论 1,039

这个功能,许多博客都在使用,而我,最初使用是在云落的GIT主题上使用过。之后换到其他的主题,就没有使用这个,再想使用的时候,只找到了云落的制作的一款插件 G-Shortcode 。之前也有分享过这个插件,这里,是朱曙明博客最新收集到的利用代码来形成的,不再需要插件。

效果展示:

WordPress彩色边框美化短代码

注:手机端不显示

代码部署:

1、将以下代码放入functions.php文件中,保存。

    1. //添加HTML编辑器自定义快捷标签按钮
    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', '绿框', '<div id="sc_notice">绿色提示框</div>\n', "" );
    7. QTags.addButton( 'v_error', '红框', '<div id="sc_error">红色提示框</div>\n', "" );
    8. QTags.addButton( 'v_warn', '黄框', '<div id="sc_warn">黄色提示框</div>\n', "" );
    9. QTags.addButton( 'v_tips', '灰框', '<div id="sc_tips">灰色提示框</div>\n', "" );
    10. QTags.addButton( 'v_blue', '蓝框', '<div id="sc_blue">蓝色提示框</div>\n', "" );
    11. QTags.addButton( 'v_black', '黑框', '<div id="sc_black">黑色提示框</div>\n', "" );
    12. QTags.addButton( 'v_xuk', '虚线', '<div id="sc_xuk">虚线提示框</div>\n', "" );
    13. QTags.addButton( 'v_lvb', '绿边', '<div id="sc_lvb">绿边提示框</div>\n', "" );
    14. QTags.addButton( 'v_redb', '红边', '<div id="sc_redb">红边提示框</div>\n', "" );
    15. QTags.addButton( 'v_orange', '橙边', '<div id="sc_orange">橙边提示框</div>\n', "" );
    16. function bolo_QTnextpage_arg1() {
  1.     }
  2.     </script>
  3. <?php
  4. }

2、将以下css代码添加到style.css文件中,保存。

  1. /*彩色信息框*/
  2. #sc_notice {color#7da33c;background#ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;border1px solid #aac66d;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  3. #sc_warn {color#ad9948;background#fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;border1px solid #eac946;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  4. #sc_error {color#c66;background#ffecea url('img/sc_error.png') -1px -1px no-repeat;border1px solid #ebb1b1;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  5. #sc_tips {color#777;background#eaeaea url('img/sc_tips.png') -1px -1px no-repeat;border1px solid #ccc;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  6. #sc_blue {color#1ba1e2;background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;border1px solid #1ba1e2;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  7. #sc_black {border-width1px 4px 4px 1px;border-stylesolid;border-color#3e3e3e;margin10px 0;padding15px 15px 15px 35px;}
  8. #sc_xuk {border2px dashed rgb(41, 170, 227);background-colorrgb(248, 247, 245);margin10px 0;padding15px 15px 15px 35px;}
  9. #sc_lvb {margin10px 0;padding10px 15px;border1px solid #e3e3e3;border-left2px solid #05B536;background#FFF;}
  10. #sc_redb {margin10px 0;padding10px 15px;border1px solid #e3e3e3;border-left2px solid #ED0505;background#FFF;}
  11. #sc_organge {margin10px 0;padding10px 15px;border1px solid #e3e3e3;border-left2px solid #EC8006;background#FFF;}

:以上图片可以自己获取本站的,也可以根据自己喜好更改。{下载}

WordPress彩色边框美化短代码

后台如上图。

代码来源99八十一。



版权声明:本文由江西SEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:https://www.zhushuming.cn/4605.html

  • 博客之家
  • 博客之家,本站的资源收集于群里以便下载。当然,更多的是建站知识交流~
  • weinxin
  • SEO优化交流群
  • SEO优化交流群,交流seo优化技巧。860716446
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: