Артем Глод

Наконец таки я решил все технические вопросы для внедрения Vue.js в WordPress-Workflow. Долго я к этому шёл. Трудно было совместить freelancing на основе WordPress и WooCommerce и одновременно самообучение Symfony и Vue.js и создание первых реальных проектов на их основе. Но создание первого большого проекта на основе headless Symfony 4 (JSON API) и потребителя на основе Vue.js меня хорошо продвинуло вперед в направлении внедрения Vue.js в WordPress. Почему мне так интересен WordPress/WooCommerce умея делать Backend на основе Symfony? Потому что WordPress делает доступным веб технологии и маленьким клиентам по "демократическим" ценам, при этом всё ещё позволяя фрилансеру хорошо заработать (по крайней мере в Берлине, где я проживаю).

Так как путь сюда до сих пор никем в интернете детально не описан и я угрохал недели если не месяцы на решение этой задачи прочитывая все статьи и docs с этой темой связанные (освоил для этого даже наконец таки Docker и Nginx и углубил знания в настройке Webpack) и пройдя многие не верные пути (vue-cli, nuxt.js) - я решил создать в течении следующих недель курс на Udemy.com на английском за 20 баксов. Если будет тут достаточно интереса (хотя бы лайков 10 ), то сделаю туториал и на русском. Курс будет содержать настройки Webpack, Docker (optional), Apache/Nginx. Моё решение сохраняет в отличии от nuxt.js все преимущества как WordPress так и Vue.js при этом соблюдая "законы" SEO и Social Marketing (Twitter Cards, Facebook Open Graph итп) и самое главное Hot Module Replacement с PHP/WordPress Templates!!!!!! .
Я очень разочарован Nuxt.js и расскажу в Tutorial почему он далеко не во всех случаях технически годен и почему с точки зрения open source этот проект не оптимальный исходя из моего личного опыта.

UPDATE 15.05.2019
К сожалению руки до туториала так и не дошли. Но создал Github Repo с простым Starter Theme.
Демо можно тут просмотреть: wue-theme.app
Пока без доскональной документации. Надеюсь к концу месяца создам.
Приколы темы:
-Hot Module Replacement с PHP файлами (если только это интересно можно и тут скачать Webpack config)
-полная поддержка SEO без Server Side Rendering (SSR). Реализуется это за счёт загрузки данных вместе с HTML в глобальном JS объекте "technomad", вместо дополнительного AJAX-запроса, что не поддерживается гуглом и для чего и нужны все прибамбасы типа Nuxt.js и phpv8/v8js.
-элементы меню и новости автоматически добавляются через WordPress-Backend.
-тема устонавливается как и любая другая тема без каких либо дополнительных настроек сервера (нужно скачать всю Repository и скомпремировать "wuetheme" папку в ZIP и тогда можно просто загружать как и обычную тему).
-Github Repo без данных из демонстрации. Может ещё добавлю функцию установки демо данных.
-сервер демо во Франкфурте без CDN. Так что во Владивостоке загрузка наверное немного дольше длится будет)) Из Берлина за 600-700ms загружается с VPS.
-есть ещё много над чем работать (pagination, проверка загруженны ли скрипты и стили плагинов при Ajax route change, пока они загружаются только при инициальной загрузки, но скрипты и стили могут быть на каждой странице иные) , нo даже в данном виде эта тема на сколько я знаю уникальная.
-тут можно проследить прогресс перестройки моего сайта с этой темой: stage.alexfullstack.dev, там больше клёвых анимаций))
Пока всё. Have fun :)

Update 30.05.2019
Много чего обновил на Github.

Update 02.06.2019
Я решил вчерашнюю проблему)))
Нужно было просто выспаться))
Завтра подробно опишу и обновлю Github Repo.

Update 03.06.2019
-загрузил на Github новую "bulletproof SEO" версию с "Dynamic Rendering Implementation"
-подробная статья тут

Update 14.06.2019
Перенёс сайт на wue-theme.app.
Демонстрация Github версии тут: starter.wue-theme.app
Добавил простую Load More Pagination и очистил код.

Дело было в настройках сервера. Хостер отписался на проблему.

Для хостинга LOGOL.RU(Он же теперь REG.RU) - действуем по данной интсрукции:

Переопределение параметров PHP
Очень часто разработчики сталкиваются с необходимостью изменения некоторых параметров PHP для обеспечения корректной работы своих скриптов.

Например, для увеличения размера загружаемых на сервер файлов через PHP-скрипты иногда требуется переопределить переменные post_max_size и upload_max_filesize.

На виртуальном хостинге справиться с этой задачей можно следующим образом:

Создайте в каталоге, где находятся PHP-скрипты, для которых необходимо переопределить значение переменных, файл php.ini;
Пропишите в этом файле переменные и их новые значения, как показано в примере ниже:
post_max_size = 20M
upload_max_filesize = 20M

max_input_vars = 9000 (Для меня требовалась только эта директива, ее и записал в php.ini)

Важно помнить, что переопределённые значения будут действовать для PHP-скриптов только того каталога, в котором находится файл php.ini.

Если требуется изменение переменных в PHP для всех подкаталогов текущего каталога, создайте в текущем каталоге файл .htaccess и пропишите в нём следующую директиву:

SetEnv PHPRC "/home/cpXXXXXX/путь_к_каталогу_с_php.ini"

где cpXXXXXX — логин от хостинговой площадки.

Например:

SetEnv PHPRC "/home/cp100500/public_html"

Изменения вступают в силу немедленно.

Оказываться в WordPress очень неудобно использовать отдельные от него php-скрипты (как мой mail.php). Не работала переменная ABSPATH.

Я создал функцию send_form() в function.php (лежит в папке с темой) и добавил в неё весь код из моего mail.php.
Перед всякими require get_template_directory()............. написал:

function send_form(){
    //весь код из mail.php тут
}
add_action('wp_ajax_send_form', 'send_form');
add_action('wp_ajax_nopriv_send_form', 'send_form');

Так переменная ABSPATH корректно заработала.

Ну и в аяксе url заменил на
/wp-admin/admin-ajax.php?action=send_form

И все заработало! ))

Спасибо за ответ Зелим Бельтоев! Но не включенно. Я всё таки разобрался ... ответ как всегда был прост, проблема была в модификаторах, которы нужно было просто удалить. Они как оказалось работают как кеш. У меня же они находились (system/storage/modification/) удалил содержимое папки и все изменения применились.
Всем спасибо! :)

Для справки:
"Модификаторы - специальные файлы xml в которых есть инструкции по изменению файлов. Но сами файлы не меняются, меняются их виртуальные копии. Более подробно описано в руководстве разработчика.
Но для начала совсем не об этом. Бывают случаи когда вы то и дело изменяете основные файлы, а изменения не происходят. Скорей всего, виной является как раз виртуальная копия файла (созданная каким либо модификатором), которая находится по пути ваш-сайт\system\modification\ или в Меню - Модули - Модификаторы
Для того чтобы обновить кеш модификатора, необходимо перейти в Меню - Модули - Модификаторы нажать Обновить"