Вывод новостей на главной странице и одиночные записи. Шаблон с нуля — Урок №2

Продолжаем создание собственного шаблона.. Главная страница WordPress отвечает за выводо новостей — так называемый цикл WordPress «loop». В уроке мы заменим html код новостей на главной странице WordPress необходимым php кодом с функциями вывода анонсов, полных записей, автора и даты.

Если вы заметили, в настройках системы в разделе «Параметры > Чтение» есть такой чекбокс — Отображать на главной странице «Ваши последние записи» или «Статическую страницу», которую надо выбрать из выпадающего списка. Так вот речь в данном уроке пойдет именно о формировании новостной страницы, за которую отвечает файл index.php, обязательно присутствующий в данной CMS.

Главная страница wordpress

Не переусердствуйте с настройкой количества отображаемых анонсов заметок. По себе знаю, что когда их количество превышает число «5», это уже начинает создавать определенные трудности со скоростью загрузки главной страницы блога.

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

Также рекомендую в данном разделе сделать так, чтобы в новостной ленте показывался анонс, а не полную новость. если человек будет иметь возможность целиком читать статью из своего приложения или RSS ленты на специальном сайте, то зачем ему переходить на Ваш? А эта лента нам как раз и нужна, чтобы постоянно возвращать подписчиков на свой проект, так что оставляйте чекбокс на анонсе.

Как дополнение к уроку я решил еще продемонстрировать интересное решение автоматического обрезания текста анонсов на wp-kama.ru.

Главная страница WordPress: коды для вывода новостей

В помощь к видео уроку по созданию главной страницы WordPress прилагаю перечень использованных кодов.

Готовый цикл вывода постов

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
<?php if ( has_post_thumbnail ()) : ?><a href=<?php the_permalink();?>
<?php the_post_thumbnail();?></a><?php endif; ?>
<?php the_content(''); ?>
<?php endwhile; else: ?>
тут функция для вывода сообщения об ошибке
<?php endif; ?>

Функция для вывода имени автора записи (поста)

<?php the_author() ?>

Функция для вывода времени опубликования поста

<?php the_time('d-m-Y') ?>





Функция для вывода ссылок «Следующая запись» и «Предыдущая запись» в одном месте

<?php posts_nav_link(); ?>

WordPress главная страница — настраиваем вывод цикла

Это были самые простые стандартные приемы формирования цикла вывода новостей на главной странице WordPress. Теперь немного пофантазируем и сделаем, например, вывод новостей только из одной категории.

Для этого используем код:

<?php if ( ! have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( !in_category('5') ) continue; ?>

Содержимое поста на главной странице

<?php endif; endwhile; ?>

Строкой

<?php if ( !in_category('1') ) continue; ?>

мы делаем выборку анонсов только из категории с ID 1. Если убрать «!» перед «in_category», то наоборот, получим вывод всех новостей, кроме рубрики «1».

Еще один аналогичный вариант — использовать функцию «query_posts».

Перед строкой

<?php if ( ! have_posts() ) : while ( have_posts() ) : the_post(); ?>

делаем выборку или исключение категорий.

<?php query_posts('cat=-1,-2,-3'); ?>

В данном примере мы исключили вывод новестей из категорий с ID 1, 2, 3. Если убрать перед ними минусы, то наоборот, будут отображаться новости только из этих категорий.

Привожу ниже еще несколько примеров использования данной функции:

Ниже преведены еще несколько примеров использования query_posts:
query_posts(‘cat=-3’) — Не показывать категорию id которой равно 3;
query_posts(‘cat=-1,-2,-3’) — Не показывать категории, id которых равны 1, 2 и 3;
query_posts(‘cat=2,6,17’) — Вывести категории с id равным 2, 6 и 17;
query_posts(‘category_name=WordPress’) — Вывести категорию с названием “WordPress”;
query_posts(‘name=Hello World’) — Вывести один пост с названием “Hello World”;
query_posts(‘p=5’) — Вывести один пост, id которого равно 5;
query_posts(‘page_id=7’) — Вывести страницу id которой равно 7;
query_posts(‘pagename=about’) — Вывести страницу с названием “about”;
query_posts(‘cat=18&showposts=5’) — Вывести 5 постов из категории с id=18;
query_posts(‘cat=3&orderby=date&order=ASC’) — Вывести посты из категории id которой равно 3, сортировать по дате в хронологическом порядке(DESC — в обратном порядке);
query_posts(‘posts_per_page=10’) — Вывести 10 постов на страницу (при значении -1 выводит все посты);
query_posts(‘cat=3&year=2008’) — Вывести посты из категории с id=3 за 2008 год;
query_posts(‘orderby=rand&showposts=3&cat=3’) — выводин рандомно, т.е. случайно 3 записи из 3 категории;
query_posts(‘orderby=rand&showposts=3’) — выводит случайно 3 записи из всех категорий;
query_posts(‘meta_key=cars&meta_value=volvo’) — выводит список постов с произвольным полем “cars” и значением этого поля volvo.
query_posts(‘tag=cooking’) — выводит список новостей с меткой cooking
query_posts(‘tag=bread,baking’) — список новостей, содержащий любую из меток bread или baking
query_posts(‘tag=bread+baking+recipe’) — вывод новостей wordpress, имеющих сразу все перечисленные теги
query_posts(‘author=1’) — выводит новости от автора с id=1
query_posts(‘author_name=Bob’) — новости от автора с ником Bob.

Дополнительные способы исключить новости из отдельных категорий блога читайте в этой статье.

Новости в две колонки

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

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

<?php $col = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($col == 1) echo "<div class=\"row\">"; ?>
  <div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>">
  
Здесь код вывода самого анонса

  <br clear="all" />
  </div>
<?php if ($col == 1) echo "</div>"; (($col==1) ? $col=2 : $col=1); ?>
<?php endwhile; endif; ?>

А в файл стилей добавить строки:

.row{clear: both;}
.col1{width: 200px; float: left; padding: 0 10px;}
.col2{width: 200px; float: right;  padding: 0 10px;}

Таким образом колонки с четным номером будут справа, с нечетным — слева.

Теперь усложним задачу и сделаем, как на данном моем блоге — чтобы чередовались новости в полную ширину с колоночными.

<?php if (have_posts()) { ?>
<?php $i = 0; while (have_posts()) { the_post(); $i++; ?>
<div class="post<?php if ($i == 1 || $i == 4 || $i == 7) echo ' full';
else echo ' half'; if ($i%3 == false) echo ' right'; ?>">

Здесь код вывода анонса

</div>
<?php } ?>
<div class="clear"></div>
<?php } ?>

В данном варианте 1 новость будет во всю ширину, 2 и 3 пополам, 4 опять вовсю и так далее. Если нужно, чтобы 1 вовсю, 2, 3, 4, 5 пополам, то код

<div class="post<?php if ($i == 1 || $i == 4 || $i == 7) echo ' full';
else echo ' half'; if ($i%3 == false) echo ' right'; ?>">

поменяйте значения на

<div class="post<?php if ($i == 1 || $i == 6 || $i == 11) echo ' full';
else echo ' half'; if ($i%3 == false || $i%5 == false) echo ' right'; ?>">

А в файл style css добавляем стили:

.column {
	float: left;
	width: 48%;
}
.column.right {
	float: right;
}
.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}

Страница одиночных записей WordPress

Одиночные записи WordPress — следующая деталь шаблона, которую мы с Вами будем настраивать на пути к созданию собственной темы оформления. Не путайте записи со страницами — это два различных файла, которые мы создаем отдельно и которые отвечают за разные элементы. За записи, то есть за страницу подробного просмотра отдельной новости, выводящейся в цикле на главной странице, отвечает файл single.php в папке с нашей темой.

Для начала скопируем с новым названием уже созданный файл index.php, который будет основой для шаблона страницы одиночной записи, и удалим в нем функции цикла Loop, отвечающего за вывод новостей.




После этого добавим в тело html документа нашего файла шаблона записи WordPress коды, выводящие категории, метки, дату, автора, комментарии, рейтинги, и другую необходимую нам информацию из встроенных функций и добавочных плагинов.

Системный код нашей CMS настолько гибок, что позволяет сделать из шаблона практически любой дизайн для блога. Меняя местами разные составляющие его части, создав несколько их вариантов, можно создать множество разных видов оформления отдельных групп страниц — одиночных, меток, рубрик, архива, результатов поиска и так далее. Подробно обо всем этом я рассказываю при рассмотрении статической страницы для WP — не пропустите этот урок.

Как задать индивидуальное оформление для категорий и одиночных записей

В отличие от страниц, у одиночных записей нет возможности создать заранее предустановленный стиль отображения и из админки задать его той или иной новостной страничке. Однако это можно обойти, сделав вставку в файле header.php.

