Как вывести статьи по рубрикам на отдельной странице (главной)

Иногда требуется сделать хитрую главную страницу или просто страницу, на которой статьи (записи) будут выводиться по рубрикам. Да ещё чтобы и рубрики можно было указывать, а не все подряд выводить.

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

Для тех, кто не любит смотреть видео кратко расшифрую алгоритм.

к содержанию

Создаем шаблон страницы

Используя менеджер файлов на хостинге или ftp-клиент, создайте в папке с темой файл с нужным вам именем, например main-page.php (если используется дочерняя тема, то файл надо создавать в папке дочерней темы).

Далее. В любой теме есть файл page.php. Открываете его и копируете содержимое файла page.php во вновь созданный файл main-page.php. Получилось? Отлично! Теперь осталось только указать, что main-page.php не просто файл и именно шаблон. Для чего достаточно вверху файла добавить следующее

<?php
/*
Template Name: Главная страница
*/
?>

Сохраняем. Теперь идем в админку сайта и создаем там новую страницу. Не забудьте:

  • На странице должно быть указано название
  • Короткий и понятный урл на транслите
  • И в атрибутах страницы надо добавить к ней наш шаблон

posts-to-cat-1

На этом создание шаблона страницы можно считать законченным.

к содержанию

Вывод рубрик

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

$arg_cat = array(
	'orderby'      => 'name', // сортировка по названию
	'order'        => 'ASC', // сортировка от меньшего к большему
	'hide_empty'   => 1, // скрыть пустые рубрики
	'exclude'      => 19, // id рубрики, которые надо исключить
	'include'      => '', // id рубрики, из которых надо выводить
	'taxonomy'     => 'category', // название таксономии
);
$categories = get_categories( $arg_cat );

Отлично! Теперь выведем названия рубрик, для чего будем использовать перебор циклом и получим примерно такое

Ахтунг! Темы у всех разные. Будьте внимательны с хтмл разметкой!
<?php
/*
Template Name: Главная страница
*/
?>
<?php get_header(); ?>
<div id="page" class="single">
<?php 
$arg_cat = array(
	'orderby'      => 'name',
	'order'        => 'ASC',
	'hide_empty'   => 1,
	'exclude'      => '',
	'include'      => '',
	'taxonomy'     => 'category',
);
$categories = get_categories( $arg_cat );
?>
	<article class="<?php mts_article_class(); ?>">
		<div id="content_box" >
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class('g post'); ?>>
				<div class="single_page">
					<div class="post-content box mark-links entry-content">
						<?php the_content(); ?>

					</div><!--.post-content box mark-links-->
				</div>
			</div>
			<?php endwhile; ?>
		<?php 
		if( $categories ){
			foreach( $categories as $cat ){
				echo $cat->name;	
				}
			}
			?>

		</div>
	</article>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

У вас должно получиться примерно такое

posts-to-cat-2

к содержанию

Вывод записей

Чтобы вывести записи будем использовать класс WP_Query{} И сначала зададим нужные аргументы и запишем значения в нужные переменные.

<?php
/*
Template Name: Главная страница
*/
?>
<?php $mts_options = get_option(MTS_THEME_NAME); ?>
<?php get_header(); ?>
<div id="page" class="single">
<?php 
$arg_cat = array(
	'orderby'      => 'name',
	'order'        => 'ASC',
	'hide_empty'   => 1,
	'exclude'      => '',
	'include'      => '',
	'taxonomy'     => 'category',
);
$categories = get_categories( $arg_cat );
?>
	<article class="<?php mts_article_class(); ?>">
		<div id="content_box" >
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class('g post'); ?>>
				<div class="single_page">
					<div class="post-content box mark-links entry-content">
						<?php the_content(); ?>

					</div><!--.post-content box mark-links-->
				</div>
			</div>
			<?php endwhile; ?>
		<?php 
		if( $categories ){
			foreach( $categories as $cat ){
				
			$arg_posts =  array(
				'orderby'      => 'name', // сортировка по имени
				'order'        => 'ASC', // от меньшего к большему
				'posts_per_page' => 3, // по три поста
				'post_type' => 'post', // тип записи "посты"
				'post_status' => 'publish', // опубликованные посты
				'cat' => $cat->cat_ID, // получаем id рубрик
			);
			$query = new WP_Query($arg_posts);
			?>
			<?php		
				}
			}
			?>
		</div>
	</article>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>

Хорошо. Теперь осталось вывести сами записи с миниатюрами.

