كيف تقوم بعرض المقالات ذات صلة مع الصور البارزة
 

في هذه التدوينة سنتطرق لطريقة عرض المقالات ذات صلة والتي تعتمد اما على التشابه في العنواين او الأوسمة, اي انه كلما كانت هناك مقالات لها نفس بعض الكلمات في العنوان كلما كانت لها صلة وايضا بالنسبة للأوسمة نفس الامر الان ندخل في صلب الموضوع ساقوم بشرح طريقتين الاولى بواسطة الاضافة Yet Another Related Posts الطريقة الثانية بواسطة هاك بسيط
متطلبات عرض الصور البارزة

يجب التاكد من ان القالب الذي تستعمله يدعم الصور البارزة وهناك طريقتين لاستعمالها :

1. استعمال ميزة “الصور البارزة” فى وورد برس 2.9
2. كيف تعرض الصورة البارزة بواسطة TimThumb

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

يتم تحميل الاضافة من صفحتها على موقع ووردبريس : Yet Another Related Posts
عندما تنتهي من تركيب الاضافة ستحتاج شكل خاص لعرض المقالات ذات صلة. الاضافة تحتوي على بعض القوالب للمقالات ذات صلة. الشكل الذي يهمنا هو “yarpp-template-thumbnail.php” ستجده داخل مجلد yarpp-templates هذا الاخير موجود داخل مجلد الاضافة على المسار التالي :
/yet-another-related-posts-plugin/yarpp-templates/yarpp-template-thumbnail.php هذا الملف يدعم ميزة الصور البارزة كا هو موضح في الكود ادناه, قمت بتعديل النصوص الاجنبية الى العربية يمكنك استعمالها عند وضعه في مجل القالب الخاص بك :







<?php /* YARPP Template: Thumbnails Description: Requires a theme which supports post thumbnails Author: mitcho (Michael Yoshitaka Erlewine) */ ?> <h2>مقالات ذات صلة</h2> <?php if (have_posts()):?> <ol> <?php while (have_posts()) : the_post(); ?> <?php if (has_post_thumbnail()):?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <div class="thumbnail"> <?php if ( function_exists('show_thumb') ) { show_thumb(300, 150, 'img-responsive', $post->ID, 100); } else { the_post_thumbnail(‘thumbnail’); } ?> </div> <h3><?php the_title(); ?></h3> </a> </li> <?php endif; ?> <?php endwhile; ?> </ol>
<?php else: ?> <p>لا توجد مقالات ذات صلة</p> <?php endif; ?>



view raw yarpp-template-thumbnail.php hosted with ❤ by GitHub



في حالة كنت تستعمل “الصورة البارزة بواسطة TimThumb” التي تحدثنا عنها من قبل لا داعي لتغيير شيء الكود يحتوي على دالة تحقق من وجود الدالة التي تعرض الصور بواسطة timthumb كل ما عليك هو تغيير عرض وارتفاع الصورة ليتناسق مع موقعك
بعد الانتهاء من تحضير الملف المسؤول عن شكل المقالات ذات صلة نقوم بالتالي :

1. قم بانشاء فارغ في مجلد القالب الذي تستعمله في موقعك باسم “yarpp-template-thumbnail.php”
2. قم باضافة كود من الاكواد التي عرضنا فوق الى هذا الملف ثم احفظ التغييرات
3. توجه الى اعدادات الاضافة Yet Another Related Posts
4. ومن الاعدادات اختر عرض باستخدام قالب مخصص

لاحظ الصورة التالية :
https://i2.wp.com/www.mwordpress.net...64%2C588&ssl=1
اذا لم تظهر لك الاعدادات التالية فانت لم تقوم بنسخ الملف “yarpp-template-thumbnail.php” الى مجلد القالب الذي تستعمل في موقعك

يجب عليك اضافة تنسيق خاص بهذه المقالات لان الاضافة لا تحتوي على هذه التنسيقات نظرا لاختلاف القوالب من ناحية الشكل يمكنك الاعتماد على التنسيق ادناه للبداء في تغير شكلها التنسيق يتم اضافته الى ملف style.css الخاص بقالب موقعك







/* تنسيقات الاضافة : Yet Another Related Posts يحب عليك تعديلها على حسب الشكل الذي تريد عرض المقالات به */ .yarpp-related { margin:0; padding:2%; width:96%; } .yarpp-related h2{
} .yarpp-related ol { margin:0; padding:0; list-style:none; width:100%; } .yarpp-related ol li{ margin:0; padding:0 0 0 1%; width:24%; } .yarpp-related .thumbnail{
} .yarpp-related h3{
}



view raw yarpp.css hosted with ❤ by GitHub



الى هنا انتهينا من شرح الجزء الخاص باستعمال قالب لاضافة Yet Another Related Posts Plugin
هاك عرض المقالات ذات صلة

بالنسبة لاستعمال الهاك لن يكون مثل الاضافة في مميزاته لانه فقط يعتمد على الاوسمة عكس الاضافة Yet Another Related Posts Plugin بالنسبة للهاك قمت بالتعديل عليه ليعمل مع الطريقتين لعرض الصور بشكل تلقائي
الكود له نفس الطريقة التي استعملتها لقالب الاضافة YARPP يعني نفس الشيء بالنسبة للصور البارزة وهذه النتيجة الاخيرة للهاك







<?php /* * Security : blocking direct access * Source: http://codex.wordpress.org/Theme_Dev...Template_Files */ defined('ABSPATH') or die("No script kiddies please!");
global $post; $posts_number = '4'; $queried_object = get_queried_object();
$posts_array = wp_get_post_tags($post->ID);
echo '<h2>مقالات ذات صلة</h2>'; echo '<div class="custom-related">'; if ($posts_array) {
$posts_ids = array(); foreach($posts_array as $individual_posts) $posts_ids[] = $individual_posts->term_id; $param = array( 'post_status' => 'publish', 'tag__in' => $posts_ids, 'post__not_in' => array($post->ID), 'posts_per_page' => $posts_number, 'ignore_sticky_posts' => 1 ); $related_query = new wp_query($param);
echo '<ol>';
if( $related_query->have_posts() ) { ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <div class="thumbnail"> <?php if ( function_exists('show_thumb') ) { show_thumb(300, 150, 'img-responsive', $post->ID, 100); } else { the_post_thumbnail('thumbnail'); } ?> </div> <h3><?php the_title(); ?></h3> </a> </li> <?php } echo '</ol>';
} else { echo '<p>لا توجد مقالات ذات صلة</p>'; } echo '</div>'; $backup = 0; $post = $backup; wp_reset_query(); ?>



view raw related-post.php hosted with ❤ by GitHub



ملحوظة بسيطة قمت بتعديل بسيط على الهاك لمن واجهته مشكلة في استعماله وتغير طريقة الادراج لكي يتم استيعاب الطريقة بشكل واضح لمن لا يحسن التعامل مع ووردبريس

الملف الذي سنشتغل عليه يكون متواجد على المسار التالي :
/wp-content/themes/اسم-قالب/single.php طريقة عمل الهاك كالتالي :

1. قم بتحميل الهاك “custom-related-posts.php” وفك الضغط عن الملف ستجد ملف php باسم custom-related-posts.php
2. قم برفع الملف الى مجلد القالب الذي تستعمل
3. الان يجب عليك تعديل ملف عرض تدوينة منفردة (Single Post) المتواجد في القالب الذي تستعمل وهو single.php
4. ابحث عن دالة عرض محتوى التدوينة the_content بعد ايجادها قم بنسخ الكود اسفلها مباشرة في ملف single.php كما ترى في الكود التالي

<?php the_content(''); ?> <?php include (TEMPLATEPATH . '/custom-related-posts.php'); ?>



view raw single.php hosted with ❤ by GitHub



لا تنسى ان يكون اسم الهاك كاسم الملف الذي استدعيناه اسفل the_content
الان يجب عليك اضافة تنسيق خاص بهذه المقالات يمكنك الاعتماد على التنسيق ادناه للبداء في تغير شكل المقالات ذات صلة التنسيق يتم اضافته الى ملف style.css الخاص بقالب موقعك







/* تنسيقات الهاك يحب عليك تعديلها على حسب الشكل الذي تريد عررض المواضيع بها */ .custom-related { margin:0; padding:2%; width:96%; } .custom-related h2{
} .custom-related ol { margin:0; padding:0; list-style:none; width:100%; } .custom-related ol li{ margin:0; padding:0 0 0 1%; width:24%; } .custom-related .thumbnail{
} .custom-related h3{
}



view raw related-post.css hosted with ❤ by GitHub



الى هنا نكون قد انتهينا من هذا الجزء المخصص للهاك
المقالات ذات صلة – اضافات مقترحة

توجد بعض الاضافت التي لها نفس دور الاضافة او الهاك الذي تحدثنا عنهم في هذه المقالة وهي :

1. Related Posts Slider
2. Related Posts Thumbnails
3. Inline Related Posts
4. Yuzo Related Posts

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