Loading... <div class="tip share">请注意，本文编写于 570 天前，最后修改于 141 天前，其中某些信息可能已经过时。</div> <div id="sc_xuk">• 逛别人博客的时候，看到人家弄得这个文章美化框，孟小N我喜欢的不得了，在网上找了下教程，代码大同小异，可以直接拿来用。<br>• 就为了那个快捷按钮费了半天的牛劲，搜索了半天，在我这里没法用，我最终决定使用现在这个方法。<br>• 其他的编辑器或者WP版本，请按下方的教程决定自己的使用方法。</div> # 样式效果 <div id="sc_notice">绿色框</div> <div id="sc_error">红色框</div> <div id="sc_warn">黄色框</div> <div id="sc_tips">灰色框</div> <div id="sc_blue">蓝色框</div> <div id="sc_black">黑色框</div> <div id="sc_xuk">虚线框</div> <div id="sc_lvb">绿边框</div> <div id="sc_redb">红边框</div> <div id="sc_orange">橙边框</div> ## 添加css样式代码 将以下代码添加到主题style.css文件中 <div id="sc_warn"> • 框框左上角的图片用的是别人的链接，但是你也可以使用自己的图标素材。 • 下载地址：<a href="https://www.lanzous.com/i3zz0sb" target="_blank">蓝奏网盘</a>（如果下载链接挂了，请告诉我） • 上传至自己的图床后将下方的url('https://ivmoe.com/ivmoepro/img/scimg/sc_notice.png')替换为你自己的图片链接。 </div> ``` /*彩色代码框样式开始*/ #sc_notice { color: #7da33c; background: #ecf2d6 url('https://ivmoe.com/ivmoepro/img/scimg/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #sc_warn { color: #ad9948; background: #fff4b9 url('https://ivmoe.com/ivmoepro/img/scimg/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #sc_error { color: #c66; background: #ffecea url('https://ivmoe.com/ivmoepro/img/scimg/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #sc_tips { color: #777; background: #eaeaea url('https://ivmoe.com/ivmoepro/img/scimg/sc_tips.png') -1px -1px no-repeat; border: 1px solid #ccc; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; } #sc_blue { color: #1ba1e2; background: rgba(27, 161, 226, 0.26) url('https://ivmoe.com/ivmoepro/img/scimg/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_orange { margin: 10px 0; padding: 10px 15px; border: 1px solid #e3e3e3; border-left: 2px solid #EC8006; background: #FFF; } ``` ## 添加快捷按钮到编辑器 <div id="sc_warn">针对非古腾堡编辑器，也就是说WordPress5.0以下的可以直接用，5.0以上的请添加插件替换为老编辑器。</div> 将以下代码添加进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'); /*彩色文本框 结束*/ /*添加文本编辑自定义快捷标签按钮 开始*/ 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', '绿框', '<div id="sc_notice">绿色提示框</div>\n', "" ); QTags.addButton( 'v_error', '红框', '<div id="sc_error">红色提示框</div>\n', "" ); QTags.addButton( 'v_warn', '黄框', '<div id="sc_warn">黄色提示框</div>\n', "" ); QTags.addButton( 'v_tips', '灰框', '<div id="sc_tips">灰色提示框</div>\n', "" ); QTags.addButton( 'v_blue', '蓝框', '<div id="sc_blue">蓝色提示框</div>\n', "" ); QTags.addButton( 'v_black', '黑框', '<div id="sc_black">黑色提示框</div>\n', "" ); QTags.addButton( 'v_xuk', '虚线', '<div id="sc_xuk">虚线提示框</div>\n', "" ); QTags.addButton( 'v_lvb', '绿边', '<div id="sc_lvb">绿边提示框</div>\n', "" ); QTags.addButton( 'v_redb', '红边', '<div id="sc_redb">红边提示框</div>\n', "" ); QTags.addButton( 'v_orange', '橙边', '<div id="sc_orange">橙边提示框</div>\n', "" ); function bolo_QTnextpage_arg1() { } </script> <?php } /*添加文本编辑自定义快捷标签按钮 结束*/ ``` <div id="sc_notice">如果你是WordPress5.0以上版本，而且懒得使用插件，非要用古腾堡编辑器，请看下边。</div> ## WP5.0古腾堡或者非官方编辑器调用方法 如果使用这个方法，直接添加css样式就好，其他的都不要修改。 如何调用？请直接在文章中添加代码。 ``` <div id="sc_notice">绿色提示框</div>; <div id="sc_error">红色提示框</div> <div id="sc_warn">黄色提示框</div> <div id="sc_tips">灰色提示框</div> <div id="sc_blue">蓝色提示框</div> <div id="sc_black">黑色提示框</div> <div id="sc_xuk">虚线提示框</div> <div id="sc_lvb">绿边提示框</div> <div id="sc_redb">红边提示框</div> <div id="sc_orange">橙边提示框</div> ``` 其中`div`可以替换为<code>blockquote</code>。 ## Typecho如何使用 跟我的使用方法一样。我的编辑器是WP Editor.md，WordPress 5.1.1。 你只需要将CSS样式代码加入到你的style.css文件中即可，在书写文章时使用代码调用。 好了教程至此结束。 <hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：孟小N</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://ivmoe.com/14.html">https://ivmoe.com/14.html</a></p><p class="content-copyright">除非特别声明，否则本站文章均为原创，转载时须注明出处及本声明</p></blockquote> 最后修改：2020 年 10 月 13 日 09 : 43 PM © 允许规范转载 赞赏 如果觉得我的文章对你有用，请随意赞赏 ×Close 赞赏作者 扫一扫支付 支付宝支付 微信支付
文中代码块 是使用的插件么？求一份！！
老师，我这个不是插件，就是用的那个markdown的编辑器 WP Editor.md
感谢博主分享，改天试试 :wink:
试试吧，现在我每篇文章都要加 :neutral:
CSS橙色框代码单词拼写错误，应为Orange. :oops:
我记得之前是改了的，可能是把我自己的css改了，忘记改文章里的了，已经修正，谢谢反馈 :smile: