Лучшие сниппеты (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

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

Подключение непосредственно в страницы

Я думаю, что практически каждый разработчик, кто подключал файлы стилей, хотел сразу же залезть в 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.

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

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

- вернет нам url на изображение

- вернет нам текст, в данном случае номер телефона, который мы указали на странице с опциями.

Отключение всех обновлений 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. После регистрации пользовательского типа вы увидите раздел "Товары" в вашем меню.

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