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

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

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

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

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

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

add_theme_support( 'post-thumbnails' );

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

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

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

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

// 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 0.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;
  }
}

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