首页>技术知识>WordPress 给wordpress模板编辑器添加插入文章链接的按钮1:添加自定义按钮
WordPress教程学习网站
2022-06-21
WordPress教程学习网站丨模板定制、网站使用教程、插件推荐、代码优化、wp建站教程、数据文章采集、系统开发、系统优化,功能开发,仿站教程等各类WordPress技术知识,供网友学习了解。

最近为一个客户开发一个WordPress模板,对方有一个要求——给WordPress主题自带的编辑器添加一个自定义按钮,用来在编辑文章时,点击这个按钮,可以在文章内容内插入其它文章的链接,而且需要的是,在输入一个相关关键字,搜索出相关文章列表,点击选择插入。给wordpress模板自带的文章编辑器添加自定义按钮,以前介绍过,网上也有太多的介绍,大多是介绍插入一个指定的广告代码。而用来插入文章链接的却没有过。嗯,只有自己想办法 了。

给wordpress模板编辑器添加插入文章链接的按钮1:添加自定义按钮 给wordpress模板编辑器添加插入文章链接的按钮1:添加自定义按钮

给wordpress模板编辑器添加插入文章链接的按钮2:添加弹窗给wordpress模板编辑器添加插入文章链接的按钮2:添加弹窗

给wordpress模板编辑器添加插入文章链接的按钮3:添加搜索功能给wordpress模板编辑器添加插入文章链接的按钮3:添加搜索功能

wordpress主题制作:怎样给默认编辑器添加自定义按钮?wordpress主题制作:怎样给默认编辑器添加自定义按钮?


思路:网上介绍的自定义按钮,都是通过短代码的形式插入文章内容中的,就是点击按钮,就插入一个短代码到文章内容中。那我可不可以设想这样——点击按钮时,弹出一个弹窗,而弹窗中有一个表单,输入需要插入的关键词,点击搜索,就显示搜索到的文章标题列表,然后,再点击某个标题,就可以把这个标题直接插入到文章内容中。

按照上面的思路,我们要分3步来完成:

第一步:给wordpress模板的编辑器添加一个自定义按钮。

第二步:在文章编辑页面添加一个弹窗。功能是用来搜索关键字的表单窗口。

第三步:获取关键字相关的文章标题列表。用来返回搜索的结果。

今天,主要是介绍第一步——添加一个自定义按钮到wordpress模板的自带编辑哭器中。


方法很简单,这里不多做介绍,直接粘代码:

//为文章编辑器添加自定义按钮
//初始化时执行myadvert_button函数
add_action('init', 'myadvert_button');
function myadvert_button() {
//判断用户是否有编辑文章和页面的权限
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
//判断用户是否使用可视化编辑器
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}
}

function register_button( $buttons ) {
array_push( $buttons, "|", "myadvert" ); //添加 一个myadvert按钮
return $buttons;
}
function add_plugin( $plugin_array ) {
$plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/media_button.js'; //myadvert按钮的js路径
return $plugin_array;
}

直接把上面的PHP代码粘贴到wordpress模板的functions.php文件中。保存后,我们再打开wordpress后台的文章编辑器时,就可以看到在编辑的按钮排列中就多出了我们添加进去的按钮,如下图:

image.png

本章主要介绍了wordpress模板的文章编辑器中添加插入文章链接的自定义按钮的思路,以及介绍了如何添加一个自定义按钮图标——只是添加一个按钮而已,并没有添加插入的功能。在接下来的章节中,我们再接着介绍如何实现插入功能以及插入文件标题链接的功能,敬请期待。

显示全部内容...