Лучшие сниппеты (snippets) для WordPress - Блог - Oktenweb

Лучшие сниппеты (snippets) для WordPress

21 Апрель 2019

Сниппет – это короткий фрагмент кода, выполняющий определенную функцию и который, можно повторно использовать в разработке.

Касательно CMS WordPress – использование сниппетов значительно ускорит создание веб-сайта и поможет wordpress-разработчику «не изобретать колесо» при решении своих задач.

В данной статье мы рассмотрим лучшие, на наш взгляд, сниппеты для CMS WordPress, которые используют разработчики нашей компании.

Вывод get_template_part() через Shortcode

Очень часто бывают ситуации, когда нужно вставить в редактор WordPress какой-либо фрагмент кода. К примеру, вы написали абзац текста, после него вы хотите поставить вручную написанный слайдер. Так вот, возникает вопрос, как же вставить в готовый код такой слайдер чтобы ничего не поломать? Конечно – использовав shortcode. В WordPress репозитории представлено большое количество различных слайдеров, которые можно встроить в код, используя конструкцию типа [slick-slider]. Но что, если мы хотим использовать именно свой кастомный слайдер, который мы так долго писали? Все очень просто.

Регистрируем в functions.php новый шорт код, который будет возвращать нам шаблон с нашим слайдером или же любым другим, необходимым для вас фрагментом кода. Для этого мы используем функцию – get_template_part(), затем получаем содержимое текущего буфера и чистим его функцией – ob_get_clean. Теперь в редакторе можем вызывать шорт код – [slider], который в свою очередь будет нам подтягивать шаблон slider-part.php. Не забываем что get_header() и get_footer() мы в этом файле не используем!

пример слайдера oktenweb

к содержанию ↑

Стандартный цикл WordPress

Основа основ разработки сайтов на WordPress – стандартный цикл, который выводит все записи. Это часто используемый сниппет, его достаточно долго писать и приходиться часто смотреть в кодекс для того, чтобы понять, как он выглядит. Вот он

пример цикла wordpress

к содержанию ↑

Цикл, который выводит записи с custom post type

Вы создали свой тип записей, теперь нужно эти самые записи как-то вывести. В этом случае на помощь приходит wp_query{}. Это PHP класс, который получает из базы данных записи, по тем параметрам, которые мы ему дадим. Параметры мы указываем в массиве $args.

к содержанию ↑

Вывод постов используя Bootstrap 3 или 4

вывод постов при помощи bootstrap

Наверное, самый часто задаваемый вопрос на stackoverflow. Все мы знаем что в bootstrap 3-4 – колонки нужно разбивать рядами –  <div class=”row”></div>. Проблема в том, что стандартный цикл WordPress выведет нам все посты, которые есть в базе и на этом все. Нам же надо этот цикл как-то разбить для того, чтобы каждые 3 поста (представим что у нас сетка из 3х колонок) разбивались рядом (row). Для этого используем wp_query. А теперь самое магическое и простое — мы просто оборачиваем каждые 4 элемента цикла в  <div class=”row”></div> используя банальную конструкцию:

Теперь же нам надо закрыть div. Закрываем подобной конструкцией:

Для верности — добавляем  <div class=”clearfix”></div> для того чтобы Bootstrap 3, который все еще на float, разбивал колонки рядами.

Готовый код:

к содержанию ↑

Подключение стилей и скриптов в WordPress

Есть несколько вариантов подключения скриптов и стилей в теме. Рассмотрим самые популярные:

к содержанию ↑

Подключение напрямую в <head>страницы

Я думаю, что практически каждый разработчик, кто подключал файлы стилей, хотел сразу же влезть в header.php и подключить стиль используя стандартную конструкцию:

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

к содержанию ↑

Подключение в functions.php

Рассмотрим правильный вариант, который мы рекомендуем использовать в разработке. Мы будем использовать функцию, которая подключается в файле functions.php :

wp_enqueue_style – функция, которая регистрирует файл стилей

wp_enqueue_script – функция, которая регистрирует js файлы

Более подробно про эти функции можно почитать в официальной документации.

После регистрации стилей нам нужно вызвать нашу функцию. Для этого пользуемся – add_action – wp_enqueue_scripts.

к содержанию ↑

Регистрация и вывод меню в теме

