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

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

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

因为铭创网络自己使用的是 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>这种符号，各位童鞋也可以根据自己的需要来设置自己的样式和弹窗颜色！