+7(982) 597-7179

Как создать тему на wordpress (Часть 2)

В первой части мы остановились на выводе строки шапки, контента и подвала.

1

Во второй части я покажу, как создать и вывести меню в wordpress,  мы создадим первую страницу и виджет.

Первоначально я не хотел использовать верстку, но без нее будет все коряво и непонятно. Поэтому я нарисовал простой двухколоночный шаблон.

2

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

Начнем с шапки.

Сначала добавим файл function.php  в папку нашей темы и добавим в него следующий код:

<?php
/**
 * Функции шаблона (function.php)
 */
register_nav_menus(array( // Регистрируем  меню
                'top' => 'Верхнее', // Верхнее
));
register_sidebar(array( // регистрируем левую колонку, этот кусок можно повторять для добавления новых областей для виджитов
                'name' => 'Колонка справа', // Название в админке
                'id' => 'right-sidebar', // идентификатор для вызова в шаблонах
                'description' => 'Обычная колонка в сайдбаре', // Описалово в админке
                'before_widget' => '<div id="%1$s" class="widget %2$s">', // разметка до вывода каждого виджета
                'after_widget' => "</div>\n", // разметка после вывода каждого виджета
                'before_title' => '<span class="widgettitle">', //  разметка до вывода заголовка виджета
                'after_title' => "</span>\n", //  разметка после вывода заголовка виджета
 
 
));
?>

В этом файле мы регистрируем меню и правый виджет.

Теперь в консоли, в пункте меню «Внешний вид» появились новые подпункты: меню и виджеты.

 

 

Открываем файл header.php

Меняем код на:

<!DOCTYPE html>
<html <?php language_attributes(); // вывод атрибутов языка ?>>
<head>
<title>Заголовок</title>
<meta charset="<?php bloginfo( 'charset' ); // кодировка ?>">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/style.css">
<link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/favicon.ico" />
<?php wp_head(); // необходимо для работы плагинов и функционала ?>
</head>
<body <?php body_class(); // все классы для body ?>>
<header>
код шапки
 
<?php $args = array( // опции для вывода верхнего меню, чтобы они работали, меню должно быть создано в админке
'theme_location' => 'top', // идентификатор меню, определен в register_nav_menus() в function.php
'container'=> 'nav', // обертка списка
'menu_class' => 'bottom-menu', // класс для ul
'menu_id' => 'bottom-nav', // id для ul
);
wp_nav_menu($args); // выводим верхнее меню
?>
</header>

В консоли в пункте «Страницы» создайте несколько пустых страниц. Например: главная, о нас, блог, контакты.

Теперь в консоли создайте новое меню и вставьте туда ваши созданные страницы. Должно получится примерно так:

3

Не забудьте нажать «Сохранить меню». И выберете внизу галочку «верхнее», чтобы оно отобразилось на странице.

Теперь зайдите в консоли «Внешний вид» — «Виджеты»

Вы обнаружите, что справа появился созданная нами «Колонка справа». Теперь перенесем туда один из доступных виджетов например календарь.

Изменим файл index.php на:

<?php get_header(); // подключаем header.php ?>

<div class="row"> 
<div class="content">
код контента
</div>
<aside>
<?php dynamic_sidebar('right-sidebar'); // выводим сайдбар, имя определено в function.php ?>
</aside>
</div>
<?php get_footer(); // подключаем footer.php ?>

Теперь обновим нашу страницу:

4

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

 

Откроем файл   style.css и добавим туда следующий код:

header{
height:200px;
width:960px;
margin:0 auto;
background:#8CA6FD;
position:relative;
}
nav{
height:40px;
background:#00FF00;
position: absolute;
bottom: 0;
width: 100%;
}
nav>ul>li{
float:left;
margin-left:20px;
list-style:none;
line-height: 6px;
font-size: 16px;
}
.row{
width:960px;
margin:0 auto;
}
.content{
width:760px;
 float:left;
background:#fc6;
height:400px;
}
aside{
width:200px;
background:#CCB39F;
float:right;
}
footer{
clear:both;
background:#FFFF80;
margin:0 auto;
height:100px;
width:960px;
}

Обновим нашу страницу и получим:

5

Теперь визуально более понятнее к чему мы пришли.  Следующим нашим шагом, создать вывод страниц. Если мы начнем переходить по нашим страницам в меню, то url в браузере изменяется, а контент не меняется.  Зайдите в консоль и наполните произвольно ваши страницы.

Для того чтобы отображались страницы в вордпрес достаточно изменить файл index.php  :

<?php get_header(); // подключаем header.php ?>
<div class="row">
<div class="content">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); // старт цикла ?>
<h1><?php the_title(); // заголовок ?></h1>
<?php the_content(); // контент ?>
<?php endwhile; // конец цикла ?>
</div>
<aside>
<?php dynamic_sidebar('right-sidebar'); // выводим сайдбар, имя определено в function.php ?>
</aside>
</div>
<?php get_footer(); // подключаем footer.php ?>

 

Мы добавили цикл  с заголовком и контентом.

Теперь при переходе будет отображаться ваш контент с заголовком.

На этом вторая часть нашего урока закончена. Спасибо за внимаение.


Приглашаем поучавствовать в обсуждении статьи:

Комментариев 0

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