从小部件插件加载前端脚本

时间:2019-12-21 作者:sialfa

我需要为我正在编写的插件提供一些帮助。我需要加载仅在前端需要的自定义样式表和自定义脚本。通常我使用wp_enqueue_scriptwp_enqueue_style 使用get_template_directory_uri() 但是这些脚本都在插件文件夹中,javascript需要那个swiper。js已加载并可用。在后端,这将导致错误,因为没有为后端加载swiper。如何修复此问题并将脚本正确排队?

下面是我使用的代码:

public function __construct()
  {
    parent::__construct(
      \'i-widget\',
      \'I feed\',
      array(
        \'description\' => \'\'
      )
    );
    add_action( \'widgets_init\', array($this, \'init\') );
    add_action( \'wp_enqueue_scripts\', array($this, \'init\' ) );
  }

  public function init()
  {
    register_sidebar(
      array(
        \'name\'        =>  \'I feed\',
        \'id\'          =>  \'i-feed\',
        \'description\' =>  \'I feed widget\',
      )
    );
    register_widget( \'IFeedWidget\' );

    wp_enqueue_style(\'i-widget\', plugins_url( \'i-widget.min.css\' , __FILE__), array(), null);
    wp_enqueue_script(\'i-widget\', plugins_url( \'i-widget.min.js\', __FILE__), array(\'jquery, swiper\'), null);
  }

1 个回复
最合适的回答,由SO网友:Mikhail 整理而成

一般来说,要将css或js加载到admin中,您需要使用admin_enqueue_scripts 钩子,所以在功能风格上可以是这样的:

add_action( \'admin_enqueue_scripts\', function( $hook_suffix ){
    wp_enqueue_style(\'i-widget\', plugins_url( \'i-widget.min.css\' , __FILE__), array(), null);
    wp_enqueue_script(\'swiper\', plugins_url( \'swiper.min.js\', __FILE__), array(\'jquery\'), null);
}, 99 );
    wp_enqueue_script(\'i-widget\', plugins_url( \'i-widget.min.js\', __FILE__), array(\'jquery\', \'swiper\'), null);
}, 99 );
更多信息,请访问https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/

此外,在架构方面,最好分开init 类的方法,将排队脚本\\样式提取到单独的方法中。

public function initScripts(){
   wp_enqueue_style(\'i-widget\', plugins_url( \'i-widget.min.css\' , __FILE__), array(), null);
   wp_enqueue_script(\'swiper\', plugins_url( \'swiper.min.js\', __FILE__), array(\'jquery\'), null);
   wp_enqueue_script(\'i-widget\', plugins_url( \'i-widget.min.js\', __FILE__), array(\'jquery\', \'swiper\'), null);
} 
因此,在构造函数中,您可以通过add_action(\'admin_enqueue_scripts\', [$this, \'initScripts\']); 对于前端add_action(\'wp_enqueue_scripts\',[$this, \'initScripts\']);

当您指定js\\css依赖项时,您会提供一个字符串数组,如array(\'jquery\',\'swiper\')[\'jquery\', \'swiper\']

这个不能正常工作array(\'jquery, swiper\').

别忘了把swiper.min.js 或者提供正确的路径。

相关推荐

在URL中插入“javascript:id(0);”

无论如何,我都不是Wordpress的初学者,但我完全被这个问题所困扰。我尝试了一系列备选方案,但没有任何结果(href=“\\;”,href=“\\35; void”等)。我需要“javascript:void(0);”作为HTML链接中的href属性。将其插入文本编辑器,轻弹到视觉对象,然后返回文本编辑器,使其消失。我已经阅读了一些关于它的信息(回复:esc\\u url),但似乎找不到修复方法。我有没有办法通过函数或脚本在Wordpress的页面上实现这一点?我试图生成的链接是:<a href