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

Question

我需要为我正在编写的插件提供一点帮助。我需要加载一个自定义样式表和一个仅在前端需要的自定义脚本。通常，我在wp_enqueue_script和wp_enqueue_style中使用get_template_directory_uri()，但是这些脚本在插件文件夹中，而javascript需要加载和可用的swiper.js。在后端，这将导致一个错误，因为没有为后端加载刷卡。我如何修复这个问题并正确地排列脚本？

下面是我使用的代码：

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);
  }

Answer 1

通常，要将css或js加载到管理中，您需要使用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_排队_脚本/的更多信息

此外，在体系结构方面，最好将类的init方法划分为各个部分，将enqueue脚本\样式提取为单独的方法。

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放在插件的目录中，或者提供正确的路径。