WP React

 개요

V8Js 를 사용해서 JavaScript 쪽으로 넘겨줄 전역 객체를 만들고, JavaScript 쪽에서는 그 전역 객체를 통해 PHP 쪽 환경을 Access 한다.  예: PHP-Side Code)

// 플러그인 영역에서 JS쪽에서 사용할 '속성'를 등록하는 함수 ('tag' 라는 이름에 혼동하지 말 것)
public function register_template_tag( $tag_name, $tag_function, $constant = true, $on_action = 'nodeifywp_render' ) {
  $context = $this->v8->context;
  $register = function() use ( &$context, $tag_name, $tag_function ) {
    $context->template_tags[ $tag_name ] = $tag_function(); // 함수의 결과 값, 즉 문자열을 할당함에 유의. 함수 자체를 지정하는게 아니다.
  };

  if ( ! empty( $on_action ) ) {
    add_action( $on_action, $register );
  } else {
    $register();
  }
}

// 태그 등록하는 코드
App::instance()->register_template_tag( 'wp_head', function() {
    ob_start();
    wp_head();
    return ob_get_clean();
} );

JS-Side Code)

let initialState = includes.immutable.Map({
    route: PHP.context.$route,
    posts: PHP.context.$posts,
    template_tags: PHP.context.$template_tags,
    nav_menus: PHP.context.$nav_menus,
    sidebars: PHP.context.$sidebars,
    user: PHP.context.$user
});

import App from './components/App.jsx';
import { Provider } from 'react-redux';

const store = includes.redux.createStore(includes.reducer, initialState, includes.redux.applyMiddleware(includes.thunk));
const body_classes = String(PHP.context.$template_tags.get_body_class).replace(/,/g, ' ');

print(includes.ReactDOMServer.renderToStaticMarkup(
    
        
        
        
            

                
                    
                
            
            
            
        
    
));

 Admin 환경 

 Theme에 따른 Front 환경