Отображение всех категорий на одной странице?

Question

[Человек]

Что нужно написать в functions.php и в мои шаблоны, чтобы при клике на одну
из категорий выходили посты (записи), которые относятся к данной категории?

Мой шаблон всех категорий (categories.php).⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀
При клике(на текст) на любую из категорий должен появляться шаблон blocks.php с записями из категории, на которую кликнули.

Ссылка на готовый результат(Codepen):
https://codepen.io/Viperx/pen/VwypmrR
Шаблон (categories.php): ⠀⠀

ul{
list-style:none;
margin:0;
padding:0;
border:1px solid black;
text-align:center;
display:grid;                                            
grid-template-columns: repeat(4, 23.5%); 
gap:2vw;
}

ul a{
text-decoration:none;
color:red;
}

.category_img{
width:100%;
height:10vw;
}

.category_Block{
display: inline-block;
padding:15px;
font-size:20px;
}

<ul class ="main_category">

<li class ="category_Block"> 
<a class ="category_Link" href="">ДОМА</a> 
<img class="category_img" src="https://i.ibb.co/r0pDp7p/102-b.jpg">
</li>

<li class ="category_Block"> 
<a class ="category_Link" href="">ОДЕЖДА</a> 
<img class="category_img" src="https://i.ibb.co/bRrmLPd/image.jpg">
</li>

<li class ="category_Block"> 
<a class ="category_Link" href="">ЕДА</a> 
<img class="category_img" src="https://i.ibb.co/jy6Mzcp/d5d11c91b095686fcaa0f14cf8bbb7fa-600x450-large.jpg">
</li>

<li class ="category_Block"> 
<a class ="category_Link" href="">КРАСКИ</a> 
<img class="category_img" src="https://i.ibb.co/6mtbQSt/vidy-i-tipy-krasok-dlya-risovaniya-foto-1-870x400.jpg">
</li>

</ul>

Мой шаблон (blocks.php), где будут выводиться все посты (title и thumbnail) ⠀⠀⠀
При клике на блок нас будет переправлять к самому посту(записи) с контентом

Ссылка на готовый результат(Codepen):
https://codepen.io/Viperx/pen/qBprqpJ
Шаблон (blocks.php): ⠀⠀

.Blocks{
display:grid;                                            
grid-template-columns: repeat(5, 18%); 
gap:2vw;
}

.one{
display:grid;                                            
grid-template-columns: repeat(1, 100%); 
background:gray;
position:relative;  
}

.preview{
width:100%;
}

.post_Link{
position:absolute;
width:100%;
height:100%;
}
  
.title{
text-align:center;
font-size:16px;
padding:5px;
font-family:arial;
text-transform: uppercase;
}

a:hover{
border:2px solid red;
}

<div class="Blocks">

<div class="one">
<a class ="post_Link" href=""></a> 
<div class="title"> 1 пост </div> 

 <img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
<a class ="post_Link" href=""></a> 
<div class="title"> 2 пост </div>   

 <img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
<a class ="post_Link" href=""></a> 
<div class="title"> 3 пост </div>  
 
<img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
<a class ="post_Link" href=""></a> 
<div class="title"> 4 пост </div>  

<img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

<div class="one">
 <a class ="post_Link" href=""></a> 
<div class="title"> 5 пост </div>  
 <img class="preview" src="https://i.ibb.co/9cwxBFQ/n-Bk-SUh-L2h-FAvnsm-Lr6-Bv-MKnxd-Ds9-Zu-yyq-Yy7j-Ls2-KQe-Xq-LBmmcmz-Zh59-JUt-RPBsda-Jq-Sf-Jd54q-Er7t.jpg">
</div>

</div>

