Sind dynamische Formen / Einträge im Widget möglich?

Ich bin neu in WordPress Plugins Entwicklung, und ich habe gerade angefangen mit dem Widget zu arbeiten. Meine Frage ist: Was sind die Beschränkungen von WordPress Widget?

Ich habe versucht, jQuery zu verwenden, um das Widget Form interaktiver / dynamischer zu machen, aber es scheint überhaupt nicht zu funktionieren. Zum Beispiel habe ich eine Schaltfläche, die beim Anklicken eine Zeichenfolge von “Hallo!” zu einem div, das id “hier” hat.

jQuery(document).ready(function(){ //call when the button is click $(document).on('click', '#add', function() { $('#here').append('

Hello

'); }); });
  1. Warum erscheint der Absatz von “Hallo” nicht auf dem Formular? Liegt es daran, dass die Widget-Form dies verhindert?

  2. Ich habe auch von Backbone.js gehört, das das Frontend auffrischt, aber ich bin mir nicht sicher, ob das funktioniert.

  3. Wenn möglich, erläutern Sie bitte, wie die gesamte Widget-class funktioniert. Vielen Dank im Voraus!

Update: Ich habe bereits versucht, was vorgeschlagen wird, aber es funktioniert immer noch nicht. Hier ist mein Code.

wiederholen

   'repeat_field_widget', 'description' => 'Repeat Field for Name input', ); parent::__construct( 'repeat_field_widget', 'Repeat Field', $widget_ops ); } /** * Outputs the content of the widget * * @param array $args * @param array $instance */ public function widget( $args, $instance ) { // outputs the content of the widget } /** * Outputs the options form on admin * * @param array $instance The widget options */ public function form( $instance ) { // outputs the options form on admin ?> 
<?php } /** * Processing widget options on save * * @param array $new_instance The new options * @param array $old_instance The previous options */ public function update( $new_instance, $old_instance ) { // processes widget options to be saved } } function register_repeat_field_widget() { register_widget( 'repeat_field_widget' ); } add_action( 'widgets_init', 'register_repeat_field_widget' ); function repeat_field_widget_scripts() { wp_enqueue_script( 'repeat-field-widget-scripts', get_template_directory_uri() . '/repeat.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'repeat_field_widget_scripts' );

wiederhole.js

  jQuery(document).ready(function($){ //call when the button is click $("#addRepeat").click(function() { $('#here').append('

Hello

'); }); });

Solutions Collecting From Web of "Sind dynamische Formen / Einträge im Widget möglich?"

Widget-Formulare sind schwierig für JS-Manipulation. Im Allgemeinen sollten Sie keine IDs verwenden, um Elemente im Formular zu erkennen, sondern eine Kombination von classn und find() , parent() usw.

Der Grund dafür ist, dass auf der HTML-Seite möglicherweise mehrere Formulare vorhanden sind. Auf der Widget-Admin-Seite gibt es sicherlich ein “Template” -Formular, das nicht angezeigt wird und IIRC wird verwendet, um das Formular für ein neues Widget zu generieren. Dies bedeutet, dass mindestens zwei Elemente mit der gleichen ID vorhanden sind und ein Versuch, über DOM-APIs darauf zuzugreifen, kein konsistentes Ergebnis ergibt.

Danke Dave Romsey und Mark Kaplun, dass du darauf hingewiesen hast, keine HTML-ID in WordPress Widget zu verwenden. Ich finde endlich eine Lösung für meine Bedürfnisse.

Lösung:

Wir müssen allen 3 functionen (Widget, Formular, Update) eine voreingestellte Variable hinzufügen. In meinen Codes heißen sie “spotlight_image_link1, spotlight_image_link2, etc”. Dann in der “Form-function” geben Sie ihre ID mit PHP-Code. Bitte lesen Sie meinen Code unten für weitere Informationen.

Was kann meine Lösung tun?

Grundsätzlich ist es nicht vollständig dynamisch, weil wir vorher alle Scheinwerfer vordefinieren müssen. In meinem Fall habe ich nur zwei Scheinwerfer vordefiniert, um den Code einfach zu lesen.

Hier, wie es aussieht: Bildbeschreibung hier eingeben

Logik hinter der Szene:

  • wann immer das “Klick mich!” Wenn Sie auf die Schaltfläche klicken, wird ein Spotlight hinzugefügt.
  • Es gibt ein Tracker-Array namens “Tracker”, das verfolgt, welche vordefinierten Scheinwerfer bereits verwendet werden. Wenn alle Scheinwerfer verwendet werden, deaktivieren Sie das “Klick mich!” Taste.
  • Wenn der Punkt “Spot löschen” angeklickt wird, entferne diesen Spot und aktiviere das “Klick mich!” Taste. Beachten Sie, dass der Name jeder Löschschaltfläche mit Nummer angehängt wird. Dies lässt uns wissen, welcher Spot gelöscht werden soll.
  • Der Scheinwerfer wird nur dann gespeichert, wenn der Eingang nicht leer ist. Diese Bedingung ist in der “while” -Schleife der “form” -function.

Einschränkung:

Wenn wir jetzt auf “Speichern” klicken, wird die Spotlight-Reihenfolge von 1 bis n neu geordnet. Es ist nicht sehr benutzerfreundlich, aber ich plane, Ajax zu verwenden, um das Frontend mit dem Backend zu synchronisieren. Ich bin mir nicht sicher, wie es jetzt ist.

Quellcode:

  • Ab WordPress 4.7.2 funktioniert es ohne Fehler.
  • Setzen Sie den gesamten Quellcode in die Datei “repeat.php” in Ihrem Plugin-Verzeichnis. Wenn Sie nicht wissen, wie, bitte google es.

wiederholen

  < ?php /** * Plugin Name: Repeat Field * */ class repeat_field_widget extends WP_Widget { /** * Sets up the widgets name etc */ public function __construct() { $widget_ops = array( 'classname' => 'repeat_field_widget', 'description' => 'Repeat Field for Name input' ); parent::__construct( 'repeat_field_widget', 'Repeat Field', $widget_ops ); $tracker1; } /** * Outputs the content of the widget * * @param array $args * @param array $instance */ public function widget( $args, $instance ) { // outputs the content of the widget $spotlight_add_row = ! empty( $instance['spotlight_add_row'] ) ? $instance['spotlight_add_row'] : ''; $spotlight_row_appender = ! empty( $instance['spotlight_row_appender'] ) ? $instance['spotlight_row_appender'] : ''; /**============== Spotlight 1 =========================*/ $spotlight_image_link1 = ! empty( $instance['spotlight_image_link1'] ) ? $instance['spotlight_image_link1'] : ''; $spotlight_add_image1 = ! empty( $instance['spotlight_add_image1'] ) ? $instance['spotlight_add_image1'] : ''; $spotlight_image_preview1 = ! empty( $instance['spotlight_image_preview1'] ) ? $instance['spotlight_image_preview1'] : ''; $spotlight_name1 = ! empty( $instance['spotlight_name1'] ) ? $instance['spotlight_name1'] : ''; $spotlight_description1 = ! empty( $instance['spotlight_description1'] ) ? $instance['spotlight_description1'] : ''; $spotlight_link1 = ! empty( $instance['spotlight_link1'] ) ? $instance['spotlight_link1'] : ''; /**============== Spotlight 2 =========================*/ $spotlight_image_link2 = ! empty( $instance['spotlight_image_link2'] ) ? $instance['spotlight_image_link2'] : ''; $spotlight_add_image2 = ! empty( $instance['spotlight_add_image2'] ) ? $instance['spotlight_add_image2'] : ''; $spotlight_image_preview2 = ! empty( $instance['spotlight_image_preview2'] ) ? $instance['spotlight_image_preview2'] : ''; $spotlight_name2 = ! empty( $instance['spotlight_name2'] ) ? $instance['spotlight_name2'] : ''; $spotlight_description2 = ! empty( $instance['spotlight_description2'] ) ? $instance['spotlight_description2'] : ''; $spotlight_link2 = ! empty( $instance['spotlight_link2'] ) ? $instance['spotlight_link2'] : ''; } /** * Outputs the options form on admin * * @param array $instance The widget options */ public function form( $instance ) { // outputs the options form on admin $instance = wp_parse_args( (array) $instance, array( 'spotlight_add_row' => '', 'spotlight_row_appender' => '', 'spotlight_image_link1' => '', 'spotlight_add_image1' => '', 'spotlight_image_preview1' => '', 'spotlight_name1' => '', 'spotlight_description1' => '', 'spotlight_link1' => '', 'spotlight_image_link2' => '', 'spotlight_add_image2' => '', 'spotlight_image_preview2' => '', 'spotlight_name2' => '', 'spotlight_description2' => '', 'spotlight_link2' => '' )); //Create Add and delete button $spotlight_add_row = $instance['spotlight_add_row']; $spotlight_row_appender = $instance['spotlight_row_appender']; /**================== Spotlight 1 ==============*/ $spotlight_image_link1 = $instance['spotlight_image_link1']; $spotlight_add_image1 = $instance['spotlight_add_image1']; $spotlight_image_preview1 = $instance['spotlight_image_preview1']; $spotlight_name1 = $instance['spotlight_name1']; $spotlight_description1 = $instance['spotlight_description1']; $spotlight_link1 = $instance['spotlight_link1']; /**================== Spotlight 2 ==============*/ $spotlight_image_link2 = $instance['spotlight_image_link2']; $spotlight_add_image2 = $instance['spotlight_add_image2']; $spotlight_image_preview2 = $instance['spotlight_image_preview2']; $spotlight_name2 = $instance['spotlight_name2']; $spotlight_description2 = $instance['spotlight_description2']; $spotlight_link2 = $instance['spotlight_link2']; $starter = 1; //Store which number to continue adding spotlight. $num = 1; $max_spotlight = 2; //number of spotlight allowed. static $tracker = array(0,0); //setup a tracker for each spotlight, zero mean none active. while($num < = $max_spotlight){ $tempImage = 'spotlight_image_link' . $num; if ($$tempImage != ''){ $starter++; $tracker[$num - 1] = 1; ?>  

Spotlight < ?php echo $num; ?>

< ?php $tempImage = 'spotlight_image_link' . $num; $tempDeleteName = 'deletespotlight_'. $num;?>

< ?php } $num++; } $id_prefix = $this->get_field_id(''); //get the widget prefix id. ?>

< ?php } /** * Processing widget options on save * * @param array $new_instance The new options * @param array $old_instance The previous options */ public function update( $new_instance, $old_instance ) { // processes widget options to be saved $instance = $old_instance; $instance['spotlight_add_row'] = sanitize_text_field($new_instance['spotlight_add_row']); $instance['spotlight_row_appender'] = sanitize_text_field($new_instance['spotlight_row_appender']); $increment = 1; while ( $increment <= 2 ){ //increment variables $increment_image_link = 'spotlight_image_link' . $increment; $increment_add_image = 'spotlight_add_image' . $increment; $increment_image_preview = 'spotlight_image_preview' . $increment; $increment_description = 'spotlight_description' . $increment; $increment_name = 'spotlight_name' . $increment; $increment_link = 'spotlight_link' . $increment; $instance[$increment_image_link] = sanitize_text_field( $new_instance[$increment_image_link] ); $instance[$increment_add_image] = sanitize_text_field( $new_instance[$increment_add_image] ); $instance[$increment_image_preview] = sanitize_text_field( $new_instance[$increment_image_preview]); $instance[$increment_name] = sanitize_text_field( $new_instance[$increment_name] ); $instance[$increment_description] = sanitize_text_field( $new_instance[$increment_description] ); $instance[$increment_link] = sanitize_text_field( $new_instance[$increment_link] ); $increment++; } $starter = 1; $num = 1; return $instance; } } function register_repeat_field_widget() { register_widget( 'repeat_field_widget' ); } add_action( 'widgets_init', 'register_repeat_field_widget' );

Schnelle Notiz:

Ich weiß, dass dies nicht der sauberste, sicherste und beste Code ist, aber ich lerne immer noch. Ich hoffe, dass das jedem hilft, der mit den gleichen Problemen konfrontiert ist wie ich.