Bootstrap шаблон WordPress
Блог

Чистая тема на bootstrap для wordpress

Всем привет. Давно уже хотели сделать заготовку-шаблон для разработки сайтов под wordpress. Очень любим фрейм bootstrap — если кто-то знает, что-то проще и легче для разработки адаптивных сайтов — то пишите в комментариях (лучший совет разместим в статье и укажем ссылку на ваш сайт).

Сразу отметим, что эта bootstrap тема wordpress создана на основе другого чистого шаблона — https://github.com/saxap/clean-wp-template, однако мы провели некоторые изменения и дополнительную очистку кода.

Тема bootstrap wordpress для разработки

WordPress clean seo bootstrap template download

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

wordpress bootstrap speed seo template
Данные из PageSpeed Insights

Просто устанавливаем голый wordpress, накидываем тему и получаем следующее:

  1. Через function.php проведена чистка лишних функций wordpress, который захламляют код и увеличивают время загрузки сайта (удалены emoji, отключен REST API, его фильтры, события и embeds).
  2. Создано 2 меню адаптированных под bootstrap. Через админку создаете верхнее и нижнее меню.
  3. Подключён файл стилей style.css, Где вы можете указать собственный CSS код для костамизации шаблона (В этом файле я добавил небольшой код для украшения темы, однако, вы можете удалить этот код, чтобы сохранить исходный вид bootstrap).
  4. Миниатюры постов и кастомные размеры картинок.

Мы бы рекомендовали вам перенести блок <header> в файл footer.php и через стили и position: absolute визуально поднять его обратно в шапку сайта. Это необходимо для SEO-оптимизации кода. С помощью этого действия Вы можете ощутимо поднять заголовок H1 вверх, что непременно положительно скажется на поисковый выдачи вашего сайта. Здесь мы исходим из мысли, которую услышали давно, однако, придерживаемся её:

Нет ничего лучше для поисковика, чем страница для печати

Однако, перенос хедера — это дело ваше. Но в пользу своей позиции приведу авторитетный пример — https://devaka.ru/.

Seo bootstrap wordpress тема

После редизайна сайта в коде можно заметить, что хедер подгружается из футера (сайт тоже сделан на wordpress). А Сергею Кокшарову мы бы доверяли.

Файлы в теме Bootstrap WordPress

С файлами все стандартно — просто ничего лишнего.

  • 404.php — шаблон 404
  • author.php — шаблон вывода постов автора
  • archive.php — архив постов
  • category.php — шаблон постов категории
  • comments.php — шаблон комментариев, там сам вывод и форма, разметка списка комментариев в functions.php
  • footer.php — подвал сайта
  • function.php — функции шаблона
  • header.php — шапка сайта
  • index.php — шаблон вывода последних постов для главной
  • loop.php — пост в цикле
  • page.php — обычная страница
  • search.php — шаблон поиска
  • sidebar.php — сайдбар
  • single.php — отдельная страница поста
  • style.css — стили темы и описание
  • tag.php — посты по тэгу
  • /js — скрипты бутстрапа и шаблона
  • /css — стили бутстрапа
  • /fonts — шрифты бутсрапа

Заметим маленький нюанс — блок <div class=»container»> вынесен из header.php, для более удобной разработки. Например, вам нужно сделать слайдер во всю ширину страницы — просто в кастомном шаблоне страницы делаете слайдер без необходимости закрывать открытые теги с фиксированной шириной.

Скачивайте, пробуйте. Пишите свое мнение в комментариях.

  • Классный и легкий шаблон. Единственное — просьба обновить уже до четвертой версии бута

Оставить комментарий

*