Question

我正在开发一个包含自定义Widget的Wordpress主题，一切正常，但有一件事我不知道如何正确实现：

我想在管理面板中创建Widget实例后运行一些Javascript，这意味着在小部件被放入侧边栏后的那一刻，而不是在保存之后。

我在加载页面或保存Widget后运行JS没有问题，我想在用户刚刚将新实例放入侧栏后运行Javascript，实际上在没有页面重新加载的情况下会发生多次。

问候菲律宾

Answer 1

在窗体小部件表单函数中放置一个脚本标记。

function form($instance)
{
?><script type="text/javascript">console.log("firing javascript");</script>
<?php
//form details...

}

我最终采取了不同的方式。使用wp_enque_script在页面上加载我们的插件管理脚本，然后使用jquery选择器和事件处理程序来定位正确的小部件。

$('div.widgets-sortables')
                .on('sortstop', function (event, ui) {
                    // only if this widget has the proper identifier...do something
                    if (ui.item.find('.my_widget').length == 0)
                        return;
                    run some function...

仍然不是我最喜欢的技术......但它更清洁，然后在小部件中编码。是否需要变量来跟踪创建的小部件，并使用“this”变量很有用

Answer 2

另一种做到这一点的方法我刚想通了 -

我将展示一个涉及依赖关系的更复杂的例子，尽管意识到Custom_Widget::form()中的位是这个问题的真正答案：

function add_js_deps() {
  if (is_admin()) {
    wp_enqueue_script('jquery-ui-accordion');
  } 
}
add_action( 'init', 'add_js_deps' ); // "init" because wp_enqueue_scripts is too late.

// Then in the widget....
class Custom_Widget extends WP_Widget {
  public function form($instance) {
    /** Collapsing accordion-y form HTML here **/
    wp_enqueue_script('custom-js', plugins_url('js/my.js', __FILE__), array('jquery-ui-accordion'), '1.0.0', true);
  }
}

我认为这是更好的路线，因为它有依赖管理，你不会在你的DOM中途有一堆JavaScript。使用wp_enqueue_script通常总是更多WordPressian的做事方式。

在“管理员”面板中创建Widget后，Wordpress运行JS

2 个答案: