wordpress增加彩色文本框

  • A+
所属分类:站长

wordpress的文章摘要是不是很丑,使用纯CSS即可实现彩色文本框效果,美化文章。下面给出具体教程

具体效果如下:

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

步骤一:添加代码

在主题functions.php文件最后添加如下代码:

代码一:

  1. /*彩色文本框 开始*/
  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. /*彩色文本框 结束*/

代码二:

  1. /*添加文本编辑自定义快捷标签按钮 开始*/
  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.  function bolo_QTnextpage_arg1() {
  16.  }
  17.  </script>
  18.  <?php
  19.  }
  20.  /*添加文本编辑自定义快捷标签按钮 结束*/

步骤二:添加CSS

在主题文件style.css中添加如下代码:

请把https://www.luoyechenfei.com/wp-content/themes/love替换为自己的图片地址。
    1. /*cai se wen ben kuang*/
    2. #sc_notice {
    3.  color: #7da33c;
    4.  background: #ecf2d6 url('http://www.luoyechenfei.com/wp-content/themes/love/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('http://www.luoyechenfei.com/wp-content/themes/love/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('http://www.luoyechenfei.com/wp-content/themes/love/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('http://www.luoyechenfei.com/wp-content/themes/love/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('http://www.luoyechenfei.com/wp-content/themes/love/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. }

步骤三:上传图片文件

上传附件的图片到主题下的img文件中。

文件下载 彩色文本框图片 WinXP/Vista/Win7/Win8/Win10 1.0 2.4k
下载密码:发表评论并刷新可见!
下载地址

发表评论

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

目前评论:6   其中:访客  3   博主  3

    • 浅醉 浅醉 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 阿里云BGP数据中心 1

      支持

      • 似乎 似乎 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 阿里云BGP数据中心 0

        感谢分享

        • xgky xgky 来自天朝的朋友 QQ浏览器 Windows 7 浙江省杭州市 阿里云BGP数据中心 0

          漂亮,这个不错