Как создать адаптивную велосипедную тему WordPress: пошаговое руководство

Автор: Тимур Панин | Опубликовано: 10.11.2025

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

Почему адаптивность важна для велосипедных сайтов на WordPress

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

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

В WordPress создание адаптивной темы включает правильное использование медиа-запросов CSS, гибкой верстки и оптимизации изображений.

Ключевые элементы адаптивного дизайна

Гибкая сетка (flexbox или grid)
Медиа-запросы для различных разрешений
Оптимизация изображений под разные экраны
Простая и логичная навигация

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

Начнем с создания минимального набора файлов темы:

style.css — файл стилей с информацией о теме;
index.php — основной шаблон;
functions.php — файл для подключения скриптов и функций;
header.php и footer.php — шапка и подвал сайта;
sidebar.php — боковая панель.

В style.css обязательно добавьте шапку темы, например:

/*
Theme Name: WPAbout Velosiped
Theme URI: https://wpabout.ru/
Author: WPAbout
Description: Адаптивная тема WordPress для велосипедного сайта
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: wpabout-velosiped
*/

Это позволит WordPress распознать тему.

Подключение стилей и скриптов через functions.php

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

function wpabout_velosiped_enqueue_scripts() {
    wp_enqueue_style('wpabout-velosiped-style', get_stylesheet_uri(), array(), '1.0');
    wp_enqueue_script('wpabout-velosiped-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpabout_velosiped_enqueue_scripts');

Так мы гарантируем правильную загрузку ресурсов и возможность их обновления.

Реализация адаптивного меню и навигации

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

В functions.php зарегистрируем меню:

function wpabout_velosiped_register_menus() {
    register_nav_menus(array(
        'primary' => __('Основное меню', 'wpabout-velosiped'),
    ));
}
add_action('after_setup_theme', 'wpabout_velosiped_register_menus');

В header.php выведем меню:

<nav class="main-navigation">
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'menu_class' => 'menu',
        'container' => false,
    ));
    ?>
</nav>

Для мобильных устройств добавим простой переключатель меню через JavaScript и CSS медиа-запросы.

Пример CSS для адаптивного меню

@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
    }
    .menu.active {
        display: flex;
    }
    .menu-toggle {
        display: block;
        cursor: pointer;
    }
}

JavaScript для переключения меню (файл js/main.js)

jQuery(document).ready(function($) {
    $('.menu-toggle').click(function() {
        $('.menu').toggleClass('active');
    });
});

Использование кастомных полей для велосипедных маршрутов

Чтобы добавить функционал специфичный для велосипедного сайта, например, описание маршрутов, протяженность, уровень сложности, используем кастомные поля. В этом поможет плагин Advanced Custom Fields (ACF) или собственный код.

Пример регистрации метабокса через код:

function wpabout_velosiped_add_meta_box() {
    add_meta_box(
        'wpabout_velosiped_route_data',
        'Данные маршрута',
        'wpabout_velosiped_render_meta_box',
        'post',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'wpabout_velosiped_add_meta_box');

function wpabout_velosiped_render_meta_box($post) {
    wp_nonce_field('wpabout_velosiped_save_meta_box', 'wpabout_velosiped_meta_box_nonce');

    $distance = get_post_meta($post->ID, '_wpabout_velosiped_distance', true);
    $difficulty = get_post_meta($post->ID, '_wpabout_velosiped_difficulty', true);
    ?>
    <p><label for="wpabout_velosiped_distance">Протяженность (км):</label><br>
    <input type="number" name="wpabout_velosiped_distance" id="wpabout_velosiped_distance" value="<?php echo esc_attr($distance); ?>" /></p>

    <p><label for="wpabout_velosiped_difficulty">Уровень сложности:</label><br>
    <select name="wpabout_velosiped_difficulty" id="wpabout_velosiped_difficulty">
        <option value="легкий" <?php selected($difficulty, 'легкий'); ?>>Легкий</option>
        <option value="средний" <?php selected($difficulty, 'средний'); ?>>Средний</option>
        <option value="сложный" <?php selected($difficulty, 'сложный'); ?>>Сложный</option>
    </select></p>
    <?php
}

function wpabout_velosiped_save_meta_box_data($post_id) {
    if (!isset($_POST['wpabout_velosiped_meta_box_nonce'])) {
        return;
    }
    if (!wp_verify_nonce($_POST['wpabout_velosiped_meta_box_nonce'], 'wpabout_velosiped_save_meta_box')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['wpabout_velosiped_distance'])) {
        update_post_meta($post_id, '_wpabout_velosiped_distance', sanitize_text_field($_POST['wpabout_velosiped_distance']));
    }
    if (isset($_POST['wpabout_velosiped_difficulty'])) {
        update_post_meta($post_id, '_wpabout_velosiped_difficulty', sanitize_text_field($_POST['wpabout_velosiped_difficulty']));
    }
}
add_action('save_post', 'wpabout_velosiped_save_meta_box_data');

Так вы сможете добавлять и сохранять данные маршрутов прямо в админке WordPress.

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

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

Чтобы не потерять скорость загрузки, используйте несколько советов:

Сжимайте изображения без потери качества (плагины Smush или EWWW Image Optimizer).
Используйте современные форматы, например WebP.
Добавляйте атрибуты srcset для адаптивной загрузки изображений.

Пример добавления атрибутов srcset в теме:

the_post_thumbnail('medium', array(
    'srcset' => wp_get_attachment_image_srcset(get_post_thumbnail_id()),
    'sizes' => '(max-width: 600px) 100vw, 600px',
));

Полезные плагины для велосипедного сайта на WordPress

Для расширения функционала рекомендуем несколько плагинов:

WP GPX Maps – позволяет добавлять GPX-треки маршрутов с интерактивной картой.
Yoast SEO – для оптимизации сайта под поисковые системы.
Contact Form 7 – создание форм обратной связи для связи с посетителями.
Smush – оптимизация изображений.
Advanced Custom Fields – удобное создание и управление кастомными полями.

Каждый из этих плагинов поможет сделать сайт более удобным и функциональным.

Заключение по созданию адаптивной велосипедной темы

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