ページにウィジェットが表示されている場合にスクリプトをエンキューするにはどうすればよいですか?


8

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

前もって感謝します。

回答:


11

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

編集する

必要最低限のWidgets APIクラスの例を使用した簡単なもの:

<?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' );
?>

ウィジェットの出力内に、つまり次のwp_enqueue_script()ように、インラインで呼び出しを追加します。public function widget()

<?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...
    }
?>

実際、私はそれを行っており、is_active_widget()を使用していますが、ウィジェットが1つでもアクティブである場合、すべてのページでスクリプトをエンキューします。
ピエール

の使用is_active_widget()、ウィジェット出力wp_enqueue_script()からの呼び出しとは異なります。更新された回答を参照してください。
チップベネット

更新していただきありがとうございます。しかし、wp_enqueue_script()を使用するための例やこの方法をすばやくダーティとはどういう意味ですか?もう1つ、トピック外の質問をお願いします。ウィジェットの関数の前にこれらのプライベートとパブリックがたくさんあるので、それらは何をしますか?テーマに固有のウィジェットを使用する必要がありますか?そして、どうもありがとう:)
ピエール

すばやく簡単な例」とは、リンクされたCodexの記事で説明されているように、標準のWidgetクラスコンストラクトを参照していることを意味します。私はだと仮定すると、あなたがウィジェットAPIを使用してカスタムウィジェットを書いたこと。そうでない場合は、する必要があります。ただし、より具体的なガイダンスが必要な場合は、ウィジェットコードを確認する必要があります。
チップベネット

これは機能しません。回答としてマークされていたため、以前は機能していたかどうかはわかりません。しかし現在、ウィジェットフォームはwp_enqueue_scriptsアクションの後にトリガーされます
Omar Abid

6

スクリプトが<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ページに複数のウィジェットのインスタンスがある場合は...


1
クールなアイデアですが、is-active_widget()実際には特定のページに表示されるのではなく、ウィジェットがアクティブ化されている(つまり、[外観]> [ウィジェット]のサイドバー領域の1つにドラッグされている)かどうかを通知するだけなので、これは実際にはOPの質問に対処しません。。
トムオージェ2013

条件が間違っています:(1) is_active_widgetサイドバーが現在のページに表示されていなくても、sidebar_idを返します。これにより、すべてのページにスクリプトが追加されます。(2) wp_enqueue_scriptは、スクリプトを複数回呼び出しても、スクリプトを1回だけ追加します。ウィジェットが表示されていない場合でも、すべてのページ要求で呼び出されるため、self::$did_script (3)は必要あり__constructません
Philipp

2

ピエール、

これを処理する方法はwp_enqueue_scriptおよびwp_dequeue_scriptであり$is_active、Your_Widgetクラスでインスタンス変数を使用します

それで、どのページにスクリプトをエンキューするかにwp_enqueue_script基づいis_active_widgetて、フッターパラメータをtrueに設定してください。デキューは、スクリプトが出力される前に確実に実行されるように、優先度で実行されることに注意してください。

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

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


0

このフックはフッターで実行されるため、「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
    }



}

1
ああ。wp_enqueue_script()お願いします。JSの直接印刷はありません。
トム・オージェ

ウィジェットが実際に呼び出される前にwp_enqueue_script以外のフックが呼び出されるため、wp_enqueue_script()はここでは機能しません。
Dipesh KC

wp_footerアクションの前であればいつでもwp_enqueue_script()を呼び出すことができます。ウィジェットは、テンプレートページの作成中に呼び出されます。@ChipBennetが推奨dynamic_sidebarするように、アクションにフックして、ウィジェットが実際に表示されるタイミングを検出するか、もっと簡単に言えば、メソッドにenqueue_script()権利をwidget()与えることができます。
トム・オージェ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.