Михаил Кузнецов

Наконец таки я решил все технические вопросы для внедрения 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 и очистил код.

Итак, решение:
Видимо не все почистил руками.
Помог антивирус для сайта - ai-bolit. На сайте revisium.com/ai/ на 29.01.2020 лежал не полный комплект файлов, поэтому искал на просторах Интернета. Загружаем на сайт в корневую папку файлы:
.adirignore
.aignore
.aurlignore
ai-bolit.php
AIBOLIT-WHITELIST.db

В файле ai-bolit.php требуется установить свой пароль. Находим строку с определением пароля: define('PASS', '????????????????????'); И вписываете вместо символов ??? свое значение (например: MyPass23689) Регистр символов должен иметь хотя бы одну (лучше две) заглавную букву и длина пароля не менее 8 символов. Файл сохраняете.

После загрузки скрипта на сервер нужно запустить AI Bolit по ссылке в адресной строке вашего браузера: https:// адрес_вашего_сайта/ai-bolit.php?p=ваш_пароль

Для полной проверки файлов к указанной выше строке дописывает &full и получаем строку вида - https:// адрес_вашего_сайта/ai-bolit.php?p=ваш_пароль&full

Ждем около 10 минут (зависит от размера сайта). В полученном отчете получаем зараженные файлы (выделено красным). Удаляем файлы, чистим код где требуется.
Поиск через TotalCommander и ему подобные Вам в помощь. Ищите base64 и eval(

P.S. В настройках личного кабинета на хостинге - Отключение опасных функции в PHP.INI которые часто используются для взлома сайта - поставил в режим РАЗРЕШИТЬ. Полет нормальный, ничего не зависает. Загрузка страниц сайта чуть более секунды.

Можно через CSS сделать. Решение работает, начиная с древнего IE11 (т. к. без object-fit). Плюс, картинки не будут подвержены лишней обработке на сервере. Код включает в себя всевозможные хаки для разных браузеров.

Оно не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

$counter = 0; нужно вынести за пределы цикла, иначе он всегда и будет 0.

<?php
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args = array(
    'post_type' => 'product',
    'product_cat' => 'cat-1',
    'paged' => $paged,
    'orderby' => 'date'
);
$my_query = new WP_Query($args);
$counter = 0;
while ($my_query->have_posts()) :
    $my_query->the_post();
    ?>
    <a data-slide-index="<?php echo $counter; ?>"> </a>
    <?php
    $counter++;
endwhile;
wp_reset_query();
?>

Решение найдено! Нужно удалять хук через подключение хука инициализации init

add_action( 'init', 'jk_remove_storefront_header_search' );
function jk_remove_storefront_header_search() {
remove_action( 'storefront_header', 'storefront_product_search', 40 );
}

Вот, кстати, интересная статья по этому вопросу
remove_action или remove_filter не работает в дочерней теме WordPress, если пытаться удалить хуки родительской темы
В родительской теме определен ряд хуков, которые мешают мне и хочется их удалить в дочерней теме.
Логично предположить что нужно просто вставить remove_action или remove_filter в function.php дочерней темы.
Но не тут то было!
Это не работает.
Как оказывается, function.php дочерней темы грузится перед тем же файлом родительской темы. И если использовать обычную схему, то получится что попытка удаления хука произойдет перед его добавлением. Что как мы знаем по кодексу оказывается безрезультатным.
Таким образом нам нужно добиться ситуации, когда удаление хука произойдет после его определения.
Как это сделать?
Все очень просто Нужно удаление хука зацепить на более поздний хук, который выполнится после определения хука родительской темы. О как
Но все просто. Самый элементарный хук init вполне нам подойдет.
И делаем так:

add_action('init','removeOldFunction');
function removeOldFunction(){
remove_action( 'template_redirect', 'alienship_nice_search_redirect' );
}

Этим кодом мы удалим хук alienship_nice_search_redirect, который определен в родительской теме, при помощи function.php дочерней.
Проверено
Все хорошо, пока дело не касается сайдбара. Там хук инициализации виджетов работает еще позднее чем init, потому нужно вешаться на хук after_setup_theme.
Ну и в других случаях. Удаляя тот или иной хук не забудьте проверить его порядок загрузки и убедиться что он грузится позднее, чем тот который вы удаляете.

Для Windows
Sublime text
Добавить курсор на предыдущую строку
Ctrl+Alt+Up

Добавить курсор на следующиую строку
Ctrl+Alt+Down

Brackets
Добавить курсор на предыдущую строку
Alt+Shift+Up

Добавить курсор на следующиую строку
Alt+Shift+Down

$("div#"+theActiveId).hide();

Спасибо за ответы, возможно кому-то понадобиться, реализовал так:
Главная страница, где есть ссылки:

<div class="link_list first_answ">
						<a href="/pismennyi-perevod.html#perevod-dokumentacii" class="service_name">Перевод документации</a>
						<a href="/pismennyi-perevod.html#korrektirovka" class="service_name">Корректировка документов</a>
						<a href="/pismennyi-perevod.html#redaktirovanie" class="service_name">Редактирование документов<br>(носителями языка) </a>
						<a href="/pismennyi-perevod.html#verstka" class="service_name">Верстка</a>
						<a href="/pismennyi-perevod.html#reraiting" class="service_name">Рерайтинг</a>
						<a href="/pismennyi-perevod.html#transkribirovanie" class="service_name">Транскрибирование</a>
						<a href="/pismennyi-perevod.html#notarialnoe-zaverenie" class="service_name">Нотариальное заверение<br>переводов </a>
						<a href="/pismennyi-perevod.html#dostavka-raspechatka" class="service_name">Доставка и распечатка<br>документов </a>
					</div>

Внутрення, где аккардеон:

<a href="#" class="service_name_item" data-name="perevod-dokumentacii">Перевод документации</a>
							<div class="service_content_item">
								<p><strong>Перевод документации</strong><br>Мы предлагаем перевод технической, медицинской, юридической и иной документации высококвалифицированными профильными специалистами.</p>
								<a href="#order" class="button magnific-popup blue_button" data-theme="Перевод документации">Получить консультацию по&nbsp;услуге</a>
							</div>
							<a href="#" class="service_name_item" data-name="korrektirovka">Корректировка документов</a>
							<div class="service_content_item">
								<p><strong>Корректировка документов</strong><br>Корректировка документа с целью устранения грамматических, орфографических, синтаксических ошибок, технических погрешностей</p>
								<a href="#order" class="button magnific-popup blue_button" data-theme="Корректировка документов">Получить консультацию по&nbsp;услуге</a>
							</div>

JQuery

if(window.location.hash){ //Проверяем, есть ли в ссылке, по которой перешел пользователь хэштег
		var $hash = window.location.hash, //получаем названием, например #verstka
			$hash_text = $hash.substr(1); // убираем первую строчку, т.е "#"
// далее мой код аккордеона
		$('.service_name_item').next().hide(); 
		$('.service_name_item[data-name="'+ $hash_text +'"]').addClass('active');  //я реализовал нахождение нужного объекта для показа через data-атрибуты(см. HTML)
//ищем есть ли .service_name_item с data-name'ом verstka, и даем ему класс active
		$('.service_name_item.active').next().show(); // открываем следующий блок(показываем содержимое вкладки аккордеона)
		$('.service_name_item').click(function(){
			if($(this).hasClass('active')){
			}else{
				$(this).addClass('active');
				$(this).next().slideToggle();
				$('.service_name_item').not(this).next().stop(true,true).slideUp();
				$('.service_name_item').not(this).removeClass('active');
			}
		});
	}

<div id="myLink">тут будет ссылка</div>
<script type="text/javascript">
    var div = document.getElementById('myLink');
    var e    = document.createElement('a');
    e.href = 'http://google.ru';
    e.title = 'это ссылка';
    e.appendChild(document.createTextNode('ссылка'));
    div.appendChild(e);
</script>

или при помощи jquery

$("#myLink").html('<a href="http://google.ru">ссылка</a>')

Ни в коем случае не слушайте тех, кто советует делать это через .css(). Это дурной тон, никогда не нужно менять слили непосредственно через js.
Задавайте нужные стили классу-модификатору, и добавляйте/удаляйте его через .addClass() / .removeClass()

Ширину всего сайта ставь любую, хоть в 2к разрешении. Основное - чтобы контентная область для всех экранов была одинаковая (в некоторых исключениях, можно делать адаптацию большие экраны).

Например, возьмем пример разных мониторов, при условии что контентная область 1170px.
1920px
1366px
1240px

Разница между мониторами будет лишь в том, что шапка, футер и др. элементы, которые имеют резиновую ширину на весь экран, будут растягиваться, а контентная область у всех будет составлять 1170px.

Пример:

Красным отмечена контентная область, элементы шапки в данном примере, растягиваются на всю ширину, и совсем не важно, в каком именно разрешении вы их отрисуете.

Поэтому при выборе разрешения экрана, руководствуйтесь своими предпочтениями, главное держите контентную область в одном размере.