بسم الله الرحمن الرحيم
وتنحل جميع مشاكل عدم ظهور الصور وغيرها من المشاكل
بعد أتباع الشرح وخطوات العمل بشكل صحيح .. رح تكون قادر على جلب أي صورة لموضوع ووضعه بالمكان ألي تختاره .. مثال :
ملاحظة:عدم ظهور الصور بالمدونة أنها تجريبية ولا توجد صور بالمواضيع
الطريقة تعتمد على التأسيس و أنشاء ملف php يحتوي على أوامر و أكواد تأخذ أول صورة من كل موضوع تلقائياً ..
بدون الحاجة لأضافة الحقول المخصصة أو عمل أي شي آخر ..
كل ما علينا هو كتابة الموضوع و هو سيتكفل بالباقي .. حتى المواضيع القديمة ستظهر صورها بالمصغرات
وبعد أتباع الخطوات والشرح التالي بدقة سنكون قادرين على جلب الصور المصغرة بأي مكان
بدون تعب فقط لصق الكود المصغر بالمكان المناسب
بسم الله نبدأ:
القاعدة الأولى في أي تعديل هي أخذ نسخة من الملف المراد تعديله ولصقها بالمفكرة للعودة لها لاحقاً في حال ظهرت المشاكل أثناء التعديل
1- يجب أنشاء ملف php و نسميه timthumb ونرفعه على مجلد القالب مباشرة وهذا الملف هو أساس العملية
وبتقدر تحمل الملف جاهز من .. هنا
أو تحميله من المرفقات
2- الحين يجب ربط الملف مع القالب نروح لملف functions.php الموجود
بالقالب و أذا ما هو موجود لازم تسوي واحد جديد و تسميه functions
بعدها ننسخ الكود التالي ولصقه ضمن الملف بالمكان المناسب
<div></div>
<pre dir="ltr">// 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</pre>
<pre dir="ltr">[/html]
حاتسألوني عن المكان المحدد في الملف لوضع الكود ؟؟
الجواب .. كل قالب بيختلف عن الآخر ومافي مكان محدد .. وما هي مشكلة مكان لصق الكود
المهم يقرأه الملف وما يعمل مشاكل في حال وضعه بالمكان الغير مناسب وهي مثال:
من أحد القوالب المعلم بالأخضر هو الكود :
<div></div>
<pre dir="ltr"><?php
$art_config = parse_ini_file(TEMPLATEPATH."/config.ini", true);
$options = array (
array( "name" => "HTML",
"desc" => sprintf(__(‘<strong>XHTML:</strong> You can use these tags: <code>%s</code>’, THEME_NS), ‘a, abbr, acronym, em, b, i, strike, strong, span’),
"id" => "art_footer_content",
"std" => art_option(‘footer.defaultText’),
"type" => "textarea")
);
require_once(TEMPLATEPATH . ‘/controlpanel.php’);
remove_action(‘wp_head’, ‘wp_generator’);
wp_enqueue_script(‘jquery’);
<span style="color: #008000;"> // 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 </span>
define(‘WP_VERSION’, $wp_version);
define(‘THEME_NS’, ‘kubrick’);
if (class_exists(‘xili_language’)):
define(‘THEME_TEXTDOMAIN’,THEME_NS);
define(‘THEME_LANGS_FOLDER’,’/lang’);
else:
load_theme_textdomain(THEME_NS, TEMPLATEPATH . ‘/lang’);
endif;</pre>
<pre dir="ltr">[/html]
الحين نكون أنتهينا من أهم الخطوات والتأسيس للمصغرات وصار فينا طلب الكود لأي مكان
3- الخطوة الثالثة .. هي كود لجلب المصغرات ننسخه ونلصقه بأي مكان نرغب في ظهور المصغرة وظيفة هالكود هي جلب أول صورة من كل موضوع
<pre dir="ltr"><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>
<?php endwhile; ?>
</div></pre>
<pre dir="ltr">[/html]
طبعاً منقدر نتحكم بحجم الصورة بس أنا بفضل يكون في نموذج css معين بأسلوب جميل
لهيك .. نعمل نموذج css
4- الخطوة الأخيرة نموذج css و هي نموذج لنفس المصغرات الظاهرة بالصورة ممكن تعدله عليه بالأحجام والألوان ونقطة المركز … طبعاً ننسخه ونلصقه بملف style
<pre dir="ltr">.rblock{
height:60px;
width: 100px;
margin:10px 29px 10px 10px;
padding:5px 5px;
float:right;
background:#1f1d1b;
border:1px solid #333333;
}</pre>
<pre dir="ltr">[/html]
الحين أصبح كل شي جاهز فقط علينا طلب كود المصغرات للمكان الذي نرغب به
و حيكون الكود الكامل لجلب الصور المصغرة معcss بهالشكل:
<pre dir="ltr"><div>
<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></pre>
<pre dir="ltr">[/html]
المعلم بالون الأخضر هو نموذج الـ css بنقدر نسوي أكثر من نموذج
بشرط تغير الأسم مثال: الموجود بالنموذج rblock في حين رغبتم بأنشاء ستايل ثاني يسمى مثلاً:
rblock1 أو rblock2 أو أي أسم تختارونه بحث يتوافق مع كود جلب الصورة المصغرة وبتقدروا التحكم بمقاس الصورة من الأرقام للعرض و الأرتفاع المعلم باللون البرتقالي أو الأفضل من css
وهي بعض الأمثلة:
لجلب صور مصغرة للمواضيع بنلصق الكود بملف index وarchive
قبل كود( أكمل قراءة المذيد) بهالمكان مثلاً .. وليس حصراً لأختلاف القوالب:
ورح نشوف بعده أن جميع المواضيع الموجود فيها صور ظهرت المصغرة بالموضوع على الصفحة الرئيسية و ليس التدوينة المفردة حتى المواضيع القديمة حاتظهر صورها بدون أي حقول مخصصة
مثال آخر لجلب صور المواضيع من خلاصة rss
بنلصق هالكود بالمكان المناسب أي مكان نرغب به .. الكود الكامل شامل كود الخلاصة:
<pre dir="ltr"><?php
$my_query = new WP_Query(‘orderby=rand &showpost=6′);
while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>
<div>
<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>
<?php endwhile; ?>
</div></pre>
<pre dir="ltr">[/html]
بعد لصق الكود بالمكان المناسب حاتظهر 6 صور عند التحويم فوق الصور بالموس حايظهر عنوان الموضوع وعند الضغط على الصورة حايكون رابط للموضوع الأصلي للصورة
بأمكاننا التحكم بعدد الصور بتغير الرقم 6 المعلم بالأحمر لأي رقم نرغب به
مثال آخر: لأحدث المواضيع الكود الكامل :
<pre dir="ltr"><?php
$my_query = new WP_Query(‘showposts=6′);
while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>
<div>
<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>
<?php endwhile; ?>
</div></pre>
<pre dir="ltr">[/html]
وعلى هذا المنوال .. ستكون الصور المصغرة موجودة بأي وقت تطلب به ..
بدون غم و هم .. وحالات النسيان والقرف من الحقول المخصصة
و للتعديل على صور السلايد شو التي تحتاج لحقول مخصصة كل ما علينا عمله .. هو حذف الكود المخصص لجلب الصور .. ونستطيع البحث عن الكود من أسم مفتاح الحقل المخصص ونلصق مكانه كود الصورة فقط بدون نموذج الـ css بهذا الشكل :
<pre dir="ltr"><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></pre>
<pre dir="ltr">[/html]
و الأنتباه .. مراعاة عدم حذف شيئ آخر مثل كود جلب المقتطف و الحذر يجب أخذ نسخة من أي ملف نقوم بالتعديل عليه نفادياً لأي كارثة بحذف أكواد خاطئة
أتمنى يكون الشرح واضح و الطريقة مفيدة للجميع
بالتوفيق
