Как загрузить товары выбранной категории в слайдер?

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

6 простых шагов как сделать ajax загрузку товаров выбранной категории в слайдер:

1 - разметка списка с категориями;
2 - разметка слайдера;
3 - установить slick slider;
4 - js код слайдера;
5 - js код ajax запроса;
6 - php код обработки запроса.

Этот слайдер можно вставить в любое место на сайте.

#wordpress #ajax

Код для реализации функционала по ссылке ниже👇👇👇

Как мне вывести категории постов?

Есть несколько вариантов:

1) если я хочу вывести категории текущего поста на той странице, где у меня открыт пост, то использую функцию - the_category();

2) если мне нужно вывести все категории в любом месте (для меню в шапке или фильтр по категориям сделать), беру эту - wp_list_categories();

3) для других извращений использую это 👉🏻 get_terms();

Каждому варианту есть место, но в третьем больше возможностей. Чего стоит распечатать эту функцию с помощью print_r(get_terms()); и посмотреть что хранится внутри.

#wordpress #category

Представьте себе страницу "Каталог" на сайте. В коде это будет один файл - archive-product.php.
И на этой странице выводятся товары только одной из категорий:
- мототехника;
- снаряжение;
- запчасти;
- масла.

Для категории "Мототехника" нужно сделать кнопку с модалкой, в которой будут указаны условия аренды.

Сделать это очень просто. Есть конструкция if else, которая может проверить товары такой категории, которая сейчас на экране, и, если это мототехника, показать кнопку с модалкой.

if( $slug == 'mototehnika' ){
echo '<button>Условия аренды</button>';
}

#wordpress #разработка_сайтов

Не всегда достаточно использовать только циклы wordpress, нужно уметь пользоваться циклом PHP, в работе очень помогает. На пример, вывести категории постов через get_terms(); в списке.

Конструкция не сложнее чем if else:
<ul>
<?php
$terms = get_terms();
foreach( $terms as $term ) { ?>
<li><?php echo $term->name; ?></li>
<?php } ?>
</ul>

Где я взял name? Распечатайте print_r($term); внутри цикла и всё сами поймёте👍

#wordpress #циклы

Все знают про эту большую схему иерархии файлов темы WordPress, но нужно ли сейчас знать все эти названия файлов и место их применения?

Ниже я выписал основные файлы, с которыми работаю почти в каждом проекте:
- index.php и style.css - два файла, без которых нельзя создать тему;
- header.php, footer.php, 404.php и functions.php - тут и так всё понятно;
- front-page.php - главная страница сайта;
- home.php - страница с постами, наш блог;
- single-post.php - страница открытого поста;
- archive.php - на этой странице будут выводиться посты выбранных рубрик, меток, таксономий, архивные записи, записи определённого автора;
- page-{urldecode_post_name}.php - здесь будет пример: на сайте есть страница "Контакты" и у неё url-адрес - sitename.ru/contacts. Если создать файл с названием page-contacts.php, то код, внутри его, будет применяться для страницы "Контакты".

#wordpress #page

Когда создаёшь свою тему, используешь сторонние плагины. У них есть свои файлы стилей. Например, берём плагин `contact form 7`. Хороший плагин для форм обратной связи. Но мне стили, которые он подключает к моему сайту, не нужны.
Я хочу отключить их.

Есть решение, которое позволяет мне это сделать. Файл стилей в плагине подключается также, как и в теме. Отключить стили можно, сделав следующее:
- открыть код страницы;
- найти нужный id в теге <link id="" />;
- записать его в конструкцию ниже 👇👇👇.

function remove_styles () {
 wp_deregister_style ('contact-form-7');
}
add_action ('wp_print_styles','remove_styles',100);

#wordpress #отключение_стилей

При создании карточек новостей мало вывести просто заголовок, краткое описание, дату поста и другое. Нужно задать себе вопрос: "Что, если...?"

Что, если заголовок длинный и не помещается в карточку?

