在WordPress中用短代码实现Tip提示功能

也想出现在这里?联系我们
阿里云ECS爆款特惠

各位童鞋也许都遇到过这种情况:在编辑文章时需要对某些词语、句子做一些补充说明或解释,为了把这些补充说明、解释与文章原来的内容区别开来,通常会通过小括号、文字倾斜等方法来修饰这部分文字。我们对这样的操作可能会有一些不太满意的地方:这些补充说明原本可有可无,只是考虑到为了追求更完美的文章内容,才额外添加上去的。而类似这样的补充说明有时在同一篇文章中可能会出现好多次,使得文章不够精练。有时会在很多文章中需要用到类似的补充说明,使文章看上去略显啰嗦。因此,我想到了另外一个方法,请继续看下文:

WordPress

你可以尝试着将鼠标移动到这个这就是我等下要介绍的效果上面来。可以看到,这种效果要比原来使用小括号、文字倾斜等方法来的更加简洁,同时也不影响你要补充的内容。下面就正式讲解一下这种效果的实现方式。

在WordPress中用短代码实现Tip提示功能插图2

因为铭创网络自己使用的是 RiPro 主题,为了照顾使用其他主题的童鞋,我会尽量分享支持所有主题的通用方法!

首先,我们要找到主题的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>这种符号,各位童鞋也可以根据自己的需要来设置自己的样式和弹窗颜色!

本站所有资源解压码为:www.yephy.com
铭创网络——精选WordPress主题及WordPress插件,帮助站长快速搭建心仪的网站。
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress 建站、仿站、开发、定制等各类服务
3、英文模板(主题)安装费用为150元/次,汉化主题首次免费安装(二次安装100元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]),我们会及时删除,给您带来的不便,我们深表歉意!

铭创网络 » 在WordPress中用短代码实现Tip提示功能
也想出现在这里?联系我们
腾讯云 11.11 云上盛惠

发表评论

提供最优质的资源集合

立即查看 了解详情