如何在WordPress文章中增加各式各样的彩色边框

  • 4
  • 407 views

之前讲到过在Wordpress中添加表情图,今天在很多站长博客里看到这种彩色美化框,本人也是觉得非常的好看。不但可以改善我们的视觉体验,还可以把文章分得很有层次感,不但看起来体验大方,而且逼格也显得很高,效果着实不错,在这里也拿来分享给大家。代码来源【星光】博客!

如何在WordPress文章中增加各式各样的彩色边框

先来看看展示效果吧:

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

使用方法:

上图是实现我们十种彩色框的一个使用方法,那么以上十种彩色框我们该如何实现上面的编辑器添加这些彩色框插入标签按钮?请看接下来的教程:

一、将以下代码添加到主题目录的functions.php里面

//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'v_notice', '绿框', '<blockquote id="sc_notice">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_error', '红框', '<blockquote id="sc_error">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_warn', '黄框', '<blockquote id="sc_warn">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_tips', '灰框', '<blockquote id="sc_tips">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_blue', '蓝框', '<blockquote id="sc_blue">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_black', '黑框', '<blockquote id="sc_black">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_xuk', '虚线', '<blockquote id="sc_xuk">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_lvb', '绿边', '<blockquote id="sc_lvb">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_redb', '红边', '<blockquote id="sc_redb">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_organge', '橙边', '<blockquote id="sc_organge">输入文字</blockquote>\n', "" );
</script>
<?php
}

二、添加以下CSS到主题目录的style.css里

/*彩色美化框*/
#sc_notice {
color: #7da33c;
background: #ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;
border: 1px solid #aac66d;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
width: 98%;
}
#sc_warn, .post-password-form {
color: #ad9948;
background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;
border: 1px solid #eac946;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
width: 98%;
}
#sc_error {
color: #c66;
background: #ffecea url('img/sc_error.png') -1px -1px no-repeat;
border: 1px solid #ebb1b1;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
width: 98%;
}
#sc_tips {
color: #888888;
background: #f1f1f1 url('img/sc_tips.png') -1px -1px no-repeat;
border: 1px solid #bbbbbb;
padding: 15px 15px 5px 35px;
margin: 10px 0;
width: 98%;
overflow: hidden;
}
#sc_blue {
    color: #1ba1e2;
    background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;
    border: 1px solid #1ba1e2;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#sc_black {
    border-width: 1px 4px 4px 1px;
    border-style: solid;
    border-color: #3e3e3e;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#sc_xuk {
    border: 2px dashed rgb(41, 170, 227);
    background-color: rgb(248, 247, 245);
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#sc_lvb {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #05B536;
    background: #FFF;
}
#sc_redb {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #ED0505;
    background: #FFF;
}
#sc_organge {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #EC8006;
    background: #FFF;
}

三、修改上面CSS里面的5个图片URL地址url('img/sc_error.png')

下载后把图标上传到主题目录下面的img文件夹就可以了,至此,你刷新下页面,就可以看到编辑器文本模式有这些彩色框标签添加按钮了。

叶先生
  • 版权声明: 发表于 2019年6月20日08:16:09
  • 转载注明:https://www.japanren.com/1311.html
修改数据库密码后导致网站无法打开该怎么解决? 网站建设

修改数据库密码后导致网站无法打开该怎么解决?

今天无缘无故不知道发什么癫,一时兴起,想统一下阿里后台的登录密码,接着把FTP密码也给重置了遍,后面想了下,要不就把数据库密码也统一下吧。统一好了后方才发现网站打不开了,顿时有点百思不得其解,以前用织...
WordPress如何实现多域名访问同一站点 WordPress

WordPress如何实现多域名访问同一站点

有些时候总有人会有这样一个要求,就是希望自己所搭建的WordPress网站,能够通过多个域名访问同一站点,关于目的我们不得而知。有可能是利用一个灰帽的手法,这种手法类似301重定向,将多个域名访问同一...
给WordPress博客的小工具添加用户访问次数 WordPress

给WordPress博客的小工具添加用户访问次数

好像总有些人喜欢一些花哨的玩意,就像WordPress主题里的自定义鼠标,还有爆炸性点击效果一样,不过也是,毕竟每个人的喜好都不一样。 今天在诗梦博客里看到这个效果,可以统计出每一位用户IP的访问次数...
Begin主题新版标题如何修改成居中 WordPress

Begin主题新版标题如何修改成居中

鸟哥的WordPress系统begin主题又更新了,不得不感叹,这个更新的速度是一般人难以跟上的。这次鸟哥好像把文章标题的H1居中代码给删了,对于一直看惯了标题居中的我们来说,确实有点别扭,横看竖看都...
匿名

发表评论

匿名网友 填写信息

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

评论:4   其中:访客  2   博主  2
    • 袋装水 袋装水 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 电信 @回复 2

      学习了,你的分享都很有用

        • Joson Joson 博主 来自天朝的朋友 搜狗浏览器 Windows 7 广东省东莞市 电信 @回复

          @袋装水 谢谢!对你有用就好

        • Gavin.Xu Gavin.Xu 来自天朝的朋友 火狐浏览器 Windows 10 北京市 电信 @回复 1

          这个很棒~~~

            • Joson Joson 博主 来自天朝的朋友 搜狗浏览器 Windows 7 广东省东莞市 电信 @回复

              @Gavin.Xu 喜欢就好