Рекомендации по разработке новых компонент сайта на основе WordPress

Время на прочтение: 6 минут
10 апреля 2024

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

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

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

Остановимся кратко на некоторых из возможных ситуаций, приводящих к необходимости создания новых компонент на платформе WordPress, и рассмотрим порядок действий разработчика.

Изменение темы оформления

Для каждой темы оформления предусмотрена индивидуальная папка в каталоге /wp-content/thems. Чёткая структурированность по файлам позволяет выявить соответствие файла темы и участка сайта, за который он отвечает. Стандартный набор темы оформления включает следующий список файлов:

index.php – без этого стартового файла невозможен вывод общего содержимого сайта. В основном он служит для подключения остальных компонентов темы, определяющих интерфейс веб-страниц;
header.php – файл содержания и оформления верхней части виртуальной страницы, где отображается логотип, название, верхнее меню навигации и т.д. Поскольку он загружается в первую очередь, то именно здесь и указывают ссылки на используемые таблицы стилей и сценарии JavaScript;
footer.php – отвечает за содержание и оформление нижней части сайта (копирайты, контактная информация, нижнее меню навигации и пр.)
sidebar.php – оформление боковой панели виджетами и различными элементами информационного сопровождения в зоне ответственности этого файла;
page.php – оформление и вывод страниц сайта;
single.php – аналогичный функционал для записей;
comments.php – отвечает за формы комментирования отдельных записей или страниц в целом;
404.php – оформление страницы, появляющейся при ошибочном вводе адреса ресурса;
archive.php – интерфейс вывода архивных записей;
search.php – вывод результатов поиска по сайту;
functions.php – наполнен функциями и настройками, отвечающими за поведение сайта;
style.css – таблица стилей, содержащая описание интерфейса всех элементов, в том числе и адаптированных для различного типа устройств (компьютер, планшет, смартфон).

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

Корректировка файлов темы доступна при помощи текстового редактора или непосредственно из административной панели управляемого веб-ресурса. Наиболее рациональный способ – текстовый редактор, подключаемый к редактируемой файловой системе по FTP. Некоторые браузеры предоставляют возможность просмотра необходимых записей в таблице стилей или элементов HTML-кода и их изменения в интерактивном режиме. Например, функция контекстного меню «Исследовать элемент» в браузере Firefox или «Просмотр кода элемента» в Google Chrome.

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

не обновлять в последующем тему оформления;
создавать дочерние темы оформления на основе исходной;
создавать свои темы в виде ответвлений – форков.

При создании собственной темы оформления разумнее воспользоваться темой-фреймворк типа Generic Framework, Omega и пр. Они содержат минимальный набор файлов для задания структуры различных элементов и позволяют применять собственные решения для уникального оформления веб-ресурса. Внешние фреймворки и библиотеки типа Twitter Bootstrap представляют собой набор инструментов в виде элементов HTML и CSS для оформления текстовых блоков, навигационных элементов и других компонентов внешнего вида сайта. С их помощью можно создать качественную тему оформления с учётом последних тенденций в сайтостроении.

Перевод тем оформления и плагинов на русский язык

Международный уровень разработки WordPress и его компонент предопределяет использование в качестве основного английского языка. Разработка сайта для носителей другого языка требует перевода не только размещаемого контента, но и элементов навигации, системных комментариев, пояснений, кнопок управления и пр. Для упрощения переводов и возможности создания мультиязычных сайтов платформой WordPress предусмотрен особый способ локализации с использованием языковых файлов.

Идея такого способа локализации заключается в следующем. Сообщения, предназначенные для пользователя, записанные на английском языке, оформляются с помощью специальных функций __(), _е() и пр. При их вызове происходит анализ языковых параметров сайта и сообщение отображается на языке пользователя. Создание и хранение переводов обслуживает три типа файлов:

.pot (Portable Object Template) – текстовый шаблон из строк, нуждающихся в переводе;
.po (Portable Object) – текстовый файл, содержащий перевод строк из .pot файла на один конкретный язык;
.mo (Machine Object) – двоичная версия .po файла для ускорения работы сайта.

Наборы этих файлов создаются отдельно для ядра WordPress, тем оформления и плагинов. В каждом наборе будет только один .pot файл, а количество .po и .mo файлов зависит от предусмотренного количества языков. При этом в их названии будет присутствовать аббревиатура языка. Например, для перевода на русский язык название файла будет выглядеть следующим образом: plagin-ru_RU.po или просто ru_RU.po. Место их локализации по умолчанию – папки в каталогах темы оформления или плагина под названием languages или lang.

Для создания и корректировки .po файла, а также связанной с этим генерации двоичного .mo файла используют специальные программы. Например, бесплатно распространяемую версию программы Poedit с официального сайта разработчика http://poedit.net. Она анализирует тему оформления или плагин, создаёт .pot файл, для каждой строки которого генерируется перевод, записанный в виде .po и .mo файлов.

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

Если же тема оформления или плагин разработан без учёта возможностей последующего перевода, то веб-мастеру придётся переводить каждую строчку вручную, заменяя английский текст адаптивным переводом. При этом сохранять php-файлы необходимо в кодировке UTF-8, а обновлять переведённые вручную темы или плагины, как и создавать мультиязычные сайты, уже не получится. Ручного перевода в этом случае потребуют также сообщения в файлах JavaScript для данной темы или плагина.

Общие рекомендации по разработке сайтов на основе WordPress

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

Исходные файлы ядра WordPress и установленные плагины – табу для корректировки. Инновации разумнее создавать на основе существующих плагинов (в виде форков) либо путём изменения выбранной ранее темы оформления.
Для изменения поведения сайта применяют механизм создания хуков (зацепок). В этом случае обработка выводимых данных происходит с использованием различных функций, а также может быть назначено или переопределено любое действие в сценарии поведения сайта.
Для описания в плагинах или файле functions.php темы оформления новых типов записей, форматов, виджетов, шорткодов применяют стандартные способы.
Включенный режим отладки WordPress во время создания уникального плагина или темы будет предупреждать об ошибках в создаваемом коде. Они могут сразу выводиться на экран или записываться в специальный лог-файл.
Процесс создания новых компонент существенно облегчает использование документации для разработчиков, размещённой в разделе http://codex.wordpress.org, и широко представленные в сети Интернет примеры и рекомендации сообщества разработчиков WordPress.