wordpress目前是使用较多的博客建站程序之一,不管是主题、插件,还是各种优化、美化方面的教程还是比较多的,遇到问题也可以通过相关搜索到各种解答。现在小七收集到可以给wordpess增加一些比较实用的短代码,具体代码以及添加方法如下,如果有需求请做好模板数据备份在进行操作,以免出现问题可以快速恢复。
1.编辑 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'); /* 短代码信息框 完毕*/
2. 将下面的 CSS 代码添加到 style.css 文件中,或者直接在主题的自定义样式中添加
/*彩色信息框*/ #sc_notice{ color:#7da33c; background:#ecf2d6url(‘img/sc_notice.png’)–1px–1pxno-repeat; border:1pxsolid#aac66d; overflow:hidden; margin:10px0; padding:15px15px15px35px; } #sc_warn{ color:#ad9948; background:#fff4b9url(‘img/sc_warn.png’)–1px–1pxno-repeat; border:1pxsolid#eac946; overflow:hidden; margin:10px0; padding:15px15px15px35px; } #sc_error{ color:#c66; background:#ffeceaurl(‘img/sc_error.png’)–1px–1pxno-repeat; border:1pxsolid#ebb1b1; overflow:hidden; margin:10px0; padding:15px15px15px35px; } #sc_tips{ color:#777; background:#eaeaeaurl(‘img/sc_tips.png’)–1px–1pxno-repeat; border:1pxsolid#ccc; overflow:hidden; margin:10px0; padding:15px15px15px35px; } #sc_blue{ color:#1ba1e2; background:rgba(27,161,226,0.26)url(‘img/sc_blue.png’)–1px–1pxno-repeat; border:1pxsolid#1ba1e2; overflow:hidden; margin:10px0; padding:15px15px15px35px; } #sc_black{ border-width:1px4px4px1px; border-style:solid; border-color:#3e3e3e; margin:10px0; padding:15px15px15px35px; } #sc_xuk{ border:2pxdashedrgb(41,170,227); background-color:rgb(248,247,245); margin:10px0; padding:15px15px15px35px; } #sc_lvb{ margin:10px0; padding:10px15px; border:1pxsolid#e3e3e3; border-left:2pxsolid#05B536; background:#FFF; } #sc_redb{ margin:10px0; padding:10px15px; border:1pxsolid#e3e3e3; border-left:2pxsolid#ED0505; background:#FFF; } #sc_organge{ margin:10px0; padding:10px15px; border:1pxsolid#e3e3e3; border-left:2pxsolid#EC8006; background:#FFF; }
使用方法:
在文章编辑时插入以下代码即可,注意修改下括号
{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文件中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:
//添加HTML编辑器自定义快捷标签按钮 add_action(‘after_wp_tiny_mce’,‘bolo_after_wp_tiny_mce’); functionbolo_after_wp_tiny_mce($mce_settings){ ?> <scripttype=“text/javascript”> QTags.addButton(‘v_notice’,‘绿框’,‘<divid=“sc_notice”>绿色提示框</div>n’,“”); QTags.addButton(‘v_error’,‘红框’,‘<divid=“sc_error”>红色提示框</div>n’,“”); QTags.addButton(‘v_warn’,‘黄框’,‘<divid=“sc_warn”>黄色提示框</div>n’,“”); QTags.addButton(‘v_tips’,‘灰框’,‘<divid=“sc_tips”>灰色提示框</div>n’,“”); QTags.addButton(‘v_blue’,‘蓝框’,‘<divid=“sc_blue”>蓝色提示框</div>n’,“”); QTags.addButton(‘v_black’,‘黑框’,‘<divid=“sc_black”>黑色提示框</div>n’,“”); QTags.addButton(‘v_xuk’,‘虚线’,‘<divid=“sc_xuk”>虚线提示框</div>n’,“”); QTags.addButton(‘v_lvb’,‘绿边’,‘<divid=“sc_lvb”>绿边提示框</div>n’,“”); QTags.addButton(‘v_redb’,‘红边’,‘<divid=“sc_redb”>红边提示框</div>n’,“”); QTags.addButton(‘v_orange’,‘橙边’,‘<divid=“sc_orange”>橙边提示框</div>n’,“”); functionbolo_QTnextpage_arg1(){ } </script> <?php }
图像下载地址:图标下载
放在主题下面的img文件中!
说明:代码来源于网络,具体原创未知!