На главной странице нужно вывести посты, относящиеся к определенным категориям. В этом помогут параметры категорий класса 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, если встретится такое в проекте.

Старался максимально подробно описать работу со сборкой.

Из полезностей:
- скачивание Wordpress и заранее записанных плагинов одной командой;
- минифицированный файл стилей;
- минифицированный файл скриптов;
- автоматическая оптимизация изображений;
- разработка темы на scss;
- автообновление браузера при изменении файлов стилей, скриптов и php файлов.

Порядок настройки сборки в статье ниже 👇👇👇

#wordpress #gulp #composer

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то сложно её обслуживать. В таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS:
- переменные;
- вложенности;
- создавать части кода, которые можно использовать в разных файлах;
- импорт;
- расширение/наследование.

С препроцессором работа станет приятней и быстрее.

#Scss #вёрстка

`git init` - создание нового репозитория в текущей папке;
`git add .` - фиксирование изменений файлов, которые будут добавлены в коммит;
`git commit -m "Закончил header"` - создание нового коммита;
`git push -u origin master` - публикация указанной ветки в удаленном репозитории вместе со всеми необходимыми коммитами и внутренними объектами;
`git status` - текущее состояние файлов репозитория. Список измененных и не добавленных файлов.

Как работает `position: sticky` в CSS

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

Это свойство часто используется при создании "липкого" меню или "плавающего" сайтбара.

«Липкий» элемент — это элемент, которому мы задали position: sticky. Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например top: 0px.
Пример:
.component {
position: sticky;
top: 0px;
}
«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.
Когда вы задаёте элементу position: sticky, его родитель автоматически становится «липким» контейнером!
Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.

Пример по ссылке ниже 👇👇👇

Details modal - модальное окно на CSS.

Показать модалку после успешной отправки сообщения. Contact form 7.
Простым решением можно воспользоваться по ссылке ниже 👇👇👇

Модальное окно, которое можно закрыть не только на крестик, но и при нажатии на область вне формы.

Очень просто и понятно как стилизовать скролл. Подходит для Mozilla Firefox, Google Chrome, Яндекс.Браузер, Safari и Opera.

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

Что такое Git и для чего он нужен?

Git - для отслеживания и ведения истории изменения файлов в вашем проекте. Чаще всего его используют для кода.

С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.

Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально, а все ваши репозитории хранятся в определенных папках на жестком диске.

Основные команды для работы с git 👉 тут

Как упростить разработку темы для Wordpress с возможностью применять команды git`a 👉 тут

Вот и живой проект, где у раздела есть слегка наклонный фон. Это идеальный вариант использования `clip-path`.
Для реализации углового эффекта, нужно использовать расширение `polygon()`.
.section {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Подробнее по ссылке ниже 👇👇👇