Ответ на этот и другие похожие вопросы я разобрал в заметке по ссылке ниже 👇👇👇

Если reCAPTCHA не будет установлена, через формы обратной связи заказчику на почту будет приходить спам. В плагине `Contact form 7` есть возможность её установки, но скорость загрузки сайта уменьшается. 

Я использую этот плагин 👉 Invisible reCaptcha для установки капчи, PageSpeed не так сильно ругается.

Отключать у себя на сайте верхнюю панель администратора решать каждому, но нужна ли она на сайте кому-нибудь еще, кроме админа? Думаю, что нет.

Заказчику, редакторам сайта, менеджерам магазина и т.д. она точно не нужна. Дай им ссылку на вход в `админку` и данные для входа. Всё! Этого достаточно. А иначе будут задавать лишние вопросы: "не по макету как-то сайт сделан", "что за черная полоса сверху?"

Решил удалить её? Перейди по ссылке ниже, там увидишь 2 примера как это сделать.

#wordpress

Самое интересное и полезное при разработке сайтов на WordPress - это `WP_Query`.

WP_Query - это класс, с помощью которого можно получать доступ к записям, страницам, произвольным типам данных и всему, что нужно разработчику для создания сайта на WordPress.

Вы в любое время можете зайти на сайт wp-kama.ru и прочитать о классе сами, там подробно всё описано. Но, когда и где применять параметры этого класса, я расскажу у себя в канале.

По ссылке ниже, описан базовый пример использования WP_Query. 
Дальше - больше и интересней.

#wordpress #wp_query

На главной странице нужно вывести посты, относящиеся к определенным категориям. В этом помогут параметры категорий класса WP_Query. 

Примеры применения этих параметров написаны в заметке ниже 👇👇👇

Иногда нужно выводить посты только по определённым тегам. Для этого в WP_Query есть свои параметры. Примеры их использования я написал в заметке ниже 👇👇👇

Искал в Гугле, как стилизовать select и его option. Естественно, ничего не нашел, т.к. его пока нельзя стилизовать так, как мне хочется. Предлагали очень много разных jquery-библиотек для стилизации select, но подключать кучу js кода ради одного select - так себе вариант... 
Нашел другое решение, ссылка на код 👇👇👇

Если дизайнер не сделал png изображение, а на сайте без него никак, то есть хорошее решение.

На сайте remove.bg можно легко убрать фон с изображения и использовать его в своих проектах.

Для больших изображений на главной странице или банеров на второстепенных всегда использовал тег `<img />` и position`ом двигал его для красивой картинки в браузерах телефона. До тех пор, пока мне не показали тег `<picture>` и не рассказали как он работает.

Из возможностей:
- в один тег загружать несколько форматов изображения, браузер сам выберет подходящий (это и .webp);
- в один тег можно загрузить изображения разной ширины и высоты под разные устройства.

Об этом более подробно и с примером в заметки по ссылке ниже 👇👇👇

responsinator.com - сервис, на котором можно проверить работу своего сайта на различных мобильных устройствах.

Отличная шпаргалка по wordpress есть. Собрано всё самое необходимое. Обязательно ознакомьтесь 👇👇👇

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

Сейчас я подготавливаю специальную сборку, которая поможет скачать Wordpress и необходимые плагины одной командой в терминале.
Из плюсов этой сборки:
- автообновление браузера при разработке шаблона;
- scss -> css;
- формируется 1 main.min.css;
- формируется 1 main.min.js;
- автоматическое сжатие изображений.

Нравится писать вёрстку с использованием browsersync? Теперь будет возможность и создавать тему для Wordpress так же просто.

Вариативная карточка товара с возможностью выбора вариации из каталога.
Быстрый заказ - перенаправит пользователя на страницу оформления заказа с выбранной вариацией товара.
Иконка "В корзину" - добавит выбранную вариацию товара в корзину.

В интернете мало информации про создание таких карточек. Сохраните пост себе и обращайтесь к @dv_aleksandr, если встретится такое в проекте.