评论可见
前往评论
效果图:
很漂亮的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至于什么方式自行选着
发表评论