2022最新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至于什么方式自行选着
.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个按钮。使用的时候需要注意点一下是开始输入你的内容再点一下是结束。一个提示框你可以理解需要点两次点第一次输入内容点第二次完成。
最后附上代码包,如果无法复制或复制不成功等情况可以直接下载代码包