Как создать пользовательскую тему WordPress

Опубликовано: 2021-08-06

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

Что такое пользовательская тема?

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

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

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

Создайте пользовательскую тему WordPress

Темы WordPress создаются с помощью файлов шаблонов, сценариев, стилей, изображений и т. д. Чтобы продолжить, вы должны иметь практические знания PHP, HTML и CSS, необходимые для создания пользовательской темы. Понимание JavaScript также может быть дополнительным преимуществом.

Для начала мы сначала назовем тему «Восходящий поток». Создайте папку Updraft внутри wp-content/themes . В этой папке «Updraft» вы будете писать код, связанный с вашей темой, хранить файлы, изображения, шрифты и т. д.

Основные файлы пользовательской темы WordPress:

  • стиль.css
  • index.php
  • functions.php

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

 [код]
/*
Название темы: восходящий поток
URI темы: https://updraftplus.com
Добавить Автора
URI автора: https://updraftplus.com
Описание: Пользовательская тема, созданная для веб-сайта.
Версия: 1.0
Лицензия: Стандартная общественная лицензия GNU версии 2 или более поздней.
URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html.
Текстовый домен: восходящий поток
*/
[/код]

Затем перейдите во Внешний вид >> Темы, где вы увидите свою тему в списке. Активируйте его. Когда вы проверите внешний интерфейс своего сайта, он покажет пустой экран, поскольку мы еще ничего не добавили в тему.

Не забудьте хранить изображения, сценарии и стили в каталоге вашей темы. Каталог темы относится к папке «wp-content/themes/Updraft». Обязательно держите их организованными, используя хорошую структуру папок, создавая специальные папки для изображений, сценариев и стилей; Скопируйте файлы в соответствующий каталог.

Файл функций

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

Следующие операции в файле functions.php обычно выполняются в таком порядке:

  • Поставьте в очередь таблицы стилей и скрипты темы (добавьте файлы JS и CSS на веб-сайт).
  • Включите боковые панели, меню навигации, миниатюры сообщений и т. д.
  • Определите функции, используемые во всем приложении.
  • И т.п.

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

 [код]
функция include_js_css() {
wp_register_style("bootstrap", get_stylesheet_directory_uri().
"/styles/bootstrap.min.css", array(), false, "все" );
wp_enqueue_style ("бутстрап");
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('бутстрап');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/код]

Функция get_stylesheet_directory_uri() дает относительный путь к каталогу активной темы. Остальную часть кода можно рассматривать как путь к ресурсам.

Точно так же для добавления навигационных меню и эскизов постов:

 [код]
функция updraft_theme_setup() {
add_theme_support('миниатюры постов');
register_nav_menus(
множество(
'primary' => __('Основное меню'),
'footer1=' => __('Меню нижнего колонтитула'),
'магазин' => __('Меню страницы магазина'),
)
);
}
add_action('after_setup_theme', 'updraft_theme_setup');
[/код]

Затем перейдите на панель инструментов WordPress и добавьте запись или страницу. Вы должны увидеть раздел «Избранное изображение». Кроме того, в разделе « Внешний вид» >> «Меню» вы найдете основное меню и меню нижнего колонтитула в разделе « Управление местоположениями » .

Это лишь некоторые из основных функций, которые вы можете охватить при использовании файла «Функция». Если хотите, в этот файл можно добавить гораздо больше.

Файлы шаблонов

При создании темы файлы шаблонов можно использовать для изменения макета и дизайна различных частей вашего веб-сайта. Например, вы можете использовать шаблон header.php для создания заголовка или шаблон comments.php для включения комментариев на свой сайт. Файлы шаблонов имеют расширение .php . Поскольку это файлы PHP, все страницы выводятся в формате HTML.

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

  • index.php : основной шаблон. Этот файл должен отвечать за листинг сообщений. Когда вы устанавливаете страницу «Сообщения» в « Настройки» >> «Чтения », этот шаблон выполняется.
  • page.php : этот шаблон отвечает за отображение ваших страниц. Этот параметр можно переопределить, назначив настраиваемый шаблон страницы отдельным страницам.
  • single.php : используется, когда запрашивается один пост.
  • header.php : добавьте часть заголовка в этот шаблон.
  • footer.php : добавьте часть нижнего колонтитула в этот шаблон.
  • sidebar.php : добавьте виджеты в этот шаблон.

Получите список всех файлов шаблонов, доступных здесь .

Пользовательские шаблоны страниц

По умолчанию все ваши страницы отображаются с помощью шаблона page.php . Но на практике иногда приходится отображать отдельные потоки на разных страницах. В этом случае рекомендуется использовать возможности настраиваемых шаблонов страниц.

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

 [код]
<?php
/*
Название шаблона: Карьера
*/
[/код]

Затем перейдите в раздел редактирования страницы и назначьте этот шаблон «Карьера» из-под поля « Атрибуты страницы ».

Теперь при посещении страницы «Карьера » будет выполняться код из файла career.php .

Заголовочный файл

Ваш сайт будет иметь общий заголовок на всех страницах. Вы можете поместить этот общий заголовок в header.php . Код заголовка будет примерно таким:

 [код]
