Erstellen eines benutzerdefinierten WordPress-Widgets und Beenden der Ausführung von js (einmal im aktiven Widget im Widget-Selektor)?

Ok, hier ist die Frage, wie kann ich verhindern, dass js zweimal auf der widget.php Seite läuft? Ich erstelle eine Ajax-geladene benutzerdefinierte Bildauswahl aus einer Domäne auf demselben Server wie die aktuelle Site. Ich möchte, dass der Benutzer in der Lage ist, ein Bild auszuwählen und die Felder unten mit dem href zur Bildbeschreibung, dem Titel des Bildes und dem Bild src in sich selbst zu füllen, dies bucht dann die Ergebnisse am vorderen Ende in der Seitenleiste.

Ich habe ein benutzerdefiniertes Widget in meiner functions.php registriert, das Widget hat benutzerdefinierte js darin den Code ist wie folgt:

/* * *Ajax loaded gallery for sidebar *Note this will not work cross browser. * * */ /** * Plugin Name: A gallery Widget * Description: A widget that displays an ajax loaded gallery. * Version: 0.1 */ add_action( 'widgets_init', 'my_widget' ); function my_widget() { register_widget( 'MY_Widget' ); } class MY_Widget extends WP_Widget { function MY_Widget() { $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') ); $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' ); $this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops ); } function widget( $args, $instance ) { extract( $args ); //Our variables from the widget settings. $titlewidget = apply_filters('widget_title', $instance['titlewidget'] ); $introtext = $instance['introtext']; $title = $instance['title']; $name = $instance['name']; $img = $instance['img']; $show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false; echo $before_widget; ?>  

<a class="columns four" href="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/"> <img class="imggallery" src="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/"> <a class="columns eight imggallery_link" href="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/">
__('Example', 'example'), 'introtext' => __('introtext', 'example'), 'titlewidget' => __('Reference Project', 'example'), 'img' => __('img', 'example'), 'name' => __('link goes here', 'example'), 'show_info' => true ); $instance = wp_parse_args( (array) $instance, $defaults ); ?> (function($) { //load on page load $(".area").load("/galleries/ #projects > li a"); //load on widget title click $('.widget-top').live("click", function() { $(".area").load("/galleries/ #projects > li a"); }); //stop default href from working $('.area a').unbind().live("click", function() { event.preventDefault(); return; }); //load into input boxes $(".area a").live("click", function() { var title = $(this).attr('title'); $(".title").val(title); var link = $(this).attr('href'); $(".link").val(link); var img = $("img", this).attr('src'); $(".img").val(img); var imgexample = $("img", this).attr('src'); $(".gallery_one").attr("src", imgexample); }); }(jQuery)); .area img{ max-width: 100px; max-height: 100px; display: inline-block; } .area a{ max-width: 100px; max-height: 100px; display: inline-block; } .gallery_one_image_wrap{ width: 100%; height: 150px; } .gallery_one{ max-width: 80%; max-height: 150px; width: 80%; margin: auto; padding-left: 10%; padding-right: 10%; } (function($) { var addDiv = jQuery('.addinput'); var i = jQuery('.addinput p').size() + 1; jQuery('.addNew').live('click', function() { jQuery.append('

Remove

'); i + 1; return false; }); jQuery('.remNew').live('click', function() { if( i > 1 ) { jQuery(this).parents('p').remove(); i - 1; } return false; }); }(jQuery));

Gallery selector for Lundhs

<label for="get_field_id( 'titlewidget' ); ?>"> <input type="text" class="titlewidget" name="get_field_name( 'titlewidget' ); ?>" value="" style="width:100%;" />

<label for="get_field_id( 'introtext' ); ?>"> <input type="text" class="introtext" name="get_field_name( 'introtext' ); ?>" value="" style="width:100%;" />

First Pick your images

Your current front end projects

Reference project one

<label for="get_field_id( 'title' ); ?>"> <input type="text" class="title" name="get_field_name( 'title' ); ?>" value="" style="width:100%;" />

<label for="get_field_id( 'name' ); ?>"> <input type="text" class="link" id="get_field_id( 'name' ); ?>" name="get_field_name( 'name' ); ?>" value="" style="width:100%;" />

//img Input.

<label for="get_field_id( 'img' ); ?>"> <input type="text" class="img" id="get_field_id( 'img' ); ?>" name="get_field_name( 'img' ); ?>" value="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/" style="width:100%;" />

<?php } }

