Come passare una variabile JavaScript a PHP in un widget WordPress?

Ho trovato un modo semplice per passare una variabile JavaScript a una variabile PHP. Nota che questo metodo funziona nella versione 4.7.2 di WordPress, e solo specificamente sui Widget. Ho scritto molti commenti per cercare di spiegare cosa fa ogni riga. Se hai una soluzione migliore, per favore condividila con noi!

Soluzione:

• Crea un campo input nascosto per memorizzare il valore del javascript che vuoi passare.
• Accedi a quel campo input nascosto e assegna il suo valore a una variabile PHP.

Demo Widget:

• Ho creato un widget demo che aggiunge la parola "TI AMO" in base a quante volte premi il pulsante "Aggiungi TI AMO".

• Nota che ho lasciato visibile il campo nascosto per una migliore comprensione.

• Puoi cambiare type="text" in type="hidden" per nasconderlo.

• Questa demo si concentra solo sulla funzione form del widget.

• Assicurati di cliccare il pulsante Salva, altrimenti il valore dell'input nascosto non verrà salvato dal widget.

Screenshot del Widget Demo:

Codice sorgente:

wp-text-repeater.php

<?php
/**
*Plugin Name: WP Text Repeater
**/

class wp_text_repeater extends WP_Widget {

    /**
     * Configura il nome del widget ecc.
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'wp_text_repeater',
            'description' => 'Widget che stampa TI AMO ripetutamente in base ai click sul pulsante',
        );
        parent::__construct( 'wp_text_repeater', 'WP Text Repeater Widget', $widget_ops );
    }

    /**
     * Mostra il contenuto del widget
     *
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        // mostra il contenuto del widget
    $wp_text_repeater_button = ! empty( $instance['wp_text_repeater_button'] ) ? $instance['wp_text_repeater_button'] : '';
    $wp_text_repeater_appendee = ! empty( $instance['wp_text_repeater_appendee'] ) ? $instance['wp_text_repeater_appendee'] : '';
    $wp_text_repeater_hidden = ! empty( $instance['wp_text_repeater_hidden'] ) ? $instance['wp_text_repeater_hidden'] : '';
    }

    /**
     * Mostra il form delle opzioni nell'admin
     *
     * @param array $instance Le opzioni del widget
     */
    public function form( $instance ) {
        // mostra il form delle opzioni nell'admin
    $instance = wp_parse_args( (array) $instance, array( 'wp_text_repeater_button' => '', 'wp_text_repeater_appendee' => '', 'wp_text_repeater_hidden' => ''));

    $wp_text_repeater_button = $instance['wp_text_repeater_button'];
    $wp_text_repeater_appendee = $instance['wp_text_repeater_appendee'];
    $wp_text_repeater_hidden = $instance['wp_text_repeater_hidden'];

    $tempHidden = 'wp_text_repeater_hidden';

  ?>
    <!-- Campo nascosto che memorizza il numero di volte che l'utente preme il pulsante -->
    <input
          class="widefat"
          id="<?php echo $this->get_field_id($tempHidden); ?>"
          name="<?php echo $this->get_field_name($tempHidden); ?>"
          type="text"
          value="<?php echo esc_attr($$tempHidden);?>"/>
  <?php

    $max = 0; //Numero di volte che l'utente ha premuto il pulsante

    //se l'input nascosto JavaScript front-end ha un valore, assegna $max a esso.
    //Questo If sincronizza tra la parte JavaScript e PHP.
    if(strlen($$tempHidden) > 0){
      $max = intval($$tempHidden);
    }

    $counter = 0;
    while($counter < $max){ //cicla in base a quante volte l'utente ha premuto il pulsante
  ?>
      <p>TI AMO!</p>
  <?php
     $counter++;
    }

    $id_prefix = $this->get_field_id(''); //ottieni il prefisso ID del widget.
  ?>
    <!-- Puoi aggiungere tutto il tuo contenuto qui -->
    <span id="<?php echo $this->get_field_id('wp_text_repeater_appendee')?>"></span>

    <!-- Pulsante che chiama la funzione jQuery per aggiungere la parola "TI AMO" -->
    <input style="background-color: #08a538; color:white; height: 27px;"
          class="button widefat"
          type="button"
          id="<?php echo $this->get_field_id('wp_text_repeater_button'); ?>"
          value="Aggiungi TI AMO"
          onclick="text_repeater.addLove('<?php echo $this->id;?>', '<?php echo $id_prefix;?>'); return false;"
          />

    <script>

    jQuery(document).ready(function($){
      var preIndexID;
      var numberOfLove = <?php echo $max; ?>; //prende il valore da PHP per sincronizzare front-end e back-end.
      text_repeater = {
          addLove :function(widget_id, widget_id_string){
              preIndexID = widget_id_string; //ottiene il prefisso corretto dell'ID del widget.
              numberOfLove++;
              numberOfLove = numberOfLove.toString(); //converte l'int in stringa per il campo input nascosto.
              $("#" + preIndexID + "wp_text_repeater_hidden").val(numberOfLove); //cambia il valore del campo input nascosto.
              $("#" + preIndexID + "wp_text_repeater_appendee").append('<p>TI AMO!</p>'); //aggiorna in tempo reale il front-end con "TI AMO".
          }
      }
    });

    </script>
  <?php
    }

    /**
     * Elabora le opzioni del widget al salvataggio
     *
     * @param array $new_instance Le nuove opzioni
     * @param array $old_instance Le opzioni precedenti
     */
    public function update( $new_instance, $old_instance ) {
        // elabora le opzioni del widget da salvare
    $instance = $old_instance;

    $instance['wp_text_repeater_button'] = sanitize_text_field($new_instance['wp_text_repeater_button']);
    $instance['wp_text_repeater_appendee'] = sanitize_text_field ($new_instance['wp_text_repeater_appendee']);
    $instance['wp_text_repeater_hidden'] = sanitize_text_field( $new_instance['wp_text_repeater_hidden'] );

    return $instance;

    }
}

// registra il widget wp_text_repeater
function register_wp_text_repeater_widget() {
    register_widget( 'wp_text_repeater' );
}
add_action( 'widgets_init', 'register_wp_text_repeater_widget' );