WordPress美化之文章内页新增彩色渐变框

前排提示，经后续测试发现: 此文章css样式部分效果在安卓Android设备上会出现部分不兼容无法显示完整效果。如天空之境在安卓设备上显示是纯粉色。PC和iOS均显示正常。

一共9种样式。其中一个是无边框透明的。也凑数放一起了（但也带格式的）。

教程开始

首先把下面的CSS丢到你的主题style.css样式文件内。圆角值修改下边的第三行即可。默认8px

然后把下面的代码放到你主题的函数文件functions.php内

/*添加文本编辑自定义快捷标签按钮 开始*/
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( 'l_mhz', '迷幻紫', '<div id="lx_mhz">迷幻紫</div>n', "" );
QTags.addButton( 'l_xgh', '西瓜红', '<div id="lx_xgh">西瓜红</div>n', "" );
QTags.addButton( 'l_tkj', '天空境', '<div id="lx_tkj">天空境</div>n', "" );
QTags.addButton( 'l_xyz', '小宇宙', '<div id="lx_xyz">小宇宙</div>n', "" );
QTags.addButton( 'l_gll', '橄榄绿', '<div id="lx_gll">橄榄绿</div>n', "" );
QTags.addButton( 'l_xty', '小太阳', '<div id="lx_xty">小太阳</div>n', "" );
QTags.addButton( 'l_yyz', '优雅紫', '<div id="lx_yyz">优雅紫</div>n', "" );
QTags.addButton( 'l_szh', '深邃黑', '<div id="lx_szh">深邃黑</div>n', "" );
QTags.addButton( 'l_wbk', '无边框', '<div id="lx_wbk">无边框</div>n', "" ); 
function bolo_QTnextpage_arg1() {
}
</script>
<?php
}
/*添加文本编辑自定义快捷标签按钮 结束*/

使用说明

WordPress后台文章编辑器 文本选项插入相应文本框即可。可返回可视化编辑操作。如换行不生效可检查div嵌套关系。