2022最新WordPress提示框

教程开始

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至于什么方式自行选着

.block.text .content,
.widget_nav_menu ul ul li.current-menu-item a.text:before .content {
 margin-top:10px
}
.flexContainer+p {
 margin-top:30px
}
p+.flexContainer {
 margin-top:20px
}
.tip-wrapper {
 padding:2px 6px 2px 0;
 border-radius:8px 7px 7px 8px;
 display:flex;
 align-items:center
}
.tip-wrapper.inlineBlock {
 display:inline-flex
}
.tip-wrapper.info {
 background:linear-gradient(#20b8ff,#20a0ff);
 box-shadow:0 3px 5px rgba(32,160,255,.15);
}
.tip-wrapper.info .tip-content {
 color:#20a0ff
}
.tip-wrapper.success {
 background:linear-gradient(#8fce44,#61be33);
 box-shadow:0 3px 5px rgba(104,195,59,.15)
}
.tip-wrapper.success .tip-content {
 color:#52bb1d
}
.tip-wrapper.worning {
 background:linear-gradient(#ffb449,#ff953f);
 box-shadow:0 3px 5px rgba(255,154,73,.15)
}
.tip-wrapper.worning .tip-content {
 color:#ff7800
}
.tip-wrapper.error {
 background:linear-gradient(#ff7849,#ff4949);
 box-shadow:0 3px 5px rgba(255,73,73,.15)
}
.tip-wrapper.error .tip-content {
 color:#ff4949
}
.tip-wrapper .tipIcon {
 width:20px;
 height:20px;
 flex-shrink:0;
 text-align:center;
 color:#fff
}
.tip-wrapper .tipIcon i {
 font-size:17px;
 width:15px;
 height:15px;
 vertical-align: 0.9em !important;
}
.tip-wrapper .tip-content {
 width:calc(100% - 20px);
 background:linear-gradient(#fff,hsla(0,0%,100%,.9));
 box-shadow:inset 0 0 0 1px #fff;
 border-radius:5px;
 padding:0 10px;
 text-shadow:0 1px #fff
}
.tip-wrapper p {
 margin:5px 0!important
}
.need_reply {
 padding:15px;
 text-align:center;
 border:1px dashed #bec9d5;
 border-radius:4px;
 cursor:default;
 transition:.25s
}
.need_reply:hover {
 border:1px dashed #007dff;
 color:#007dff;
 transition:.25s
}
.wp-block-quote {
 color:#99a9bf
}
.wp-block-quote p {
 margin-bottom:10px
}
.wp-block-quote {
 border-left:none;
 padding-left:1em
}
.wp-block-quote:before {
 content:"";
 background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath data-name='path' d='M19.4 11.778a4.516 4.516 0 01-6.147 1.636A4.277 4.277 0 0111.9 6.9l-.044-.025 4-6.882 1.732.993L15.839 5.1a4.449 4.449 0 013.561 6.678zM2.25 13.414A4.454 4.454 0 01.6 7.308 4.4 4.4 0 01.9 6.9l-.044-.025 4-6.882 1.732.993L4.839 5.1a4.471 4.471 0 11-2.589 8.314z' fill='%23C0CCDA' fill-rule='evenodd'/%3E%3C/svg%3E");
 display:block;
 width:20px;
 height:14px;
 margin-bottom:10px
}
.wp-block-quote cite {
 display:block;
 font-style:italic;
 color:#8492a6;
 font-size:13px
}
.wp-block-pandastudio-single:after,
.wp-block-pandastudio-single:before {
 content:"";
 display:table;
 clear:both
}
.wp-block-pandastudio-single {
 display:flex!important;
 float:none;
 flex-direction:column
.fa.fa-info {
}
.fa.fa-info {
}
.fa.fa-info {
}

最后完成之后你就可以在后台文章-文本，看到这4个按钮。使用的时候需要注意点一下是开始输入你的内容再点一下是结束。一个提示框你可以理解需要点两次点第一次输入内容点第二次完成。

最后附上代码包，如果无法复制或复制不成功等情况可以直接下载代码包