How to pass parameters (data) from plugin PHP to React

admin管理员组

文章数量:1313925

I am experimenting creating a WordPress plugin using create-react-app. To make things simple, I am trying to develop a click-to-tweet plugin.

The shortcode part (in PHP ) looks like:

// Shortcode to output needed markup
add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' );
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
    return '<div id="root" data=' . $content . '></div>';
}

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_enqueue_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js', __FILE__),array(),  '0.0.1', true );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

$content should be the text to tweet that I want to pass with the shortcode as:

[react_click_to_tweet]TEXT TO TWEET[/react_click_to_tweet]

The index.js has:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

But this isn't working. Any suggestions?

Furthermore, how aI can pass $atts to pass for example attributes to modify the CSS at runtime?

[edit] Based on the suggestions @Paul Burilichev and @belinus I have done the following changes:

I tried what they have about WP AJAX for shortcodes with parameters. I tried:

add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' ); 
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
  $o = ''; 
  $o .= '<div id="tweet" >'; 
  if (!is_null($content)) {
    $o .= apply_filters('content', $content);
    // run shortcode parser recursively
    $o .= do_shortcode($content);
  }
  // end box
  $o .= '</div>'; 
  return $o; //'<div id="root" ></div>';
} 

but, it doesn't work. What am I missing?

Then, I tried:

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js',  __FILE__),array(),  '0.0.1', true );
  $data = array( 
    'text' => $content, // I also tried passing a string 'some content goes here'
    'key2' =? 'value2',
  );
  wp_localize_script( 'plugin-scripts', 'wp_object', $data );
  wp_enqueue_script( 'plugin-scripts' );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

but object is not recognized on my App component. I guess I am still missing something here. my index.js looks like:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import './index.css'; 

//const data = "This is some cool stuff"; 
ReactDOM.render( 
  <App />, document.getElementById('root')); 
registerServiceWorker();

And this is my App.js:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const page = window.location.href;
    let data = page+'&text='+ wp_object.text;
    let twiiterUrl = "https://"+"twitter/intent/tweet?url=";
    let URL = twiiterUrl+data;

     //console.log(wp_object.text);
     return (
      <div className="App">
        <div className="tm-click-to-tweet">
            <div className="tm-ctt-text">
                <a href={URL} target="_blank">{wp_object.text} </a>
            </div>
            <a href={URL} className="tm-ctt-btn" target="_blank">Click To Tweet</a>
            <div className="tm-ctt-tip"></div>
            <div className="clear"></div>
        </div>
      </div>
    );
  }
}

export default App;

It doesn't recognize wp_object;

I am experimenting creating a WordPress plugin using create-react-app. To make things simple, I am trying to develop a click-to-tweet plugin.

The shortcode part (in PHP ) looks like:

// Shortcode to output needed markup
add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' );
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
    return '<div id="root" data=' . $content . '></div>';
}

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_enqueue_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js', __FILE__),array(),  '0.0.1', true );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

$content should be the text to tweet that I want to pass with the shortcode as:

[react_click_to_tweet]TEXT TO TWEET[/react_click_to_tweet]

The index.js has:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

But this isn't working. Any suggestions?

Furthermore, how aI can pass $atts to pass for example attributes to modify the CSS at runtime?

[edit] Based on the suggestions @Paul Burilichev and @belinus I have done the following changes:

I tried what they have about WP AJAX for shortcodes with parameters. I tried:

add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' ); 
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
  $o = ''; 
  $o .= '<div id="tweet" >'; 
  if (!is_null($content)) {
    $o .= apply_filters('content', $content);
    // run shortcode parser recursively
    $o .= do_shortcode($content);
  }
  // end box
  $o .= '</div>'; 
  return $o; //'<div id="root" ></div>';
} 

but, it doesn't work. What am I missing?

Then, I tried:

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js',  __FILE__),array(),  '0.0.1', true );
  $data = array( 
    'text' => $content, // I also tried passing a string 'some content goes here'
    'key2' =? 'value2',
  );
  wp_localize_script( 'plugin-scripts', 'wp_object', $data );
  wp_enqueue_script( 'plugin-scripts' );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

but object is not recognized on my App component. I guess I am still missing something here. my index.js looks like:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import './index.css'; 

