Создание адаптивного шаблона для wordpress. Часть 3

Всем привет, в прошлом уроке по созданию шаблона для wordpress мы закончили формировать наш каркас для будущего шаблона wordpress который основан на фреймворке twitter boostrap. В этом третьем уроке мы научимся создавать и выводить навигационное меню средствами cms, выведем и формим контент, сайдбар и футер. Приступим.

Создаем шаблон для wordpress

1. Создаем навигацию


– Первое что нам понадобиться это небольшой скрипт под названием wp-bootstrap-navwalker который делает совместимость навигации bootstrap и wordpress. Скачать скрипт можно с github, после чего файл wp-bootstrap-navwalker.php поместите в корень нашего сайта (Туда где файлы index.php, single.php и другие)

– Следующим этапом в создании навигации будет подключение нужных строк в файле functions.php который мы создавали в прошлом уроке по созданию шаблона для wordpress.

<?php
 require_once('wp_bootstrap_navwalker.php');

 if (function_exists('add_theme_support')) {
 add_theme_support('menus');
 }
?>

Данный скрипт подключает тот самый скрипт который мы скачали с github и включает возможность созданию меню через админ панель.

– Открываем header.php и прописываем код который будет выводить наше навигационное меню. Код прописываем внутрь тегов <menu></menu>

<?php
 wp_nav_menu( array(
 'menu' => 'headMenu',
 'depth' => 2,
 'container' => false,
 'menu_class' => 'nav',

 'walker' => new wp_bootstrap_navwalker())
 );
 ?>

– После чего в файл style.css прописываем, сброс отступов для тега <menu>

menu {
 padding:0;
 margin:0;
 }

– Откроем файл footer.php и пропишем jquery код который будет добавлять класс .active в навигацию. Прописываем данный скрипт после подключения jquery

<script>
 jQuery(document).ready(function () {
 $(".current-menu-item").addClass("active");
 });
 </script>

И так все основные функции и скрипты прописаны, заходим в админ панель и переходим во вкладку Внешний вид – Меню, где будем создавать структуру нашей навигационной панели для wordpress.

Создание навигации для wordpress

1. Тут прописываем имя нашего меню, которое мы прописывали в файле header.php в строчке ‘menu’ => ‘headMenu‘ где headMenu это название которое мы вводим в пункте 1 (на скриншоте), у вас название может быть другое.

2. Это примерная структура меню, для того чтобы создать выпадающее меню, вам нужно один подпункт перетащить на пункт из которого он должен выпадать.

3. После проделанных манипуляций сохраняем наше меню.

– Наше меню создано вот как оно должно выглядеть в итоге

Меню для wordpress используя bootstrep

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

2. Вывод контента


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

– Открываем файл index.php и вместо надписи Тест контент которая находиться внутри блока <div class=”span7″></div> прописываем обязательную функцию цикла, внутри которой мы будем формировать будущий вид записи.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="content">
//Тут будет код записи
</div>
<?php endwhile; ?><?php endif; ?>

– Выводим заголовок записи wordpress. Для этого вместо надписи //Тут будет код записи прописываем

<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>

– Выведем дополнительную информацию о записи такую как дата, автор и рубрика. Прописываем код после вывода заголовка

<div class="custom"><?php the_date(); ?> опубликовал <strong><?php the_author(); ?></strong> в рубрике <?php the_category(); ?></div>

– Оформляем вид вывода информации о записи, для этого откроем style.css и пропишем код

/* Формируем запись */

 .custom {
 font-size: 13px;
 color: grey;
 padding-bottom: 5px;
 margin-bottom: 20px;
 border-bottom: 1px solid #EEE;
 }

 .custom ul {
 list-style: none;
 display: inline-block;
 margin: 0;
 }

 /* Конец формирования записи */

– Выведем непосредственно сам контент и ссылку на полную новость, для этого после вывода рубрики, автора и т.д., прописываем функцию вывода контента и постоянной ссылки записи

<?php the_content(); ?>
 <a href="<?php the_permalink(); ?>">Читать далее</a>

В итоге мы должны получить примерно вот такую картину, если вы владеете хотя бы базовыми знаниями css и html, вы могли оформить вид новости иначе. Моя задача в том чтобы показать наглядный и простой пример, как сделать шаблон для wordpress используя twitter bootstrep.

Превью шаблоня для wordpress

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



Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной

12 Комментария к “Создание адаптивного шаблона для wordpress. Часть 3”

  • Riva ·
    07.04.2014 в 12:51
    #

    понравились ваши уроки. спасибо.
    продолжение планируете?

    • Admin ·
      11.04.2014 в 11:55
      #

      Спасибо, конечно планирую :) Был очень занят в последнее время, в ближайшие дни будет урок.

      • Бро ·
        20.04.2014 в 19:37
        #

        Бро, благодарю за доходчивое обьяснение. Четвертый урок предвидится?

        • Admin ·
          22.04.2014 в 16:01
          #

          Пожалуйста, уже начал писать урок, остановился на половине, в ближайшие дни будет

  • Анатолий ·
    20.06.2014 в 13:09
    #

    Очень полезные уроки! Жаль что автор забил на них (((

    • Admin ·
      20.06.2014 в 13:21
      #

      Добрый день, через пару дней будет новый урок.

  • Jack ·
    22.09.2015 в 23:43
    #

    Fatal error: Class ‘wp_bootstrap_navwalker’ not found in H:\home\shablon.ru\www\wp-content\themes\web\header.php on line 28 вот это выдаёт, не могу никак разобраться с этим, делаю всё как в уроке.

    • Admin ·
      01.10.2015 в 19:35
      #

      Вы не забыли поместить файл navwalker из архива? Если поместили, то куда?

  • Валерий ·
    23.09.2015 в 20:58
    #

    Привет. У меня проблема. не могу найти где находится надпись – тут код записи “Для этого вместо надписи //Тут будет код записи прописываем “

    • Admin ·
      01.10.2015 в 19:43
      #

      Обновил урок, надпись //Тут будет код записи прописываем находиться внутри цикла, между if и endif

  • Шохрух ·
    07.03.2016 в 01:46
    #

    Привет админ. Такая проблемка:
    Fatal error: Class ‘wp_bootstrap_navwalker’ not found in Z:\home\localhost\www\bb\wp-content\themes\dt\header.php on line 43

    Файл navwalker из архива находится в корне, там же где и index.php и остальные файлы. Что делать?
    P.S. Спасибо за уроки.

    • Admin ·
      05.07.2016 в 18:04
      #

      Проверьте пожалуйста еще раз, правильно ли вы назвали файл, есть ли .php в названии, подключили ли вы его в functions.php, в противном случае, напишите мне через форму на сайте, посмотрю что там и как

  • Оставить отзыв

    (обязательно)

    (обязательно)


    Наши друзья
    - ARTtime - Блог о Photoshop и Дизайн
    - Блог о дизайне и арте
    Реклама