Das Problem tritt auf, weil diese js zweimal ausgeführt wird und die zusätzlichen Eingabefelder zweimal hinzufügt, wenn auf “.addNew” geklickt wird.

  (function($) { var addDiv = jQuery('.addinput'); var i = jQuery('.addinput p').size() + 1; jQuery('.addNew').live('click', function() { jQuery.append('

Remove

'); i + 1; return false; }); jQuery('.remNew').live('click', function() { if( i > 1 ) { jQuery(this).parents('p').remove(); i - 1; } return false; }); }(jQuery));

Der zweite Code wird zweimal in den inaktiven Widgets auf der linken Seite und einmal im aktiven Widget in der Seitenleiste ausgeführt. Wie gehe ich dazu über, den JS dazu zu zwingen, nur im gerade aktiven Widget zu laufen? Das Verschieben der js in eine separate .js-Datei und das Einreihen von Enqueues ist für mich keine Option, da ich php-Werte innerhalb des php verwenden muss, um die Werte im nächsten Schritt dieses Builds aufzufüllen und wiederzuerlangen. Jede Hilfe wird geschätzt. Chris // UPDATE // Richtig, ich denke, die function, nach der ich suche, ist is_active_widget() (codex), aber ich kann es einfach nicht funktionieren, es führt die js trotzdem zweimal aus, auch wenn ich $ skip_inactive auf true setze.
soweit habe ich das probiert:

  //start gallery widget add_action( 'widgets_init', 'my_widget' ); function my_widget() { register_widget( 'MY_Widget' ); } class MY_Widget extends WP_Widget { function MY_Widget() { $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') ); $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' ); $this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops ); } function widget( $args, $instance ) { extract( $args ); //Our variables from the widget settings. $titlewidget = apply_filters('widget_title', $instance['titlewidget'] ); $introtext = $instance['introtext']; $title = $instance['title']; $name = $instance['name']; $img = $instance['img']; $show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false; echo $before_widget; ?>  

<a class="columns four" href="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/"> <img class="imggallery" src="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/"> <a class="columns eight imggallery_link" href="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/">
id_base, true ) ) {?> jQuery(document).ready(function($) { //load on page load alert('this is the if!'); }); jQuery(document).ready(function($) { // Stuff to do as soon as the DOM is ready; }); __('Example', 'example'), 'introtext' => __('introtext', 'example'), 'titlewidget' => __('Reference Project', 'example'), 'img' => __('img', 'example'), 'name' => __('link goes here', 'example'), 'show_info' => true ); $instance = wp_parse_args( (array) $instance, $defaults ); wp_localize_script( 'some_handle', 'object_name', $instance ); ?>

Gallery selector for Lundhs

<label for="get_field_id( 'titlewidget' ); ?>"> <input type="text" class="titlewidget" name="get_field_name( 'titlewidget' ); ?>" value="" style="width:100%;" />

<label for="get_field_id( 'introtext' ); ?>"> <input type="text" class="introtext" name="get_field_name( 'introtext' ); ?>" value="" style="width:100%;" />

First Pick your images

Your current front end projects

Reference project 1

<label for="get_field_id( 'title' ); ?>"> <input type="text" class="title" name="get_field_name( 'title' ); ?>" value="" style="width:100%;" />

<label for="get_field_id( 'name' ); ?>"> <input type="text" class="link" id="get_field_id( 'name' ); ?>" name="get_field_name( 'name' ); ?>" value="" style="width:100%;" />

//img Input.

<label for="get_field_id( 'img' ); ?>"> <input type="text" class="img" id="get_field_id( 'img' ); ?>" name="get_field_name( 'img' ); ?>" value="https://wordpress.stackexchange.com/questions/106692/creating-a-custom-wordpress-widget-and-stopping-js-from-running-twiceonce-in-ac/" style="width:100%;" />

<?php } }

Ich habe auch versucht, ihn in die class MY_Widget extends WP_Widget { } und add_action . Wie so:

  class MY_Widget extends WP_Widget { function MY_Widget() { $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') ); $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' ); $this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops ); } add_action('widgets_init', 'jsadd'); function jsadd(){ if ( is_active_widget( false, false, 'MY_Widget', true ) ) {?>  jQuery(document).ready(function($) { // Stuff to do as soon as the DOM is ready; alert("we made it this far and this is the If!!"); });    jQuery(document).ready(function($) { // Stuff to do as soon as the DOM is ready; alert("we made it this far!!"); });  <?php } } 

aber immer noch kein Glück. Weiß jemand, was ich hier falsch mache?

Solutions Collecting From Web of "Erstellen eines benutzerdefinierten WordPress-Widgets und Beenden der Ausführung von js (einmal im aktiven Widget im Widget-Selektor)?"

Verwenden Sie wp_enqueue_script . Sie weisen Ihrer js-Datei einen Namen zu, wenn sie in die Warteschlange gestellt werden. Dadurch wird verhindert, dass eine Datei mehrmals in die Warteschlange eingereiht wird. Gerade jetzt ist Ihr JS einfach genug, aber je komplexer es wird, desto besser ist es, es draußen in der .js-Datei zu haben.

 add_action( 'wp_enqueue_scripts', 'add_my_js' ); function add_my_js() { wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' ); } 

Um Variablen zu Ihren JS-Dateien hinzuzufügen, sehen Sie sich wp_localize_script an . Auf diese Weise können Sie auf dasselbe JS-Handle verweisen (in diesem Fall my-script ) und Variablen über ein einzelnes Objekt an sie anhängen. Beispiel:

  add_action( 'wp_enqueue_scripts', 'add_my_js' ); function add_my_js() { wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' ); wp_localize_script( 'my-script', 'myData', array( 'var1' => $variable1, 'var2' => $something_else ) ); } 

Innerhalb Ihrer JS-Datei können Sie dann myData.var1 und myData.var2 in Objekt-Notation myData.var2 .

Dabei ist zu beachten, dass diese Variablen bereits beim wp_enqueue_scripts Aktion wp_enqueue_scripts gesetzt sein müssen. wp_enqueue_scripts Sie die Deklarationen daher am besten vorher oder innerhalb Ihrer function durch, wenn sie nicht bereits festgelegt sind.