مشاكل خصائص ملف القالب – YourColor

وورد بريس wp

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

في هذه التدوينة سنتحدث عن طريقة ادراج الهاكات في ملف خصائص القالب (function.php) لتفادي الكثير من المشاكل وهي طريقة بسيطة لا تحتاج الا بعض التدقيق في الدوال

نفتح ملف خصائص القالب نقوم بادراج هذا الهاك مثالا :

function autoblank($text) {
$return = str_replace(´<a href=´, ´<a target="_blank" href=´, $text);
$return = str_replace(´<a target="_blank" href="http://example.com´, ´<a href="http://example.com´, $return);
$return = str_replace(´<a target="_blank" href="#´, ´<a href="#´, $return);
$return = str_replace(´ target="_blank">´, ´>´, $return);
return $return;
}
add_filter(´the_content´, ´autoblank´);
add_filter(´comment_text´, ´autoblank´);

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

قسم الدالة :

function autoblank($text) {
$return = str_replace(´<a href=´, ´<a target="_blank" href=´, $text);
$return = str_replace(´<a target="_blank" href="http://example.com´, ´<a href="http://example.com´, $return);
$return = str_replace(´<a target="_blank" href="#´, ´<a href="#´, $return);
$return = str_replace(´ target="_blank">´, ´>´, $return);
return $return;
}

قسم اضافة الفلترة :

add_filter(´the_content´, ´autoblank´);
add_filter(´comment_text´, ´autoblank´);

لدينا في ملف خصائص القلب الخاص بنا مثلا دالتين بهذا الشكل :

function the_more($more_link_text = ´Read More´, $stripteaser = 0, $more_file = ´´) {
	$content = get_the_more($more_link_text, $stripteaser, $more_file);
	echo $content;
}
function get_the_more($more_link_text = ´Read More´, $stripteaser = 0, $more_file = ´´) {
	global $id, $post, $more, $single, $withcomments, $page, $pages, $multipage, $numpages;
	global $preview;
	global $pagenow;
	$output = ´´;

	$content = $pages[$page-1];
	if ( preg_match(´/<!--more(.+?)?-->/´, $content, $matches) ) {
		$content = explode($matches[0], $content, 2);
		if ( !empty($matches[1]) && !empty($more_link_text) )
			$more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));
	} else {
		$content = array($content);
	}
	if ( count($content) > 1 ) {
		if ( $more ) {
			$output .= ´<a id="more-´.$id.´"></a>´.$content[1];
		} else {
			$output = balanceTags($output);
			if ( ! empty($more_link_text) )
				$output .= ´ <a href="´. get_permalink() . "" class="more-link">$more_link_text</a>";
		}

	}
	if ( $preview ) // preview fix for javascript bug with foreign languages
		$output =	preg_replace(´/%u([0-9A-F]{4,4})/e´,	"´&#´.base_convert(´\1´,16,10).´;´", $output);

	return $output;
}

لاحظ معي اين ساضع قسم الدالة

function the_more($more_link_text = ´Read More´, $stripteaser = 0, $more_file = ´´) {
	$content = get_the_more($more_link_text, $stripteaser, $more_file);
	echo $content;
}

function autoblank($text) {
$return = str_replace(´<a href=´, ´<a target="_blank" href=´, $text);
$return = str_replace(´<a target="_blank" href="http://example.com´, ´<a href="http://example.com´, $return);
$return = str_replace(´<a target="_blank" href="#´, ´<a href="#´, $return);
$return = str_replace(´ target="_blank">´, ´>´, $return);
return $return;
}

function get_the_more($more_link_text = ´Read More´, $stripteaser = 0, $more_file = ´´) {
	global $id, $post, $more, $single, $withcomments, $page, $pages, $multipage, $numpages;
	global $preview;
	global $pagenow;
	$output = ´´;

	$content = $pages[$page-1];
	if ( preg_match(´/<!--more(.+?)?-->/´, $content, $matches) ) {
		$content = explode($matches[0], $content, 2);
		if ( !empty($matches[1]) && !empty($more_link_text) )
			$more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));
	} else {
		$content = array($content);
	}
	if ( count($content) > 1 ) {
		if ( $more ) {
			$output .= ´<a id="more-´.$id.´"></a>´.$content[1];
		} else {
			$output = balanceTags($output);
			if ( ! empty($more_link_text) )
				$output .= ´ <a href="´. get_permalink() . "" class="more-link">$more_link_text</a>";
		}

	}
	if ( $preview ) // preview fix for javascript bug with foreign languages
		$output =	preg_replace(´/%u([0-9A-F]{4,4})/e´,	"´&#´.base_convert(´\1´,16,10).´;´", $output);

	return $output;
}

تم وضع قسم الدالة بين الداتين في ملف خصائص القالب . بالنسبة لقسم اضافة الفلترة نتوجه اسفل القالب الى ان نجد اي فلترة واضفها اسفلها مباشرة او قبلها مثال :

add_action(´admin_menu´, ´mytheme_add_admin´); ?>
add_filter(´the_content´, ´autoblank´);
add_filter(´comment_text´, ´autoblank´);

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

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

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

كيف تعرض المواضيع ذات صلة مع صور في الووردبريس – 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

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

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

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

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

اضافة مصغرات الصور لووردبريس تلقائيا بدون حقل الخصائص – YourColor

الووردبريس wp

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

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

في هذا الشرح سنستعمل السكريبت timthumb وقد تحدثنا سابقا عنه في هذه التدوينة كيف تضع مصغرات الصور و سكريبت TimThumb في مدونة الووردبريس وايضا سنستعمل هاك ليساعدنا في هذا الشرح والهاك من موقع WpRecipe get the first post image

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

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

قم بتحميل سكريبت timthumb من هنا وضعه في مجلد القالب الذي تود ادراج الصور المصغرة به (TimThumb) او قم بانشاء ملف فارغ باسم timthumb.php وانسخ وانسخ الكود داخله وقم بحفظ الملف

اضافة الهاك لملف خصائص القالب functions.php

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

<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, ´<img´);
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, ´<img´, $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, ´>´);
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;

$cleanF = strpos($image[$num],´src="´)+5;
$cleanB = strpos($image[$num],´"´,$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
if(stristr($image[$num],´<img´)) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

اضافة كود مصغرات الصور

هنا سنقوم بادراج الكود الذي سيعرض الصور المصغرة في الصفحة الرئيسية. افتح ملف Index.php او home.php على حسب ملفات القالب يجب ادراج الكود داخل the_loop لكي يتم عرضه بشكل جيد بدون مشاكل ويستحسن ان تضعه فوق the_conten وهذا الكود

<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php bloginfo(´template_directory´); ?>/timthumb.php?src=<?php getImage(´1´); ?>&w=150&h=150&zc=1">
</a>
</div>

هذا الكود سيقوم بانشاء صورة بمقاس 150×150 بيكسل اذا اردت تغير المقاس فما عليك سوى تغيير ‘w’ و ‘h’ من الكود يرجى مراجعة التدوينة كيف تضع مصغرات الصور و سكريبت TimThumb لانه يجب انشاء مجلد cache داخل مجلد القالب واعطائه الصريح 777 او 755 احسن في حالة لم تظهر الصور

اضافة تنسيق لملف الاستايل

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

.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

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