10 апреля 2020 WordPress Bootstrap

Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или «натянуть» HTML шаблон; ну или в конце концов работать в этом направлении получая свои кровные.

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

Вот ещё один пример, когда может понадобится создать тему с нуля. На одном известном мне сайте изначально был установлен шаблон, который полностью устраивал хозяина и дизайном и функционалом. Но скорость его работы была занижена за счет лишних скриптов и не нужного ему функционала. Я думаю это проблема любого шаблона для любой CMS. После долгих мучений с оптимизацией было решено разработать шаблон с нуля на чистом Bootstrap, чтобы не было ничего лишнего, только то, что нужно. На самом деле это заняло не так много времени. Гораздо больше он бы потратил на оптимизацию готового шаблона. Вся работа заняла около недели. И вуаля в Google PageSpeed 99 пунктов.

В этом уроке я покажу как создать тему для WordPress с нуля используя начальный шаблон Bootstrap 4. На самом деле вы можете использовать любой HTML шаблон или сверстать его самостоятельно суть от этого не изменится.

Структура шаблона

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

style.css — файл стилей в корне темы. В нём так же указывается основная информация о шаблоне, но можно её не добавлять. Без этого файла WordPress будет выдавать ошибку темы. Лично я создаю его именно для того, чтобы тема работала и оставляю его пустым.
index.php — содержимое главной страницы
header.php — общая шапка сайта
footer.php — общий футер сайта
functions.php — файл с функциями темы
single.php — шаблон записи
page.php — шаблон страницы
category.php — шаблон списка записей категории
archive.php — шаблон списка записей архивов
404.php — содержимое страницы ошибки 404
search.php — шаблон страницы со списком результатов поиска

css/ — папка со стилями
js/ — папка со JS скриптами

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

Создание темы WordPress

Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.

Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.

Активация новой темы

Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:

/*
Theme Name: Progme
Version: 1.0
Description: Тема Bootstrap 4
Author: Progme
Author URI: https://it-blog.ru
*/

Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.

Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.

HTML шаблон

Как я уже говорил мы будем использовать стандартный начальный шаблон Bootstrap 4. Скачать его можно на официальном сайте по ссылке Starter template.

Bootstrap v4 начальный шаблон

Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.

Официальный сайт Bootstrap

Перед тем, как тема будет «разрезана» на шапку и футер вы можете добавить весь исходный код шаблона в файл index.php и увидеть, что тема работает. Путь до папки с темой указывается функцией get_template_directory_uri() — это чтобы сразу в теме указать ссылки для скриптов. Должно получится примерно следующее:

  
    
    
    
    
    

    Starter Template for Bootstrap

    

    
    

Теперь заголовок окна браузера будет содержать тайтл из системы WordPress.

И ниже подключаем API. Код должен находится внутри тега :

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

Далее нужно перед закрывающим тегом добавить следующий код:

Эта функция выведет панель инструментов WordPress вверху сайта.

Правильное подключение скриптов

Мы вывели скрипты прямо в шаблоне указав путь до них через функцию get_template_directory_uri();. Вы конечно можете оставить это и так. Я и сам так делал. Но по правилам WordPress скрипты должны подключаться через специальную функцию в файле functions.php. Давайте подключим их правильно. Делается это следующим образом:

function it-blog_style_frontend() {
        wp_enqueue_style('bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.min.css');
        wp_enqueue_style('styles', get_stylesheet_directory_uri() . '/css/style.css');
}
 
add_action('wp_enqueue_scripts', 'it-blog_style_frontend');

function it-blog_include_myscript(){
        wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', '', '1.0', false);
        wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', '', '1.0', false);
}
 
add_action('wp_enqueue_scripts', 'it-blog_include_myscript');

Как вы можете заметить ещё я подключил файл style.css, в нём будут находится пользовательские CSS стили, которые рано или поздно вам понадобятся.

Итак, пришло время «разрезать» наш шаблон на шапку и футер. Для чего это нужно? На большинстве сайтов шапка и футер одинаковые на всех страницах, меняется только часть с контентом. Так получается и в нашем шаблоне. После манипуляцией с разделением, шапку и футер станет проще и удобнее изменять сразу для всех страниц. Мы просто отделим от нашего шаблона часть до динамического контента и часть после. Еще я убрал лишнее из шаблона и добавил сайдбар справа. Про него я расскажу позже.

Вот что получилось:

        
                
                
                
                
        
        
                
                        
                                 ProgMeRu - статьи и уроки по веб-программированию
                                
                                        
                                
                                
                                        

• Главная
• О нас

Сервис

• Контакты

Пока меню выводится статично, но это мы исправим позже.

Добавляем код футера. Здесь же мы подключаем функцию для вывода виджетов dynamic_sidebar():

                              
                                
                                        
                
                
                        
                                
© ProgMeRu 2020 
                        
                
                
        

Регистрация виджетов

Чтобы виджеты отобразились на страницах сайта, необходимо зарегистрировать из функцией register_sidebar() в файле functions.php. В аргументах функции я так же добавил немного разметки Bootstrap , которая будет добавлена в каждый блок с виджетом.

if (function_exists('register_sidebar'))
register_sidebar(array(
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '

‘, ‘after_title’ => ‘

',
));

Ну и теперь в разделе Внешний вид → Виджеты вы можете добавлять в сайдбар нужные вам виджеты путём перетаскивания. Более подробно о создании и добавлении виджетов в WordPress можно прочитать в этой статье.

index.php

Чтобы подключить шапку и футер в файлах, воспользуемся функциями get_header() и get_footer(). Ну и между ними добавляем стандартный цикл WordPress. Выглядит он следующим образом:

        Здесь HTML код и функции вывода значений поста (заголовок, дата, ссылка, текст и т.д.)

        
Записей не найдено.

А вот основные функции цикла, которые нам понадобятся:

the_title() — выводит заголовок поста
the_content() — выводит текст анонса или полный текст, если цикл находится внутри записи
the_permalink() — ссылка на пост
the_time() — дата и время создания поста
the_posts_pagination() — пагинация

Если вам нужен вывод записей по каким-либо параметрам, то можно воспользоваться классом WP_Query{}. Как его использовать можете прочитать в этой статье.

В итоге получился следующий код главной страницы: