效果展示:
文字
文字
文字
文字
文字
输入文字
输入文字
输入文字
输入文字
输入文字
代码部署:
- 编辑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里面
- //添加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
- }
代码解析:
QTags.addButton( '', '', '', '' );
- 四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行;
- 形象说明:QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );
- 可以自定义添加多行QTags.addButton( '', '', '', '' );增加多个按钮!
CSS代码:
- 添加以下CSS到主题目录的style.css里
修改上面CSS里面的5个图片URL地址url('img/sc_error.png')
- 下载后把图标上传到主题目录下面的img文件夹就可以了,至此,你刷新下页面,就可以看到编辑器文本模式有这些彩色框标签添加按钮了。
重要提醒:如果使用按钮的话,文章最开始的代码部署和使用方法中的短代码就可以不用
继续阅读
- 我的微信
- 这是我的微信扫一扫
- 我的微信公众号
- 我的微信公众号扫一扫
2023年12月20日 09:54 73楼
感谢分享
2023年12月20日 09:54 72楼
感谢分享
2023年4月15日 18:23 71楼
春困秋乏夏打盹,冬天读书还怕冷,一年四季都不适合读书。