Четвертый урок по созданию шаблона для wordpress с помощью Bootstrap
Опубликовано: 01.09.2018
Всем привет, в прошлом уроке мы с вами научились выводить меню посредством wordpress и bootstrap navbar, а также вывели основной контент сайта (краткая запись). В данном уроке мы продолжим формировать структуру нашего шаблон для wordpress основанного на фреймворке Twitter Bootstrap.
Bootstrap: Как создаются современные адаптивные сайты (УРОК)
Приступим к выводу сайдбара на wordpress. Сайдбар на вордпрессе можно выводить двумя способами, просто создав в корне файл sidebar.php и выводить его в нужном месте с помощью тега get_sidebar(). Или же выводить с помощью зарегистрированного сайдбара в системе присваивая ему имя. В последнем варианте, вы можете использовать несколько сайдбаров одновременно, управляя им через админку. Мы же будем использовать второй вариант, с внедрением в первый, в конце урока объясню почему.
Создание Wordpress Темы (Шаблона) с нуля - Урок 3 Разбиение html на файлы, подключение css, js
1. Регистрация Sidebar
Чтобы зарегистрировать сайдбар в системе нам понадобиться, в файле functions.php прописать данный кусок кода
function register_my_widgets(){ register_sidebar( array( 'name' => "Правая боковая панель сайта", 'id' => 'right-sidebar', 'description' => 'Эти виджеты будут показаны с правой колонке сайта', 'before_widget' => '<li class="homepage-widget-block">', 'after_widget' => '</li>', 'before_title' => '<h1>', 'after_title' => '</h1>' ) ); } add_action( 'widgets_init', 'register_my_widgets' );Давайте рассмотрим подробнее код, самая важная строчка
'id' => 'right-sidebar'Данная строчка указывает идентификатор нашего будущего сайдбара, с помощью которого мы будем вызывать конкретный сайдбар.
'name' => "Правая боковая панель сайта"Эта строчка не менее важна, но она не имеет технической важности в выводе, она регистрирует название которое будет отображаться в админке, чтобы вы смогли идентифицировать какой сайдбар вы редактируете. Вот как будет отображаться ваш будущий сайдбар в админ панели wordpress. Не забудьте сохранить файл functions.php
Данные о сайдбаре можно посмотреть в пункте Внешний вид – Виджеты (файл functions.php .php должен быть уже отредактирован с регистрацией sidebar, иначе вы не увидите данное окошко)
Текст указанный красной строчкой указывается в строчке name которую мы рассматривали выше.
2. Вывод Sidebar в шаблон
На самом деле существует два варианта вывода, с помощью файла sidebar- name. php указав имя (идентификатор сайдбара), и с помощью функции dynamic_sidebar(‘name’); Мы воспользуемся вторым методом.
Открываем файл sidebar.php и вставляем внутри тега <aside></aside> (html5 тег, необязательный) функцию вывода.
<?php dynamic_sidebar('right-sidebar'); ?>В лапках right-sidebar, это идентификатор который мы указывали в первом пункте, при регистрации виджет панели.
Еще можно данный код приписывать сразу в index.php , singel.php и т.д. Но метод который использую я, облегчит редактирование в будущем, например когда вы захотите изменить идентификатор сайдбара, вам не нужно будет редактировать его во всех файлах, будет достаточно изменить его только в sidebar.php
3. Вставка виджетов в сайдбар
Для этого переходим в админку Внешний вид – Виджеты. Находим нужный вам виджет, к примеру Поиск, зажимаем его правой кнопкой мышки, и перетаскиваем в правую часть экрана в ваш виджет бар. В итоге вы должны увидеть примерно такую картину.
В графу заголовок прописываем название блока, которое будет отображаться в сайдбаре сайта над блоком виджета. Как вы наверное заметили, на картинке после виджета я добавил Календарь. В сайдбар можно добавлять пару виджетов одновременно, для этого просто перетащите нужный виджет под или над уже установленным виджетом. Последовательность виджетов на сайте будет такой же как и в админке.
Так как файл searchform.php у нас пустой, то вы не увидите строку поиска, редактированием вида нашего сайта мы займемся в последующих уроках. Чтобы убедится что виджет работает, удалите файл searchform.php
Хочу обратить ваше внимание, что это уроки по созданию структуры шаблона на twitter boostrap, поэтому особого дизайна в шаблоне не будет, постараюсь привести шаблон в эстетический вид.
Ну вот и подошел наш очередной урок к концу, в следующем уроке мы создадим pagenavi на основе bootstrap pagination, распределим код по всем основным файлам, и понемногу приблизимся к адаптивному дизайну. Прошу прощения за то что длительное время не писал на сайт, обещаю исправиться ????
Похожие записи
Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной