Создание адаптивного шаблона для 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(); ?>
//Тут будет код записи
<?php endwhile; ?><?php endif; ?>

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

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

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

1
<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

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

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *