条件付きでウィジェットのスクリプト/スタイルシートをHEADにエンキューします(ページに存在する場合のみ!)


13

私は次の条件でWordPressウィジェットのスクリプトとスタイルをロードしようとしています...

  1. スクリプトはHEADにロードする必要があります(そうでない場合)。
  2. スクリプトは、ウィジェットが実際に表示されるときにのみロードする必要があります(非常に重いです)。

私は多くの検索を行ってきましたが、これは一般的な(未解決の)問題のように思えます...

これは私が今まで持っている最高のものです...

以下は、テキストをサイドバーに出力する簡単なウィジェットです。jQueryを条件付きで(ウィジェットが実際に表示されるときに)正常にロードします...フッターにのみ!(注:このハックは後方互換性を提供する場合がありますが、WordPress 3.3のみ機能する場合もあります)。

class BasicWidget extends WP_Widget
{

    function __construct() {
        parent::__construct(__CLASS__, 'BasicWidget', array(
            'classname' => __CLASS__,
            'description' => "This is a basic widget template that outputs text to the sidebar"
        ));
    }

  function form($instance) {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></label></p>
<?php
  }

  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }

  function widget($args, $instance) {

    extract($args, EXTR_SKIP);

    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

    if (!empty($title))
      echo $before_title . $title . $after_title;;

    echo "<h1>This is a basic widget!</h1>";

    echo $after_widget;

        // if we're echoing out content, enqueue jquery.

        if (!empty($after_widget)) {
            wp_enqueue_script('jquery');
        }
    }
}
add_action( 'widgets_init', create_function('', 'return register_widget("BasicWidget");') );

WordPressがウィジェットの処理を開始すると、キューに入れるには遅すぎます(または、キューに入れられたものを登録解除することもできます)。

どんなアイデアでも大歓迎です!

マーク。

回答:


15

is_active_widget__constructで使用してウィジェットが現在のページに存在するかどうかをテストし、そのexに基づいてスクリプト/スタイルを追加できる素敵な関数としてのWordpress :

function __construct() {
    parent::__construct(__CLASS__, 'BasicWidget', array(
        'classname' => __CLASS__,
        'description' => "This is a basic widget template that outputs text to the sidebar"
    ));
     if ( is_active_widget(false, false, $this->id_base) )
        add_action( 'wp_head', array(&$this, 'add_styles_and_scripts') );
}

function add_styles_and_scripts(){
    //since its wp_head you need to echo out your style link:
    echo '<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />';
    //as for javascript it can be included using wp_enqueue_script and set the footer parameter to true:
    wp_enqueue_script( 'widget_script','http://example.com/js/script.js',array(),'',true );
}

答えてくれてありがとう、Bainternet!私はちょうどあなたのコードをテストしており、残念ながら、javascriptは条件付きでロードしますが、wp_headで呼び出されているにもかかわらず、フッターにロードされます。非常に奇妙な!(ところで、「真の」フッターの指示なしでこれを実行します)。また、スタイルシートをエコーすると、ウィジェットがページ上にあるかどうかに関係なくスタイルシートがロードされます。何か案は?
マーク

wp_headヘッドスクリプトが既に印刷された後に呼び出されるので、フッターに読み込むだけですが、スタイルシートを使用echo '<script src="path/to/script.js"></script>';してスタイルシートと同様に(キューに入れるのではなく)エコーアウトできます。ウィジェットがアクティブではない
-Bainternet

アクションのwp_enqueue_scripts代わりに使用してみてwp_headください。これにより、JavaScriptをヘッドまたはフッターのいずれかに配置できます。http://codex.wordpress.org/Function_Reference/wp_enqueue_script
ニック

ありがとう、ニック!wp_enqueue_scriptsを試しましたが、javascriptをヘッドにロードしている間は、条件付きでロードしません。
マークジェルディ

0

または、「Widget Logic」プラグインを試すこともできます。ウィジェットの読み込みに条件文を使用します。

それはまったく逆の考えです-しかし、結果は期待どおりでなければなりません。

wp_print_scriptsとwp_print_stylesが適切なフックである可能性があります。これらのフックに優先度100のアクションを追加するだけで、キューの最後になります。wp_enqueue_script()、wp_enqueue_style()、wp_deregister_script()、wp_deregister_style()...

上記のコードの問題には、優先度パラメーターが欠けている可能性があります(テストされていません)? WPコーデックス


Syslogicに感謝します!widget_contentフィルターにフックできると考えて、Widget Logicも試してみました。残念ながら運はありません。ob_startを使用してウィジェットの出力をバッファリングするので、画面に出力される前にウィジェットを操作できますが、これはまだ頭の中で何かを発射するには遅すぎます。多分あなたは回避策を知っていない限り?
マークジェルディ

たぶん、ウィジェットロジックでうまくいくように見えるBainternetのソリューションの組み合わせ?このように、どのウィジェットをどこにロードするか、また何をロードするかを定義できます。テーマのfunctions.phpに独自の条件ステートメントを追加すると、さらに改善される場合があります。
マーティン

-1

カスタムWidgetクラスのウィジェットメソッド(関数)でwp_enqueue_scriptまたはwp_enqueue_styleを使用するだけで、ウィジェットがアクティブな場合にのみスクリプトがロードされます。ここで詳細と例を参照してください:https : //wpshed.com/wordpress/load-scripts-styles-widget-active/


リンクのみの回答は、リンクが時間とともに壊れるので、単に悪いです。少なくともリンクの内容を要約する必要があります。いずれにしても、OPはページのヘッダーにあるスクリプトを必要とするため、それは間違っています。
マークカプルン

function widget( $args, $instance ) { wp_enqueue_script( 'wpshed-front-end', plugin_dir_url( __FILE__ ) . 'wpshed-front-end.js', array( 'jquery' ), '1.0.0', false ); }の「false」は、ヘッダーまたはフッターにスクリプトをロードすることを指します。要約すると、ウィジェットメソッド(関数)でwp_enqueue_scriptまたはwp_enqueue_styleを使用します。これが、WordPress.com / orgの開発者のやり方です。
-iStefan

コメントは回答を編集する必要があります;)が、ウィジェットが「表示」されると、ページのヘッド部分をすでに実行しているため、JS itnoをキューに登録できません。
マークカプルン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.