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/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/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/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/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/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文件中。
继续阅读
2022/07/23 23:09 5F
太需要了,泪流满面
2021/06/23 11:36 4F
好的非常感谢
2021/06/01 21:11 3F
挺好看的
2021/03/12 23:19 2F
感谢分享
2021/01/18 16:29 1F
非常完美
2020/06/14 18:46 0F
感谢分享!!!
2020/06/14 22:05 B1
@ 123456 不客气。
@ 123456
2020/06/08 03:48 5F
感谢分享!!!
2020/06/08 11:32 B1
@ 3 谢谢支持!
@ 3
2020/03/21 17:00 4F
感谢分享!!!
2020/03/21 17:01 B1
@ a504111 不客气。
@ a504111
2020/02/28 13:14 3F
挺好看的!
2020/02/28 21:17 B1
@ 松鼠小 谢谢支持。
@ 松鼠小
2020/02/13 23:57 2F
评论了为啥还是看不到啊
2020/02/14 00:42 B1
@ exile 审核了,现在可以了,防止不合法评论
@ exile
2020/02/13 23:56 1F
good-好
2019/05/29 23:09 0F
good支持
2019/05/30 10:26 B1
@ 猪肉佬 谢谢支持。
@ 猪肉佬
2019/05/19 13:14 5F
感谢分享,不错哦
2019/05/19 14:24 B1
@ itdog 希望对你有帮助。
@ itdog
2019/04/07 22:39 4F
看卡怎么样
2019/04/07 23:02 B1
@ 前臂 可以看看效果如何。
@ 前臂
2019/01/25 22:43 3F
看看怎么样
2019/01/25 23:15 B1
@ 艾特好 还不错。
@ 艾特好
2018/12/08 10:14 2F
看看密码
2018/12/09 15:15 B1
@ 小鱼 好的。
@ 小鱼
2018/12/08 05:07 1F
看看密码好不好
2018/12/09 15:15 B1
@ soujer 可以的。
@ soujer
2018/12/03 16:28 0F
看看密码
2018/12/04 01:32 B1
@ 仙教圣教主 可以的。
@ 仙教圣教主
2018/11/17 12:43 5F
很棒,谢谢楼主
2018/11/17 13:01 B1
@ 李想 不客气。谢谢支持。
@ 李想
2018/11/03 23:20 4F
代码二添加在什么地方,我添加到functions.php,报错了
2018/11/04 00:56 B1
@ 屌丝小小鸭 也是主题根目录的functions.php内
@ 屌丝小小鸭
2018/11/04 10:45 B2
@ ╭飛雪飄零╮
加了代码二就报错了
@ ╭飛雪飄零╮
2018/10/01 11:35 3F
支持
2018/10/02 19:57 B1
@ 浅醉 谢谢关注!
@ 浅醉
2018/08/30 22:30 2F
感谢分享
2018/08/30 23:11 B1
@ 似乎 不客气。。。谢谢支持!
@ 似乎
2018/08/15 17:00 1F
漂亮,这个不错
2018/08/15 19:05 B1
@ xgky 可以一用。
@ xgky