之前在多个博客都看到这种彩色美化框,感觉好看,而且把文章分得很有层次感,体验方便,所以仙踪小栈博客也用上了,效果不错哦。这里也分享给大家。
其美化效果是有了,但是却并不方便,所以对整个代码做了修改,增加了几个WordPress默认TinyMCE编辑器自定义按钮。点击按钮直接插入标签,更加方便实用。
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
很多博客都有这样的代码教程,但是基本上都是没有添加到后台自定义按钮。
效果实现
1.更改编辑器默认视图为HTML
大家都知道,在后台新建文章后,编辑器就自动跳转到“可视化”视图,对于一些经常要插入代码或者WEB设计者们来说,可能更习惯使用HTML视图手动编辑。
设置方法:将以下代码添加到主题的functions.php文件里即可:
2.新增WordPress默认TinyMCE编辑器自定义按钮
在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', '绿框', '<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
- }
其中,主要设置自定义按钮的是这个函数:
- QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );
四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行
3.CSS美化
将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个图标链接,请将链接改为你保存的位置
下载地址见文章末尾
4.后台效果
完成以上步骤后,打开文章编辑界面,应该会看到以下效果:
【提醒】在新版知更鸟Begin主题LTS版中,已经集成了此按钮,无需我们自己部署代码。
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
2022年9月20日 22:10 41楼
感谢分享