Исходя из опроса выше, многие просто качают 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%);
}

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

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

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

Я так и сделал. Время на разработку уменьшилось, подборка файлов для проекта увеличилось.

Перейди к структурированному коду, если до сих пор пишешь все стили в одном файле.

Калькулятор цен на первый взгляд очень сложная конструкция в реализации. На самом же деле не сложней мобильного меню или модалки. Один из вариантов я написал в codepen.

Посмотри и убедись в этом сам 👇👇👇

Основные методы для модального окна:
fadeIn()
fadeOut()
Для вкладок:
addClass()
siblings()
removeClass()
closest()
find()

Посмотреть, что они означают и изучить другие необходимые методы можно по ссылке 👇👇👇

Ползунок цен. Можно стилизовать. Без кучи подключенных библиотек. Работает ровно, без замечаний. Ссылка на codepen 👇👇👇

Оптимизация изображений на сайте Wordpress.

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

Варианты оптимизации изображений для сайта описано в статье 👇👇👇

Плагины, для создания доступа к сайту, только после регистрации:
- Membership & Content Restriction;
- WP-Members;
- Ultimate Member;
- Simple Membership;
- Members.

Можно использовать если:
- продаете свой товар;
- есть платная подписка на контент;
- если у вас сеть магазинов по продаже табачных изделий в России.