wordpress Nana主题添加多彩短代码

原创 Laughing  2017-10-18 09:22  阅读 194 次 评论 0 条

效果展示

绿色提示框
红色提示框
黄色提示框
灰色提示框
蓝色提示框
黑色提示框
虚线提示框
绿边提示框
红边提示框
橙边提示框

实现方式

上传素材文件

在博客当前使用主题下面建一个文件夹,比如img,将图片素材(可以直接复制我的素材)全部上传到img文件夹下面。

修改主题style.css文件

将以下代码复制到style.css文件中

  1. /*彩色信息框*/  
  2. #sc_notice {  
  3.     color#7da33c;  
  4.     background#ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;  
  5.     border1px solid #aac66d;  
  6.     overflowhidden;  
  7.     margin10px 0;  
  8.     padding15px 15px 15px 35px;  
  9.  }  
  10. #sc_warn {  
  11.     color#ad9948;  
  12.     background#fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;  
  13.     border1px solid #eac946;  
  14.     overflowhidden;  
  15.     margin10px 0;  
  16.     padding15px 15px 15px 35px;  
  17.  }  
  18. #sc_error {  
  19.     color#c66;  
  20.     background#ffecea url('img/sc_error.png') -1px -1px no-repeat;  
  21.     border1px solid #ebb1b1;  
  22.     overflowhidden;  
  23.     margin10px 0;  
  24.     padding15px 15px 15px 35px;  
  25.  }  
  26. #sc_tips {  
  27.     color#777;  
  28.     background#eaeaea url('img/sc_tips.png') -1px -1px no-repeat;  
  29.     border1px solid #ccc;  
  30.     overflowhidden;  
  31.     margin10px 0;  
  32.     padding15px 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.     border1px solid #1ba1e2;  
  38.     overflowhidden;  
  39.     margin10px 0;  
  40.     padding15px 15px 15px 35px;  
  41. }  
  42. #sc_black {  
  43.     border-width1px 4px 4px 1px;  
  44.     border-stylesolid;  
  45.     border-color#3e3e3e;  
  46.     margin10px 0;  
  47.     padding15px 15px 15px 35px;  
  48. }  
  49. #sc_xuk {  
  50.     border2px dashed rgb(41, 170, 227);  
  51.     background-colorrgb(248, 247, 245);  
  52.     margin10px 0;  
  53.     padding15px 15px 15px 35px;  
  54. }  
  55. #sc_lvb {  
  56.     margin10px 0;  
  57.     padding10px 15px;  
  58.     border1px solid #e3e3e3;  
  59.     border-left2px solid #05B536;  
  60.     background#FFF;  
  61. }  
  62. #sc_redb {  
  63.     margin10px 0;  
  64.     padding10px 15px;  
  65.     border1px solid #e3e3e3;  
  66.     border-left2px solid #ED0505;  
  67.     background#FFF;  
  68. }  
  69. #sc_orange {  
  70.     margin10px 0;  
  71.     padding10px 15px;  
  72.     border1px solid #e3e3e3;  
  73.     border-left2px solid #EC8006;  
  74.     background#FFF;  
  75. }  
修改主题functions.php文件

我是用的Nana的主题,通过下拉框的方式实现的,所以修改Nana_select方法,然后添加以下代码即可

  1. <option value="<div id=\'sc_notice\'>绿色提示框</div>">绿色提示框</option>  
  2.     <option value="<div id=\'sc_error\'>红色提示框</div>">红色提示框</option>  
  3.     <option value="<div id=\'sc_warn\'>黄色提示框</div>">黄色提示框</option>  
  4.     <option value="<div id=\'sc_tips\'>灰色提示框</div>">灰色提示框</option>  
  5.     <option value="<div id=\'sc_blue\'>蓝色提示框</div>">蓝色提示框</option>  
  6.     <option value="<div id=\'sc_black\'>黑色提示框</div>">黑色提示框</option>  
  7.     <option value="<div id=\'sc_xuk\'>虚线提示框</div>">虚线提示框</option>  
  8.     <option value="<div id=\'sc_lvb\'>绿边提示框</div>">绿边提示框</option>  
  9.     <option value="<div id=\'sc_redb\'>红边提示框</div>">红边提示框</option>  
  10.     <option value="<div id=\'sc_orange\'>橙边提示框</div>">橙边提示框</option>  

本文地址:https://www.lisen.me/wordpress-add-colorful-short-code.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情