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

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

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

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

к содержанию

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

Используя менеджер файлов на хостинге или 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%;
}

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

21 комментариев
  • 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, идет переход на страницу с меню, отображаются все Рубрики с главными картинками к каждой рубрике (Фильмы, Трейлеры, Новости и т.д.)?»

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

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