Гайд по WordPress: что должен знать разработчик

В настоящее время WordPress является одной из самых популярных Систем Управления Контентом (CMS). Он может быть использован для создания блога, интернет-магазина, лэндинга, корпоративных веб-сайтов и проч. Пользователи любят WordPress, так как он прост в установке, для него существует большое количество разнообразных плагинов и, ко всему прочему, он дружелюбен к пользователям (user-friendly). Разработчикам нравится WordPress из-за его понятного функционала, т.е. его легко установить, но при этом WordPress является продуктом отличного качества.

Количество сайтов, использующих WordPress растёт, что создаёт необходимость в значительном количестве WordPress-разработчиков. А как же понять, достаточно ли знаний для того, чтобы претендовать на эту должность? В этом гайде мы рассмотрим основные вопросы и ответы по WordPress, в которых вы непременно должны разбираться, чтобы стать разработчиком WordPress.

Вопросы и ответы

В: Как создать персонализированную тему, какие необходимы файлы и как WordPress распознаёт новую тему?

Каждый WordPress сайт требует тему; это задаёт его структуру и, поэтому, является неотъемлемой частью сайта.

Новая тема создаётся следующим образом: В каталоге wp-content/themes/ создайте новую папку и присвойте ей имя. Практика показывает, что лучше всего именовать папку по названию компании, для которой создаётся сайт. Используйте латиницу и нижний регистр, без пробелов. Обратите внимание, что в эту папку нужно поместить следующие 5 файлов: style.css, functions.php, index.php, header.php и footer.php. Потом можно будет добавить ещё пользовательских файлов.

Структура шапки файла style.css является частью базовых настроек темы. С помощью файла style.css и его шапки ядро WordPress распознает вашу папку как новую тему.

Начало style.css должно быть следующим:

Theme Name: [название темы]

Author: [имя автора]

Author URI: [URL автора]

Version: [версия темы]

Description: [описание темы]

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Если вы создаёте дочернюю тему, то нужно добавить ещё одну строчку, где указывается базовой темы.

1	Template: twentyfifteen

Где twentyfifteen — это название главной (родительской) папки темы.

В: Как WordPress генерирует страницу?

WordPress распознаёт и анализирует запрос введённый в адресную строку, выбирает подходящий PHP файл и генерирует страницу. Он создаёт глобальный объект $wp_query, основанный на запросе в URL. Затем, с помощью своих функций, WordPress загружает другие файлы, такие как header.php, footer.php, sidebar.php.

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

Например, если адрес /? Cat = 1, то WordPress сначала будет искать файл category-slug.php. Если файл не будет найден, то WordPress будет искать файл category-id.php. Если это тоже невозможно найти, он будет искать файл category.php и так далее, до тех пор, пока не найдёт подходящий файл. Если поиски не увенчаются успехом, то WordPress просто выберет файл index.php.

В.: Семантика разработки темы, а также базовые принципы хорошей темы. Что должно находится в файлах темы?

Вот несколько лучших практических приёмов и рекомендуемых принципов создания новой темы:

Функция wp_head() должна быть в файле header.php.
Функция, которая управляет классами, должна быть в файле header.php, внутри тега body <body <? php body_class (); ?>>
Функция wp_footer() должна быть в файле footer.php.
Если есть повторяющийся функционал, то этот код должен быть размещён в отдельную функцию и эта функция должна быть добавлена в файл functions.php.
Во всех файлах, кроме header.php и footer.php, количество открывающих HTML-тегов должно быть равно количеству закрывающих тегов.
Если файл содержит дублирующие (повторяющиеся) фрагменты HTML кода, то лучше объединить их в отдельный файл, разместить его в подпапке темы, которую можно назвать blocks или как вам будет угодно, подключить этот фрагмент кода и вызвать функцию get_template_part( 'blocks/[name-of-the-file.php]' ); .
Файл index.php — итоговый/последний файл, который обрабатывает запрос, так что ему нужен главный цикл минус любые запросы. Это значит, что будет невозможно изменить основной цикл в index.php.
Все настройки темы должны быть в файле functions.php: команды, фильтры, пользовательские функции и пользовательские классы. Хотя функции и классы могут быть расположены в разных файлах и быть связанными с главным functions.php, или они могут быть размещены в отдельный плагин.
Код не должен содержать комментарии. Комментирование, играющее роль описания, допускается, но фрагменты кода, которые использовались при проектировании, должны быть удалены.
Код в файлах должен быть структурирован при помощи отступов.
Темы должны соответствовать стандартам w3c.
Тема должна работать без сторонних плагинов. Например, если мы используем плагин WP-PageNavi, то вы должны написать:

