在WordPress中用短代码实现Tip提示功能
注意:本文最后更新时间:
2020-12-24 22:51:23
,文中部分资源内容具有一定的时效性,若文中的资源内容发生错误或已经失效,请在下方留言或者点击右下角QQ图标联系我们。各位童鞋也许都遇到过这种情况:在编辑文章时需要对某些词语、句子做一些补充说明或解释,为了把这些补充说明、解释与文章原来的内容区别开来,通常会通过小括号、文字倾斜等方法来修饰这部分文字。我们对这样的操作可能会有一些不太满意的地方:这些补充说明原本可有可无,只是考虑到为了追求更完美的文章内容,才额外添加上去的。而类似这样的补充说明有时在同一篇文章中可能会出现好多次,使得文章不够精练。有时会在很多文章中需要用到类似的补充说明,使文章看上去略显啰嗦。因此,我想到了另外一个方法,请继续看下文:
你可以尝试着将鼠标移动到这个这就是我等下要介绍的效果上面来。可以看到,这种效果要比原来使用小括号、文字倾斜等方法来的更加简洁,同时也不影响你要补充的内容。下面就正式讲解一下这种效果的实现方式。
首先,我们要找到主题的functions.php
文件,将以下代码复制进去:
/*
* Tip 提示
*/
add_shortcode('tips', 'tooltip');
function tooltip($attrs, $content = null) {
extract( shortcode_atts( array(
'tip' => ''
), $attrs ) );
return '<span class="tooltip"><span class="tooltip-icon"><i class="fa fa-info-circle"></i></span><span class="tip-content"><span class="tip-content-inner">'.$tip.'</span></span></span>';
}
然后,复制下面的 CSS 样式到自己主题目录下的style.css
文件中:
/*
* Tip 提示按钮样式
*/
.tooltip {
position: relative;
margin: 0 5px;
}
.tooltip-icon {
font-size: 15px;
color: red;
}
.tip-content {
z-index: 999999;
display: none;
position: absolute;
left: -5px;
bottom: 30px;
width: 240px;
}
.tip-content-inner {
position: absolute;
bottom: 0;
left: 0;
text-indent: 0em;
display: block;
width: auto;
max-width: 200px;
padding: 5px 8px;
line-height: 20px;
border: 1px solid red;
border-radius: 4px;
background: #f4f8f7;
line-height: 20px;
color: #333;
font-size: 14px;
}
.tip-content-inner:before {
content: "";
position: absolute;
left: 7px;
bottom: -24px;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 12px 6px;
}
.tip-content-inner:after {
content: "";
position: absolute;
left: 8px;
bottom: -20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 10px 5px;
}
.tooltip:hover > .tip-content {
display: block;
}
最后,在文章编辑时,在需要插入该功能的地方添加如下短代码:
【tips tip=提示文字】
记得把代码中的【】修改为英文的[],并修改其中的文字内容即可,完成以上所有操作后就可以在编辑文章时使用该功能了。
最后要告诉大家,因为铭创网络使用的是<i class="fa fa-info-circle"></i>
这种符号,各位童鞋也可以根据自己的需要来设置自己的样式和弹窗颜色!
本站所有资源解压码为:
铭创网络——精选WordPress主题及WordPress插件,帮助站长快速搭建心仪的网站。
铭创网络 » 在WordPress中用短代码实现Tip提示功能
www.yephy.com
铭创网络——精选WordPress主题及WordPress插件,帮助站长快速搭建心仪的网站。
服务范围 | 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服 | |||
2、本站承接 WordPress 建站、仿站、开发、定制等各类服务 | ||||
3、英文模板(主题)安装费用为150元/次,汉化主题首次免费安装(二次安装100元/次) | ||||
售后时间 | 周一至周五(法定节假日除外) 10:00-22:00 | |||
免责声明 | 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: yephy8#gmail.com,请自行替换#),我们会及时删除,给您带来的不便,我们深表歉意! |
铭创网络 » 在WordPress中用短代码实现Tip提示功能