Для получения данных самих постов используются следующие функции:
Функции вывода в цикле
ссылки на записи - the_permalink();
заголовок записи - the_title();
миниатюра записи - the_post_thumbnail();

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

<?php
/*
Template Name: Главная страница
*/
?>
<?php get_header(); ?>
<div id="page" class="single">
<?php 
$arg_cat = array(
	'orderby'      => 'name',
	'order'        => 'ASC',
	'hide_empty'   => 1,
	'exclude'      => '',
	'include'      => '',
	'taxonomy'     => 'category',
);
$categories = get_categories( $arg_cat );
?>
	<article class="<?php mts_article_class(); ?>">
		<div id="content_box" >
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class('g post'); ?>>
				<div class="single_page">
					<div class="post-content box mark-links entry-content">
						<?php the_content(); ?>

					</div><!--.post-content box mark-links-->
				</div>
			</div>
			<?php endwhile; ?>
		<?php 
		if( $categories ){
			foreach( $categories as $cat ){
				
			$arg_posts =  array(
				'orderby'      => 'name',
				'order'        => 'ASC',
				'posts_per_page' => 3,
				'post_type' => 'post',
				'post_status' => 'publish',
				'cat' => $cat->cat_ID,
			);
			$query = new WP_Query($arg_posts);
	
			?>
			<?php if ($query->have_posts() ) ?>
				<h2><?php echo $cat->name; ?> </h2>
			<?php while ( $query->have_posts() ) : $query->the_post(); ?>
							<div class="main-page-post">
								<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'widgetfull' );?>
								</a>
								<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
							</div>

			<?php endwhile; wp_reset_postdata()?>
			<?php		
				}
			}
			?>
		</div>
	</article>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>
к содержанию

Красивости

Осталось добавить немного css для того, чтобы записи выводились в ряд

.main-page-post{
    display: inline-block;
    vertical-align: top;
    width: 32%;
    margin-bottom: 8%;
    margin-top: 2%;
}

Вот и все.
Если есть вопросы, пишите в комментариях

