WordPress 增强编辑器功能
像素鱼丸
11-22
180

使用 media_buttons action,增加编辑器的功能。

添加编辑器顶部按钮

add_action('media_buttons', 'add_my_media_button');
function add_my_media_button() {
    echo '<a href="javascript:;" id="insert-my-media" class="button">测试按钮</a>';
}

添加后台 JS

function add_admin_script() {
    $src = get_bloginfo('template_directory') . '/assets/js/lib/editor-plus.js';
    wp_enqueue_script('boot', $src);
}
add_action('admin_enqueue_scripts', 'add_admin_script');

JS 的代码

jQuery(function($) {
  jQuery(document).ready(function() {
    jQuery('#insert-my-media').click(open_media_window);
  });

  function open_media_window() {
    if (this.window === undefined) {
      this.window = wp.media({
        title: 'Insert a media',
        library: {
          type: 'image'
        },
        multiple: false,
        button: {
          text: 'Insert'
        }
      });
      var self = this; // Needed to retrieve our variable in the anonymous function below
      this.window.on('select', function() {
        var first = self.window.state().get('selection').first().toJSON();
        wp.media.editor.insert('[myshortcode id="' + first.id + '"][/myshortcode]');
      });
    }
    this.window.open();
    return false;
  }
});
收藏
打赏
实现自定义 Ajax 请求
上一篇
WordPress 引入自定义 JavaScript 文件
下一篇

发表评论

注册不是必须的

像素鱼丸
158 文章
2 评论
4 喜欢
最新文章

什么是幽灵按钮

“幽灵按钮”(Ghost Button)是一种常见的网页与移动应用 UI 设计模式,指背景透明(或半透明)、仅通过边框(border)和文字(text)定义的按钮,视觉上“若隐若现”,仿佛“幽灵”一般——因此得名。 核心特征: 无填充色(transparent background) 背景完全透明(或与父容器同色),不遮挡背后内容。 清晰的边框(通常 1–2px 实线) 如 border: 2px […]

付费资源下载时间限制有什么用?

这个功能确实挺常见的,它背后的逻辑其实不是“防君子”,而是“防小人”和“控成本”。有没有必要做,主要取决于你平台上的资源类型和你的运营阶段。 我们可以从三个角度来看看这个“10天有效期”到底有什么用: 增加倒卖和二次传播的成本(防黄牛) 这是最核心的意义。如果你的资源是虚拟商品(比如教程、源码、素材包),用户付一次钱理论上可以无限复制。 如果没有有效期: 一个人买了,转手挂到闲鱼或者别的群里卖,你 […]

测试产品

退款和取消订单接口要不要合并

很多开发者在设计初期的常见思路。将“取消”和“退款”分开,从功能上看似乎很清晰,但在实际的复杂业务场景中,这种设计可能会带来一些问题。 更主流和推荐的设计是提供一个统一的“申请取消订单”接口,由后端服务根据订单的当前状态,自动路由到不同的处理逻辑。  为什么统一接口是更好的选择? 前端逻辑简化: 对于用户而言,他的诉求只有一个:“我不想要这个订单了”。无论订单是否支付,他在前端点击的都是“取消订单 […]
生成中...
扫描二维码
扫描二维码
确认购买

您确定要购买此资源吗?

微信扫码支付

请使用微信扫描二维码完成支付

订单号:

等待支付...