【WordPress 教程】WordPress文章编辑器增加彩色边框代码

2018年12月13日18:51:03 19 11,527
摘要

在很多博客都看到这种彩色美化框,非常好看,而且把文章分得很有层次感,体验大方,站长的博客也用上了,效果不错哦,这里也分享给大家。

效果展示:

文字
文字
文字
文字
文字

输入文字

输入文字

输入文字

输入文字

输入文字

代码部署:

  • 编辑WordPress主题目录下的functions.php文件,添加如下代码:
/*短代码信息框 开始*/
function toz($atts, $content=null){
    return '<div id="sc_notice">'.$content.'</div>';
}
add_shortcode('v_notice','toz');
function toa($atts, $content=null){
    return '<div id="sc_error">'.$content.'</div>';
}
add_shortcode('v_error','toa');
function toc($atts, $content=null){
    return '<div id="sc_warn">'.$content.'</div>';
}
add_shortcode('v_warn','toc');
function tob($atts, $content=null){
    return '<div id="sc_tips">'.$content.'</div>';
}
add_shortcode('v_tips','tob');
function tod($atts, $content=null){
    return '<div id="sc_blue">'.$content.'</div>';
}
add_shortcode('v_blue','tod');
function toe($atts, $content=null){
    return '<div id="sc_black">'.$content.'</div>';
}
add_shortcode('v_black','toe');
function tof($atts, $content=null){
    return '<div id="sc_xuk">'.$content.'</div>';
}
add_shortcode('v_xuk','tof');
function tog($atts, $content=null){
    return '<div id="sc_lvb">'.$content.'</div>';
}
add_shortcode('v_lvb','tog');
function toh($atts, $content=null){
    return '<div id="sc_redb">'.$content.'</div>';
}
add_shortcode('v_redb','toh');
function toi($atts, $content=null){
    return '<div id="sc_orange">'.$content.'</div>';
}
add_shortcode('v_orange','toi');
/* 短代码信息框 完毕*/

使用方法

  • 在文章编辑时插入以下代码即可,注意"{"修改为"[","}"修改为"]"。
{v_notice]绿色提示框[/v_notice}
{v_error]红色提示框[/v_error}
{v_warn]黄色提示框[/v_warn}
{v_tips]灰色提示框[/v_tips}
{v_blue]蓝色提示框[/v_blue}
{v_black]黑色提示框[/v_black}
{v_xuk]虚线提示框[/v_xuk}
{v_lvb]绿边提示框[/v_lvb}
{v_redb]红边提示框[/v_redb}
{v_orange]橙边提示框[/v_orange}
  • 如不想每次都手动赶写代码也可为

给后台文章文本编辑器添加按钮的方法:

  • 如果添加提示框,每次都填写这么多代码的话,那不就既枯燥又麻烦死!那么怎么解决呢?
  • 最简单的是通过在后台文本编辑器上面加上一些按钮来避免这种重复的输入。
  • 好了,直接给出比较全的代码吧,在functions.php文件中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:
  • 将以下代码添加到主题目录的function.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', '绿框', '<blockquote id="sc_notice">输入文字</blockquote>\n', "" );
  7. QTags.addButton( 'v_error', '红框', '<blockquote id="sc_error">输入文字</blockquote>\n', "" );
  8. QTags.addButton( 'v_warn', '黄框', '<blockquote id="sc_warn">输入文字</blockquote>\n', "" );
  9. QTags.addButton( 'v_tips', '灰框', '<blockquote id="sc_tips">输入文字</blockquote>\n', "" );
  10. QTags.addButton( 'v_blue', '蓝框', '<blockquote id="sc_blue">输入文字</blockquote>\n', "" );
  11. QTags.addButton( 'v_black', '黑框', '<blockquote id="sc_black">输入文字</blockquote>\n', "" );
  12. QTags.addButton( 'v_xuk', '虚线', '<blockquote id="sc_xuk">输入文字</blockquote>\n', "" );
  13. QTags.addButton( 'v_lvb', '绿边', '<blockquote id="sc_lvb">输入文字</blockquote>\n', "" );
  14. QTags.addButton( 'v_redb', '红边', '<blockquote id="sc_redb">输入文字</blockquote>\n', "" );
  15. QTags.addButton( 'v_organge', '橙边', '<blockquote id="sc_organge">输入文字</blockquote>\n', "" );
  16. </script>
  17. <?php
  18. }

代码解析:

QTags.addButton( '', '', '', '' );
  • 四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行;
  • 形象说明:QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );
  • 可以自定义添加多行QTags.addButton( '', '', '', '' );增加多个按钮!

CSS代码:

  • 添加以下CSS到主题目录的style.css
此处为隐藏的内容!
发表评论并刷新,方可查看

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

  • 下载后把图标上传到主题目录下面的img文件夹就可以了,至此,你刷新下页面,就可以看到编辑器文本模式有这些彩色框标签添加按钮了。
重要提醒:如果使用按钮的话,文章最开始的代码部署和使用方法中的短代码就可以不用
下载信息 资源名称:图标素材 应用平台:WordPress 资源大小:2.90KB 文件下载:31 次
网盘密码:发表评论并刷新可见
下载地址

发表评论

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

目前评论:19   其中:访客  15   博主  4

    • dsf dsf

      领袖和跟风者的区别就在于创新。— 乔布斯

      • 90后 90后

        君子和而不同,小人同而不和。— 孔子

        • AEMOM6 AEMOM6

          很实用的教程,赞!

          • AEMOM AEMOM

            很实用的教程,赞!

            • 木子 木子

              感谢分享