45 комментариев
  • Edward

    17.11.2016

    Спасибо, немного разобравшись, все заработало так как нужно :)

  • Аркадий

    08.12.2016

    У вас в итоговом коде одна фигурная скобка { потерялась, там где if ($query->have_posts() )
    надо так: if ($query->have_posts() ) {

    • Аркадий

      08.12.2016

      нет, это я ошибся, извиняюсь

      • Артем

        08.12.2016

        Ничего, просто есть несколько способов указания цикла и условий

  • Евгений

    15.03.2017

    Здравствуйте Артем. Хочу на сайте сделать рубрику «Музыкальные Открытки», но так, чтобы в каждой заметке в этой рубрике можно было делать разный фон. Будет ли это достигнуто путем создания нового шаблона страницы.

    • Артем

      15.03.2017

      Доброго! Нет, шаблонами страниц такое не сделать, а вот шаблонами записей можно попробовать. Это если я вопрос правильно понял. Записи где выводятся? На отдельной странице? Если да, то тогда можно только придется классы для цветов расставлять или использовать post_class чтобы собственные классы у записей были

      • Евгений

        15.03.2017

        Артем. я не надеялся на быстрый ответ , и решил попробовать плагин Full Background Image Manager. Вышло то , что хотел: на каждую запись теперь можно ставить свой фон. _http://vkusno.jbul.ru/g1np Спасибо за статью.
        С удовольствием смотрю критику сайтов. Поставил свой сайт в очередь.

        • Артем

          15.03.2017

          Похоже я не правильно вопрос понял. Уже деформация профессиональная, про плагин и не подумал)))

          • Евгений

            15.03.2017

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

          • Артем

            15.03.2017

            Если надо просто фон менять, то вижу два варианта:
            1. Использовать шаблоны записи — тоже самое что и шаблоны страниц, только для записей (видео) А в шаблоне можно вводить нужные классы и к ним привязывать нужное оформление
            2. Если в теме используется функция body_class (обычно добавляется к открывающему тегу body) то все еще проще, данная функция генерируется для каждой записи уникальный класс, к которому можно привязывать нужное оформление

  • Мастер

    01.04.2017

    Я видел много сайтов на WordPress, у которых на главной странице отображается какая-нибудь статичная страница, а страница блога находится отдельно, а как это сделать я не понимал, после прочитанной статьи стало понятно.

    • Артем

      02.04.2017

      Рад, что смог правильно объяснить

  • Дизайнер

    22.05.2017

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

  • Декли

    10.06.2017

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

    • Артем

      22.06.2017

      Попробуйте, хороший вариант

  • Вячеслав

    05.07.2017

    Добрый день Артем. Подскажите пжл на конце ссылке стоит#more-536 (вся ссылка ниже), как убрать это значение и влияет это на продвижение этой статьи. Спасибо.
    _https://tracker23.ru/vse-o-servise-vk-treker/kak-uznat-telefon-posetitelya-sayta#more-536

    • Артем

      15.07.2017

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

  • Игорь

    19.08.2017

    Добрый день Артем! Что делать если тема не поддерживает шаблоны?
    Есть только в свойствах сраницы: «Родительская» и «Порядок»

    • Артем

      20.08.2017

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

      • Игорь

        23.08.2017

        Спасибо за ответ! Шаблон получился)

  • Игорь

    23.08.2017

    Извените с WP работаю не давно…Такой вопрос: «Реально сделать что бы страница Категорий отображала меню рубрик?»
    Например: «При нажатии на кнопку Categories, идет переход на страницу с меню, отображаются все Рубрики с главными картинками к каждой рубрике (Фильмы, Трейлеры, Новости и т.д.)?»

  • Виктория

    19.12.2017

    Здравствуйте.
    Подскажите, пожалуйста, как сделать, чтобы сайдбар отражался не только на главной (сейчас он только на главной), но и в статьях? Желательно плагином каким-нибудь. А то я в кодах не особо разбираюсь
    Спасибки

    • Артем

      06.01.2018

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

  • Павел

    28.01.2018

    Здравствуйте. Помогите новичку. Делал все, как на видео, но ничего не выходит.

  • magls

    28.02.2018

    » миниатюра записи — the_title();
    заголовок записи — the_post_thumbnail(); »

    перепутаны ключ-значение

  • Алексей

    22.03.2018

    Добрый день!
    Постоянно пользуюсь вашими трудами. Но возник вопрос по этой теме.

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

    Подскажите, как получить в цикле ссылки?

    Спасибо!

    • Алексей

      22.03.2018

      Решил сам)

      Добавил:
      $category_link = get_category_link( $cat );
      и в ссылку:

      • Артем

        23.03.2018

        Можно и так, а можно переменную и не использовать
        Правильно заданный вопрос — половина ответа)

    • Алексей

      30.03.2018

      Подскажите, как это у вас получилось?

      • Артем

        30.03.2018

        Ну правильно же написали
        Получать ссылку

        $category_link = get_category_link( $cat );

        Ну и через тег выводить

        <h2><a href="<?php echo  $category_link; ?>"><?php echo $cat->name; ?></a></h2>

        Как-то так

  • Алексей

    30.03.2018

    Артем подскажите пожалуйста, что в коде нужно поменять, чтобы по такому принципу вместо записей выводить рубрики? Очень буду благодарен, уже 2 дня сижу над решением

    • Артем

      30.03.2018

      Это как? В данной статье рубрики и выводятся. Уберите вывод записей останутся рубрики

      • Алексей

        30.03.2018

        Да, уже это понял. Спасибо! А как вывести ссылки на эти рубрики вместо названия? Вверху вижу комментарий, то вот там спрошу!

  • Алексей

    05.05.2018

    Добрый день Артем. У меня есть такой код в файле category.php -> и он выводит и подкатегории(1-я часть) и посты из данных категорий(2-я) часть… Подскажите пожалуйста, как сделать так, чтобы если есть подкатегории, посты не выводились, соответсвенно ? Буду очень признателен, много уже вариантов перепробовал…

    <div class=»row»>
    <!— Код для вывода подкатегорий в категориях —>
    <?php
    if (count(get_categories(‘child_of=’.$cat)))
    if (is_category()) {
    $current_cat=get_query_var(‘cat’);

    $args = array(
    ‘type’ => ‘post’,
    ‘show_option_all’ => »,
    ‘show_option_none’ => __(‘No categories’),
    ‘orderby’ => ‘post_date’,
    ‘order’ => ‘DESC’,
    ‘show_last_update’ => 0,
    ‘style’ => ‘list’,
    ‘show_count’ => 0,
    ‘hide_empty’ => 0,
    ‘use_desc_for_title’ => 1,
    ‘child_of’ => $current_cat,
    ‘feed’ => »,
    ‘feed_type’ => »,
    ‘feed_image’ => »,
    ‘exclude’ => »,
    ‘exclude_tree’ => »,
    ‘include’ => »,
    ‘hierarchical’ => true,
    ‘title_li’ => »,
    ‘number’ => NULL,
    ‘echo’ => 1,
    ‘depth’ => 0,
    ‘current_category’ => 0,
    ‘pad_counts’ => 0,
    ‘taxonomy’ => ‘category’,
    ‘walker’ => ‘Walker_Category’,
    ‘hide_title_if_empty’ => false,
    ‘separator’ => ‘<br />’,
    );

    ?>
    <?php

    foreach (get_categories($args) as $category) {
    $category_link = get_category_link( $category );
    ?>
    <div class=»col-md-6″>
    <div class=»catalog-block»>
    <a href=»<?php echo $category_link; ?>» class=»catalog-title»><h3><?php echo $category->name; ?></h3></a>
    <a href=»<?php echo $category_link; ?>» class=»catalog-title»><?php if($imgcat1=get_field(«imgcat1″,get_category($category))){?>
    <img src=»<?php echo $imgcat1;?>» style=»max-height: 320px» />
    <?php }?>
    </a>
    <a href=»<?php echo $category_link; ?>» class=»btn btn-tovar»>Узнать подробнее о товаре</a>
    </div>
    </div>
    <?php
    }

    //echo ‘<ul class=»forchild»>’;
    //wp_list_categories( $args );
    //echo ‘</ul>’;
    }
    wp_reset_postdata(); // сброс
    ?>

    <?php if ($current_cat == get_query_var(‘cat’)) {
    exit;
    } else {
    false;
    }?>

    <!— Код для вывода постов в категории —>
    <?php
    // параметры по умолчанию
    $args = array(
    ‘numberposts’ => 0,
    ‘category_name’ => $cat_slug,
    ‘orderby’ => ‘parent’,
    ‘order’ => ‘DESC’,
    ‘include’ => array(),
    ‘exclude’ => array(),
    ‘meta_key’ => »,
    ‘meta_value’ =>»,
    ‘post_type’ => ‘post’,
    ‘suppress_filters’ => true, // подавление работы фильтров изменения SQL запроса
    );

    $posts = get_posts( $args );
    if ($current_cat) {
    foreach($posts as $post){ setup_postdata($post);
    ?>
    <div class=»col-md-6″>
    <div class=»catalog-block»>
    <a href=»<?php the_permalink(); ?>» class=»catalog-title»><h3><?php the_title(); ?></h3></a>
    <a href=»<?php the_permalink(); ?>» class=»catalog-title»><?php the_post_thumbnail(‘object-preview’); ?>
    </a>
    <a href=»<?php the_permalink(); ?>» class=»btn btn-tovar»>Узнать подробнее о товаре</a>
    </div>
    </div>
    <?php
    }
    }

    wp_reset_postdata(); // сброс
    ?>

    </div>

    • Алексей

      05.05.2018

      Только на тот код что с exit не обращайте внимания…это с черновика не удалил…

  • Индиго

    24.06.2018

    Здравствуйте. Спасибо, за отличный урок!

    Почему то выводятся все посты…
    т.е. рубрика та которая мне нужна, но в ней посты с других рубрик.
    Проверил, все посты закреплены за определеной рубрикой. Стандартно, на странице рубрике выводятся только соответствующие посты, а с Вами кодом не получается…

    • Индиго

      24.06.2018

      Разобрался. Как говорится, невнимательность))

  • Егор

    18.07.2018

    Здравствуйте, Артем. Я у себя вот так вывел (альтернатива вашему коду), получилась страница типа база заний :):

    • Артем

      20.07.2018

      Доброго! Можно и так, главное что получилось все. На будущее, такой длинный код лучше через pastebin.com показывать, удобнее будет

  • Влад

    25.07.2018

    А как это сделать для кастомных типов записей?

    • Артем

      26.07.2018

      Так же, только вместо get_categories надо использовать get_terms, в WP_Query вместо 'post_type' => 'post' использовать названия вашего типа записи

  • Vlad

    31.07.2018

    Привет, не смог воспользоваться, не разобрался как на моем сайте создать страницу использую менеджер файлов. Скажите а вашем методе отображаются миниатюры к записи? Я использовал плагин WordPress Posts In Page, чтоб вывести на отдельной страничке записи определенной рубрики с миниатюрами, но в этом плагине отобразился только текст записей и название.

    • Артем

      05.08.2018

      Доброго! Да, в коде используется вывод миниатюр

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

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