//const data = "This is some cool stuff"; 
ReactDOM.render( 
  <App />, document.getElementById('root')); 
registerServiceWorker();

And this is my App.js:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const page = window.location.href;
    let data = page+'&text='+ wp_object.text;
    let twiiterUrl = "https://"+"twitter/intent/tweet?url=";
    let URL = twiiterUrl+data;

     //console.log(wp_object.text);
     return (
      <div className="App">
        <div className="tm-click-to-tweet">
            <div className="tm-ctt-text">
                <a href={URL} target="_blank">{wp_object.text} </a>
            </div>
            <a href={URL} className="tm-ctt-btn" target="_blank">Click To Tweet</a>
            <div className="tm-ctt-tip"></div>
            <div className="clear"></div>
        </div>
      </div>
    );
  }
}

export default App;

It doesn't recognize wp_object;

• plugins

Share Improve this question edited Jun 27, 2017 at 23:04 Gilbert Mizrahi asked Jun 26, 2017 at 21:43 Gilbert MizrahiGilbert Mizrahi 4111 silver badge44 bronze badges 4

• 1 I suspect there's a fundamental misunderstanding of how webpages are served here. PHP generates a page which is then sent to the browser. Before a single line of React code is executed, the PHP has already finished and exited on the server. You have to pass everything you want to pass in the webpage, there's no cross communication. If you want to fetch information after the JS has started you need to make a brand new request, which is where AJAX and REST endpoints come in – Tom J Nowell ♦ Commented Jun 26, 2017 at 21:53
• 1 @TomJNowell, WordPress has a function wp_localize_script() that is meant to use dynamic values from the server in .js files. Originally created because JavaScript does not have support for localization like PHP gettext. wp_localize_script() us used anytime you want your JS code to adapt in the same way that PHP can, like include a users logged in name. wp_localize_script() passes these values as a JS object in an inline script. In the OPs example the object is stored in the wp_object variable. – Leon Francis Shelhamer Commented Sep 26, 2017 at 4:12
• I'm aware of that, I suspect the root problem here is that React is told to attach to an element with #root, but the shortcode div has #tweet. It'd also be easier to just output the tweet markup in the shortcode than use a React app – Tom J Nowell ♦ Commented Sep 26, 2017 at 14:46
• Install axios & create an endpoint for it to connect to. That endpoint in WordPress would be the setup using the wp_admin_ajax hooks. – admcfajn Commented Sep 13, 2018 at 19:27

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 1

WordPress has a function, wp_localize_script() that can do this. You create an array of values that you want to access in your JavaScript file and then inject it as an object.

You would modify your enqueue function like this:

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js', __FILE__),array(),  '0.0.1', true );
  $data = array( 
     'key1' => 'value1',
     'key2' =? 'value2',
  );
  wp_localize_script( 'plugin-scripts', 'object', $data );
  wp_enqueue_script( 'plugin-scripts' );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

Then to access this data, you would simply do object.key1, object.key2, etc. So console.log( object.key1 ); will echo value1.

Maybe it's later but... You have to access the window object in order to access global variables.

So the example code would be:

<a href={URL} target="_blank">{window.wp_object.text} </a>

For reference: https://facebook.github.io/create-react-app/docs/using-global-variables

I warn that the next method is going to brake WP coding notation and style, but for the test purposes and a quick start you can include wanted parameters directly to the template files which is placed on a template directory, you know.

Another approach is using of WP AJAX. The last my project was created by this approach. I'm sure, you know what I am about. More information about WP AJAX. But here be careful to investigate about availability Ajax request to you unauthorized visitors (not logged in admin!) which includes by a specific hook start wp_ajax_nopriv_.

Don't hesitate - ask questions.

I struggled with this for awhile. The best solution I could come up with was to create a JSON file in within my create-react-app then have wordpress write to it. I hope this helps someone.

I run this on plugin activation

function json_config_file() {

        $file = plugin_dir_path( __DIR__ ).'PATH_TO_REACT_SRC_FOLDER/wordpress.json';

        $json = array(
            key=> value
        );

        $fp = fopen($file, 'w');
        fwrite($fp, json_encode($json));
        fclose($fp);
    }

Then in my app.js I can call

let wordpress = require('./wordpress.json');

and call the values with

console.log(wordpress.value)

本文标签： How to pass parameters (data) from plugin PHP to React