Доброго времени суток 🙂
Мы уже создали основные файлы и у нас готова шапка сайта - header.php. В прошлом уроке мы затронули уже главную страницу, а конкретно - index.php. Сегодня продолжим работать с главной и остальными страницами, где у нас будет выводится цикл. Давайте потихоньку начнем.
Мы рисовали макет и определились, что основная часть будет состоять из двух колонок, левой и правой. Правая будет нашим Сайдбаром. Он будет шириной 250 пикселей и в нем будет располагаться место под виджеты. В левой же части будут выводится записи по порядку. Это будет список из определенного количества записей. Количество выставляется в админ части и будет разбито на страницы. Также над записями мы установим крошки. В стандартных темах их нет, но это очень полезная штука.
В своих темах я использую один интересный момент, который я когда-то увидел в одной из тем, которую мне передал заказчик, для добавления определенных элементов. Суть идеи в том, что на всех страница что выводят цикл, просто прописать функцию, которая подключает один файл, в котором как раз и прописан данный цикл. Плюсы очевидны, Вам не надо изменять кучу файлов для того чтобы добавить какой-то новый блок. К тому же вы уменьшаете количество кода, что тоже не плохо влияет на скорость загрузки страницы. Файл что будет выводить наш цикл - это content.php. Но к нему мы вернемся немного позже, сейчас же давайте заполним другие.
Первым в списке будет конечно же index.php. Открываем и добавляем в него следующие элементы. Это контейнер, в котором будет находится цикл, то бишь левая колонка. Внутри контейнера функция с хлебными крошками и функция подключения того файла, о котором мы только что говорили. Мы вчера уже подключили в index.php шапку и подвал. Вот как раз между ними и нужно вставить все элементы и готовый файл будет таким:
<?php get_header(); ?> <div id="primary"> <div class="entry-breadcrumb"><?php the_breadcrumb() ?></div><!--Крошки--> <?php get_template_part( 'content', get_post_format() ); ?> <!--Подключаем файл с циклом--> </div> <?php get_footer(); ?>
Теперь открываем category.php и вставляем в него, тот же код что и в index.php. Далее открываем файл archive.php В него нужно добавить эти строки, но с дополнением. К этому файлу наша тема будет обращаться при выводе записей за определенный отрезок времени, записей с определенной меткой(тегом)и записи определенного автора. Как Вы поняли, он объединит в себе сразу несколько задач. В архивах нам крошки не нужны, мы удалим эту функцию, но добавим вместо нее новый блок с другими функциями.
Готовый результат получится таким.
<?php get_header(); ?>
<div id="primary">
<div class="top_text">
<?php $post = $posts[0]; ?>
<?php if (is_tag()) { ?>
Записи с тегами ‘<?php single_tag_title(); ?>’<!--Записи с тегами-->
<?php } elseif (is_day()) { ?>
Архивы <?php the_time('F d, Y'); ?><!--Записи за определенный день-->
<?php } elseif (is_month()) { ?>
Архивы за <?php the_time('F, Y'); ?><!--Записи за определенный месяц-->
<?php } elseif (is_year()) { ?>
Архивы за <?php the_time('Y'); ?> год<!--Записи за определенный год-->
<?php } elseif (is_author()) { ?>
Архивы автора
<?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?><!--Записи определенного автора-->
Архивы блога
<?php } ?>
</div>
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php get_footer(); ?>
Каждую функцию я прокомментировал, так что если хотите можете убрать потом эти комментарии, дабы не засорять код.
Есть еще один момент. Он касается страницы с результатом поиска. На ней тоже выводится цикл. По умолчанию ее можно не создавать, и когда человек нажмет кнопку поиск, то пред ним просто появится список записей как на главной. Если вас это устраивает, то следующий шаг можете пропустить, но если Вы хотите создать свою страницу с выводом результатов поиска, то продолжим.
Для начала создаем новый файл search.php. После вставляем в него код, который похож на тот код что мы вставляли в index.php, но как и с архивами, функцию с крошками меняем на другую. Готовый Файл будет выглядеть следующим образом:
<?php get_header(); ?> <div id="primary"> <div class="top_text"> <? printf( __( 'Результаты поиска: %s'), '’' . get_search_query() . '’' ); ?> </div> <?php get_template_part( 'content', get_post_format() ); ?> </div> <?php get_footer(); ?>
Теперь когда человек введет слово или словосочетание в строку поиска и нажмет на кнопку поиск, пред ним откроется страница на которой вверху будет написано Результаты поиска: и слово которое он ввел.Ведь так намного приличнее и красивей 🙂
Мы наполнили кодом 4 файла и по сути они очень похожи. Теперь нужно прописать стили для всех элементов, чтобы все красиво и корректно отображалось. Так что открываем Файл style.css и дописываем в него следующие стили:
/*Главная*/
#primary{
width:705px;
float:left;
margin-top:15px;
padding:15px;
-webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);
}
/*крошки*/
.entry-breadcrumb{padding:10px 0;font-size:13px;color:#888;margin-bottom:20px;border-bottom:1px solid #eee;}
.entry-breadcrumb > div{display:inline-block;}
/*блок архивы и поиск*/
.top_text{font-size:14px;color:#777;margin-bottom:20px;border-bottom:1px solid #eee;}
К каждым параметрам я прописал комментарии, так что в коде видно какой параметр принадлежит определенному блоку.
Думаю дальше мы наконец-таки должны увидеть уже наши записи.
У Вас должно быть создано, хоть парочка записей. Оптимальным числом будет 10. Если Вы делаете и проверяете тему на локальном сервере, что я Вам советую, то просто создайте 10 записей пусть даже с одинаковым содержимым, лишь бы заголовки были разные. И в настройках чтения выставьте отображать на главной от 3 до 5 записей, на свое усмотрение, тогда появится постраничная навигация.
Для того чтобы вывести список записей, мы должны сформировать наш content.php. Открываем его и начинаем заполнять и создавать будущую структуру.
Готовый файл будет иметь следующий вид
<?php
/*content*/
?>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<div class="content_block">
<?php the_post_thumbnail(); ?>
<h1 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<ul class="dop_info">
<li><?php echo get_the_date("d M Yг"); ?></li>
<li>Рубрика: <?php the_category(', ') ?></li>
</ul>
<div class="content_text"><?php the_excerpt()?></div>
<a class="more_link" href="<?php the_permalink() ?>">Читать дальше</a>
</div>
<?php endwhile; ?>
<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>
<?php else : ?>
<?php include(TEMPLATEPATH . '/404.php');?>
<?php endif; ?>
Что бы все это выглядело так, как нам нужно добавляем стили. Для каждого блока я поставил комментарий, чтобы Вы могли понять что за что отвечает.
/*цикл*/
.content_block{margin-bottom:40px;position:relative;padding-bottom:5px;clear:both;}
/*Миниатюра*/
.wp-post-image{max-width:180px;max-height:180px;display:block;padding:2px;float:left;margin:0 20px 20px 0;}
/*Заглавия*/
.post_title ,.page_title{position:relative;padding:0;color:#222;font-size:22px;letter-spacing:-0.8px;line-height:28px;width:100%;text-align:left;}
/*Дата и рубрика*/
.dop_info{color:#888;font-size:13px;}
/*Текст записи*/
.content_text{text-align:justify;font-size:14px;}
/*Кнопка читать далее*/
a.more_link{position:absolute;right:0;bottom:0;}
/*Номерация страниц*/
.navigator{padding:10px 0;overflow:hidden;font-size:13px;color:#333;clear:both;margin:0 auto;text-align:center;}
.navigator a{color:#333;font-size:13px;padding:5px 9px;text-decoration: none;}
.navigator span.pages {padding:3px 5px;color:#333;padding:5px 9px;font-weight:bold;}
.navigator a:hover{background:#008fed;color:#fff;font-size:13px;text-decoration:none;}
.navigator a.next{font-weight:bold;}
.navigator a.next:hover{background:none;color:#008fed;}
.navigator span.current{background:#008fed;color:#fff;padding:5px 9px;}
После проделанной работы, еще готовый результат не увидеть, потому как , мы не прописали функций в файл пользовательских функций functions.php.
Открываем его для редактирования и по очереди добавляем функции. Вставлять код нужно перед закрывающим тегом
?>
Так что будьте очень внимательны! Иначе произойдет ошибка и тема перестанет работать.
Первая функция из всего что мы сегодня сделали - это - Хлебные крошки.
//Крошки
function the_breadcrumb() {
echo '';
if (!is_front_page()) {
echo '<a href="'; echo get_option('home'); echo '">Главная';
echo '</a> » ';
if (is_category() || is_single()) {
the_category(' ');
if (is_single()) {
echo ' » ';
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
else {
echo 'Последние записи';
}
}
В 5 строке задается название которое определяет Главную страницу. в 6 и 10 строках символ, который будет между ссылками. В 18 строке - то что будет выведено, когда вы находитесь на главной.
Следующая функция, вставляем сразу же после этой, перед закрывающим тегом. Функция подключения миниатюр к теме. Иногда можно без нее, но вдруг миниатюры не появятся, то следует все таки ее подключить.
// поддержка миниатюр
add_theme_support('post-thumbnails');
set_post_thumbnail_size(180, 180, false);
180 на 180 - это размеры миниатюры. Меняйте и задавайте те размеры, которые Вам нужны. Не забудьте миниатюры к записям добавить, чтобы видеть результат :).
Следующей функцией будет - определение количества слов для тизера. Если Вы используете функцию the_content();, для вывода текста, то эту функцию и следующую с точками можете не трогать. По умолчанию у тизера 55 слов, мы меняем на 25, по коду видно где.
function new_excerpt_length($length) {
return 25;
}
add_filter('excerpt_length', 'new_excerpt_length');
Далее убираем три точки в конце тизера
//Убираем ... в тизере
function new_excerpt_more($more) {
global $post;
return '';
}
И на последок - функция нумерации страниц.
//номерация страниц внизу
function wp_corenavi() {
global $wp_query, $wp_rewrite;
$pages = '';
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
$a['total'] = $max;
$a['current'] = $current;
$total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить
$a['mid_size'] = 3; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = 'Назад;'; //текст ссылки "Предыдущая страница"
$a['next_text'] = 'Дальше'; //текст ссылки "Следующая страница"
if ($max > 1) echo '<div class="navigator">';
if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</div>';
}
Следуя комментариям в коде, можете настроить вывод нумерации.
Сделав все правильно, не напутав ничего в Файле функций, Вы получите готовый результат. И перед Вами появится уже практически готовая главная страница.
По циклу у нас остался последний момент - это страница 404, которую мы установили как результат, если в цикле нет записей.
Вы должны создать файл 404.php и добавить на него следующий код:
<div class="big_err">404 :(</div><br> <div class="big_err2">Совпадений нет.</div> <div class="big_err3">Извините, но запрашиваемой вами информации нет на этом сайте. Попробуйте еще раз воспользоваться поиском или поищите в рубриках.</div>
И конечно же, добавляем стили.
/*404*/
.big_err{font-size:80px;text-align:center;color:#333;}
.big_err2{font-size:35px;text-align:center;color:#555;letter-spacing:-1px;}
.big_err3{font-size:20px;text-align:center;color:#777;}
Теперь, если посетитель, например, введет в поиск то, чего нет на сайте, он попадет на страницу 404 и увидит Ваше сообщение.
Чтобы завершить этот урок, осталось сделать еще одну вещь - Сайдбар.Наша правая колонка будет подключаться в файле подвала - footer.php. Можно было подключать в каждом файле где мы подключаем цикл, но я решил лучше подключить всего один раз, в подвале, перед закрывающимся тегом div, который закрывает наш основной контент с id - main.
Подключается сайдбар функцией - get_sidebar();. Как вы заметили, еще в начале мы присвоили левой колонке с id - primary свойство - float:left;, следовательно у сайдбара будет - float:right;. Это один из способов двухколонной верстки. Если Вы пользуетесь другим, всегда можете использовать его, Вам его никто не запрещает :). У моего же есть один маленький минус, теперь главный контейнер main не сможет определить высоту колонок и отображение собьется, для этого сразу после подключения сайдбара - нужно добавить блок у которого в стилях прописано свойство - clear:both;. Благодаря этому блоку мы отменим обтекание левой и правой колонки и наш основной контейнер будет отображаться так как нужно.
Готовый код в файле footer.php, будет выглядеть так:
<?php get_sidebar(); ?> <div class="clear"></div> </div><!--Закрываем main--> <?php wp_footer(); ?> </body> </html>
Сайдбар мы подключили, но что же будет в Сайдбаре, спросите Вы? Для этого нам нужно открыть ранее созданный файл в папке с темой - sidebar.php. Для начала вставим в него блок, который будет родителем для всего содержимого правой колонки.
Это будет div с id - secondary. Внутрь его помещаем функцию для вывода виджетов - dynamic_sidebar. Также если захотите можете добавить несколько таких функций, присвоив им разные имена. Можно еще дописывать что угодно, что Вы хотите вывести в правой колонке. В нашем случаи, это будет просто одно место под виджеты. В него можно вставлять по порядку сколько угодно виджетов.
Готовый результат будет выглядеть так:
<div id="secondary">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Правый сайдбар') ) : else : ?>
<?php endif; ?>
</div>
По коду видно, что мы задали имя сайдбару - Правый сайдбар.
Чтобы сайдбар начал отображаться, мы должны прописать функцию в наш functions.php. Открываем его для редактирования и в конце перед закрывающимся тегом, как и все предыдущие функции вставляем следующий код:
//Сайдбары
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Правый сайдбар',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<div id="titlebg">',
'after_title' => '</div>',
));
Тут тоже видно, что функции присвоено имя - Правый сайдбар. Это очень Важно. Имя можете менять. Но оно должно быть одинаково и в сайдбаре и в функции. Это касается и создания дополнительных сайдбаров. Просто добавляйте такие же коды, меняя название, ничего сложного.
Пока что ничего не появится толкового, нам нужно еще прописать стили, для всех элементов, что мы создали, а также для виджетов. Открываем файл стилей и добавляем параметры.
/*Сайдбар*/
#secondary{width:250px;float:right;margin-top:15px}
/*Блок отменяющий обтекание*/
.clear{clear:both;}
/*Виджеты*/
.titlebg{line-height:35px;text-align:center;font-weight:bold;letter-spacing:-0.2px;font-size:16px;margin-bottom:20px;}
.widget{
padding:10px;
margin-bottom:25px;
background:#f8f8f8;
-webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);}
.widget ul{font-size:13px;margin:0;padding-right:15px;text-transform:none;line-height:15px;}
.widget ul ul{margin-left:15px;}
.widget ul li{color:#444;padding:5px 0;border-bottom:1px dotted #ddd;}
.widget a{text-decoration:none;}
.widget a:hover,
.widget a:focus,
.widget a:active{text-decoration:underline;}
/* Виджет календарь*/
#wp-calendar {
color: #555;
width: 95%;
text-align: center;
font-size: 12px;
}
#wp-calendar caption,
#wp-calendar td,
#wp-calendar th {
text-align: center;
}
#wp-calendar caption {
font-weight: 500;
padding: 5px 0 3px 0;
text-transform: uppercase;
font-weight: bold;
}
#wp-calendar th {
background: #f4f4f4;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-weight: bold;
}
#wp-calendar tfoot td {
background: #f4f4f4;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
Теперь все станет корректно отображаться, но для того чтобы увидеть это, вы должны перейти в админ часть и в внешних настройках выбрать виджеты и там добавить в область - ПРАВЫЙ САЙДБАР, несколько виджетов.
Данный урок подошел к концу. В следующем уроке мы настроим вывод записи и страницы. Пока, на этом все, спасибо за внимание 🙂