if (function_exists ( 'wp_pagenavi')):

wp_pagenavi ();

else:

get_template_part ( 'blocks / pager');

endif;

Если код использует функции или классы плагинов, убедитесь, что функция или класс существуют:

1	if (function_exists ('name_of_the_function'))

Для прямых обращений к базе данных используйте класс $wpdb и его методы.
Если вы используете форму и нужно создать дочернюю страницу в меню админ панели, вы должны использовать wp_nonce_field(), а на стороне сервера проверить это поле и действие:

<?php

if ( ! isset( $_POST['name_of_nonce_field'] ) || ! wp_verify_nonce( $_POST['name_of_nonce_field'], 'name_of_my_action' )

) {

print 'Sorry, your nonce did not verify.';

exit;

} else {

// process form data

}

/* some code is here*/

<?php wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' ); ?>

</form>

Если какие-то файлы не используются, то удалите их из папки темы. Если клиенту не нужен поиск на сайте, удалите из папки темы файл searchform.php.
Функции, которые начинаются с _ должны быть только в цикле. А в цикле, если возможно, используйте функции, начинающиеся с _ для вывода полей экрана.

В.: Как создать пользовательский шаблон страницы.

Для пользовательских шаблонов страниц лучше всего создать отдельную папку; не смешивайте пользовательские шаблоны с существующими шаблонами WordPress. Поместите файл пользовательского шаблона в эту папку. В начале файла вам необходимо добавить следующий код:

<? Php

/ *

Template Name: [Название шаблона]

* /

get_header (); ?>

В.: Как правильно включить ваши файлы CSS и JavaScript в тему или плагин.

Можно использовать теги <link> или <script>, но правильно будет подключить их в файле functions.php. Нужно добавить команду в wp_enqueue_scripts, а наша команда заключается в подключении JavaScript и CSS файлов:

function theme_scripts_styles () {

// Подключение пользовательского JS файла после библиотеки jquery

wp_enqueue_script ( 'theme-script', get_template_directory_uri () '/js/jquery.main.js', array ( 'jquery').);

// Загружает исходный файл темы style.css.

wp_enqueue_style ( 'theme-style', get_stylesheet_uri (), array ());

// Подключение пользовательского

wp_enqueue_style (. 'theme-theme', get_template_directory_uri () '/theme.css', array ());

}

add_action( 'wp_enqueue_scripts', 'theme_scripts_styles' );

В.: Как сделать пользовательское меню и как вывести это меню на странице.

Для вывода меню нужно:

Выбрать расположение для меню в functions.php:

register_nav_menus (array (

'Primary' => __ ( 'Primary Navigation'),

));

Использовать это расположение для вывода меню:

if (has_nav_menu ( 'primary'))

wp_nav_menu (array (

...

'Theme_location' => 'primary',

...

)

);

Меню размещаются на странице через админ панель, что также позволяет другим страницам иметь меню (которое будет выглядеть так же), размещённое в том же месте.

Пользовательские настройки могут быть созданы с помощью параметров функции wp_nav_menu(), но если вам нужно создать пользовательское меню, сделайте следующее:

Создайте наследуемый класс из Walker_Nav_Menu, где вы можете написать свой пользовательский функционал:
1
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {...}
При выводе меню добавьте ещё один параметр walker:

<span class="hljs-keyword">if</span>( has_nav_menu( <span class="hljs-string">'primary'</span> ) )

wp_nav_menu( <span class="hljs-keyword">array</span>(

...

<span class="hljs-string">'theme_location'</span> => <span class="hljs-string">'primary'</span>,

<span class="hljs-string">'walker'</span> => <span class="hljs-keyword">new</span> Custom_Walker_Nav_Menu

...

)

);

В.: Что такое цикл (loop) и как он работает?

