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

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

Касательно 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() мы в этом файле не используем!

function slider-shortcode( $attr ) {
	ob_start();
	get_template_part( 'slider-part' );
	return ob_get_clean();
}

add_shortcode( 'slider', 'slider-shortcode' );

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

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

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php the_title(); ?>
<?php endwhile; else : ?>
	<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

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

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

<?php $args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
);

$my_query = null;
$my_query = new WP_Query($args);if( $my_query->have_posts() ) {
	while ($my_query->have_posts()) : $my_query->the_post();
		the_title();
	endwhile;}
wp_reset_query(); ?>

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

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

if($i % 4 == 0) { ?>
	<div class="row">
<?php } ?>

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

<?php $i++; if($i != 0 && $i % 4 == 0) { ?>
	</div><!--/.row-->
	<div class="clearfix"></div>
<?php } ?>

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

Готовый код:

<?php $args=array(
'post_type' => 'portfolio',
'post_status' => 'publish',
'posts_per_page' => -1,
);
$my_query = null;
$my_query = new WP_Query($args);if( $my_query->have_posts() ) {

while ($my_query->have_posts()) : $my_query->the_post();
	if($i % 4 == 0) { ?>
	<div class="row">
		<?php } ?>
		<div class="col-md-3">
			<?php the_title(); ?>
		</div>
		<?php $i++; if($i != 0 && $i % 4 == 0) { ?>
	</div><!--/.row-->
	<div class="clearfix"></div>
<?php } endwhile; wp_reset_query(); }?>

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

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

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

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

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles.css">

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

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

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

function название(){
	wp_enqueue_style( 'foundation-min-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
	wp_enqueue_script('app-js', get_template_directory_uri() . '/js/app.js', array(), '1.0.0', true);
}

add_action( 'wp_enqueue_scripts', 'название' );

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

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

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

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

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

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

register_nav_menus(array('top'=>'topmenu'));

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

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

<?php wp_nav_menu( array (
	'menu' => 'topmenu',
	'items_wrap' => '<ul class="mobile_menu text-left main_menu" data-dropdown-menu>%3$s</ul>'
)); ?>

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

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

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

function excerpt($limit) {
	$excerpt = explode(' ', get_the_excerpt(), $limit);
	if (count($excerpt)>=$limit) {
	array_pop($excerpt);
	$excerpt = implode(" ",$excerpt).'...';
	} else {
	$excerpt = implode(" ",$excerpt);
	}
	$excerpt = preg_replace('`[[^]]*]`','',$excerpt);
	return $excerpt;
}

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

<?php echo excerpt(20) ?>

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

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

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

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

if( function_exists('acf_add_options_page') ) {
	acf_add_options_page(array(
		'page_title'     => 'Theme Settings',
		'menu_title'    => 'Theme Settings',
		'menu_slug'     => 'theme-general-settings',
	));
}

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

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

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

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

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

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

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

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

// обновления wordpress
add_filter('pre_site_transient_update_core',create_function('$a', "return null;"));
wp_clear_scheduled_hook('wp_version_check');

// обновления плагинов
remove_action( 'load-update-core.php', 'wp_update_plugins' );
add_filter( 'pre_site_transient_update_plugins', create_function( '$a', "return null;" ) );

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

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

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

// Register Custom Post Type
function custom_post_type() {

	$labels = array(
	'name'                  => _x( 'Post Types', 'Товары', 'text_domain' ),
	'singular_name'         => _x( 'Post Type', 'Товар', 'text_domain' ),
	'menu_name'             => __( 'Товары', 'text_domain' ),
	'name_admin_bar'        => __( 'Товары', 'text_domain' ),
	'archives'              => __( 'Item Archives', 'text_domain' ),
	'attributes'            => __( 'Item Attributes', 'text_domain' ),
	'parent_item_colon'     => __( 'Parent Item:', 'text_domain' ),
	'all_items'             => __( 'All Items', 'text_domain' ),
	'add_new_item'          => __( 'Add New Item', 'text_domain' ),
	'add_new'               => __( 'Add New', 'text_domain' ),
	'new_item'              => __( 'New Item', 'text_domain' ),
	'edit_item'             => __( 'Edit Item', 'text_domain' ),
	'update_item'           => __( 'Update Item', 'text_domain' ),
	'view_item'             => __( 'View Item', 'text_domain' ),
	'view_items'            => __( 'View Items', 'text_domain' ),
	'search_items'          => __( 'Search Item', 'text_domain' ),
	'not_found'             => __( 'Not found', 'text_domain' ),
	'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),
	'featured_image'        => __( 'Featured Image', 'text_domain' ),
	'set_featured_image'    => __( 'Set featured image', 'text_domain' ),
	);
	$args = array(
	'label'       => __( 'Post Type', 'text_domain' ),
	'description'     => __( 'Post Type Description', 'text_domain' ),
	'labels'      => $labels,
	'supports'     => false,
	'taxonomies'     => array( 'category', 'post_tag' ),
	'hierarchical'    => false,
	'public'     => true,
	'show_ui'    => true,
	'show_in_menu'          => true,
	'menu_position'   => 5,
	'show_in_admin_bar'     => true,
	'show_in_nav_menus'     => true,
	'can_export'   => true,
	'has_archive'  => true,
	'exclude_from_search'   => false,
	'publicly_queryable'    => true,
	'capability_type'  => 'page',
	);
	register_post_type( 'post_type', $args );

}
add_action( 'init', 'custom_post_type', 0 );

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

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

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

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

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