web-dev-qa-db-ja.com

Widget javascript + cssファイルを使用する場合にのみロードする方法

私のウィジェットで使用されているjavascriptとcssのスタイルをそれら自身のファイルの中に保存したい（そしてそれらをテーマに追加しない）.

しかし、ウィジェットがサイドバーで実際に使用されている場合は、ワードプレスで追加するようには思われません。

私はこれを試してみました：

クラス宣言の中に、私は2つの関数を追加しました

class EssentielleRubriquesPosts extends WP_Widget {

function addFrontendCss(){
    wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}
function addFrontendJavascript(){
    wp_register_script('jq-hoverintent', PLUGIN_PATH . 'js/jquery.hoverintent.js', array('jquery'), '1.0',true);
    wp_enqueue_script('jq-hoverintent');
    wp_enqueue_script('jq-tools', PLUGIN_PATH . 'js/jquery.tools.js', array('jquery'),'1.0',true);
    wp_enqueue_script('erw-frontend-js', PLUGIN_PATH . 'js/widget-frontend.js', array('jquery', 'jq-hoverintent', 'jq-tools'),'1.0',true);

}

そしてwidget（）関数の中：

function widget($args, $instance) {
        add_action( 'wp_print_scripts', 'addFrontendJavascript' );
        add_action( 'wp_print_styles', 'addFrontendCss' );
}

しかし、それは何もしません...

widgetswp-enqueue-scriptwp-enqueue-style
12
pixeline

wp_print_scriptsおよびwp_print_stylesフックはウィジェット関数の前に起動されるので、それは機能しません。

その解決策は、wp_print_footer_scriptsフックを使用してフッターにスクリプトを含めることです。 を見てください - 同様の質問に対するJanの答え

あるいはもっと良い解決策は/を見てください 別の似たような質問に対するSorichの答え

6
Bainternet

最善の解決策は、最初にアセットを登録してから、WP_Widgetのwidget()関数内にCSSとJSをエンキューすることです（直接フックするのではなく、直接エンキューします）。

私はこの解決策をテストしました、そしてそれは現在のWordPressバージョン（4.5.3）で動作します - JSとCSSの両方がページフッターに追加されます。

<?php
// Register your assets during `wp_enqueue_scripts` hook.
function custom_register_scripts() {
    wp_register_style('erw-frontend-css', '...frontend.css');
    wp_register_script('jq-hoverintent', '...hoverintent.js', ...);
    wp_register_script('jq-tools', '...tools.js', ...);
}
// Use wp_enqueue_scripts hook
add_action('wp_enqueue_scripts', 'custom_register_scripts');


class YourWidget extends WP_Widget {
    public function __construct() {
    }

    public function widget( $args, $instance ) {
        // Enqueue needed assets inside the `widget` function.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Output widget contents.
    }

    public function form( $instance ) {
    }

    public function update( $new_instance, $old_instance ) {
    }
}
5
Philipp