<!ДОКТИП HTML>
<html <?php language_attributes(); ?>>
<голова>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</голова>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- ваше меню -->
[/код]

В приведенном выше коде вы заметите, что мы использовали некоторые функции, доступные в WordPress.

  • wp_head() : этот метод вставляет в ваш документ важные элементы, например сценарии, стили и метатеги.
  • body_class() : это добавит различные классы к элементу body.
  • wp_body_open() : используется для вставки кода сразу после открытия тега body. Примером этого может служить скрипт Google Analytics.

Меню можно добавлять динамически с помощью функции wp_nav_menu() . Предполагая, что вы уже создали меню в разделе « Внешний вид» >> «Меню » и назначили ему «основное» местоположение. Приведенный ниже код динамически генерирует элементы меню.

 [код]
<?php
wp_nav_menu(
множество(
'theme_location' => 'основной',
'container_class' => 'меню',
)
);
?>
[/код]

Как только ваш заголовочный файл установлен, используйте функцию get_header() , чтобы включить этот файл в другие ваши шаблоны.

Файл нижнего колонтитула

Как и в файле заголовка, ваш общий код для нижнего колонтитула будет находиться внутри шаблона footer.php .

 [код]
<!-- элементы нижнего колонтитула -->
<?php wp_footer(); ?>
</тело>
</html>
[/код]

Здесь используйте wp_footer() , который вставляет элементы, в частности скрипты, в это место. Использование get_footer() включит содержимое этого файла в другие места.

Файл боковой панели

Боковая панель — это вертикальный столбец, используемый для отображения информации на вашем сайте, которая не отображается в основном контенте. Это могут быть популярные статьи, рекламные баннеры, форма отправки новостной рассылки и т. д. Боковые панели содержат виджеты, которые может настраивать администратор. Шаблон sidebar.php будет включать виджеты вашего сайта.

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

 [код]
функция updraft_widgets_init() {
register_sidebar(
множество(
'name' => esc_html__(Главная боковая панель'),
'id' => 'сайдбар-1',
'description' => esc_html__('Добавьте сюда виджеты, чтобы они отображались на боковой панели.'),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'после_названия' => '</h2>',
)
);
}
add_action('widgets_init', 'updraft_widgets_init');
[/код]

Далее переходим Внешний вид >> Виджеты . Здесь вы найдете вышеуказанную боковую панель. В этом примере мы собираемся добавить несколько виджетов на эту боковую панель. Чтобы добавить эту боковую панель во внешний интерфейс, добавьте следующий код в sidebar.php.

 [код]
<div class="боковая панель">
<?php
если ( is_active_sidebar ('боковая панель-1') ) {
dynamic_sidebar('боковая панель-1');
}
?>
</div>
[/код]

Наконец, не забудьте назвать метод « get_sidebar()», чтобы вы могли легко включать боковую панель где угодно на любых других страницах по мере необходимости.

Отрисовка страниц и постов

Как уже упоминалось, все страницы WordPress отображаются и выполняются с использованием кода, который вы написали в файле page.php , за исключением страниц с пользовательским шаблоном страницы. Приведенный ниже код является примером, который покажет страницу с заголовком, описанием и избранным изображением.

 [код]
<?php
получить_заголовок();
?>
<div class="content-area">
<основной класс="главный сайт">
<?php
в то время как ( have_posts() ):
the_post();
?>
<?php
если ( has_post_thumbnail() ):
the_post_thumbnail();
конец;
?>
<header class="entry-header">
<?php the_title(); ?>
</заголовок>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
конец;
?>
</главная>
</div>
<?php
получить_нижний колонтитул();
[/код]

Аналогичный код будет помещен в файл single.php для отображения информации о записи. Чтобы правильно отобразить список сообщений (ваш index.php ), в дополнение к вышеуказанным методам вы также можете использовать следующее:

  • the_catgeory(): отображает список категорий для сообщения.
  • the_permalink() : отображает постоянную ссылку для текущего сообщения.
  • the_excerpt() : Показать выдержку из поста.

I18n для пользовательских тем WordPress

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

Чтобы добавить поддержку I18n, не забудьте использовать текстовый домен, из которого можно анализировать исходные файлы и извлекать переводимые строки. В этом примере мы используем текстовый домен Updraft, но вы можете выбрать любой уникальный идентификатор. Мы можем определить текстовую область следующим образом.

 [код]
функция i18n_setup() {
load_theme_textdomain('updraft', get_stylesheet_directory() . '/languages');
}
add_action('after_setup_theme', 'i18n_setup');
[/код]

Теперь всякий раз, когда вы используете статические строки в файлах вашей темы, заключайте их в функции __() или _e() .

 [код]
<h2><?php _e('Имя', 'восходящий поток); ?></h2>
<?php echo __('Электронная почта пользователя', 'updraft'); ?>
[/код]

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

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

  • Цикл WordPress
  • Теги шаблона
  • Страницы категорий
  • Function_Reference
  • Условный тег
  • Стандарты кодирования WordPress

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

Пост «Как создать пользовательскую тему WordPress» впервые появился на UpdraftPlus. UpdraftPlus — Плагин резервного копирования, восстановления и миграции для WordPress.