Создаём собственную тему для WordPress (Часть 2)

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

В этой статье мы рассмотрим, как использовать одну из популярных starter-тем для создания собственной темы WordPress.

Что такое Starter-темы?

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

Преимущества использования Starter-тем

Экономия времени. Не нужно каждый раз настраивать базовую структуру или подключать основные функции вручную.
Чистота кода. Starter-темы обычно содержат проверенные и оптимизированные решения.
Гибкость. Вы можете начать с минимальной настройки и кастомизировать тему под любые нужды.

Шаги по созданию собственной темы с помощью Underscores (_s)

1. Генерация стартовой темы

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

Перейдите на сайт underscores.me.
Введите название темы в поле «Theme Name».
Нажмите кнопку «Generate».
Скачайте архив с файлами темы.

После этого у вас будет базовая структура темы, готовая к редактированию.

2. Настройка базовой структуры

Распакуйте архив и поместите папку с темой в директорию /wp-content/themes/ на вашем локальном сервере или на хостинге.

Структура папки будет выглядеть следующим образом:

/your-theme/
    ├── style.css
    ├── index.php
    ├── functions.php
    ├── header.php
    ├── footer.php
    ├── sidebar.php
    ├── page.php
    ├── single.php
    ├── 404.php
    └── screenshot.png

3. Кастомизация стилей

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

Пример кода для подключения вашего файла стилей:

function mytheme_enqueue_styles() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );

4. Настройка шапки и футера

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

header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
    <div class="container">
        <h1><?php bloginfo( 'name' ); ?></h1>
        <nav>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav>
    </div>
</header>

footer.php:

<footer>
    <div class="container">
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?></p>
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

5. Добавление функций в functions.php

В файле functions.php вы можете настроить различные функции для вашей темы. Например, регистрация меню и поддержка миниатюр для постов:

function mytheme_setup() {
    // Поддержка миниатюр
    add_theme_support( 'post-thumbnails' );

    // Регистрируем меню
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

6. Создание шаблонов страниц

WordPress использует разные шаблоны страниц для отображения различных типов контента. В starter-теме Underscores вы найдете такие файлы, как single.php для отображения одиночных постов и page.php для статических страниц.

Пример кода для single.php:

<?php get_header(); ?>

<main>
    <article>
        <h1><?php the_title(); ?></h1>
        <div>
            <?php the_content(); ?>
        </div>
    </article>
</main>

<?php get_footer(); ?>

7. Добавление дополнительных функций

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

8. Оптимизация и тестирование

Важно протестировать тему на различных устройствах и браузерах, чтобы убедиться в ее корректной работе. Вы также можете использовать такие инструменты, как Gulp или Grunt, для автоматизации процессов сборки и оптимизации.

С этими инструментами тестирования я не работал, но таковые есть и ими можно воспользоваться, если есть необходимость.

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

Заключение

Создание собственной темы для WordPress с использованием Starter-тем, таких как Underscores, значительно упрощает процесс разработки. Это отличная возможность быстро создать уникальный сайт, который полностью соответствует вашим требованиям и предпочтениям.