المقالات ذات صلة هي وسيلة رائعة لجلب الزوار إلى مقالات أخرى ذات موضوع مشابه، هذا يزيد من مدة بقاء الزوار في الموقع، وإذا أضفنا إليها صورة مصغرة سنجعلها أكثر جمال وجاذبية أليس كذلك؟
في هذه التدوينة سأشرح لك طريقة عرض مقالات ذات صلة دون استعمال إضافة.
لكي نصل إلى ما نريد، أي عرض تدوينات ذات صلة بشكل بدوي سنمر بأربع مراحل.
جعل القالب داعم للصور المصغّرة.
أول شيء علينا فعله هو معرفة إذا كان قالبك يدعم الصور المصغّرة أم لا، في حالة عدم دعمها علينا إضافة هذا الكود إلى ملف 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;
}
}
أتمنا أن تكون قد استفدت من الموضوع، إذا كان لديك أي استفسار، مساهمة أو تعقيب شاركه معي من خلال التعليقات.
عادل السعيد قال
جزاك الله خير اخي سعيد على المقال
نحن أيضا نستخدم طريقة مشابهة نوعا ما تمكننا من إختيار المقالات ذات الصلة يدويا وهذا يمنحنا درجة أكبر من التحكم … الطريقة لا تعتمد على إضافة مقالات ذات صلة لكن إستخدمنا فيها إضافة ACF لإضافة الحقول المخصصة للمقال.
شكرا لك واتمنى ان تستمر في تقديم المفيد
محمد رضوان حلاق قال
مقالة مفيدة شكرا لك
yahya قال
يعطيك العافية أخي سعيد
عند استخدام الهاك في ملف
single.php
تصبح صفحة المقلات بيضاءعلماً اني احاول اضافته من أجل المقالات المخصصة
سعيــــد البقـــــــــــــــالي قال
السلام عليكم أخي، قمت بتحديث هذا التدوينة اليوم لتحسين الكود و جعله أكثر فها و سهولة في اﻹستعمال.
إذا كان لديك استفسار آخر اتركه هنا
بالتوفيق!!
منى قال
شاكرة لك جهودك القيمة
سعيــــد البقـــــــــــــــالي قال
العفو أختي شكرا على المرور 🙂
سيف الدليمي قال
جربت نفس ماذكرت لكن للأسف لم يظهر شئ بصفحة [code lang=”php” inline=true]single.php[/code]
سعيــــد البقـــــــــــــــالي قال
يبدو أخي أنك لم تطبق الشرح بشكل جيد ﻷن هذا الكود نفسه هو الذي أستعمله في هذا الموقع و هو يعمل دون مشاكل.
رياض المنتصر قال
شرح رائعة ومفيد وكنت بأمس الحاجة له صراحة ، لك جزيل الشكر أخي
لدي استفسار وهو أني أريد أن أعرض المقالات ذات صلة حسب التصنيف وليس حسب الوسوم أرجو أن توضح لي كيف ذلك أو المكان اللذي يجب أن أعدل عليه في الأكواد اللتي ارفقتها .. مشكور مرة أخرى أخي الكريم
سعيد البقالي قال
العفو أخي
فقط عليك تغيير [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]
بالتوفيق