عرض مقالات ذات صلة دون إضافة في ووردبريس

المقالات ذات صلة هي وسيلة رائعة لجلب الزوار إلى مقالات أخرى ذات موضوع مشابه، هذا يزيد من مدة بقاء الزوار في الموقع, و إذا أضفنا إليها صورة مصغرة سنجعلها أكثر جمال و جاذبية أليس كذلك؟

في هذه التدوينة سأشرح لك طريقة عرض مقالات ذات صلة دون إستعمال إضافة.

لكي نصل إلى ما نريد، أي عرض تدوينات ذات صلة بشكل بدوي سنمر بأربع مراحل.

جعل القالب داعم للصور المصغّرة.

أول شيء علينا فعله هو معرفة إذا كان قالبك يدعم الصور المصغّرة أم لا، في حالة عدم دعمها علينا إضافة هذا الكود إلى ملف funcions.php أو إضافتنا المخصّصة.

add_theme_support( 'post-thumbnails' );

إذا كنت تحتاج إلى وضع صور بارزة بشكل تلقائي شاهد هذه التدوينة

منذ هذه اللحظة ما علينا فعله هو إضافة صور بارزة لكل المقالات و ذلك من خلال العلبة الجديدة (Meta Box) التي ستظهر في صفحة تحرير المقالات.

إضافة كود عرض المقالات ذات صلة.

اﻵن يجب علينا نسخ هذا الكود و لصقة في نفس المكان الذي ذكرته من قبل، إذا كنت قد استعملت كود دعم الصور المصغّرة، قم بوضعه تحته.

<?php
// Check if function exist
if ( ! function_exists( 'sb_the_related_posts_thumbnail' ) ) {

	  /**
	   * sb_the_related_posts_thumbnail Display related posts with thumbnail.
	   *
	   * @author Said El Bakkali
	   *
	   * @global object $post
	   * 
	   * @param  bool $echo
	   *
	   * @return string $output
	   */
	  function sb_the_related_posts_thumbnail( $echo = true ) {

	      if ( is_singular( 'post' ) ) {

			$output = null;
            global $post;
            $tags = wp_get_post_tags( $post->ID );
            if ( $tags ) {
                foreach ( $tags as $tag ) {
                    $tagID[] = $tag->term_id;
                }

		      // If is mobil show 3 posts is not show 5
	              $poststoshow = wp_is_mobile() ? 4 : 6;

								// WP_Query argements
	              $args = array(
                        'posts_per_page' => $poststoshow,
                        'no_found_rows'       => true,
	                    'tag__in' => $tagID,
	                    'post__not_in' => array($post->ID),
	                    'ignore_sticky_posts' => true,
	                    'orderby' => 'rand',
	                );

			// Start loop
	              $tags_query = new WP_Query( $args );
	              if ( $tags_query->have_posts() ) {
						$output .= '<div class="sb-related-posts-container">
						<h3 class="sb-related-posts-header">' . __( 'Other posts that you can interested...', 'basata-related-post') . '</h3>
						<ul class=sb-related-posts-wrap>';
	                  while ($tags_query->have_posts()) {
                            $tags_query->the_post();
                            
                            $the_permalink = esc_url( get_the_permalink() );
                            $the_title = esc_attr( get_the_title() );
                            
	                        $output .= '<li class="sb-relatd-post-item">' . sprintf( '<a rel="bookmark" href="%s" title="%s">', $the_permalink, $the_title);
	                        $output .= has_post_thumbnail( ) ? get_the_post_thumbnail( null, 'thumbnail', array( 'class' => 'sb-related-post-thumbnail' ) ) : get_the_post_thumbnail( '3698', 'thumbnail', array('class' => 'sb-related-post-thumbnail' ) );
	                        $output .= $the_title;
	                        $output .= '</a></li>';
	                  }
	                  $output .= '</ul></div>';
	              }
	              wp_reset_postdata();
	          } // End if $tags
	          if ( $echo ) {
	              echo $output;
	          }else {
	              return $output;
		        }
	      } // End if is_singular('post')
	  }

    // Create a shortcode to display related posts anywhere on the website
    add_shortcode( 'sb_related_posts_thumbnail', 'sb_the_related_posts_thumbnail' );
}

