wordpress添加编辑器可视化按钮代码

Zero零分 笔记 1,716 0 1个月前

需要功能:

1、在编辑器可视化界面添加一个按钮

2、点击按钮弹出输入框

添加按钮:

在functions.php模板函数文件中添加插入按钮函数

挂载函数到正确的钩子

function outurl_mce_button() {
// 检查用户权限
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// 检查是否启用可视化编辑
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'outurl_plugin' );
add_filter( 'mce_buttons', 'outurl_button' );
}
}
add_action('admin_head', 'outurl_mce_button');

声明新按钮的脚本

function outurl_plugin( $plugin_array ) {
$plugin_array['outurl'] = get_template_directory_uri() .'/images/js/outurl.js';
return $plugin_array;
}

在编辑器上注册新按钮

function outurl_button( $buttons ) {
array_push( $buttons, 'outurl' );
return $buttons;
}

outurl.js实现功能函数

(function () {
tinymce.PluginManager.add('outurl', function (editor, url) {
editor.addButton('outurl', {
title: '添加外链',
image: url+"/outurl.png",
onclick: function () {
//editor.insertContent('WPExplorer.com is awesome!');
editor.windowManager.open({
title: '请输入标签及外链',
body: [
{
label:'输入标签',
type: 'textbox',
name: 'outkey',
minWidth: 400,
minHeight: 30,
multiline: false,
value: ''
},
{
label:'输入链接',
type: 'textbox',
name: 'outurl',
minWidth: 400,
minHeight: 30,
multiline: false,
value: ''
}
],
onsubmit: function (e) {
//获取输入内容
var outkey = e.data.outkey;
var outurl = e.data.outurl;
var urls=jQuery("#urls_value").val();
var urlarr=urls.split("[++++++++++]");
var i=urlarr.length;
if(outkey.length > 0 && outurl.length > 0) {
var txt=jQuery("#urls_value").val()+'[++++++++++]'+outurl;
jQuery("#urls_value").val(txt);
//将地址拼接到iframe ,输出到编辑器
editor.insertContent('[ outurl id='+i+']'+outkey+'[ /outurl]');
}else{
alert("标签和URL都不能为空!");
}
}
});
}
});
});
})();

最后处理短代吗

function outurl($atts,$content){
global $post;
extract(shortcode_atts(array("id"=>'0'),$atts));
return '<a target="_blank" rel="nofollow" href="'.get_bloginfo("url").'/go?e='.$post->ID.'_'.$id.'_1_1_'.time().'">'.$content.'</a>';
}

以上是以博客外链为例

 

发布:2021-08-31 16:44:03
标签:
链接:https://blog.32xp.com/wordpress-edit-2.html
END

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

*

用户评论(0)

wordpress相邻文章(下一篇下一篇)显示文章略缩图

wordpress相邻文章(下一篇下一篇)显示文章相邻文章的略缩图,如 在没有略缩图时显示默认图片 原理:通过文章ID调用略缩图,functions.php插入调用略缩图函数 if(function_exists('add_theme_support')){ add_theme_support( 'post-thumbnails' ); } function post_thumbnail($id=false){ if(has_post_thumbnail($id)){ //如果有缩略图,则显示缩略图 the_post_thumbnail($id); }else{ global $post, $posts; $post_img = ''; $post_content=$id?get_post($id)->post_content:$post->post_content; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post_content, $matches); $post_img_src = $matches [1][0]; $post_img = $post_img_src; //如果没有缩略图,则显示日志中的第一张图片 if(empty($post_img_src)){ //如果日志中没有图片,则显示默认图片 $post_img = get_bloginfo("template_url").'/images/noimg.jpg'; } $post_img = str_replace('//','//',$post_img); return $post_img; } } 文章列表可以直接通过post_thumbnail()调用,在上一篇下一篇中通过相邻文章的ID调用,上一篇文章ID:get_previous_post()->ID,下一篇文章ID:get_next_post()->ID,调用代码 上一篇:post_thumbnail(get_previous_post()->ID) 下一篇:post_thumbnail(get_next_post()->ID) 当然也可以通过任意文章ID调用      
笔记 ·

wordpress添加编辑器按钮

最近在写一个新的wordpress模板,其中有一个文章外链问题,需要在编辑器上添加一个按钮! 基本功能是:点击按钮弹出输入框,在输入框内黏贴外来链接,短代码功能修改链接跳转go=xxx这样 按钮移植这个博客的代码,发现问题: 1、不显示按钮 2、不支持jq 就算重新用这个博客的模板,一样无法使用这个功能,很奇怪,wordpress的版本是一样的! 也就是两个完全一样的环境下,两个模板的一些功能无法使用! 目前正在测试中,看具体是哪里的问题!
笔记 ·

WordPress评论表单添加验证码

上次看到朋友的博客,垃圾评论竟然上万条,这得多久没有进入后台?还是没有清理的习惯? 虽说,评论的用途似乎不是很大,WordPress现在折腾的人也少了吧。终究还是限制了一下评论,添加了一个验证码,且看下后续的效果 原本是想把验证码放在“提交评论”左侧的,但折腾了半天,还是不知道怎么放过来,测试了一些钩子,似乎也都不行。暂且先这样吧!
笔记 ·

wordpress结合微信小程序API接口开发构想

wordpress结合小程序插件百度搜索下已经都有现成的,一般都是结合 WordPress API 插件给小程序提供JSON数据接口! 像文章内有带图片,视频元素的,无法直接在小程序内显示 小程序代码示例: 之前一直考虑在小程序内处理文章数据,感觉比较累!是否可以通过数据源上处理? WordPress上读取的文章,几乎都是用P标签分割段落和图片,视频,即,即便是图片img标签也会被P标签包裹!在读取的文章中以P标签分割,重组数组 类似: array=array( "type"=>"txt",//例如:txt:文本,img:图片,video:视频... "content"=>"内容"//如果是图片或者视频,直接写提取地址 ); 小程序读取文章数据时,循环数组,用type判断是文章还是图片又或是视频 剩下的就是小程序内样式
笔记 ·

phpstudy phpmyadmin访问慢的问题解决方案

本地配置phpStudy环境phpMyAdmin运行速度慢,phpstudy phpmyadmin访问慢的问题解决方案 在phpmyadmin目录下\phpStudy\PHPTutorial\WWW\phpMyAdmin\libraries找到config.default.php 打开config.default.php搜索host或者localhost或者$cfg[‘Servers’][$i][‘host’] 将:$cfg['Servers'][$i]['host'] = 'localhost'; 修改位:$cfg['Servers'][$i]['host'] = '127.0.0.1'; 另外,顺便将程序链接数据库的localhost改为127.0.0.1将会提高程序的运行速度
笔记 ·
Zero零分
站龄14年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
464
文章
36
评论
27
分类
819
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告