Используем короткий код при разработке темы WordPress

25 Мар 2023г. в 11:52

API коротких кодов в Wordpress появилось в версии 2.5. Короткие коды быстро стали популярным методом индивидуальной настройки шаблона и вставки блоков со специальным форматом в содержание. Но они могут быть полезны также и при создании темы WordPress!



Введение
Короткие коды имеют множество преимуществ, когда они правильно используются в файлах темы. Если вы знакомы с препроцессором C / C ++, то короткие коды функционируют аналогично в WordPress. Основная задача использования коротких кодов - их замена вашим кодом HTML в момент отправки страницы посетителю сайта. Для создания и использования коротких кодов нужно проделать следующие шаги.

Создать функцию для короткого кода. Данная функция возвращает HTML код, который будет замещать короткий код в файле темы.
Добавить короткий код в систему, чтобы WordPress смог распознавать его в файлах темы.
Использовать короткий код в файлах темы при необходимости.
В данном уроке мы сделаем короткий код для вывода пользовательских записей, который будет использоваться в теме, установленной по умолчанию. Для его работы в системе должны иметься записи с пользовательским типом "project".

Пользовательские типы записей выходят за рамки данного урока. Если вы не знакомы с ними, то для их создания в файл functions.php надо добавить код регистрации:

/*-- Пользовательский тип записей --*/
function project_custom_init()
{
$labels = array(
'name' => _x('Projects', 'имя типа записей'),
'singular_name' => _x('Project', 'имя типа записей'),
'add_new' => _x('Добавить новый', 'project'),
'add_new_item' => __('Добавить новый проект'),
'edit_item' => __('Редактировать проект'),
'new_item' => __('Новый проект'),
'view_item' => __('Просмотр проекта'),
'search_items' => __('Поиск проекта'),
'not_found' => __('Проект не найден'),
'not_found_in_trash' => __('Проект не найден в корзине'),
'parent_item_colon' => '',
'menu_name' => 'Project'

);

$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','author','thumbnail','excerpt','comments')
);
// Регистрируем пользовательский тип записей.
register_post_type('project',$args);
}
/*--- Создаем пользовательский тип записей --*/
add_action('init', 'project_custom_init');
В результате, станут доступны записи типа "project":

Пользовательский тип записей

Шаг 1. Пишем функцию короткого кода
Функция короткого кода определяет его функционал. Основа функции может быть определена следующим образом (функцию можно добавить в конец файла functions.php вашей темы):

// Определяем функцию для вывода пользовательской записи
function project_shortcode( $atts ) {
// Выделяем аргументы короткого кода
extract( shortcode_atts( array(
'limit' => '10',
'orderby' => 'date',
), $atts ) );
/* Здесь нужно написать код для получения данных
* и построения HTML структуры для возврата в переменной $output
*/
$output = 'Здесь должен быть код HTML, который будет выводиться в основном цикле.';
return $output;
}
Убедитесь, что вы не оставили пустых строк в конце файла functions.php, так как это может вызвать проблемы. Добавим некоторый код для получения пользовательских записей типа 'project' и построим структуру HTML, которая будет замещать наш короткий код.

function project_shortcode( $atts ) {
extract( shortcode_atts( array(
'limit' => '10',
'orderby' => 'date',
), $atts ) );
// Создаем запрос для получения записей с пользовательским типом
$loop = new WP_Query(array('post_type' => 'project', 'posts_per_page' => $limit, 'orderby' => $orderby));
// Обрабатываем записи в цикле и строим HTML структуру
if($loop){
while ($loop->have_posts()){
$loop->the_post();
$output .= '<div class="type-post hentry"><h2 class="entry-title"><a href="'.get_permalink().'">'.get_the_title().'</a></h2>';
$output .= '<div class="entry-content">'.get_the_excerpt().'</div></div>';
}
}
else
$output = 'Извините, но проектов нет. Наверно, скоро появятся.';
// Теперь функция возвращает код HTML, который замещает короткий код.
return $output;
}

'$atts' - строка атрибутов, которые используются вместе с коротким кодом. Метод extract используется для разделения массива элементов на переменные, которые можно использовать в коде функции.

В нашем примере атрибуты используются для построения запроса, получающего данные записей с типом “project”. А затем в цикле обрабатываются все полученные данные.

В цикле все данные добавляются к переменной вывода вместе с соответствующими тегами HTML. По завершению цикла переменная вывода содержит завершённый код HTML списка проектов. Данный код возвращается функцией, и короткий код, который используется в файле темы, будет заменен при загрузке страницы.

Шаг 2. Добавляем короткий код в систему
Теперь необходимо зарегистрировать функцию в базе данных вместе с коротким кодом, который будет использоваться для нее. Задействуем метод WordPress register_shortcode (добавляем ниже приведенный код в файл functions.php вашей темы)

add_shortcode('projects','project_shortcode');

Первый аргумент указывает имя короткого кода, которое будет использоваться в теме. Второй аргумент является функцией (которую мы объявляли выше), соответствующей короткому коду. Теперь WordPress будет распознавать короткий код.

Шаг 3. Используем короткий код в теме
WordPress производит замену коротких кодов, но очень немногие разработчики активно используют данную возможность. Можно использовать метод do_shortcode для вставки короткого кода в файлы темы.

Синтаксис использования короткого кода очень похож на тот, который используется во встроенном редакторе WordPress. В нашем случае в качестве атрибутов передается ограничение на количество получаемых записей и порядок их сортировки. Для вывода записей типа “project” сделаем специальную страницу шаблона, где будем использовать короткий код. Создаем в каталоге темы файл page-project.php и копируем в него следующий код:

<?php
/*
Template Name: Страница проектов
*/
?>
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php echo do_shortcode('[projects limit=10 orderby=rand]'); ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Теперь можно создать страницу "Проекты", для которой использовать только что созданный шаблон.

Создание страницы проекты

При просмотре страницы на сайте в нее автоматически будут добавляться информация из записей типа "project".

Заключение
Представленный урок демонстрирует метод работы с короткими кодами в файлах темы. При этом пользователь может использовать их в тексте содержания записей и страниц.