استبعاد صفحة من القائمة العلوية – YourColor

الووردبريس wp

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

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

طريقة الاولى للقوالب التي لا تدعم القوائم

اول شيء يجب معرفة رقم ال post تبع الصفحة وهنا سوف اقوم بشرح طريقة الحصول عليه نتوجه الى قائمة الصفحات من لوحة التحكم  وبعد ذاك نقوم بالتالي

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

http://yoursite.com/wp-admin/post.php?post=245&action=edit

الرقم باللون الاحمر هو الذي سوف نحتاج في عملنا هذا

الان سوف نقوم بتعديل الترويسة (header.php) اول شيء ابحث عن الكود التالي في الترويسة

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>

قم بتغيره بالكود التالي :

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=&exclude=245‘); ?>

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

مثال على موقعي :

ملاحظة :

 اذا اردت ان تقوم باستبعاد العديد من الصفحات قم بالتالي

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=&exclude=page1,page2,page3‘); ?>

لاحظ كيف تم ادراج الفواصل بين كل صفحة و الاخرى

الطريقة الثانية للقوالب التي تدعم القوائم

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

<?php wp_nav_menu( array(´container´ => ´´, ´container_class´ => ´´, ´menu_class´ => ´´, ´sort_column´ => ´menu_order´, ´theme_location´ => ´secondary´ ) ); ?>

في هذه الحالة لن نقوم بتغيير اي شيء في هذا الكود فقط سنقوم بالخطوات التالية :

نتوجه الى القوائم من قائمة المظهر :

 

بعدها نقوم بانشاء قائمة قم باعطائها اي اسم :

بعد انشاء القائمة سوف تظهر لك المربع الجانبي التالي :

هنا المربع يحتوي على الامكان التي تستعمل القوائم مثلا اختر المكان main menu واختر بعدها اسم القائمة التي قمت بانشائها وقم بالحفظ, المهم الان ستجد في الاسفل مربعين اختر اما التصنيفات او الصفحات المهم قمت باخد المربع الخاص بالتصنيفات وهو بالشكل التالي:

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

المهم هنا سوف تلاحظ اضافة التصنيفات التي اردتها ان تظهر فقط في القائمة لا تنسى ان تقوم بحفظ القائمة

الى هنا انتهينا من شرح هذه الطريقة البسيطة والى اللقاء في شروحات اخرى واتمنى ان تستفيدوا من هذا الشرح

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

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

الاكاديمية العربية لفنون التصميم و الجرافيك

مصغرات الصور و سكريبت TimThumb في الووردبريس – YourColor

وورد بريس wp

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

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

تحميل سكريبت TimThumb

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

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

http://sitename.com/wp-content/themes/your-theme-name/timthumb.php

لا تقم بتغيير اي شيئ في هذا الملف فقط قم برفعه الى مجلد القالب الذي تستعمل

اضافة تنسيق لسكريبت TimThumb

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

وهذا كود التنسيق نضيفه الى ملف التنسيق (style.css) للقالب :

