wordpress的文章摘要是不是很丑,使用纯CSS即可实现彩色文本框效果,美化文章。下面给出具体教程。
具体效果如下:
绿色提示框
红色提示框
黄色提示框
灰色提示框
蓝色提示框
黑色提示框
虚线提示框
绿边提示框
红边提示框
步骤一:添加代码
在主题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', "" ); function bolo_QTnextpage_arg1() { } </script> <?php } /*添加文本编辑自定义快捷标签按钮 结束*/
步骤二:添加CSS
在主题文件style.css中添加如下代码:
请把https://www.luoyechenfei.com/wp-content/themes/love替换为自己的图片地址。
/*cai se wen ben kuang*/ #sc_notice { color: #7da33c; background: #ecf2d6 url('https://www.luoyechenfei.com/wp-content/themes/love/img/mark/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://www.luoyechenfei.com/wp-content/themes/love/img/mark/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://www.luoyechenfei.com/wp-content/themes/love/img/mark/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://www.luoyechenfei.com/wp-content/themes/love/img/mark/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://www.luoyechenfei.com/wp-content/themes/love/img/mark/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; }
步骤三:上传图片文件
上传附件的图片到主题下的img文件中。
继续阅读
广东省深圳市 5F
登录回复
很棒,谢谢楼主
广东省深圳市 B1
登录回复
@ 李想 不客气。谢谢支持。
@ 李想
浙江省杭州市 4F
登录回复
代码二添加在什么地方,我添加到functions.php,报错了
广东省深圳市 B1
登录回复
@ 屌丝小小鸭 也是主题根目录的functions.php内
@ 屌丝小小鸭
浙江省杭州市 B2
登录回复
@ ╭飛雪飄零╮
加了代码二就报错了
@ ╭飛雪飄零╮
浙江省杭州市 3F
登录回复
支持
浙江省杭州市 B1
登录回复
@ 浅醉 谢谢关注!
@ 浅醉
浙江省杭州市 2F
登录回复
感谢分享
广东省深圳市 B1
登录回复
@ 似乎 不客气。。。谢谢支持!
@ 似乎
浙江省杭州市 1F
登录回复
漂亮,这个不错
广东省深圳市 B1
登录回复
@ xgky 可以一用。
@ xgky