هذه الكود يقوم بتحديد وسوم المقالة الحالية و بعدها يعرض المقالات المنتمية لنفس الوسوم بشكل عشوائي مستبعدا المقالة الحالية، في السطر 31 نقوم بتحديد عدد المقالات التي نريد عرضها عبر المتغيّر $poststoshow ما نفعله هناك هو جعل عدد المقالات التي ستظهر في اﻷجهزة النقالة مغاير لعدد المقالات التي ستظهر في اﻷجهز اﻷخرة، في هذا الكود وضعنا 3 في اﻷجهزة النقالة و 5 في باقي اﻷجهزة و في السطر 52 قمنا بالتحقق من وجود صورة مصغّرة في المقالة و حالة عدم وجودها نقوم بوضع صورة مصغّرة افتراضية من اختيارنا، في هذا المثال الصورة المصغرة اﻹفتراضية هي الصورة المصغّرة للمقالة ذات الرقم المعرف 3698، طبعا هذا الرقم يجب عليك تغييره ...

عرض المقالات ذات صلة في واجهة الموقع

لكي يتم عرض المقالات ذات صلة في واجهة الموقع لدينا عدة طرق.

الطريقة اﻷولي هي فتح الملف الذي نريد أن تظهر فيه المقالات ذات صلة والنذاء على الوظيفة sb_the_related_posts_thumbnail()، مثلا نضعها في ملف ال index.php فوق أو تحت الوظيفة the_content().

الطريقة الثانية هي استعمال الفلتر the_content

إذا أردنا عرض المقالات ذات صلة تحت محتوى المقالة نقوم بإستعمال هذا الكود:

/**
 * related_posts_before_content add related posts after content
 *
 * @param string $content Content of the current post.
 */
function sb_related_posts_after_content($content)
{
    $content = $content . sb_the_related_posts_thumbnail(false);

    return $content;
}

// display related posts after content
add_filter('the_content', 'sb_related_posts_after_content');

إذا أردنا عرض المقالات ذات صلة فوق محتوى المقالة نقوم بإستعمال هذا الكود:

/**
 * related_posts_before_content add related posts before content
 *
 * @param string $content Content of the current post.
 */
 function sb_related_posts_before_content($content)
 {
     $content = sb_the_related_posts_thumbnail(false).$content;

     return $content;
 }

 // display related posts before content
 add_filter('the_content', 'sb_related_posts_before_content');

طبعا، هذه اﻷكواد يتم وضعها في نفس المكان الذي وضعنا به الكود اﻷول.

أما إذا كنت تفضل التحكم في مكان ظهور المقالات ذات صلة بشكل أكبر، مثلا لعرضها في اﻷعمدة الجانبة يمكنك استعمال هذا الكود القصير

[sb_related_posts_thumbnail]

لكي تستطيع استعمال هذا الكود القصيرة في الودجة "نص" عليك مشاهدة تدوينة طريقة إستعمال الأكواد القصيرة في الودجة “نص”.

إضافة تنسيقات بواسطة css.

الكود السابق لن يقوم بإظهار المقالات ذات صلة بشكل جميل و جذاب دون إعطاءها تنسيق مناسب وعرضها بشكل منظّم.

ﻷجل هذا نقوم بفتح ملف تنسيقات القالب style.css و نعمل تنسيقات مناسبة، هكذا مثلا:

.sb-related-posts-container {
		text-align: center;
		margin-top: 20px;
		margin-bottom: 20px;
}
.sb-related-posts-wrap {
		padding: 0;
		margin: 0;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		justify-content: space-around;
}
.sb-relatd-post-item {
		padding: 0.313rem;
		width: 32%;
		height: auto;
		box-shadow: 0 0 0.063rem rgba(204, 204, 204, 1);
		list-style: none !important;
		transition: all .3s ease-in-out;
		margin-top: 20px;
		magrin-bottom: 20px;
}
.sb-relatd-post-item:hover {
		box-shadow: 0 0 1.25rem rgba(204, 204, 204, 1);
}
.sb-related-post-thumbnail {
		width: 100%;
		heigth: auto;
		padding: 0.125rem;
}
.sb-related-posts-title {
		font-size: 1.125rem;
		line-height: 1.6rem;
}
@media (max-width: 48rem) {
		.sb-relatd-post-item {
				width: 49%;
		}

		.sb-related-posts-title {
				font-size: 1rem;
		}
}

أتمنا أن تكون قد إستفدت من الموضوع, إذا كان لذيك أي إستفسار, مساهمة أو تعقيب شاركه معي من خلال التعليقات.