.homethumb {
float: right;
margin:0px 5px 0px 5px;
height:100px;
width:100px;
padding:3px;
	background: #f3f3f3;
	border:1px solid #ddd;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;}

بالنسبة لهذا التنسيق الزوايا ذات استدارة بسيطة اما اذا رغبت في ان تأخد الزوايا شكل طبيعي فقم بإستعمل التنسيق التالي :

.homethumb {
float: right;
margin:0px 5px 0px 5px;
height:100px;
width:100px;
padding:3px;
	background: #f3f3f3;
	border:1px solid #ddd;
}

ادراج سكريبت TimThumb في القالب :

نفتح ملف الصفحة الرئيسية لقالب (index.php) ونبحث عن وسم العنوان غالبا ما يكون الكود على هذا الشكل :

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="الرابط الدائم لـ <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

حتى نبسط الامر عليك ابحث فقط على الكود التالي :

<?php the_permalink() ?>

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

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

<?php if( get_post_meta($post->ID, "thumb", true) ): ?>
<div class="homethumb"> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo(´template_directory´); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a> </div>
<?php else: ?>
<?php endif; ?>

او بمعنى أخر نقوم بوضع الكود قبل الكود التالي مباشرة :

<?php the_content(); ?>

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

ملحوظة : في كود ادراج سكريب TimThumb اذا لاحظت جيدا سترى انه يوجد قيمتين لطول والعرض ولا تنسى تنسيق الطول والعرض كذالك لسكريبت (TimThumb) في ملف التنسيق (style.css)

مثال للقيمتين :

h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="100"

القيمة الاولى : h=150&w=150&zc=1
القيمة الثانية : width=”100″ height=”100″

انشاء مجلد الكاش

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

http://sitename.com/wp-content/themes/your-theme-name/cache/

بعد انشاء المجلد قم باعطائه التصريح 777 عن طريق ftp او لوحة التحكم الموقع (cpanel) مثلا

طريقة استعمال الصور المصغرة

بعد كتابة التدوينة قم برفع صورة التي تريد ان تظهر بجانب التدوينة

الان يجب اضافة حقل مخصص في الخصائص الاضافية هكذا :

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

الى هنا نكن قد انتهينا من طريقة ادراج الصور المصغرة بواسطة السكريبت والى اللقاء في تدوينة جديدة انشاء الله

اذا كان هناك اي استفسار يرجى وضع تعليق

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

الاكاديمية العربية لفنون التصميم و الجرافيك

كيف تعرض مواضيعك الاكثر شعبية مع مصغرات الصور في الووردبريس – YourColor

الووردبريس wp

 

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

 

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

 

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

 

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

 

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

 

طريقة العرض باستعمال مصغرة للتدوينات

بالنسبة لطريقة العرض بواسطة ميزة مصغرة التدوينة (الصورة البارزة) نقوم بلصق الكود التالي في القائمة الجانبية (sidebar.php) في اي مكان تريد ظهور المواضيع الاكثر شعبية :

<div style="list-style-type:none;padding-right:4px;">
 <?php
 $pop_posts = 5;
 $popularposts = "SELECT $wpdb->posts.ID, $wpdb->posts.post_title,&nbsp; COUNT($wpdb->comments.comment_post_ID) AS ´stammy´ FROM $wpdb->posts, $wpdb->comments WHERE comment_approved = ´1´ AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = ´publish´ AND comment_status = ´open´ GROUP BY $wpdb->comments.comment_post_ID ORDER BY stammy DESC LIMIT ".$pop_posts;
 $posts = $wpdb->get_results($popularposts);
 if($posts){
 foreach($posts as $post){
 $post_title = stripslashes($post->post_title);
 $guid = get_permalink($post->ID);
 $thumb = get_post_meta($post->ID,´_thumbnail_id´,false);
 $thumb = wp_get_attachment_image_src($thumb[0], ´post-thumbnail´, false);
 $thumb = $thumb[0];
 ?>
 <div>
 <?php if ($thumb) { ?>
 <img src="<?php echo $thumb; ?>" width="40" height="40" />
 <?php } ?>
 <div><a href="<?php echo $guid; ?>" title="<?php echo $post_title; ?>"><?php echo $post_title; ?></a></div>
 <div></div>
 </div>
 <?php
 }
 }
 ?>
</div>

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

 

طريقة العرض باستعمال timthumb

بالنسبة لطريقة العرض باستعمال السكريبت timthumb فقم باستعمال الكود التالي داخل القائمة الجانبية :

<div style="list-style-type:none;padding-right:4px;">
 <?php
 $pop_posts = 5;
 $popularposts = "SELECT $wpdb->posts.ID, $wpdb->posts.post_title,&nbsp; COUNT($wpdb->comments.comment_post_ID) AS ´stammy´ FROM $wpdb->posts, $wpdb->comments WHERE comment_approved = ´1´ AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = ´publish´ AND comment_status = ´open´ GROUP BY $wpdb->comments.comment_post_ID ORDER BY stammy DESC LIMIT ".$pop_posts;
 $posts = $wpdb->get_results($popularposts);
 if($posts){
 foreach($posts as $post){
 $post_title = stripslashes($post->post_title);
 $guid = get_permalink($post->ID);
 ?>
 <div>
 <img src="<?php bloginfo(´template_directory´); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;w=40&amp;h=40&amp;zc=1&amp;q=100" alt="<?php the_title(); ?>" />
 <div><a href="<?php echo $guid; ?>" title="<?php echo $post_title; ?>"><?php echo $post_title; ?></a></div>
 <div></div>
 </div>

 <?php
 }
 }
 ?>
</div>

 

تنسيق طريقة عرض المواضيع الاكثر شعبية

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

.popular-post {margin-bottom: 5px;padding-bottom:5px; margin-left:5px;}
.popular-post .alink {float:none; padding-top:12px; }
.popular-post img {float: right; margin: 4px 4px 0 8px; border:1px solid #ddd;padding:2px;}
.popular-post  .clear {clear: both;}

اذا كان هناك اي استفسار يرجى وضع تعليق

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

الاكاديمية العربية لفنون التصميم و الجرافيك

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

الووردبريس wp

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

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

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

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; ?>
<?&nbsp; }
}
?></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

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

الى هنا نكون قد وصلنا الى نهاية هذه التدوينة اذا كان هناك اي استفسار يرجى وضع تعليق

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

الاكاديمية العربية لفنون التصميم و الجرافيك