Кращі сніппети (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. Після реєстрації користувача типу ви побачите розділ “Товари” в вашому меню.

Будемо вдячні за ваші коментарі та питання, це надихне нас на написання нових цікавих статей!