Добавяне на related posts към единична публикация (single.php)

Случвало ли ти се е да работиш над custom WordPress тема, или пък персонализираш готова такава, и в темплейта на единична публикация (single.php) да няма свързани публикации (related posts)? Ако се чудиш как да добавиш определен брой свързани статии, подредени по определен начин, или пък от определен автор – то остани с мен в този урок от {dev} blondie;

За да изпълним заданието, а именно – да изведем свързани публикации (от същата категория) на единичната страница на публикация, ще проследим и пресъздадем целия процес, през който се преминава. Да започваме!

Как се извикват публикации в WordPress?

Както съм разказвала и в други уроци тук, WordPress приема множество типове данни като публикация (post), а именно:

• страници – page
• прикачени файлове – attachment
• менюта – nav_menu_item
• блокови темплейти – wp_template
• ревизии – revision (за ревизиите и как те могат значително да натежат на базата данни може да научиш тук)
• части на темплейти (wp_template_part)

В списъка горе са изброени всички типове публикации, които са по подразбиране в WordPress. Отделно от тях ние, разработчиците, имаме възможност да създаваме т.нар. custom post type. Може да научиш всичко за тях и как да ги създаваш в този урок.

За да повикаш каквато и да е информация в WordPress е необходимо да използваш класът WP_Query (детайлен урок по темата). Как става това? На първо място е необходимо да създадеш инициализираш класът, заедно с неговите аргументи (или иначе казано, правилата, които ще определят какви публикации да се извикват):

// WP_Query
$query = new WP_Query ([
    'post_type' => 'post',
    'posts_per_page' => 3,
    'category_name' => 'health',
]);

Как се визуализират публикации в WordPress?

За да показваш или визуализираш съдържанието на дадена публикация, е необходимо да използваш т.нар. The Loop (детайлен урок тук). С този цикъл обхождаш всички публикации, които влизат в критериите, зададени от WP_Query класа.

А как изглежда The Loop? Съвсем стандартен for each цикъл:

// The Loop + WP_Query
 <?php if ($query->have_posts()) : while($query->have_posts()) : $query->the_post(); ?>

     <h2 class="article-title"><?php the_title() ;?></h2> 
     <p class="excerpt>"<?php the_excerpt(); ?> </p>
     <a class="read-more-btn" href="<?php get_permalink(); ?>">Read more</a>

 <?php endwhile; endif; ?>

Как да добавим свързани публикации в страницата на единична публикация?

Сега, след като знаем от какво имаме нужда, за да повикаме и визуализираме свързани публикации, нека се насочим към имплементирането на този код в страницата на единична публикация (single.php).

Нека вземем за пример следния HTML markup:

<section class="articles-wrapper">
    <!-- Single article -->
    <article class="news-item">
      <div class="article-meta">
          <span class="date">Oct 27, 2023</span>
          <span class="separator">/</span>
          <span class="category">
              <a href="#">Latest News</a>
          </span>
      </div>
      <h5 class="article-heading">Article one</h5>
      <div class="excerpt">Some short description goes here.</div>
      <a href="#">Read more</a>
    </article>
    <!-- Single article end -->

    <!-- Single article -->
    <article class="news-item">
      <div class="article-meta">
          <span class="date">Oct 27, 2023</span>
          <span class="separator">/</span>
          <span class="category">
              <a href="#">Latest News</a>
          </span>
      </div>
      <h5 class="article-heading">Article two</h5>
      <div class="excerpt">Some short description goes here.</div>
      <a href="#">Read more</a>
    </article>
    <!-- Single article end -->
    
    <!-- Single article -->
    <article class="news-item">
      <div class="article-meta">
          <span class="date">Oct 27, 2023</span>
          <span class="separator">/</span>
          <span class="category">
              <a href="#">Latest News</a>
          </span>
      </div>
      <h5 class="article-heading">Article three</h5>
      <div class="excerpt">Some short description goes here.</div>
      <a href="#">Read more</a>
    </article>
    <!-- Single article end -->
</section>

Както виждаме, това е статичен код, няма да се променя на база на нови публикации, дори самите публикации няма да се показват с него – може да гледаш на него като на константа, която винаги ще държи това съдържание в себе си. Само че – ние искаме на мястото на тези три <article>^* контейнера да имаме три истински статии от блога ни.

^* Винаги се стреми да използваш семантични HTML5 тагове, които подобряват достъпността на уеб за хора със затруднения.

За да превърнем този HTML в динамично съдържание, променящо се автоматично на база зададени от нас правила, е необходимо да го интегрираме в The Loop и да създадем query, което да захранва тези статии.

➡️ Създаване на заявката

Първо ще създадем нашето WP_Query, което ще повиква статии с определени параметри:

// Get the current post id
$current_post_id = get_the_ID();
 
// Get the current post's category
$current_post_cats = get_the_category();
$current_post_first_cat_id = $current_post_cats[ 0 ]->term_id;
 
// Setup arguments
$args = array(
    // Get category's posts
    'cat' => $current_post_first_cat_id,
    // Exclude current post
    'post__not_in' => array( $current_post_id ),
    'posts_per_page' => 3,
);
 
// Instantiate WP_Query instance
$related_articles_query = new WP_Query( $args );

В query-то горе първо вземаме ID-то на настоящия пост и го запазваме в променливата $current_post_id. След това, в променливата $current_post_cats вземаме категорията на този пост/публикация.

В променливата $args инициализираме масив, в който ще подадем параметрите, по които искаме да конструираме нашето query, като изрично подаваме в заявката да НЕ се повиква настоящия пост (за да не се показва същата публикация, на чиято страница сме, в секцията със свързани публикации).

И накрая, разбира се, инициализираме самият клас WP_Query, като го присвояваме на променливата $related_articles_query.

➡️ Интегриране на съществуващия HTML в The Loop

Следващата стъпка е да интегрираме HTML-a, който вече имаме, заедно с The Loop и вече създаденото WP_Query:

// The Loop + WP_Query
<?php if ($related_articles_query->have_posts()) : while($related_articles_query->have_posts()) : $related_articles_query->the_post(); ?>

 		<article class="news-item">               
			<div class="article-meta">            
				<span class="date">Oct 27, 2023</span>            
				<span class="separator">/</span>            
				<span class="category">                
					<a href="#">Latest News</a>            
				</span>        
			</div>        
			<h5 class="article-heading">Article two</h5>        
			<div class="excerpt">Some short description goes here.</div>  
			<a href="#">Read more</a>    
		</article>

 <?php endwhile; endif; ?>
		
      
   

С кода по-горе обаче, ще показваме един и същи HTML три пъти (понеже сме подали 3 публикации в query-то си). За да „вдъхнем живот“ на този иначе статичен markup, е необходимо да го вкараме в The Loop:

<?php if ($related_articles_query->have_posts()) : while($related_articles_query->have_posts()) : $related_articles_query->the_post(); ?>

	<article class="news-item">                
		<div class="article-meta">            
			<span class="date"><?= get_the_date(); ?></span>            
			<span class="separator">/</span>            
			<span class="category">                
				<a href="#"><?= the_category(); ?></a>            
			</span>        
		</div>        
		<h5 class="article-heading"><?= the_title(); ?></h5>        
		<div class="excerpt"><?= the_excerpt(); ?></div>  
		<a href="<?= get_the_permalink(); ?>">Read more</a>    
	</article>

 <?php endwhile; endif; ?>

В кода по-горе вече сме вкарали HTML-a. в цикъл и сме повикали основни функции, чрез които да визуализираме съдържание за всяка публиакция – заглавие, линк, категория и време на публикацията.

Вместо заключение

Добавянето на свързани публикации не е сложно и със сигурност може да се направи „ръчно“, без използването на third party software, или иначе казано – плъгин. Разбира се, тези промени е добре да се правят в child темата, за да се избегне опресняване на single.php файла и погбване на направените промени при ъпдейт на темата.

Също така, основни познания по структуриране на уеб страниц – HTML, както и по нейното стилизиране – CSS, никак не са излишни, за да придадеш един завършен и добре подреден вид на новата секция.

И разбира се, един backup преди започването на каквото и да било не е лоша идея 😀

Stay blond 😉