4款简约好看的WordPress提示框

效果图：

很漂亮的4中提示框，比较醒目，色彩靓丽，适合各种网站，喜欢的朋可以使用体验。

教程开始

1、先引入Font Awesome，如果你本身有那么则忽略

<link rel="stylesheet" href="https://CDNjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/CSS/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sGobmWazO5BQPiFucnnEAjpAB+/Sw==" crossoriGin="anonymous" referrerpolicy="no-referrer" />

2、登录WordPress后台-外观-主题编辑器-模板函数(functions.php)

//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'my_quicktags');
function my_quicktags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'texblue', '蓝色提示框', '<div class="wp-block-zhuishangyun-tips"><div class="tip-wrapper info inlineBlock"><div class="tipIcon"><i class="fa fa-info"></i></div><div class="tip-content pd-ripple pd-ripple-trigger"><div class="paragraphs"><p>蓝色', '</p></div></div></div></div>' ); 
QTags.addButton( 'textorange', '橙色警告框', '<div class="wp-block-zhuishangyun-tips"><div class="tip-wrapper worning inlineBlock"><div class="tipIcon"><i class="fa fa-exclamation"></i></div><div class="tip-content pd-ripple pd-ripple-trigger"><div class="paragraphs"><p>橙色', '</p></div></div></div>' ); 
QTags.addButton( 'textgreen', '绿色安全框', '<div class="wp-block-zhuishangyun-tips"><div class="tip-wrapper success inlineBlock"><div class="tipIcon"><i class="fa fa-check"></i></div><div class="tip-content pd-ripple pd-ripple-trigger"><div class="paragraphs"><p>绿色', '</p></div></div></div>' ); 
QTags.addButton( 'textred', '红色错误框', '<div class="wp-block-zhuishangyun-tips"><div class="tip-wrapper error inlineBlock"><div class="tipIcon"><i class="fa fa-times"></i></div><div class="tip-content pd-ripple pd-ripple-trigger"><div class="paragraphs"><p>红色', '</p></div></div></div>' );
function my_quicktags() {
}
</script>
<?php
}

3、加入提示框css样式，你可以加到你模板的css里面或新建一个css文件然后引用。我这里直接帖css至于什么方式自行选着