web-dev-qa-db-ja.com

JavaScript変数をに渡す方法 PHP ワードプレスウィジェットで？

同じファイル、同じ関数（WordPress Widget、Form関数）内のPHP変数にJavaScript変数の値を渡すことができる解決策を探すのに長い時間をかけました。 2017年現在、それを行うための良い方法はありますか？

私は以下でこの方法を試しました。 Ajaxの部分は成功したメッセージを引き出しますが、phpの部分は失敗しました。

repeat.php 

<?php 
    echo $_POST['examplePHP']; //will cause undefined index here
?>
<script>
        jQuery(document).ready(function($){

          var exampleJS = "hi!";

          $.ajax({
                url: ajaxurl, //I have tried 'repeat.php' instead of ajaxurl, but not working.
                type: 'POST',
                data: {
                  examplePHP: exampleJS
                },
                success: function( response){
                  console.log("Successful!");
                },
                error: function(error){
                  console.log("error");
                }
          });

      });
</script>
pluginsphpplugin-developmentwidgetsajax
2
Sengngy Kouch

JavaScript変数をPHP変数に渡す簡単な方法を見つけました。このメソッドはWordPressバージョン4.7.2、そして特にWidgetでのみ機能することに注意してください。私は各行がしたことを説明しようとするためにたくさんのコメントを書きました。あなたがより良い解決策をお持ちの場合は、私たちと共有してください！

解決策：

  • 非表示の入力フィールドを作成して、渡したいJavaScriptの値を格納します。
  • その隠し入力フィールドにアクセスし、その値をPHP変数に割り当てます。

デモウィジェット：

  • 「Add LOVE YOU」ボタンを押した回数に応じて、「LOVE YOU」という単語を追加するデモウィジェットを作成します。

  • わかりやすくするために、隠しフィールドは表示したままにしておきます。

  • 非表示にするにはtype="text"をtype="hidden"に変更します。

  • このデモはウィジェットのform関数にのみ焦点を当てています。

  • 必ず「保存」ボタンをクリックしてください。そうしないと、隠し入力の値がウィジェットによって保存されません。

デモウィジェットのスクリーンショット：

enter image description here 

ソースコード：

wp-text-repeater.php

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

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 that prints LOVE YOU repeatedly according to button press',
        );
        parent::__construct( 'wp_text_repeater', 'WP Text Repeater Widget', $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
    $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 ) {
        // outputs the options form on 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';

  ?>
    <!-- Hidden field that store number of time user press the button -->
    <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; //Number of time user press the button

    //if JavaScript front-end hidden input has value, assign $max to it.
    //This If statement sync between the javascript and the php part.
    if(strlen($$tempHidden) > 0){
      $max = intval($$tempHidden);
    }

    $counter = 0;
    while($counter < $max){ //loop according to how many time user press the button
  ?>
      <p>LOVE YOU!</p>
  <?php
     $counter++;
    }

    $id_prefix = $this->get_field_id(''); //get the widget prefix id.
  ?>
    <!-- You can append all your content herev-->
    <span id="<?php echo $this->get_field_id('wp_text_repeater_appendee')?>"></span>

    <!-- Add button that call jQery function to add "LOVE YOU" Word -->
    <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="Add LOVE YOU"
          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; ?>; //grab value from the php in order to sync between the front and back end.
      text_repeater = {
          addLove :function(widget_id, widget_id_string){
              preIndexID = widget_id_string; //get the correct pre-index of the widget.
              numberOfLove++;
              numberOfLove = numberOfLove.toString(); //convert int to string for the hidden input field.
              $("#" + preIndexID + "wp_text_repeater_hidden").val(numberOfLove); //change the value of the hidden input field.
              $("#" + preIndexID + "wp_text_repeater_appendee").append('<p>LOVE YOU!</p>'); //live update the front-end with "LOVE YOU".
          }
      }
    });

    </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 ) {
        // processes widget options to be saved
    $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;

    }
}

// register wp_text_repeater widget
function register_wp_text_repeater_widget() {
    register_widget( 'wp_text_repeater' );
}
add_action( 'widgets_init', 'register_wp_text_repeater_widget' );
0
Sengngy Kouch

コードは上から下に向かって実行されることを忘れないでください。

このように、あなたは ができません ajax経由で送信する前にPOST変数を '取得'できません。

あなたの設定でwouldが動くもの：

<?php 
    if(isset($_POST['examplePHP'])){ //check if $_POST['examplePHP'] exists
        echo $_POST['examplePHP']; // echo the data
        die(); // stop execution of the script.
    }
?>

<script>
        jQuery(document).ready(function($){

          var exampleJS = "hi!";

          $.ajax({
                url: window.location, //window.location points to the current url. change is needed.
                type: 'POST',
                data: {
                  examplePHP: exampleJS
                },
                success: function( response){
                  console.log("Successful! My post data is: "+response);
                },
                error: function(error){
                  console.log("error");
                }
          });

      });
</script>

まず、POST変数がisset()とともに存在するかどうかを確認します。これが存在する場合は、 'examplePHP'の内容をエコーし​​てから、die();を使用してスクリプトの実行を停止します。

利用可能なPOST変数がない場合、これは誰かが単にページをロードすることを意味します。それなら、エコーはしませんが、ページの残りの部分を続けるだけです。

現在のURLであるwindow.locationを追加しました。そしてresponse変数はエコーを与えます。

これはWordPressスタック交換なので、 WordPress Ajax を使用することをお勧めします。あなたはコーデックスページでもっと読むことができます！

1
xvilo