Поменять стиль можно за счет css, для этого вы создаете новый файл стилей, который будет отвечать за другое оформление страницы вывода одиночных записей. И потом вставить вот такой код в шапку внутри тегов «head»:

<?php  
if ( is_category( '20' ) or is_single() && in_category( '20' )) { ?>

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style1.css" />
<?php } else {  ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />  
<?php }  
?>

В этом примере говорится, что если страница является страницей категории с ID=20, или если это одиночная запись внутри категории 20, то использовать файл стилей style1.css, в остальных случаях — стандартный style.css.

Можно также прописать это условие для одной отдельной записи.

<?php  
if ( is_single(11)) { ?>

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style1.css" />
<?php }

elseif ( is_single(12)) { ?>

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style2.css" />
<?php }

else {  ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />  
<?php }  
?>

Здесь уже говорится, что если у записи id=11, то используем style1.css, если id=12, то style2.css, в остальных случаях обычный файл стилей.

Ну а еще более подробно обо всем по созданию главной страницы с анонсами и страницы одиночной записи в видеоуроках курса «Веб-сайт своими руками», раздел «Из html в WordPress».


Все подробности о курсе

Коды для вывода информации на странице записи WordPress

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

<?php the_author() ?>
<?php the_time('m-d-y') ?>
<?php the_category(',') ?>
<?php the_tags('Метки: '); ?>
<?php comments_template(); ?>

За идеи спасибо сайтам onwordpress.ru, wphacks.name и cmsuser.ru.

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Один комментарий

  • Спасибо..
    Урок очень помог так как начал изучать WP перебрал много материала, а у вас все понятно и не чего лишнего.
    Продолжайте в том же духе

    • Здесь полностью переписан шаблон главной страницы не только в индексном файле, но и с добавлением новых функций в «корень» движка. Описать все не получится..

  • Александр, приветствую! Очень прошу помочь! С некоторых пор после анонсов на главной странице вместо многоточия стало выводиться [&hellip. Где и что нужно поправить? Или хотя бы в каком направлении искать? Посоветуйте, пожалуйста!

  • Крутая статья, спасибо! но у меня немного не получается как я хочу…
    Я хочу сделать похожее с тем что описано, выводить 1 широкую запись, 3 маленькие в 3 колонки, потом опять широкую и опять 3 маленькие… Но их оформление будет не только шириной отличаться а еще разными элементами…
    Вопрос, можно ли сделать 2 разных цикла вывода, что-то типа:

    "если счетчик поста 1, 5, 9 (и тд.., кстати не перечислением а логическим выражением как-то) то
    тут код вывода
    если нет, то
    тут другой код вывода"
    Могу показать сайт где я пытаюсь реализовать подобное))
    Был бы прям супер благодарен за помощь!

    • Думаю, что лучше всего будет обратиться к кодерам-фрилансерам. Они все, что угодно, для вас за небольшую плату сделают

  • Добрый вечер. Огромное спасибо за статью. Очень хорошо написана.
    Подскажите пожалуйста, как сделать чтобы было две колонки, но в первой выводились новости, а во второй статьи?
    Вот как это должно выглядить: http://wp-voprosov.net/56203c/X0UQSApNHk8NHlNbWhsTCg5NXwsDBAdUBwA5CgRRBgcDA1MN/

    • Здравствуйте! Сделать это скорее всего возможно, но как подсказать не смогу. Советую обратиться к программисту, автору сайта wp-kama

  • Здравствуйте! Спасибо за статью! Все толково расписано. Но есть одно "но", на тему Twenty twelwe ни как не удается применить сей пример. Сайт тупо грузит белую страницу. Если есть возможность подскажите что делать.
    Спасибо.

    • Возможно, в самом шаблоне какие-то функции внедрены, из-за которых данный код не работает.. Чтобы точно ответить, надо весь шаблон перелопачивать

  • Здравствуйте Александр! Попробовал на статичной странице выводить новости категорий с помощью плагинов widgets on page и posts in category widget. По умолчанию аносы новостей выводятся построчно. Мне необходимо выводить их в 3 или 4 колонки. Прописал стили в css
    .widgets_on_page ul { list-style-type: none; padding:0; margin:0; } .widgets_on_page li { display: block; float: left; width: 30%; }
    Анонсы масштабируются, но не выводятся колонками, нет обтекания блоков. Подскажите пожалуйста, что не так и как все таки сделать вывод новостей в виде 3 колонок.

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