مدونة مصباحي نت

جديد أخبار المدونة

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

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

الخطوة الأولى

أضف الكود التالي لملف الـ Function.php

[sourcecode language=’css’]
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 196, 110, true );
[/sourcecode]

تأكد من تغيير القيم 196,110 لما يناسب عرض الصور في مدونتك
احفظ الملف وقم برفعه بعد ذلك ستجد خيار عند إنشاء تدوينة (إضافة الصورة البارزة) أو Featured image حيث يمكنك تحميل أي صورة لتدوينتك وجعلها كصورة رمزية
ملاحظة : إذا كان قالبك يدعم خاصية الصورة الرمزية فتجاوز هذه الخطوة

الخطوة الثانية

افتح ملف single.php لقالبك وأضف هذا الكود في أي مكان تريد عرض المواضيع ذات صلة

[sourcecode language=’css’]
ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

$args=array(
‘tag__in’ => $tag_ids,
‘post__not_in’ => array($post->ID),
‘showposts’=>4, // Number of related posts that will be shown.
‘caller_get_posts’=>1
);

$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo ‘

  • ‘;
    }
    }
    $post = $backup;
    wp_reset_query();
    ?>
    [/sourcecode]

    لاحظ العدد 4 في المتغير ‘showposts’=>4 يعني عدد المواضيع التي تريدها الظهور كمواضيع ذات صلة (يمكنك تغييرها كما تريد)

    الخطوة الثالثة

    الأن يمكنك التوجه لملف style.css وتأطير المواضيع ذات صلة
    بإضافة الكود التالي

    [sourcecode language=’css’]
    #relatedposts h3 { font-size: 24px; margin: 10px 0px 20px 0px; font-weight: normal; }
    #relatedposts ul { list-style: none; }
    #relatedposts ul li { float: right; margin-left: 15px; width: 206px; }
    #relatedposts img { border: 1px solid #DDD; background: #F8F8F8; padding: 5px; margin-bottom: 5px; }
    #relatedposts a:hover { color: #51B1D3; }
    [/sourcecode]

    وأخيراً النتيجة ستكون كالتالي

    4

    أضف تعليق