Cum să transmiți o variabilă JavaScript către PHP într-un widget WordPress?

Am găsit o metodă simplă de a transmite o variabilă JavaScript către o variabilă PHP. Rețineți că această metodă funcționează în WordPress versiunea 4.7.2 și doar specific pe Widget. Am scris multe comentarii pentru a încerca să explic ce face fiecare linie. Dacă aveți o soluție mai bună, vă rugăm să o împărtășiți cu noi!

Soluție:

• Creați un câmp de input ascuns pentru a stoca valoarea JavaScript pe care doriți să o transmiteți.
• Accesați acel câmp de input ascuns și atribuiți-i valoarea unei variabile PHP.

Demo Widget:

• Am creat un widget demo care adaugă cuvântul "TE IUBESC" în funcție de câte ori apăsați butonul "Adaugă TE IUBESC".

• Rețineți că am lăsat câmpul ascuns afișat pentru o mai bună înțelegere.

• Puteți schimba type="text" în type="hidden" pentru a-l ascunde.

• Acest demo se concentrează doar pe funcția form a widget-ului.

• Asigurați-vă că apăsați butonul Salvează, altfel valoarea câmpului de input ascuns nu va fi salvată de widget.

Captură de ecran Demo Widget:

Cod sursă:

wp-text-repeater.php

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

class wp_text_repeater extends WP_Widget {

    /**
     * Sets up the widgets name etc
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'wp_text_repeater',
            'description' => 'Widget care afișează TE IUBESC repetat în funcție de apăsarea butonului',
        );
        parent::__construct( 'wp_text_repeater', 'Widget WP Text Repeater', $widget_ops );
    }

    /**
     * Outputs the content of the widget
     *
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        // afișează conținutul widget-ului
    $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'] : '';
    }

    /**
     * Outputs the options form on admin
     *
     * @param array $instance The widget options
     */
    public function form( $instance ) {
        // afișează formularul de opțiuni în administrare
    $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';

  ?>
    <!-- Câmp ascuns care stochează numărul de apăsări ale butonului -->
    <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; //Numărul de apăsări ale butonului

    //dacă câmpul ascuns JavaScript de pe front-end are valoare, atribuie $max acea valoare.
    //Acest if sincronizează partea de JavaScript cu cea PHP.
    if(strlen($$tempHidden) > 0){
      $max = intval($$tempHidden);
    }

    $counter = 0;
    while($counter < $max){ //buclă în funcție de numărul de apăsări ale butonului
  ?>
      <p>TE IUBESC!</p>
  <?php
     $counter++;
    }

    $id_prefix = $this->get_field_id(''); //obține prefixul ID-ului widget-ului.
  ?>
    <!-- Puteți adăuga tot conținutul aici -->
    <span id="<?php echo $this->get_field_id('wp_text_repeater_appendee')?>"></span>

    <!-- Buton care apelează funcția jQuery pentru a adăuga cuvântul "TE IUBESC" -->
    <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="Adaugă TE IUBESC"
          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; ?>; //preia valoarea din PHP pentru a sincroniza front-end-ul cu back-end-ul.
      text_repeater = {
          addLove :function(widget_id, widget_id_string){
              preIndexID = widget_id_string; //obține prefixul corect al widget-ului.
              numberOfLove++;
              numberOfLove = numberOfLove.toString(); //converteste numărul în string pentru câmpul ascuns.
              $("#" + preIndexID + "wp_text_repeater_hidden").val(numberOfLove); //schimbă valoarea câmpului ascuns.
              $("#" + preIndexID + "wp_text_repeater_appendee").append('<p>TE IUBESC!</p>'); //actualizează live front-end-ul cu "TE IUBESC".
          }
      }
    });

    </script>
  <?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 ) {
        // procesează opțiunile widget-ului pentru a fi salvate
    $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;

    }
}

// înregistrează widget-ul wp_text_repeater
function register_wp_text_repeater_widget() {
    register_widget( 'wp_text_repeater' );
}
add_action( 'widgets_init', 'register_wp_text_repeater_widget' );