wordpress短代码实现tip提示功能

  • A+
所属分类:建博笔记

一、前言

相信各位童鞋都遇到过在编辑文章时需要对某些词语/句子做一些补充说明或解释,为了把这些补充说明/解释与文章原来的内容区别开来,通常会通过小括号、文字倾斜等方法来修饰这部分文字。

举个栗子:

wordpress短代码实现tip提示功能

从图中可以看到,我对图中第二段代码的添加位置做了一个补充说明,其意思是说:建议(而不是必须)将代码添加在第一段代码的上面,也可以添加在其他地方,这个不难理解吧。

好了,了解了这个后,现在我对这样的操作产生了一些不满:这些补充说明原本可有可无,只是考虑到为了追求更完美的文章内容,才额外添加上去的。而类似这样的补充说明有时在同一篇文章中可能会出现好多次,使得文章不够精练。有时会在很多文章中需要用到类似的补充说明,使文章看上去略显啰嗦。因此,我想到了另外一个方法,请看下面介绍。

 

二、效果预览

你可以尝试着将鼠标移动到这个 ? 这就是我等下要介绍的效果上面来。

可以看到,这种效果要比原来使用小括号、文字倾斜等方法来的更加简洁,同时也不影响你要补充的内容。下面就正式讲解一下这种效果的实现方式。

为了尽可能照顾到不同主题的童鞋使用该功能,下面的讲解主要分为:针对使用相同主题的实现方式和针对使用其他主题的实现方式。各位童鞋按需阅读即可。

 

三、针对使用相同主题的实现方式

首先:打开【inc/shortcode.php】文件,在适当位置添加代码 ? 功能主体代码

// Tip 提示
function tooltip($attrs, $content = null) {
	extract( shortcode_atts( array(
		'tip' => ''
	), $attrs ) );
	return '<span class="tooltip"><span class="tooltip-icon"> ? </span><span class="tip-content"><span class="tip-content-inner">'.$tip.'</span></span></span>';
}

然后:打开【js/mce-button.js】文件,在适当位置添加代码 ? JS

						{
							text: 'Tip 提示',
							icon: 'help',
							onclick: function() {
								editor.insertContent('【tips tip=提示文字】' + '');
							}
						},

记得把代码中的【】修改为[]

接着:打开【inc/include.php】文件,在适当位置添加代码

add_shortcode('tips','tooltip');
如果你打开这个文件后看到的是一堆乱码的话,请将这条代码添加到【功能主体代码】的最后。

最后:打开【style.css】文件,在文件最后添加样式

/*Tip 提示*/
.tooltip {
    position: relative;
    margin: 0 5px;
}

.tooltip-icon {
    border: 1px solid #1abc9c;
    border-radius: 50%;
    font-size: 14px;
    font-family: "caption", Arial;
    color: #1abc9c;
    background: #f9f9f9;
}

.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 10px;
    line-height: 20px;
    border: 1px solid #1abc9c;
    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: #1abc9c 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;
}

完成以上所有操作后就可以在编辑文章时使用该功能了,具体如下:

新建一篇文章,将光标移动到需要插入该功能的位置,然后点击编辑器中的【短代码--综合功能--Tip 提示】,这样编辑器内就会出现一条代码

wordpress短代码实现tip提示功能

修改【提示文字】为你要显示的内容即可。

 

四、针对使用其他主题的实现方式

考虑到主题的不同,使用其他主题的童鞋可能无法直接使用别人提供的代码应用到自己的主题中。因此,在这里顺便附上一份通用教程,供各位童鞋参考。

首先:打开【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"> ? </span><span class="tip-content"><span class="tip-content-inner">'.$tip.'</span></span></span>';
}

然后:复制上面的 CSS 样式到自己主题目录下的【style.css】文件中。

最后:在文章编辑时,在需要插入该功能的地方添加代码

【tips tip=提示文字】

记得把代码中的【】修改为[],并修改其中的文字内容即可。

不过,我没有验证这种方式是否正确,还需各位童鞋自行测试。

 

五、关于符号变形

由于?和外面的圆圈组成的这个符号是通过 CSS 来实现的,因此应用到不同的主题或在不同的浏览器中查看时,可能会出现符号变形的情况,如下:

wordpress短代码实现tip提示功能

解决思路:

  • 修改 CSS 样式,使之与自己的主题匹配 ? 适用所有应用的地方符号都变形的情况
  • 添加 CSS 浏览器兼容性代码 ? 适用符号在部分浏览器下变形的情况
  • 避免符号出现在行首或行末,也就是说符号前后要有文字或标点等其他内容 ? 适用符号在行首或行末时变形的情况
  • 用图标字体代替原来的符号 ? 可能需要
  • 其他你认为行之有效的解决方案
若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: