网站新增彩色警示文本框

在浏览很多博客的时候，经常会看到如下的一些彩色警示文本框很是漂亮，网上也有很多这方面的代码，但是在实际配置到自己网站上的时候发现有很多代码不可用而且文章解释不清楚，对于一些新手来说配置起来比较麻烦，于是自己查看了网上的一些相关代码，并稍作修改形成了这篇文章，希望这篇文章对喜欢这个功能的朋友们有所帮助。

修改主题前还是希望大家将网站备份一下，以免误操作引起网站崩溃。

functions.php文件修改

将下面的函数添加到主题的 functions.php 文件中，部分主题可能函数文件不是这个具体添加到何处请询问主题作者。

/*文章内容高亮提示框开始*/
/*青色警示文本框*/
function qgg_cyan($atts, $content=null){   
    return '<div id="tbc_cyan">'.$content.'</div>';   
}    
add_shortcode('qgg_cyan','qgg_cyan'); 
/*绿色警示文本框*/   
function qgg_green($atts, $content=null){   
    return '<div id="tbc_green">'.$content.'</div>';   
}    
add_shortcode('qgg_green','qgg_green');     
 /*黄色色警示文本框*/  
function qgg_yellow($atts, $content=null){   
    return '<div id="tbc_yellow">'.$content.'</div>';   
}    
add_shortcode('qgg_yellow','qgg_yellow'); 
 /*粉色警示文本框*/  
function qgg_pink($atts, $content=null){   
    return '<div id="tbc_pink">'.$content.'</div>';   
}    
add_shortcode('qgg_pink','qgg_pink');  
 /*灰色警示文本框*/  
function qgg_gray($atts, $content=null){   
    return '<div id="tbc_gray">'.$content.'</div>';   
}    
add_shortcode('qgg_gray','qgg_gray');   
/*文章内容高亮提示框完毕*/

上述代码主要是为主题添加短代码以备文章编辑时快速调用的，对比各个彩色文本框的代码你可以看出除了函数名外其实各段代码是相同的。直接复制粘贴任意一段代码并稍作修改既可以添加一个新的彩色文本框。

CSS样式文件修改

CSS样式主要是控制彩色文本框在前端的显示样式，这里我们将代码添加到主题的 style.css 文件中即可。需要注意的是部分主题，比如我所使用的DUX主题默认是不调用 style.css 文件的，使用DUX主题的需要将代码添加至主题的 main.css 文件中去。

/*网站新增彩色警示文本框*/ 
#tbc_cyan {
	color: #24b4f0;  
	background: #c0e8ff url('../diy/img/tbc_cyan.png') -1px -1px no-repeat;  
	border: 1px solid #24b4f0;   
	overflow: hidden;   
	margin: 10px 0;   
	padding: 15px 15px;   
} 
#tbc_green {
	color: #7da33c;   
	background: #ecf2d6 url('../diy/img/tbc_green.png') -1px -1px no-repeat;   
	border: 1px solid #aac66d;   
	overflow: hidden;   
	margin: 10px 0;   
	padding: 15px;   
} 
#tbc_yellow {
	color: #ad9948;  
	background: #fff4b9 url('../diy/img/tbc_yellow.png') -1px -1px no-repeat;  
	border: 1px solid #eac946;  
	overflow: hidden;  
	margin: 10px 0;  
	padding: 15px;  
}  
#tbc_pink {
	color: #c66;  
	background: #ffecea url('../diy/img/tbc_pink.png') -1px -1px no-repeat;  
	border: 1px solid #ebb1b1;  
	overflow: hidden;  
	margin: 10px 0;  
	padding: 15px;  
}   
#tbc_gray {
	color: #f0f0f0;
	background: #eaeaea url('../diy/img/tbc_gray.png') -1px -1px no-repeat;
	border: 1px solid #c8c8c8;
	overflow: hidden;
	margin: 10px 0;
	padding: 15px;  
}

网上的样式代码比较混乱，这里我讲代码分割成适合阅读的格式方便大家理解，不过我不确定你复制后是否会打乱格式，如果打乱了建议你再调整一下。与定义短代码类似，这里的样式分别对应上面不同彩色文本框，大家也可以直接复制其中一段并稍作修改即可为新添加的彩色文本框定义前端样式。需要注意的是样式中的图片路径大家需要根据自己修改，也就是说你需要将诸如 ../diy/img/tbc_cyan.png 的路径改为你自己主题中图标的路径。文末我会提供我所使用的图标路径下载。

使用彩色文本框

完成上面的配置，不出意外的话我们就可以使用这个功能了，具体使用方法如下：

青色文本框：【qgg_cyan]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~[/qgg_cyan】
绿色文本框：【qgg_green]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~[/qgg_green】
黄色文本框：【qgg_yellow]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~[/qgg_yellow】
粉色文本框：【qgg_pink]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~[/qgg_pink】
灰色文本框：【qgg_gray]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~[/qgg_gray】

注意将上面“【】”替换为“[]”。

添加后台文本编辑器快捷按钮

显然如果每次都使用上面短代码调用太麻烦了，特别是如果我们网站要使用的短代码太多的话记忆起来难免有困难，这里给大家提供一段后台文本编辑器中添加按钮的代码方便大家快速调用。同样各个按钮的代码相互独立，大家可复制并稍作修改即可添加一个自己独有的按钮。代码添加到主题的functions.php中就好。

//添加彩色文本框快捷按钮
function appthemes_add_qgg_cyan() {
?>
    <script type="text/javascript">
    if ( typeof QTags != 'undefined' ) {
        QTags.addButton( 'qgg_cyan', '青色文本框', '【qgg_cyan]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~','[/qgg_cyan]' );
    } 
    </script>
<?php 
} 
add_action('admin_print_footer_scripts', 'appthemes_add_qgg_cyan' );

function appthemes_add_qgg_green() {
?>
    <script type="text/javascript">
    if ( typeof QTags != 'undefined' ) {
        QTags.addButton( 'qgg_green', '绿色文本框', '【qgg_green]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~','[/qgg_green]' );
    } 
    </script>
<?php 
} 
add_action('admin_print_footer_scripts', 'appthemes_add_qgg_green' );

function appthemes_add_qgg_yellow() {
?>
    <script type="text/javascript">
    if ( typeof QTags != 'undefined' ) {
        QTags.addButton( 'qgg_yellow', '黄色文本框', '【qgg_yellow]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~','[/qgg_yellow]' );
    } 
    </script>
<?php 
} 
add_action('admin_print_footer_scripts', 'appthemes_add_qgg_yellow' );

function appthemes_add_qgg_pink() {
?>
    <script type="text/javascript">
    if ( typeof QTags != 'undefined' ) {
        QTags.addButton( 'qgg_pink', '粉色文本框', '【qgg_pink]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~','[/qgg_pink]' );
    } 
    </script>
<?php 
} 
add_action('admin_print_footer_scripts', 'appthemes_add_qgg_pink' );

function appthemes_add_qgg_gray() {
?>
    <script type="text/javascript">
    if ( typeof QTags != 'undefined' ) {
        QTags.addButton( 'qgg_gray', '灰色文本框', '【qgg_gray]蝈蝈要安静提醒您，这里要替换为您的文本内容哦~','[/qgg_gray]' );
    } 
    </script>
<?php 
} 
add_action('admin_print_footer_scripts', 'appthemes_add_qgg_gray' );

注意添加代码的时候将上述代码中的“【”替换为“[”哦。