web-dev-qa-db-ja.com

ウィジェットがページに表示されている場合にスクリプトをエンキューする方法

私はjqueryプラグインを使用してウィジェットを作成し、スクリプトをエンキューするためにis_active_widgetを使用しました。うまく機能していますが、このウィジェットを表示しないページにもスクリプトが含まれています。このウィジェットが表示されている場合にのみスクリプトをエンキューする方法はありますか？

前もって感謝します。

theme-developmentwidgetswp-enqueue-script
8
Pierre

ウィジェットの出力の一部としてwp_enqueue_script()を呼び出すことができるはずです。

編集する

素早い/汚い ウィジェットAPI classの例を使った、手っ取り早い

<?php
class wpse48337_Widget extends WP_Widget {

    public function __construct() {
        // widget actual processes
    }

    public function form( $instance ) {
        // outputs the options form on admin
    }

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }

    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }

}
register_widget( 'wpse48337_Widget' );
?>

ウィジェットの output - 内、つまりwp_enqueue_script()内にpublic function widget() call inlineを追加します。

<?php    
    public function widget( $args, $instance ) {
        // outputs the content of the widget

    // Enqueue a script needed for
    // the Widget's output
    wp_enqueue_script( 'jquery-pluginname', $path, $deps );

    // Rest of widget output goes here...
    }
?>
10
Chip Bennett

スクリプトを<head>セクションに入れる必要がある場合は、次のようにします。

class Your_Widget extends WP_Widget{

  protected static $did_script = false;

  function __construct(){

    // parent::__construct() ...

    add_action('wp_enqueue_scripts', array($this, 'scripts'));

  }

  function scripts(){

    if(!self::$did_script && is_active_widget(false, false, $this->id_base, true)){
      wp_enqueue_script('your-script');
      self::$did_script = true;
    }           

  }


}

そうでなければ、Chip Bennettのソリューションはそれをフッターに入れるためにうまくいくでしょう。

$did_script静的変数は必須ではありません。ページ上に複数のウィジェットインスタンスがある場合にwp_enqueue_scriptへの不要な呼び出しを避けるために使用しました。

6
onetrickpony

ピエール、

私がこれを処理する方法はwp_enqueue_scriptとwp_dequeue_scriptで、Your_Widgetクラスでインスタンス変数$is_activeを使うことです

そのため、すべてのページでスクリプトをエンキューしますが、フッターパラメータをtrueに設定して、wp_enqueue_scriptをis_active_widgetに基づいて実行します。スクリプトが出力される前に確実に実行されるように、デキューは優先的に実行されます。

function enqueue_scripts() {
  if ( is_active_widget( false, $this->id, $this->id_base, true ) ) {
    wp_enqueue_script( 'your-script-handle', 'your-script-url', array(), '1.0', true );
    add_action( 'wp_footer', array($this,'dequeue_redundant_scripts'), 1 );
  }

}

その後、ウィジェット機能でウィジェットがそのページでアクティブかどうかを示します

function widget( $args, $instance ) {
    // outputs the content of the widget
    $this->is_active = true;  
}

そのページでウィジェットがアクティブになっていない場合は、フッターでスクリプトをデキューします。

function dequeue_redundant_scripts() {
    if (! $this->is_active) {
        wp_dequeue_script('your-script-handle');
    }
}

未使用の場合はエンキューしてからデキューするというこのアプローチは、スクリプトを必要とするショートコードを定義するプラグインにもうまく機能します。

2
Russell Jamieson

このフックはフッターで実行されるので、私は 'wp_footer'フックを検討しました。おそらく、ウィジェットが使用されている場所にのみスクリプトを追加するための最良の方法です。

class Your_Widget extends WP_Widget{

    function widget( $args, $instance ) {

         add_action('wp_footer',array($this,'front_end_scripts'));

    }

    function front_end_scripts(){
       ?><script type="text/javascript">
          console.log('this works!');
        /*
          Or if you need external scripts then you may use 
          $.getScript([your-script-url] );
        */
        </script> <?php
    }



}
0
Dipesh KC