Все знают про эту большую схему иерархии файлов темы 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, если встретится такое в проекте.

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

Из полезностей:
- скачивание 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, его родитель автоматически становится «липким» контейнером!
Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.

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