Вадим Фоминов | Создаю сайты на Wordpress
1.53K subscribers
233 photos
5 videos
15 files
112 links
Про сайты со сложной структурой: интернет-магазин, сайт-каталог, блог, сайт-портфолио или личный кабинет любой сложности.

Для связи: @vadimfominov
Download Telegram
Для вывода постов в Wordpress можно использовать следующий цикл:
<?php if ( have_posts() ){ while ( have_posts() ){ the_post(); ?>
<!-- Вывод заголовка поста: the_title() -->
<?php } } else { ?>
<span>Записей нет.</span>
<?php } ?>

#wordpress #вывод_постов
Следующий цикл для вывода постов:
<?php while ( have_posts() ){ the_post(); ?>
<!-- Вывод заголовка поста: the_title() -->
<?php } ?>
<?php if ( ! have_posts() ){ ?>
<span>Записей нет.</span>
<?php } ?>

#wordpress #вывод_постов
Во время разработки своей темы постоянно есть необходимость вставлять шорткоды в коде. Это могут быть шорткоды формы cf7 или ajax форма поиска в woocommerce.

<php 
echo do_shortcode('[your_shortcode]');
?>
Как посмотреть что внутри переменной?

После умения "правильно гуглить" важно научиться использовать функции для просмотра переменных. Я постоянно использую print_r() и var_dump().

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

Например, воспользуйтесь одним из циклов вывода содержимого поста и внутри распечатайте переменную print_r($post);, посмотрите в браузере, какую информацию о посте она выведет?

И теперь, не зная стандартной функции вывода заголовка поста the_title(); его можно вывести с помощью <?php echo $post->post_title; ?>

Для того, что бы распечатанный код не был в одну строку, запишите его внутри тега
<pre><?php print_r($post); ?></pre>

#wordpress
ezgif.com-gif-maker.gif
222.1 KB
Как повысить качество и чек своей работы?

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

По ссылке ниже можно посмотреть и скопировать очень простой в реализации анимации код, который можно применять в своих проектах.

#wordpress #разработка_сайтов
motomarket.gif
1.8 MB
Как загрузить товары выбранной категории в слайдер?

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

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
Проблема: после обеда падает фокус в работе.

Работаю дома с 7 до 12, потом перерыв до 14 и дальше за работу. После 14.00 иногда сложно сосредоточиться и занимаюсь не работой. Сегодня пошел гулять, как обычно, после обеда и нашел кофейню в 100 метрах от дома 😳.
Попробую поработать в ней, когда дома прям всё против продуктивной работы.

Посмотрю как скажется смена обстановки за окном 🤔

Как вам обстановка?

#live
Please open Telegram to view this post
VIEW IN TELEGRAM
Когда создаёшь свою тему, используешь сторонние плагины. У них есть свои файлы стилей. Например, берём плагин `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 есть свои параметры. Примеры их использования я написал в заметке ниже 👇👇👇
2021-10-02_12-37-56_1.gif
178.2 KB
Искал в Гугле, как стилизовать select и его option. Естественно, ничего не нашел, т.к. его пока нельзя стилизовать так, как мне хочется. Предлагали очень много разных jquery-библиотек для стилизации select, но подключать кучу js кода ради одного select - так себе вариант... 
Нашел другое решение, ссылка на код 👇👇👇
222222222222.gif
647.4 KB
Если дизайнер не сделал png изображение, а на сайте без него никак, то есть хорошее решение.

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

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

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