كيف تعرض المواضيع ذات صلة مع صور في الووردبريس


مصنفة في قسم  : شروحات
كتبت بتاريخ  : 2 يوليو 2011
عدد المشاهدات  : 
عدد التعليقات  : 16 تعليق 

كيف تعرض المواضيع ذات صلة مع صور في الووردبريس

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

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

في هذا الشرح يجب التاكد من ان القالب الذي تستعمله يدعم مصغرات الصور وهناك طريقتين لاستعمالها :

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

وايضا هناك شيء يجب التأكد منه وهو الاسم المستعمل في حقل الخصائص مثلا :

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

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

المهم ساقوم بشرح طريقتين الاولى باستعمال الاضافة Yet Another Related Posts  او باستعمال هاك بسيط

الاضافة Yet Another Related Posts

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

الان ننتقل الى طريقة العمل وهذا الكود الخاص الذي سنتستعمل

<?php /*
Example template for use with post thumbnails
Requires WordPress 2.9 and a theme which supports post thumbnails
Author: mitcho (Michael Yoshitaka Erlewine)
*/ ?>
<h3>مواضيع ذات صلة :</h3>
<?php if ($related_query->have_posts()):?>
	<ol class="related-posts">
		<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
			<?php
				//Set Default Thumbnail Image URL's
				$related_thumbnail = get_post_meta($post->ID, "thumb", $single = true);
				$default_thumbnail = 'default-image.jpg';
			?>
			<li>
				<a href="<?php the_permalink() ?>" rel="bookmark">
				<?php if ($related_thumbnail != "") : ?>
					<img src="<?php echo $related_thumbnail; ?>" width="100" height="100" alt="<?php the_title(); ?>" />
				<?php else : ?>
					<img src="<?php echo $default_thumbnail; ?>" width="100" height="100" alt="<?php the_title(); ?>" />
				<?php endif; ?>
<br />
				<?php the_title(); ?></a>
			</li>
		<?php endwhile; ?>
	</ol>
<?php else: ?>
	<p>لا توجد اي مواضيع ذات صلة</p>
<?php endif; ?>

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

الان يجب عليك القيام بالتالي :

  1. تحميل الكود  الخاص بقالب المواضيع ذات صلة من هنا yarpp-template-thumbnail
  2. فك الضغط عنه
  3. لا تنسى التعديلات عليه اذا وجدت
  4. رفع الملف الى مجلد القالب الذي تستعمل في المدونة
  5. توجه الى اعدادات الاضافة Yet Another Related Posts
  6. ومن الاعدادات اختر عرض باستخدام قالب مخصص

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

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

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

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

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

بالنسبة لاستعمال الهاك لن يكون مثل الاضافة في مميزاته لانه فقط يعتمد على الاوسمة خلافا للاضافة Yet Another Related Posts Plugin لكن في الحقيقة احسن شيء هو ان نستعمل الهاكات وهذا الذي اخطط له في الايام القادمة عوضا عن استعمال كترة الاضافة نظرا للمشاكل التي تقع فيها بسبب بعض الاضافة وخطورتها ايضا وقد تحدث سابقا عن الاضافات المصابة بتغرات والتي قد تؤدي الى ضياع المدونة بسبب عدم الترقية من طرف صاحب المدونة او بسبب عدم وجود تحديث امني للاضافة او تحديث برمجي عادي من طرف المبرمج نرجع لموضوعنا الان وجدت احد الهاكات في موقع wprecipes.com وقمت ببعض التعديلات عليه لكي يشتغل مع مصغرات الصور

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

<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo '<h3>مواضيع ذات صلة :</h3><ol>';
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>4,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php
//Set Default Thumbnail Image URL's
$related_thumbnail = get_post_meta($post->ID, "thumb", $single = true);
$default_thumbnail = 'default-image.jpg';
?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ($related_thumbnail != "") : ?>
<img src="<?php echo $related_thumbnail; ?>" width="100" height="100" alt="<?php the_title(); ?>" />
<?php else : ?>
<img src="<?php echo $default_thumbnail; ?>" width="100" height="100" alt="<?php the_title(); ?>" />
<?php endif; ?>
<br />
<?php the_title(); ?></a></li>

<?php
endwhile; ?>
<?  }
}
?></ol>
ملحوظة بسيطة  قمت بتعديل بسيط على الهاك لمن واجهته مشكلة في استعماله وتغير طريقة الادراج لكي يتم استيعاب الطريقة بشكل واضح لمن لا يحسن التعامل مع ووردبريس

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

/wp-content/themes/اسم-قالب/single.php

طريقة عمل الهاك كالتالي :

  1. قم بتحميل الهاك من هنا related-post وفك الضغط عن الملف ستجد ملف php باسم related-post.php
  2. قم برفع الملف related-post.php الى مجلد القالب الذي تستعمل
  3. الان يجب عليك تعديل ملف عرض تدوينة منفردة (Single Post) المتواجد في القالب الذي تستعمل وهو single.php
  4. ابحث عن دالة عرض محتوى التدوينة the_content  بعد ايجادها قم بنسخ الكود اسفلها مباشرة في ملف single.php كما ترى في الكود التالي
<?php the_content(''); ?>
<?php include (TEMPLATEPATH . '/related-post.php'); ?>

لا تنسى ان يكون اسم الهاك كاسم الملف الذي استدعيناه اسفل the_content

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

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

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

Related Posts Slider

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

Related Posts Thumbnails

وهذه اضافة اخرى تمكنك من عرض المواضيع ذات صلة يمكن نغير استايلها من الاعدادات الخاصة بها

الى هنا نكون قد وصلنا الى نهاية هذه التدوينة

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

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

كيف تعرض المواضيع ذات صلة مع صور في الووردبريس بواسطة مجلة ووردبريس, يمكنك نقل ومشاركة التدوينة مع ذكر المصدر الأصلي للموضوع ، مع رابطه, والتدوينة مرخصة بموجب المشاع الابداعي Creative Commons A-NC-SA 3.0.

الوسوم : , , , , ,


عدد التعليقات على هذه التدوينة : 16 تعليق

  1. HaSsOoOn يوليو 2nd, 2011

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

    • admin يوليو 2nd, 2011

      العفو اخي العزيز

  2. عبدالله باخريصة يوليو 3rd, 2011

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

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

    • admin يوليو 3rd, 2011

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

  3. عبد الحفيظ يوليو 3rd, 2011

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

    • admin يوليو 3rd, 2011

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

  4. هارتلس أغسطس 31st, 2011

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

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

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

    شكرا لك

    • معاذ أغسطس 31st, 2011

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

  5. هارتلس أغسطس 31st, 2011

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

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

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

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

    • معاذ سبتمبر 1st, 2011

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

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

  6. الصور أكتوبر 25th, 2011

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

    • معاذ أكتوبر 26th, 2011

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

  7. stooph مارس 24th, 2012

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

    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}

    • معاذ مارس 24th, 2012

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

  8. ahmed casa مارس 26th, 2012

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

    بالتوفيق لك

    • معاذ مارس 28th, 2012

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


  • مجلة الوردبريس
    مارس 28th, 2012




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

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