จะโหลด Widget javascript + css ได้อย่างไรหากใช้?


13

ฉันต้องการเก็บสไตล์ javascript และ css ที่ใช้โดยวิดเจ็ตของฉันไว้ในไฟล์ของตัวเอง (และไม่เพิ่มลงในธีม)

แต่ฉันไม่สามารถรับ wordpress เพื่อเพิ่มพวกเขาได้เมื่อมีการใช้วิดเจ็ตบนแถบด้านข้าง

ฉันเคยลองแล้ว:

ในการประกาศ Class ฉันได้เพิ่ม 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' );
}

แต่นั่นไม่ได้ทำอะไร ...


คำตอบ:


6

wp_print_scriptsและwp_print_styleshooks จะถูกไล่ออกก่อนที่วิดเจ็ตของคุณจะทำงานเพื่อไม่ให้ทำงานได้

วิธีแก้ปัญหาที่จะรวมสคริปต์ในส่วนท้ายโดยใช้wp_print_footer_scriptshook ลองดูคำตอบของ Jan ในคำถามที่คล้ายกัน

หรือวิธีแก้ปัญหาที่ดีกว่าลองดูคำตอบของ Sorich ต่อคำถามอื่นที่คล้ายกัน


5

ทางออกที่ดีที่สุดคือการลงทะเบียนเนื้อหาของคุณก่อนจากนั้นทำการจัดวาง CSS และ JS ภายในwidget()ฟังก์ชันของ WP_Widget ของคุณ (จัดคิวโดยตรงไม่ใช่โดยการเพิ่ม hooks ใหม่)

ฉันได้ทดสอบวิธีการแก้ปัญหานี้และมันจะทำงานในรุ่น 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 ) {
    }
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.