Loop — это цикл, с помощью которого WordPress генерирует содержание страницы. Для одиночной страницы, например page.php или single.php, цикл останется в шаблоне, но будет выполнен только раз. В случае с search.php, archive.php или index.php, цикл будет выполняться столько раз, сколько нужно, чтобы удовлетворить запрос, который зависит от запрашиваемого адреса и, следовательно, от того, как объект формируется wp_query. Цикл выполняется для записей в глобальном объекте $wp_query.

В.: Различие между функциями, которые начинаются с `_` и другими функциями.

Функции, начинающиеся с _, предназначены для использования в цикле (loop). Обратите внимание, что они не могут использоваться вне цикла.

В.: Что такое пользовательские типы записей? Зачем их используют и как их создать?

Пользовательские типы записей нужны, чтобы логически разбивать контент. Например, мы хотим создать список всех менеджеров по продажам, которые есть в компании, чтобы покупатели могли связаться с ними напрямую через сайт. Допустим у нас около 20 человек в отделе продаж и в любой момент кто-то может уволиться или, наоборот, устроится на работу. Поэтому, для этой задачи, наиболее логичным будет создать тип записи Команда, а в шаблоне выводить список со всеми, кто относится к типу записи Команда.

Простой образец создания пользовательского типа записи:

add_action( 'init', 'theme_create_post_type' );

function theme_create_post_type()

