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

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

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

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

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

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

اقرأ أيضا: طريقة منع المشتركين من الدخول إلى لوحة التحكم

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

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

add_theme_support( 'post-thumbnails' );
Code language: PHP (php)

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

منذ هذه اللحظة ما علينا فعله هو إضافة صور بارزة لكل المقالات و ذلك من خلال العلبة الجديدة (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' ); }
Code language: PHP (php)

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

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

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

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

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

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

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

اقرأ أيضا: إضافة هاشتاق تلقائيا للمواضيع المنشورة بواسطة Jetpack

/** * 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' );
Code language: PHP (php)

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

/** * 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' );
Code language: PHP (php)

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

أما إذا كنت تفضل التحكم في مكان ظهور المقالات ذات صلة بشكل أكبر، مثلا لعرضها في اﻷعمدة الجانبة يمكنك استعمال هذا الكود القصير [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; } }
Code language: CSS (css)
إذا انتقلت قليلا إلى اﻷسفل يمكنك مشاهدة النتيجة ﻷن اﻷكواد التي بهذه التدوينة هي نفسها التي استعملها في موقعي.

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

close

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

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

10 تعليقات

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

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

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

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

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

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

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

      بالتوفيق!!

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

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

    1. العفو أخي
      فقط عليك تغيير [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]

      بالتوفيق

اترك تعليقًا

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