WordPress的自定義插件干擾下拉菜單

Question

我為我的wordpress網站創建了小插件/小部件。 它只是獲取對象數組並以一種不錯的方式打印出來。 它工作正常，但我注意到，當其激活時，我的下拉菜單不起作用/我的插件干擾了下拉菜單功能。

我對Jquery有問題。 它會說它是未定義的，但我設法解決了，這可能是問題嗎？

Features.php

if(!defined("ABSPATH")){
    exit;
}

// load scripts
require_once(plugin_dir_path(__File__)."includes/Features-scripts.php");
// load class
require_once(plugin_dir_path(__File__)."includes/Features-class.php");

//register widget

function register_Features(){
    register_widget("Features");
}

// hook in function 

add_action("widgets_init","register_Features");

功能-script.php

function f_add_scripts(){
    //add css and js
    wp_enqueue_style("f-main-style", plugins_url()."/Features/css/style.css");
    wp_enqueue_script("f-main-script", plugins_url()."/Features/script/script.js");
    wp_enqueue_script( 'f-jquery', 'https://code.jquery.com/jquery-3.3.1.js', array( 'jquery' ) );
}

add_action("wp_enqueue_scripts","f_add_scripts");

功能-class.php

class Features extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Features_widget', // Base ID
            esc_html__( 'Features display', 'features_domain' ), // Name
            array( 'description' => esc_html__( 'widget to display features', 'features_domain' ), ) // Args
        );
    }

    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget']; // what evere you want to display before widget (<div>)
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }


        // widget content output
        // echo esc_html__( 'Hello, World!', 'features_domain' );
        echo('<div data-folder='.plugins_url()."/Features/".' class="Features"></div>');

        echo $args['after_widget'];// what evere you want to display before widget (</div>)
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'Features', 'features_domain' );
        ?>

        <!-- Title-->
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
                <?php esc_attr_e( 'Title:', 'features_domain' ); ?> 
            </label> 
            <input 
            class="widefat" 
            id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" 
            name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" 
            type="text" 
            value="<?php echo esc_attr( $title ); ?>">
        </p>


        <?php 
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';

        return $instance;
    }

} // class Foo_Widget

Script.js

window.onload = function () { 
let path=jQuery( ".Features" ).data("folder");
let features={
        "FeaturesHeading":"features",
        "features":[
    {"IconName":"Safety",
    "Icon":"Safety",
    "Title":"Safety",
    "Text":"This is a dummy text"
    }
    ]
};
 function buildHTML(featuresObject){
    let features=featuresObject;
    let html=
            '<div class="FeaturesHeading">\
            <h2>'+features.FeaturesHeading+'</h2>\
            </div>\
            <div class="FeaturesContentContainer">\
                <div class="FeaturesButtons">\
                {{buttons}}\
                </div>\
                <div class="FeaturesContent">\
                {{content}}\
                </div>\
            </div>\
            ';
    let buttons=renderButtons(features);
    content=renderContent(featuresObject);
    html=html.replace("{{buttons}}",buttons)
    html=html.replace("{{content}}",content)
    jQuery( ".Features" ).html("");
    jQuery( ".Features" ).html(html);
 }

function renderButtons(featuresObject,active=0){
    let buttons=features.features.map((feature,index)=>{
        if(index===active){
        let button='\
        <div data-id="'+index+'" class="FeaturesButton Active">\
            <img src="'+path+feature.Icon+'White.png"/>\
            <h3>'+feature.IconName+'</h3>\
        </div>';
        return(button);
        }
        let button='\
        <div data-id="'+index+'" class="FeaturesButton">\
            <img src="'+path+feature.Icon+'.png"/>\
            <h3>'+feature.IconName+'</h3>\
        </div>';
        return(button);
    }); 
    buttons=buttons.join("");
    return buttons;
}

function renderContent(featuresObject,id=0){
    let feature=featuresObject.features[id];
    let html='<h3>'+feature.Title+'</h3>\
            <div class="BlueLine"></div>\
            <p>'+feature.Text+'</p>';
    return html;
}
function makeClick(){
    jQuery(".FeaturesButton").click(function() {
    let id=jQuery(this).data("id");
    let content=renderContent(features,id);
    let html='<div class="FeaturesContent">\{{content}}\</div>';
        html=html.replace("{{content}}",content)
    let buttons=renderButtons(features,id);
    jQuery(".FeaturesContent").html("");
    jQuery(".FeaturesButtons").html("");
    jQuery(".FeaturesButtons").append(buttons);
    jQuery(".FeaturesContent" ).append(content);
     makeClick();
    }); 
}
 buildHTML(features);
 makeClick();

 };

Answer 1

我解決了這個問題。 我將jquery從Features-script.php移到Features.php

所以現在Feature.php看起來像這樣

if(!defined("ABSPATH")){
    exit;
}

// load scripts
require_once(plugin_dir_path(__File__)."includes/Features-scripts.php");
// load class
require_once(plugin_dir_path(__File__)."includes/Features-class.php");

//register widget

function register_Features(){
    register_widget("Features");
    wp_register_script( 'jquery_Features',"https://code.jquery.com/jquery-3.3.1.js");
    wp_enqueue_script('jquery_Features');
}

// hook in function 

add_action("widgets_init","register_Features");