Как создать адаптивный шаблон WordPress без фреймворков

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

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

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

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

Плюсы самостоятельной разработки шаблона без фреймворков:

• Оптимизация скорости загрузки
• Лучшее понимание структуры WordPress
• Гибкость и кастомизация без ограничений
• Минимум стороннего кода и потенциальных конфликтов

Основы структуры шаблона WordPress

Для начала создадим минимальную структуру шаблона. В корне папки темы должны быть следующие обязательные файлы:

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

Создайте файл style.css с минимальным описанием темы в начале:

/*
Theme Name: WPTemplates Adaptiv
Theme URI: https://wptemplates.ru
Author: Ваша Компания
Author URI: https://wptemplates.ru
Description: Адаптивный шаблон без фреймворков
Version: 1.0
License: GPLv2 or later
Text Domain: wptemplates-adaptiv
*/

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

Чтобы ваш шаблон был корректно подключен, стили и скрипты нужно зарегистрировать через functions.php. Это позволит избежать конфликтов и обеспечит правильную загрузку ресурсов WordPress.

<?php
// Регистрируем и подключаем стили
function wptemplates_adaptiv_enqueue_styles() {
    wp_enqueue_style('wptemplates-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'wptemplates_adaptiv_enqueue_styles');
?>

Так мы подключим основной style.css. По аналогии можно добавить и JavaScript, если понадобится.

Создание адаптивной верстки с помощью CSS медиазапросов

Адаптивность достигается за счет медиазапросов. Ниже пример базовых медиазапросов для изменения сетки в зависимости от ширины экрана:

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  nav ul {
    flex-direction: column;
  }
}

Для примера создадим сетку с помощью flexbox, которая плавно подстраивается под размер экрана:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.article {
  flex: 1 1 30%;
  margin: 10px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .article {
    flex: 1 1 100%;
  }
}

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

Пример базового шаблона с адаптивной навигацией

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

<header>
  <div class="container">
    <h1><a href="<?php echo home_url(); ?>">WPTemplates</a></h1>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Блог</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS для навигации с адаптивностью:

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 10px;
  }
}

Поддержка мобильных меню с JavaScript

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

<button id="menu-toggle" aria-label="Меню">☰</button>
<nav id="site-navigation">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Блог</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

document.getElementById('menu-toggle').addEventListener('click', function() {
  const nav = document.getElementById('site-navigation');
  if(nav.style.display === 'block') {
    nav.style.display = 'none';
  } else {
    nav.style.display = 'block';
  }
});

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

Использование плагинов для проверки адаптивности и оптимизации

Хотя мы создаем шаблон без фреймворков, для тестирования и оптимизации адаптивности можно использовать полезные плагины:

• WP Device Detector — определяет устройство пользователя и позволяет кастомизировать вывод;
• Autoptimize — оптимизирует CSS и JavaScript для ускорения загрузки;
• Regenerate Thumbnails — помогает управлять изображениями, чтобы они корректно отображались на разных устройствах.

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

Выводы и рекомендации по созданию адаптивного шаблона

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

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

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