Один из самых частых вопросов в поиске Google от wordpress-разработчиков. Как вывести «меню»? Как его зарегистрировать? Все очень просто. Для начала добавляем функцию, которая создаст нужное нам меню и отобразит его в админке WordPress. В функции мы передаем массив с тем количеством «меню», которые нам нужны. В примере мы создадим одно меню – topmenu

Мы зарегистрировали «меню», добавили в админ панель несколько пунктов этого «меню». Далее нужно его где-то вывести.

Вывод меню в админ панель wordpress

В теме – мы вставляем вот такой код используя функцию wp_nav_menu. В массив мы передаем – меню которое надо вывести + оборачиваем в нужные нам классы и тэги.

вывод меню в админ панель щлеутцуи

к содержанию ↑

Как ограничить количество символов в функции the_excerpt()

Функция the_excerpt() выводит весь контент, который мы поместим в короткое содержание поста. Очень часто нужно в самом посте вывести все его содержимое, а например, на странице категории, где у нас сетка с постами – вывести только первые 20 символов, остальное скрыть под точками (…)

Для этого создаем функцию в functions.php

вывод функции the excerpt

В нее мы передаем наш – get_the_excerpt() и проверяем соответствует ли он указанному количеству символов, добавляем 3 точки и возвращаем переменную с нашим контентом. Теперь в нужном нам месте — вызываем функцию и передаем в нее то количество символов которые нам необходимы

к содержанию ↑

Добавление панели с опциями используя Advanced Custom Fields PRO

Очень часто нам приходиться добавлять для клиента возможность менять контент, который используется на всех страницах сайта. Например: логотип, номера телефонов, e-mail в шапке и тд.

Для этого мы можем использовать стандартные мета поля WordPress, но я считаю, что они крайне неудобны, с непривлекательным дизайном. Для этого лучше всего использовать плагин «ACF PRO» (подробнее про данный плагин можно прочитать в нашей статье «Топ 10 плагинов для WordPress»).

Для начала нам нужно зарегистрировать в functions.php нашу options panel.

Указываем в массиве заголовок страницы, заголовок меню, слаг.

После этого в панеле ACF добавляем нашу группу полей. Ниже на странице, указываем что она относиться к нашей options panel – theme settings.

пример добавления в панеле acf custom fields группы полей

В админке у нас появится пункт меню, который отвечает за нашу панель с настройками. Заполняем все данные. В нашем случае это логотип и телефон.

Далее нам нужно вывести в теме, в нужном нам месте поля, которые мы создали. Делается это просто:

<?php echo get_field(‘logo’, ‘options’) ?> – вернет нам url на изображение

<?php echo get_field(‘tel-1’, ‘options’) ?> – вернет нам текст, в данном случае номер телефона, который мы указали на странице с опциями.

вывод полей ACF custom fields в нужном месте

к содержанию ↑

Отключение всех обновлений WordPress?

Бывают случаи, когда нужно обезопасить клиента от ненужных действий в административной панели. Если у клиента есть полный доступ к админке и ко всем ее разделам, появляется опасность, что человек не зная специфику CMS WordPress обновляет все плагины и само ядро. В этом случае могут возникать конфликты новых версий плагинов и самого ядра WP. Что бы избежать таких проблем нужно выключать обновления. Делается это достаточно просто — мы добавляем несколько фильтров в файл functions.php

отключение wordpress updates

к содержанию ↑

Как зарегистрировать Custom post type?

Выше мы рассматривали как вывести записи с custom post type. Теперь мы рассмотрим, как же создать пользовательский тип записей, чтобы он отображался в админ панели.

Задача такая: в WordPress существуют Записи и Страницы – обычно записи используются для Новостей или Блога. Страницы – для статических страниц. Допустим нам нужно создать пользовательский тип записей – Товары. Для этого заходим в файл functions.php и регистрируем нашу пользовательскую запись

Не пугайтесь огромному количеству параметров. В основном это переводы и заголовки пунктов меню типа “Добавить товар”, “Все товары” и тп.

Описание каждого из параметров массива — вы можете найти в официальной документации WordPress

https://codex.wordpress.org/Function_Reference/register_post_type

Внимательно изучите параметры массива $args. После регистрации пользовательского типа  вы увидите раздел “Товары” в вашем меню.

Вечно ваш, Бог WordPress))

Будем благодарны за ваши комментарии и вопросы, это вдохновит нас на написание новых интересных статей!