• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

سعيد البقالي

مطوّر ووردبريس

  • الرئيسية
  • المدونة
  • الأرشيف
  • راسلني
أنت في:الرئيسية / شرحات ووردبريس / عرض مقالات ذات صلة دون إضافة في ووردبريس

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

أخر تحديث في 18 أبريل، 2021 بواسطة سعيد البقالي 10 من التعليقات

محتوى المقالة إخفاء
  1. 1 جعل القالب داعم للصور المصغّرة.
  2. 2 إضافة كود عرض المقالات ذات صلة.
  3. 3 عرض المقالات ذات صلة في واجهة الموقع
  4. 4 إضافة تنسيقات بواسطة CSS.

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

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

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

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

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

أول شيء علينا فعله هو معرفة إذا كان قالبك يدعم الصور المصغّرة أم لا، في حالة عدم دعمها علينا إضافة هذا الكود إلى ملف 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;
  }
}

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

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

تحت تصنيف:شرحات ووردبريس

Avatar of سعيد البقالي

عن سعيد البقالي

مبرمج مطور قوالب وإضافات ووردبريس بخبرة تفوق 10 سنوات، أكتب تدوينات في موقعي هذا بين الفينة والأخرى حول تطوير الويب ,تحسين الأرشفة وتحيسن أداء المواقع WPO منذ سنة 2012، لدي مساهمات في تطوير نواة ووردبريس والترجمة إلى اللغة العربية. أتمنا أن يروق لك كل ما أقدمه.

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

Reader Interactions

أضف رأيك حول الموضوع


المرجو الكتابة باللغة العربية الفصحى لكي يفهم الجميع و شكرا

  1. Avatar of عادل السعيدعادل السعيد قال

    13 يونيو، 2014 بتوقيت 8:00 مساءً

    جزاك الله خير اخي سعيد على المقال
    نحن أيضا نستخدم طريقة مشابهة نوعا ما تمكننا من إختيار المقالات ذات الصلة يدويا وهذا يمنحنا درجة أكبر من التحكم … الطريقة لا تعتمد على إضافة مقالات ذات صلة لكن إستخدمنا فيها إضافة ACF لإضافة الحقول المخصصة للمقال.

    شكرا لك واتمنى ان تستمر في تقديم المفيد

    رد
  2. Avatar of محمد رضوان حلاقمحمد رضوان حلاق قال

    12 يوليو، 2015 بتوقيت 7:14 مساءً

    مقالة مفيدة شكرا لك

    رد
  3. Avatar of yahyayahya قال

    27 يناير، 2016 بتوقيت 6:40 صباحًا

    يعطيك العافية أخي سعيد

    عند استخدام الهاك في ملف single.php تصبح صفحة المقلات بيضاء

    علماً اني احاول اضافته من أجل المقالات المخصصة

    رد
    • Avatar of سعيــــد البقـــــــــــــــاليسعيــــد البقـــــــــــــــالي قال

      30 يناير، 2016 بتوقيت 7:25 مساءً

      السلام عليكم أخي، قمت بتحديث هذا التدوينة اليوم لتحسين الكود و جعله أكثر فها و سهولة في اﻹستعمال.

      إذا كان لديك استفسار آخر اتركه هنا

      بالتوفيق!!

      رد
  4. Avatar of منىمنى قال

    20 أغسطس، 2016 بتوقيت 9:27 مساءً

    شاكرة لك جهودك القيمة

    رد
    • Avatar of سعيــــد البقـــــــــــــــاليسعيــــد البقـــــــــــــــالي قال

      21 أغسطس، 2016 بتوقيت 5:25 مساءً

      العفو أختي شكرا على المرور 🙂

      رد
  5. Avatar of سيف الدليميسيف الدليمي قال

    31 أكتوبر، 2016 بتوقيت 1:32 صباحًا

    جربت نفس ماذكرت لكن للأسف لم يظهر شئ بصفحة [code lang=”php” inline=true]single.php[/code]

    رد
    • Avatar of سعيــــد البقـــــــــــــــاليسعيــــد البقـــــــــــــــالي قال

      31 أكتوبر، 2016 بتوقيت 1:28 مساءً

      يبدو أخي أنك لم تطبق الشرح بشكل جيد ﻷن هذا الكود نفسه هو الذي أستعمله في هذا الموقع و هو يعمل دون مشاكل.

      رد
  6. Avatar of رياض المنتصررياض المنتصر قال

    3 مارس، 2017 بتوقيت 6:56 صباحًا

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

    رد
    • Avatar of سعيد البقاليسعيد البقالي قال

      22 أبريل، 2017 بتوقيت 12:26 صباحًا

      العفو أخي
      فقط عليك تغيير [code lang=”php” inline=”true”]wp_get_post_tags()[/code] ب [code lang=”php” inline=”true”]wp_get_post_categories()[/code] و كذلك وضع [code lang=”php” inline=”true”]category__in[/code] مكان [code lang=”php” inline=”true”]tag__in[/code]

      بالتوفيق

      رد

أضف رأيك حول الموضوع إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

القائمة الجانبية الرئيسية

البحث

  • حسابي على تويتر
  • رابط صفختي على انستغرام
  • رابط قناتي على اليوتوب
  • صفحتي على فايسبوك
  • ربط حسابي على جيت هاب
  • رابط حسابي على تلغرام
  • ربط حسابي على الموقع الرسمي لووردبريس
  • CodePen

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

المواضيع الأكثر شعبية

أفضل إضافات ووردبريس المجانية حسب تجربتي الخاصة

دروس ووردبريس من الصفر للمبتدئين بالفيديو

10 من أفضل قوالب ووردبريس المجانية

شرح إضافة Yoast SEO بالفيديو

طريقة إضافة نجوم تقييم المقالات في ووردبريس

نقل ووردبريس من استضافة إلى أخرى وتغيير النطاق

شارة شركة ديجيتال أوشن
يونيو 2025
نثأربخجسد
 1
2345678
9101112131415
16171819202122
23242526272829
30 
« مارس    

جميع الحقوق محفوظة © 2025

  • سياسة الخصوصية
  • شروط الاستخدام