Искал инфу в инете, но так ничего не нашел. В голову пришла крайне костыльная идея:
Это создать 4 страницы в админке WordPress и установить им 4 разных шаблона с одинаковым html и уже в этих шаблонах писать цикл меняя значение 'category' в $myposts = get_posts([ Но я так не хочу, так как чувствую что это неправильно. Ведь у нас получается 4 страницы, 4 шаблона и 4 цикла с разными значениями 'category' в $myposts = get_posts([

А что если категорий будет 50? ⠀⠀⠀⠀⠀
Это придется создавать 50 страниц в админке WordPress, 50 шаблонов и циклов.

Answer 1

[Артем Золин]

Шаблон для вывода постов это category.php или archive.php, а не blocks.php. Используйте для их код из любой темы twenty или кастомизируйте его

<?php get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		<?php if ( have_posts() ) : ?>

			<header class="page-header">
				<?php
					the_archive_title( '<h1 class="page-title">', '</h1>' );
					the_archive_description( '<div class="taxonomy-description">', '</div>' );
				?>
			</header>

			<?php while ( have_posts() ) :
				the_post();

				get_template_part( 'template-parts/content', get_post_format() );

			endwhile;

			the_posts_pagination(
				array(
					'prev_text'          => __( 'Previous page', 'twentysixteen' ),
					'next_text'          => __( 'Next page', 'twentysixteen' ),
					'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
				)
			);

		else :

			get_template_part( 'template-parts/content', 'none' );

		endif; ?>

		</main>
	</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ссылку на страницу категории с записями можно получить с помощью get_category_link() по переданному $category_id. На будущее вам пригодится иерархия шаблонов WordPress

Comments

[Человек]

У меня 2 шаблона. На 1 шаблоне(categories.php) выводятся все категории,
затем при клике на ссылки из 1-го шаблона выводится
2 шаблон(category.php) с title и thumbnail.

А как дать ссылки по категориям из 1 шаблона на 2 шаблон с title и thumbnail?

[Человек]

И почему из темы twentytwentytwo нет файла category.php

[Человек]

Но вы дали неполный код, что надо писать в functions.php?
Как сайт поймет что сейчас нужно вывести посты из той или иной категории в category.php?

[Артем Золин]

xGreen_Max, первый вопрос я вообще не понял, ссылку на категорию можно получить с помощью get_category_link() или get_term_link() по ее ID

Тема twentytwentytwo сделана на основе Gutenberg, из которого разработчики делают полностраничный блочный редактор. На сегодняшний день я отношусь к этому скептически, на данном этапе эта система выглядит достаточно сыровато, но в будущем не исключаю, что может получится что-то интересное

В своем ответе я скопировал код из файла archive.php темы twentysixteen для примера

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

[Человек]

Вот мой цикл для вывода постов в category.php
Но тут есть косяк, "category" выводит только одну указанную категорию.

Как свойству "category" передать посты из той категории на которую нажали.
Например нажали на категорию "Дом" то этот цикл должен вывести все посты из категории "Дом,"
если нажали на категорию "Краски" то цикл должен вывести все посты из категории "Краски" и так далее.

<?php
global $post;

$myposts = get_posts([ 
	'numberposts' => 5,
	'offset'      => 1,
	'category'    => 1  // Тут косяк выводит только одну указанную категорию.
]);

if( $myposts ){
	foreach( $myposts as $post ){
		setup_postdata( $post );
		?>
		
		<?php 
	}
} else {
	
}

wp_reset_postdata(); 
?>

[Артем Золин]

xGreen_Max, никак не нужно передавать, нужно работать с глобальным запросом, он уже есть на этой страницы, дополнительный экземпляр get_posts() вызывать не нужно

Если вы еще раз внимательнее посмотрите пример кода, который я показал в ответе, то увидите, что в нем запросов нет, а функция the_post() устанавливает данные глобального запроса

[Человек]

Артем Золин, хорошо, а где указывать количество постов в вашем коде?

[Человек]

Не работает вот код:
Получаем ссылку на категорию "Дома"

$category_id = get_cat_ID( 'Дома' );
$category_link = get_category_link( $category_id );

Вывод ссылки:

<div class ="block">
<a class ="Сategory_Link_1" href=" <?php echo $category_link; ?> "> Дома </a>
</div>

Шаблон category.php:
Где здесь передавать посты по той категории на которую нажали?
Или здесь категории автоматически передаются?

<?php get_header(); ?>

  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

    <?php if ( have_posts() ) : ?>

      <header class="page-header">
        <?php
          the_archive_title( '<h1 class="page-title">', '</h1>' );
          the_archive_description( '<div class="taxonomy-description">', '</div>' );
        ?>
      </header>

      <?php while ( have_posts() ) :
        the_post();

        get_template_part( 'template-parts/content', get_post_format() );

      endwhile;

      the_posts_pagination(
        array(
          'prev_text'          => __( 'Previous page', 'twentysixteen' ),
          'next_text'          => __( 'Next page', 'twentysixteen' ),
          'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
        )
      );

    else :

      get_template_part( 'template-parts/content', 'none' );

    endif; ?>

    </main>
  </div>


<?php get_footer(); ?>

Вот такой результат:
Все пусто, а должно выводится 2 записи(поста) из категории "Дома" и т.д.

[Артем Золин]

xGreen_Max, количество постов указывать не нужно, данные берутся из настроек в админке Настройки → Чтение. Посты уже находятся в глобальной переменной $wp_query. Еще раз:

global $wp_query;
var_dump( $wp_query->posts );

[Человек]

Артем Золин, Не работает ваш код, пустота белый экран =(
Результат на скрине выше в комменте =(
Да и как category.php должен понять какие посты нужно выводить и из какой категории,
если я нигде не указывал значение категории.

[Человек]

Артем Золин, а в вашем коде не нужно использовать wp_reset_postdata(); ?
Дабы избежать багов?

[Артем Золин]

xGreen_Max, это не мой код. Это рабочий код из шаблона archive.php темы twentysixteen