Автор оригинала: Victor Gerard Temprano.
Я и команда на Mapster Было строить довольно удивительные плагины WordPress в последнее время. Один это Игрифицированный, интерактивный, сложный язык LMS – Система, чтобы помочь студентам выучить язык коренного населения. Я также строил сопоставление плагина Это объединяет современное отображение API (Mapbox GL JS) в бэкэнд WordPress. Оба у обоих были значительные проблемы, но одна из более инновационных вещей, которые были за ними обоих, являются глубокой интеграцией реагирования и WordPress.
Вы можете спросить, и справедливо так, почему реагировать и WordPress должны быть вообще вместе. Реагируйте обрабатывает передний конец намного лучше, чем то, что jQuery WordPress по умолчанию, это определенно. И зачем использовать все колоколы и свистки, а осложнения, WordPress, когда вы можете просто построить простой API?
Ну, есть несколько причин. Позволь мне объяснить.
(Если вы хотите быстрый прыжок до конечного продукта, посмотрите https://github.com/mapstertech/wordpress-react-plugin-boilerplate )
Используя WordPress
В случае моего сопоставления плагина с использованием WordPress – это нежелательный. Это потому, что это хорошо, весь точка здания плагина WordPress. Там есть большой рынок пользователей (в последнее время, WP – 33% Интернета, поразительный номер). Если вы хотите мгновенный доступ к тому, что многие пользователи, постройте отличный, полезный, интуитивно понятный и хорошо называемый плагин. Это точка, поэтому требуется WP.
Однако для плагина веб-сайта языка я намеренно выбираю WordPress для своего интерфейса администратора и знакомства для пользователей. Это снова сводится к его популярности. Почти каждый клиент имеет, в той или иной или иной, вступил в WordPress. И если у них нет, интерфейс достаточно интуитивно понятен, и там достаточно ресурсов, что они могут понять это.
Принципиально этот плагин зависит от множества сложного ввода пользователя в пользовательские поля, повторяющиеся области, изображения и аудио загрузки и многое другое. Я использую Передовые пользовательские поля Pro В целом, и ничего не сравнится, когда речь идет о простых в использовании и надежного интерфейса.
Хотя я могу абсолютно построить один из этих плагинов без WordPress, на самом деле было бы сложнее, потому что мне нужно будет создать целый сложный административный интерфейс. Это не стоит того, когда у нас есть интерфейс, чтобы сосредоточиться на!
Очевидно, что есть некоторые репо, там уже объединяются реагирование и WordPress. Но я хотел пройти себя, делая это по-другому.
Настройка плагина
Отличное место для начала с любого нового плагина WP, которое вы строете, это Котел плагин WordPress Отказ Это поможет вам структурироваться в объектно-ориентированном-программировании кадра – то, что я узнал из одной из моих сессий здесь на кода-уместере с Антон Уханев ! Он также разбит таким образом, который отделяет ваш интерфейс и бэкэнд, что имеет много смысла для нашего использования ReactJS.
После того, как вы загрузили копию котельной и заменили все необходимые элементы со своими собственными именами (см. Установка ), пришло время настроить некоторые реагирование. Иногда я заменяю имена вручную, но вы можете найти команды онлайн, чтобы сделать это в консоли.
Теперь здесь полезно сделать различие от того, где мы хотим, чтобы наше приложение React Live Live. Нужен ли нам передний дисплей или интерфейс, или что-то внутри администратора WordPress? Большинство сайтов собираются сделать первый, но Backend Plugins сделает второе место, поскольку они больше борются в области администратора WordPress, добавляя новые страницы настроек и типы постов.
Давайте CD в папку, где мы собираемся иметь наше приложение raction – либо публично/ или Админ/ , в зависимости от того, что вы решили – и create-ractment-app my-app-name Отказ Убедитесь, что Создать ract app Установлен первый, конечно. Для вас создаст некоторые основные папки для вас, и теперь у вас есть приложение React, живущее в вашем плагине WP. NPM начать А затем закройте окно браузера, которое появляется – мы не будем развиваться на http://localhost: 3000 этот раз!
Нам нужно сделать несколько предварительных вещей, чтобы подготовить нашу установку WordPress и разрешить реагировать на соединение и воспроизведение. Это наиболее важно для интерфейса, потому что вы, вероятно, захотите получить доступ к WordPress WP JSON API получить доступ к данным. Вы можете указать, какие посты или сообщения доступны, и если вы создаете пользовательский тип поста, вам придется добавить его вручную, чтобы отдохнуть (немного процесса).
В этом случае мы собираемся создать страницу, чтобы обслуживать наше приложение React на общественной стороне. Вот какой-то код, который автоматически генерирует эту страницу на init Plugin:
$my_page = get_option('plugin_name_page');
if (!$my_page||FALSE === get_post_status( $my_page )) {
// Create post/page object
$my_new_page = array(
'post_title' => 'CRA App Page',
'post_content' => '',
'post_status' => 'publish',
'post_type' => 'page'
);
// Insert the post into the database
$my_page = wp_insert_post( $my_new_page );
update_option('plugin_name_page',$my_page);
}
Это также сохраняет идентификатор страницы в опцию, поэтому мы сможем загружать сценарии условно позже. Мы также добавляем немного кода в публичной стороне, чтобы убедиться, что эта страница фактически загружает правильный шаблон – который мы создадим дальше.
Сдаваться для PROD и DEV
Если мы создаем приложение администратора, то нам нужно создать какую-то страницу, где приложение будет работать. Мое приложение администратора работает от пользовательского типа поста, а внутри метабокса – но ваш может также быть просто на странице настроек. Вам нужно создать место, где вы сможете направить свои оперативные сценарии для загрузки.
В этом случае, поскольку большинство людей будут делать приложения для общественности, мы просто пройдем этот процесс. Если вы следите за этим, вы должны быть в состоянии экстраполировать для версии администратора одного и того же.
Вот моя очень простая страница шаблона:
>
>
Теперь давайте применим стили и сценарии условно, в зависимости от того, будем ли мы построить или разработать, и убедитесь, что WordPress всегда захватывает последний файл.
Стили:
$my_page = get_option('plugin_name_page');
if($my_page && is_page($my_page)) {
if (!in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
$CSSfiles = scandir(dirname(__FILE__) . '/create-react-app-name/build/static/css/');
foreach($CSSfiles as $filename) {
if(strpos($filename,'.css')&&!strpos($filename,'.css.map')) {
wp_enqueue_style( 'plugin_name_react_css', plugin_dir_url( __FILE__ ) . 'create-react-app-name/build/static/css/' . $filename, array(), mt_rand(10,1000), 'all' );
}
}
}
} else {
wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/plugin-name-public.css', array(), mt_rand(10,1000), 'all' );
}
Сценарии:
$my_page = get_option('plugin_name_page');
if($my_page && is_page($my_page)) {
if (!in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
// code for localhost here
// PROD
$JSfiles = scandir(dirname(__FILE__) . '/create-react-app-name/build/static/js/');
$react_js_to_load = '';
foreach($JSfiles as $filename) {
if(strpos($filename,'.js')&&!strpos($filename,'.js.map')) {
$react_js_to_load = plugin_dir_url( __FILE__ ) . 'create-react-app-name/build/static/js/' . $filename;
}
}
} else {
$react_js_to_load = 'http://localhost:3000/static/js/bundle.js';
}
// DEV
// React dynamic loading
wp_enqueue_script('plugin_name_react', $react_js_to_load, '', mt_rand(10,1000), true);
// wp_register_script('plugin_name_react', $react_js_to_load, '', mt_rand(10,1000), true);
//
// wp_localize_script('plugin_name_react', 'params', array(
// 'nonce' => wp_create_nonce('wp_rest'),
// 'nonce_verify' => wp_verify_nonce($_REQUEST['X-WP-Nonce'], 'wp_rest')
// ));
// wp_enqueue_script( 'plugin_name_react' );
} else {
wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/plugin-name-public.js', array( 'jquery' ), mt_rand(10,1000), false );
}
Так что делает этот код? Вам нужно понять это, потому что это может быть не идеально для вашего случая использования. Зная, вы можете изменять соответственно.
- Оба сценария сначала проверяйте, если мы находимся на странице, на которую мы хотим загрузить реагирование.
- Мы проверяем, есть ли мы у URL-адреса localhost. Это быстрый и грязный способ знать, что мы не на производственном сайте.
- Если это производство, сканируйте
построить/каталог и выберите файл CSS или JS. Этот файл всегда имеет случайное имя в CRA, поэтому мы сканируем его вместо того, чтобы указывать точное имя файла. - Если это dev (localhost), то получите комплект, генерируемый из CRA, когда
NPM начатьбежит Загрузите скрипт! - Если мы не на странице RACT, загрузите все обычные пользовательские CSS WP.
Замените все, что вы называете своим приложением для create-racte-app name/ Отказ Я также включал какой-то комментарий код, который должен помочь вам начать работу с NONCES в вашем взаимодействии API.
Беги NPM начать В каталоге приложений и отправляйтесь на автосгенерированную страницу с загрузкой шаблона страницы. Любые ошибки? Дайте мне знать, если у вас есть! Если нет, на данный момент вы сможете увидеть приложение CRA, загрузку внутри корня Div На каком-либо экране вы настраиваете, настройки или шаблон страницы. Хорошо сделано!
Некоторые предупреждения
Это приложение все еще работает в WordPress – это означает, что jQuery может быть загружен или скрипты плагинов или другие сумасшедшие вещи. Использовать deenqueue_scripts Удалить любые неприятностей CSS или JS. В противном случае это водит тебя диким!
Продолжайте использовать уникальные имена классов, так как вы будете в любом платере WordPress. Только потому, что CRA устанавливает и построил, не означает, что это не будет легко сломано по умолчанию CSS!
Используйте скрытые входы и другие методы для получения URL-адресов, идентификаторов или другой базовой информации, необходимой из базы данных WP. В противном случае вы будете делать абсолютные звонки, и вещи будут разбиты между местными и продуктами.
В целом, несмотря на проблемы, я обнаружил, что эта настройка была проста в использовании и относительно надежно с CRA, и очень легко загружать новые версии вашего приложения – просто удалите старый построить/ Папка и загрузить новый.
Заключение
Проверьте репо и сделайте некоторые предложения, чтобы исправить любые ошибки в https://github.com/mapstertech/wordpress-react-plugin-boilerplate Отказ
Я надеюсь, что это помогло вам быстро прокатиться с ReactJS и WordPress, и, возможно, он поможет вам разрабатывать ваш следующий уникальный и удивительный плагин. Я помогу, если вам нужно больше, просто пришлите мне заметку!
Наслаждаться! Наша команда на Mapster Закончит изучение языка и WP Mapbox GL JS, который оба использует некоторую вариацию интеграции реагирования и WordPress. Они приближаются к первому дату выпуска, и мы с нетерпением ждем, чтобы разделить их с вами в ближайшее время!