Вадим Фоминов | Создаю сайты на Wordpress

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

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

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

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

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

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

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

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

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

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

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

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

#Scss #вёрстка

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

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

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

#wordpress #gulp #composer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#wordpress #wp_query

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

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

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

#wordpress