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

آخر تحديث 30 ديسمبر 2016بواسطة - wait... مشاهدة/ 16 تعليق
كيف تعرض المقالات ذات صلة مع الصور البارزة

السلام عليكم ورحمة الله وبركاته

في هذه التدوينة سنتطرق لطريقة عرض المقالات ذات صلة والتي تعتمد اما على التشابه في العنواين او الأوسمة, اي انه كلما كانت هناك مقالات لها نفس بعض الكلمات في العنوان كلما كانت لها صلة وايضا بالنسبة للأوسمة نفس الامر الان ندخل في صلب الموضوع ساقوم بشرح طريقتين الاولى بواسطة الاضافة 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; ?>

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

بعد الانتهاء من تحضير الملف المسؤول عن شكل المقالات ذات صلة نقوم بالتالي :

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

لاحظ الصورة التالية :

اضافة المقالات ذات صلة
اذا لم تظهر لك الاعدادات التالية فانت لم تقوم بنسخ الملف “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{

}

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

هاك عرض المقالات ذات صلة

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

الكود له نفس الطريقة التي استعملتها لقالب الاضافة YARPP يعني نفس الشيء بالنسبة للصور البارزة وهذه النتيجة الاخيرة للهاك

/*
 * 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();
ملحوظة بسيطة  قمت بتعديل بسيط على الهاك لمن واجهته مشكلة في استعماله وتغير طريقة الادراج لكي يتم استيعاب الطريقة بشكل واضح لمن لا يحسن التعامل مع ووردبريس

الملف الذي سنشتغل عليه يكون متواجد على المسار التالي :

/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'); ?>

لا تنسى ان يكون اسم الهاك كاسم الملف الذي استدعيناه اسفل 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{

}

الى هنا نكون قد انتهينا من هذا الجزء المخصص للهاك

المقالات ذات صلة – اضافات مقترحة

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

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

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

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

والسلام عليكم ورحمة الله وبركاته

كيف تعرض المقالات ذات صلة مع الصور البارزة بواسطة مجلة ووردبريس, يمكنك نقل ومشاركة التدوينة مع ذكر المصدر الأصلي للموضوع ، مع رابطه, التدوينة مرخصة بموجب المشاع الابداعي Creative Commons A-NC-SA 3.0.
2011-07-02T20:16:20+00:00
2016-12-30T09:37:00+00:00

التعليقات16 تعليق

  • HaSsOoOn

    مشكور ماتقصر وكثر الله من أمثالك.

  • عبدالله باخريصة

    رائع أخي الكريم.. بصراحة أنا حاولت بس ما نجحت معي، هي تحتاج شخص أكثر مني يفهم في البرمجة.

    شكرا جزيلا لك،،،،

    • admin

      العفو اخي العزيز بس بعد الاطلاع على مدونتك اظنها لا تستعمل مصغرات الصور
      ولازم انك تكون تستعملها اذا تبي الصور تظهر
      على فكرة الامر سهل ولا يحتاج مجهود كبير اذا كنت محتاج مساعدة راسلني فقط

  • عبد الحفيظ

    رائع للغاية ، بورك فيك ، طولت الغياب هذه المرة
    ننتزر جديدك و شروحاتك في هذا الصيف الحار
    سلامي لك

    • admin

      الله يبارك فيك اخي العزيز عبد الحفيظ والله الغياب كان بسبب امتحانات الباكلوريا الحرة ولو اني ما اظن في شيء يحمر الوجه
      المهم انا الان متفرغ للمدونة وراح اعمل شروحات باذن الله تكون مفيدة ان شاء الله

  • هارتلس

    مجهود يشكر عليه عزيزي معاذ

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

    الحقول ذات 36 سطر ما فائدتها و أين اضيفها ؟
    ممكن توضح ابحث عن the_content وقم باستدعاء ملف الهاك اسفل كالتالي ؟

    شكرا لك

    • معاذ

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

  • هارتلس

    كم انت رائع عزيزي معاذ
    اهتمام و تنسيق رائع

    اتضحت الصورة الآن بشكل كبير و آخر استفسار ومن ثم اقوم بالعمل :

    قم برفع الملف related-post.php الى مجلد القالب الذي تستعمل
    تقصد ارفعه إلى مجلد Plugin او مجلد Theme
    لاني رفعته على مجلد plugin ولم يحدث شيء

    عزيزي معاذ احتاج إلى تعديل في مدونتي بعض الامور فهل انت تعمل كدعم فني حتى لو تقبض ثمن اتعابك

    • معاذ

      لا قم برفه الى مجلد القوالب themes وبالضبط الى مجلد القالب الذي تستعمل
      انا وضعت مثال على مسار القالب
      المهم قمت بزيارة موقعك هذا مسار مجلد القالب
      /wp-content/themes/HeartLess/

      راسلني اخي العزيز اذا تحتاج تعديل

  • الصور

    هل يا غالي ينفع تبقى الاضافة بدون تعديلات

    • معاذ

      لك حرية الاختيار اخي العزيز

  • stooph

    أخي معاد تفسير ممتاز
    فقط أريد منك تفسير صغير لم أفهم ملف التنسيق أين أضع بالضبط الستايل التالي :

    1 ol.related-posts {clear:both; text-align:center; margin:10px 10px 0px 0px; padding:0;border:none}
    2 ol.related-posts li{width:130px; float:right; display:inline; margin-left:10px; padding-left:5px;border:none}
    3 ol.related-posts img{clear:both; padding:5px; background:#fff; border:1px solid #DDD;}
    4 ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
    5 ol.related-posts li{font-size:12px;border:none}

    • معاذ

      ستجد ملف باسم style.css
      في مجلد القالب الرئيسي
      قم فتحه باي محرر واضف التنسيق في اسفل الملف style.css
      هذا كل شيئ

  • ahmed casa

    أخي الغالي ماذا يجب فعل في السطر رقم 13 عوض default-image.jpg كي تشتغل صور المصغرات

    بالتوفيق لك

    • معاذ

      السطر 13 فقط اذا لم توجد صورة مصغرة لتدوينة ستعرض تلك الصورة لكن يجب عليك رفعها الى المجلد الرئيسية لمدونة

أضف تعليقاً

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


شروط التعليق :

1 - المرجوا الابتعاد عن كتابة تعليقات بنمط (يعطيك العافية)، (روعة)، (ممتاز)، (مشكوووور)، (ابداع).

2 - زاوية التعليقات هي جزء مكمّل للموضوع الذي قرأته للتو. حاول أن تحصر تعليقك في صلب الموضوع حتى نستثمر هذا التعليق لكسب المزيد من الفائدة سواءً عن طريق مناقشة الموضوع أو عن طريق إضافة معلومات مكمّلة أو إبداء ملاحظات أخرى في نفس السياق.

معاذ أشملي مشرف موقع (212) 689-383-644 المغرب webmaster@mwordpress.net