О Вордпресс

Интернет-магазин на Wordpress. Интеграция верстки

Интернет-магазин на 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), да и сайт не такой уж большой, чтобы дробить его на несколько файлов-шаблонов страниц.

На этом интеграция базовой верстки готова.

Скачать верстку - Яндекс.Диск

Следующее видео -->

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей