في هذه التدوينة سنتطرق لطريقة عرض المقالات ذات صلة والتي تعتمد اما على التشابه في العنواين او الأوسمة, اي انه كلما كانت هناك مقالات لها نفس بعض الكلمات في العنوان كلما كانت لها صلة وايضا بالنسبة للأوسمة نفس الامر الان ندخل في صلب الموضوع ساقوم بشرح طريقتين الاولى بواسطة الاضافة Yet Another Related Posts الطريقة الثانية بواسطة هاك بسيط
متطلبات عرض الصور البارزة
يجب التاكد من ان القالب الذي تستعمله يدعم الصور البارزة وهناك طريقتين لاستعمالها :
المقالات ذات صلة بواسطة اضافة
يتم تحميل الاضافة من صفحتها على موقع ووردبريس : 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 كل ما عليك هو تغيير عرض وارتفاع الصورة ليتناسق مع موقعك
بعد الانتهاء من تحضير الملف المسؤول عن شكل المقالات ذات صلة نقوم بالتالي :
اذا لم تظهر لك الاعدادات التالية فانت لم تقوم بنسخ الملف “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_Development#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 طريقة عمل الهاك كالتالي :
<?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
الى هنا نكون قد انتهينا من هذا الجزء المخصص للهاك
المقالات ذات صلة – اضافات مقترحة
توجد بعض الاضافت التي لها نفس دور الاضافة او الهاك الذي تحدثنا عنهم في هذه المقالة وهي :
اذا كان هناك اي استفسار يرجى وضع تعليق ؟ ولا تنسى الاشتراك في قائمتنا البريدية ولك جزيل الشكر
متطلبات عرض الصور البارزة
يجب التاكد من ان القالب الذي تستعمله يدعم الصور البارزة وهناك طريقتين لاستعمالها :
- استعمال ميزة “الصور البارزة” فى وورد برس 2.9
- كيف تعرض الصورة البارزة بواسطة 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 كل ما عليك هو تغيير عرض وارتفاع الصورة ليتناسق مع موقعك
بعد الانتهاء من تحضير الملف المسؤول عن شكل المقالات ذات صلة نقوم بالتالي :
- قم بانشاء فارغ في مجلد القالب الذي تستعمله في موقعك باسم “yarpp-template-thumbnail.php”
- قم باضافة كود من الاكواد التي عرضنا فوق الى هذا الملف ثم احفظ التغييرات
- توجه الى اعدادات الاضافة Yet Another Related Posts
- ومن الاعدادات اختر عرض باستخدام قالب مخصص
اذا لم تظهر لك الاعدادات التالية فانت لم تقوم بنسخ الملف “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_Development#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 طريقة عمل الهاك كالتالي :
- قم بتحميل الهاك “custom-related-posts.php” وفك الضغط عن الملف ستجد ملف php باسم custom-related-posts.php
- قم برفع الملف الى مجلد القالب الذي تستعمل
- الان يجب عليك تعديل ملف عرض تدوينة منفردة (Single Post) المتواجد في القالب الذي تستعمل وهو single.php
- ابحث عن دالة عرض محتوى التدوينة 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
الى هنا نكون قد انتهينا من هذا الجزء المخصص للهاك
المقالات ذات صلة – اضافات مقترحة
توجد بعض الاضافت التي لها نفس دور الاضافة او الهاك الذي تحدثنا عنهم في هذه المقالة وهي :
- Related Posts Slider
- Related Posts Thumbnails
- Inline Related Posts
- Yuzo Related Posts
اذا كان هناك اي استفسار يرجى وضع تعليق ؟ ولا تنسى الاشتراك في قائمتنا البريدية ولك جزيل الشكر