{

register_post_type( 'team',

array(

'labels' => array(

'name' => __( 'Team' ),

'singular_name' => __( 'team' ),

'publicly_queryable' => true,

'public' => true,

'show_ui' => true,

'hierarchical' => false,

'menu_position' => null,

'query_var' => true,

'supports' => array('title','editor','thumbnail','custom-fields','comments')

)

);

}

Пользовательские типы записей создаются с помощью команды init. В связи с чем нужно создать команду (action) и назвать её register_post_type() в функции с желаемым набором параметров.

В.: Как получить записи из пользовательских типов записей и пользовательской таксономии.

Например у нас есть тип записи Команда и таксономия Отдел, а в пользовательской таксономии у нас есть термин Менеджеры. Наша задача заключается в том, что вывести на странице всех менеджеров.

При условии, что слаг термина Менеджеры в пользовательской таксономии Отдел — Менеджеры, мы можем задействовать запросы классов таким образом:

$args = array(

'post_type' => 'team',

'tax_query' => array(

array(

'taxonomy' => 'department',

'field' => 'slug',

'terms' => 'managers',

);

$query = new WP_Query( $args );

В.: Что такое шорткоды? Приведите примеры.

Шорткоды — это ключевые слова, используемые для создания макросов (макрокоманд), которые могут быть позднее использованы в контенте записи. В WordPress они заключены в квадратные скобки []. Шорткоды могут быть использованы как в редакторе записи, так и в паттерне, применив функцию do_shortcode(). Самый простой пример — когда клиент не знает HTML, но необходимо вставить что-либо в контент записей.

В WordPress мы можем создать три типа шорткодов. Тем не менее, вследствие того, что они могут быть по-разному настроены, шорткоды обладают неограниченными возможностями. Важно отметить, что функция обработки шорткода должна вернуть значение, а не отобразить его. Например, если нужно вывести на экран фразу “Hello World” , мы напишем в functions.php примерно следующее:

function hworld_func( $atts ){

return ‘<div class=”block-wrapper”><div class=”block”>Hello world</div></div>’;

}

add_shortcode( 'hworld', 'hworld_func' );

Чтобы шорткод заработал, нужно вставить [hworld] в запись.

Если нужно внести изменения в шорткод из админ панели, то можно добавить к нему параметры, наподобие такого: [hworld cssclass = "red"].

Код в functions.php будет выглядеть так:

function hworld_func( $atts ){

return ‘<div class=”block-wrapper ’ . $atts[‘cssclass’] . ’”><div class=”block”>Hello world</div></div>’;

}

add_shortcode( 'hworld', 'hworld_func' );

Так же, как и с параметрами, мы можем разобраться с самим текстом. Чтобы это сделать, шорткод должен выглядеть следующим образом: [hworld cssclass = "red"] Hello world [/ hworld].

Функция будет выглядеть так:

function hworld_func( $atts, $content ){

return ‘<div class=”block-wrapper ’ . $atts[‘cssclass’] . ’”><div class=”block”>’ . $content . ’</div></div>’;

}

add_shortcode( 'hworld', 'hworld_func' );

В.: Как сделать виджет? Основные функции виджета.

В WordPress вы можете создавать пользовательские виджеты с помощью класса, который наследует базовые функции от класса WP_Widget.

Основные функции класса виджета:

__construct() : Конструктор виджета, он добавляет его в админ панель.
widget($ args, $ instance) : Отображает контент во фронт-энде, основываясь на аргументах функции. $ args — аргументы виджета, которые устанавливаются в боковую панель для разделения виджета. $ instance — параметры виджета, которые могут быть настроены в админке.
update($ new_instance, $ old_instance) : Функция, которая сохраняет новые настройки виджета, если они были изменены администратором в админке.
form($ instance) : Создаёт форму настройки виджета в админке на странице widgets.php.

Последнее, что нужно сделать для того, чтобы виджет заработал, это к команде widgets_init привязать функцию, которая запишет (зарегистрирует) его:

1	add_action ( 'widgets_init', create_function ( '', 'return register_widget ( "CustomWidget");'));

Пример виджета:

class CustomWidget extends WP_Widget {

function __construct() { ... }

function widget( $args, $instance ) { ... }

function update( $new_instance, $old_instance ) { ... }

function form( $instance ) { ... }

}

add_action( 'widgets_init', create_function( '', 'return register_widget( "CustomWidget" );' ) );

В.: Что такое команды и фильтры? Их различия, как и когда их использовать.

Нельзя вносить изменения в файлы ядра и плагины в WordPress. Тем не менее, иногда возникает необходимость изменить стандартное поведение ядра, и это как раз тот самый момент, когда команды и фильтры приходят на помощь.

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

Вот пример фильтра, который должен быть записан в functions.php:

add_filter(‘the_content’, ‘theme_the_content’);

function theme_the_content($content){

return ‘<div class=”contentwrap”>’ . $content . ‘</div>’;

}

Это означает, что где-то в коде ядра или плагина есть строчка наподобие такой:

1	$content = apply_filters(‘the_content’, $content);

Таким образом, переменная $content — второй параметр, который передаётся в функцию theme_the_content(). Код может выглядеть и так:

1	$var = apply_filters(‘some_filter_name’, $var1, $var2, $var2);

В этом случае в functions.php нужно написать следующее:

add_filter(‘some_filter_name’, ‘theme_some_filter_name’, 10, 3);

function theme_the_content($var1, $var2, $var2){

return [SOME_CODE];

}

В функции filter число 10 может быть любым целым числом, которое показывает приоритет этого фильтра, если будет несколько фильтров, а число 3 — это количество переменных, которые входят в функцию.

add_action( 'init', 'theme_create_post_type' );

function theme_create_post_type()

{

register_post_type( 'team',

array(

'labels' => array(

'name' => __( 'Team' ),

'singular_name' => __( 'team' ),

'publicly_queryable' => true,

'public' => true,

'show_ui' => true,

'hierarchical' => false,

'menu_position' => null,

'query_var' => true,

'supports' => array('title','editor','thumbnail','custom-fields','comments')

)

);

}

Параметры могут быть переданы как командам, так и фильтрам. Если фильтр или команда не нужны, то их можно убрать. Например:

1 2	remove_filter ( 'some_filter_name', 'theme_some_filter_name', 10); remove_action ( 'init', 'theme_create_post_type');

В.: Различные способы подключения плагинов к теме. Как сделать это правильно.

Плагины можно подключить разными способами:

Через команды и фильтры
Через шорткоды
Через виджеты
Через функцию PHP

Если плагин подключен с помощью PHP кода, нужно проверить существование функции:

1	<?php if(function_exists('bcn_display')) bcn_display(); ?>

Важно проверить способность темы работать без плагинов, чтобы в случае деактивации всех плагинов тема сохранила рабочее состояние. Например, если мы используем плагин WP_PageNavi, следует написать следующий код:

if(function_exists('wp_pagenavi')):

wp_pagenavi();

else:

get_template_part( 'blocks/pager' );

endif;

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

В.: Этапы создания простого плагина.

Плагин является дополнением; он расширяет функционал WordPress. Чтобы создать плагин, сначала нужно создать папку в каталоге wp-content/plugins, используя нижний регистр, латиницу и без пробелов. Внутри этой папки нужно создать файл с таким же названием, как у папки, и расширением .php. Это будет основным файлом. Кроме того, создайте пустой файл index.php, чтобы спрятать список файлов и каталогов.

В начале главного файла добавьте строки предопределённой метаинформации, через которые WordPress поймёт, что это плагин:

<?php

Plugin Name: [PLUGIN NAME]

Description: [PLUGIN NAME DESCRIPTION]

Version: [PLUGIN VERSION]

Author: [PLUGIN AUTHOR]

Author URI: [PLUGIN URL]

License: GPL2

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Рекомендуется создавать плагин с классами. Таким образом, пример структуры кода плагина может выглядеть примерно так:

<?php

Plugin Name: TestPlugin_Name

Description: TestPlugin_Name description.

Version: 1.0.0

Author: evgen@toptal.com

Author URI: https://www.linkedin.com/in/evgengavrilov

License: GPL2

License URI: http://www.gnu.org/licenses/gpl-2.0.html

class TestPlugin {

[CODE IS HERE]

function TestPlugin(){

[CODE IS HERE]

}

[CODE IS HERE]

}

$testplugin = new TestPlugin();

Помните правила создания темы: скрипты можно подключать только через команду wp_enqueue_scripts, а плагин не должен содержать какие-либо ошибки.

В.: Какова роль дочерних тем? Как сделать базовую дочернюю тему?

Дочерние темы необходимы, когда нужно изменить стили и функции главной, или родительской, темы, но без изменения её кода. Это как ООП: класс и его подкласс. Наследование не нанесёт вреда родительской теме, но может изменить существующие методы и добавить новые.

Дочерняя тема может быть легко и быстро создана всего за несколько шагов:

Создайте папку внутри каталога wp-content/themes с названием [название-папки-родительской-темы]-child.
Внутри папки создайте файл styles.css, а в шапке файла добавьте строчку: Template: [название-папки-родительской-темы].
Создайте файл functions.php.

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

В.: WordPress мультисайт — что это и как создать.

WordPress мультисайт — это способ управления множеством сайтов через одну админ панель. Основное отличие в ролях Администратора и Супер Администратора заключается в том, что Супер Админ может управлять мультисайтом.

Мультисайт может быть активирован на любом WordPress сайте. Хотя этот функционал встроен по умолчанию, он не активен.

Чтобы создать мультисайт нужно:

В конце файла wp-config.php написать:
1
define ( 'WP_ALLOW_MULTISITE', true);
Обновите админ панель, после чего должен появится пункт «Установка Сети» (Network Setup) в меню Инструменты. Нажмите на него и попадёте на страницу установки. Заполните все необходимые поля.
Далее вы будете перенаправлены на страницу настроек, которые нужно скопировать в файлы wp-config.php и .htaccess. Просто скопируйте рекомендуемый код и вставьте его в соответствующий файл.
Когда файлы будут изменены, не забудьте выйти из админ панели, чтобы позволить пользователю создавать и управлять сайтами сети.

Заключение

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

Вопросы и ответы

В: Как создать персонализированную тему, какие необходимы файлы и как WordPress распознаёт новую тему?

В: Как WordPress генерирует страницу?

В.: Семантика разработки темы, а также базовые принципы хорошей темы. Что должно находится в файлах темы?

В.: Как создать пользовательский шаблон страницы.

В.: Как правильно включить ваши файлы CSS и JavaScript в тему или плагин.

В.: Как сделать пользовательское меню и как вывести это меню на странице.

В.: Что такое цикл (loop) и как он работает?

В.: Различие между функциями, которые начинаются с _ и другими функциями.

В.: Что такое пользовательские типы записей? Зачем их используют и как их создать?

В.: Как получить записи из пользовательских типов записей и пользовательской таксономии.

В.: Что такое шорткоды? Приведите примеры.

В.: Как сделать виджет? Основные функции виджета.

В.: Что такое команды и фильтры? Их различия, как и когда их использовать.

В.: Различные способы подключения плагинов к теме. Как сделать это правильно.

В.: Этапы создания простого плагина.

В.: Какова роль дочерних тем? Как сделать базовую дочернюю тему?

В.: WordPress мультисайт — что это и как создать.

Заключение

В.: Различие между функциями, которые начинаются с `_` и другими функциями.