Интернет-магазин на Wordpress. Интеграция верстки
Стенограмма видео (встречаются расхождения*):
В данном видео я буду интегрировать верстку в систему управления Wordpress.
В первую очередь я перенесу в папку с темой стили, скрипты, картинки, шрифты. И подключу скрипты и стили в head в header.php и в footer.php с помощью функции
<?php bloginfo('template_url'); ?>. Это тег шаблона, отображающий информацию о нашем блоге, а конкретно в данном случае - путь до текущей темы, что указано в качестве имени параметра - template_url . Также пока перенесу всю верстку в header.php и удалю предустановленный вывод информации как из файла header, так и из файла footer, чтобы впоследствии внедрять все необходимые функции, объясняя для чего они предназначены и не было в файлах мешанины из непонятных кусков кода. Можно сразу разделить информацию между 2 этими файлами. Поскольку динамичным контентом для конкретно главной страницы является список товаров, то все, что выведено после него будет отправлено в footer.php, начиная с закрывающего тега main_content.
Таким образом, в последующем вся динамичная информация будет находится в диве с классом main_content.
В первую очередь выведем элементы шапки и подвала. Начнем с шапки. Логотип представлен в текстовом формате, поэтому для его вывода можно воспользоваться Кратким описанием:
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) {
echo $description;
};?>
Само описание можно ввести в Настройках темы - Свойства сайта - Краткое описание. Таким образом, администратор сможет самостоятельно вписать название фирмы, не ковыряясь в коде.
Для того, чтобы вывести footer и в будущем было бы легко его редактировать, я и воспользуюсь плагином Smart Block. Нужно создать новый "умный блок" - назову его Подвал. И чтобы воспользоваться js-composer выбираю редактор backend - BACKEND EDITOR. Если взглянуть на footer сайта, видно, что он в принципе очень простой, поэтому достаточно добавить один ряд и в нем вывести необходимые текстовые блоки. Добавлю текстовые блоки для каждой строки, а классы div-ам назначу этим текстовым блокам. Теперь осталось вывести этот смарт блок в подвале сайта с помощью виджетареи. Для этого я зарегистрирую специальную виджет арию для footer в functions.php:
register_sidebar( array( 'name' => __( 'Подвал сайта', 'twentyseventeen' ), 'id' => 'sidebar-5', 'description' => __( 'Добавьте сюда виджеты и они выведутся в подвале сайта.', 'twentyseventeen' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) );
Чтобы данные этой виджетареи выводились в подвале. Вставлю в теге footer следующий код:
<?php
if ( is_active_sidebar( 'sidebar-5' ) ) { ?>
<div class="widget-column header-widget-1">
<?php dynamic_sidebar( 'sidebar-5' ); ?>
</div>
<?php } ?>
Далее нужно добавить виджет созданного смарт блока в "Подвал сайта". Выбираю нужный смарт блок и Сохраняю. Теперь если обновить страничку сайта, то в подвале выведен ранее созданный смарт блок. Единственно нужно удалить стили теней для ссылок и картинок. Если предполагается обновление темы, то эти стили лучше предопределить в кастомных стилях, иначе они затрутся. Подвал готов и его теперь можно легко редактировать.
Следующим шагом будет вывод меню. Для этого надо создать необходимые страницы. Для это я прохожу в Страницы - Добавить Новую. И создаю все страницы, которые есть в сайдбаре. Они также выведены и в сплывающем меню. (создаю страницы). Теперь из созданных страниц формируем меню во вкладке Внешний вид - Меню - Создать Меню, дав ему названию к примеру просто "Меню". Выбираю чекбоксы созданных страниц и нажимаю кнопку "Добавить в меню". С помощью перетаскивания создаю нужную последовательность пунктов меню. Ставим галочку "Показать местонахождение" - "Верхнее меню" и для вывода используем код:
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu', ) ); ?>
заменяем им верстку меню во всплывашке и сайдбаре - в дивах big_menu и small_menu. Обновляем и видим, что теперь это рабочие ссылки на действительные страницы.
Поскольку у меня макет только главной страницы, то нужно уточнить какие именно блоки будут выведены только на главной и как соответственно будут выглядеть остальные страницы - я сделаю это на свое усмотрение. Для слайдера и сайдбара я поставлю условие их показа только для главной страницы с помощью следующего кода:
<?php if ( is_front_page() ):?>Слайдер<?php endif;?>Оберну див с классом slider и див с классом column-md-4 сайдбара. Выводом слайдера из записей в этом цикле я не буду заниматься, потому что у меня есть небольшой ролик на эту тему - ссылка дана в описании под видео. И чтобы это все выглядело симпатично нужно проставить условие для класса основного содержимого - для главной
<div class="<?php if ( is_front_page() ):?>column-md-8<?php else:?>column-lg-12<?php endif;?>">должен быть div с классом column-md-8, т.е. шириной 66.666%, а для остальных страниц column-md-12 шириной 100%, так как на этих страницах нет сайдбара. Конечно, можно расширить динамическую зону до дива с классом контент, а уже сайдбар выводить в файле именно главной страницы - front-page, а в файлах, отвечающих за остальные страницы и записи, просто НЕ выводить его, но в конкретно данной ситуации я хотела показать, что можно воспользоваться данным условием (if), да и сайт не такой уж большой, чтобы дробить его на несколько файлов-шаблонов страниц.
На этом интеграция базовой верстки готова.