سوف اتحدث هنا عن خاصية جديدة فى اصدار الوورد بريس 2.9 والأحدث وهى Post Thumbnails او ” مصغرة للتدوينات”، فنجد أن معظم قوالب الوورد برس وخاصة التى تكون على شكل مجلة تعرض بجانب كل تدوينة صورة مصغرة، ومعظم هذه القوالب قبل هذا الاصدار تحتاج فيها لاضافة حقل مخصص به عنوان الصورة التى تريد ظهورها، ولكن مع الاصدار الجديد من الوورد بريس 2.9 تم اضافة ميزة تسمح لك بتعين صورة مصغرة لكل تدوينة Post Thumbnails، وفائدة هذه الميزة انه بدلاً من اضافة حقل مخصص يختلف اسمه من قالب الى اخر مما يرهقك عندما تقوم بتغير القالب بتعديل فى قيمة الحقل المخصص وبذلك فهذه الميزه توفر الوقت لأن معظم القوالب التى سوف يتم انشائها الان سوف تستخدم هذه الميزة كما انه لايصيبك القلق عند التغير من قالب إلى اخر ولكى تتمكن من استخدام هذه الميزة (مصغرة للتدوينات) اتيع هذه الخطوات .
الخطوة الأولى : – التعديل فى ملف Function.php
الأن قم بفتح ملف function.php الموجود مع القالب وقم باضافة الكود التالى وبدون هذا الكود لن يظهر مربع مصغرة للتدوينات إلا إذا كانت هذه الدالة موجودة فى ملف function.
add_theme_support('post-thumbnails');
بينما إذا أردت أن تتاكد من أنه سوف يتم استدعاء هذه الدالة function فقط إذا كان المستخدم يعمل على wordpress2.9 او الأحدث فقم بكتابة هذا الكود .
if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' );
الخطوة الثانية :- اضافة الصورة المصغرة لكل تدوينة
بعد أن تنفذ الخطوة السابقة سوف تجد فى محرر وورد برس الخاص باضافة تدوينة جديدة مربع جديد باسم مصغرة للتدوينات ويوجد بداخله رابط باسم “مجموعة مصغرة” قم بالضغط عليه وقم برفع أو أختيار الصورة التى تريد ظهورها بجانب كل تدوينة ثم اضغط على استخدام كمصغرة .
الخطوة الثالثة :- عرض الصورة المصغرة فى القالب
الأن سوف نقوم باستخدام الوسوم tag الخاص بظهور الصورة المصغرة فى القالب وغالباً ما يتم اضافة هذا الوسوم فى ملف index.php وفى هذا الكود يتم عرض الصورة المصغرة بابعادها الافتراضية (الطول-العرض) دون تغير فى الحجم .
1 | <?php the_post_thumbnail(); ?> |
بينما اذا اردت أن تتأكد من أن التدونية تحتوى على صورة مصغرة قبل كتابة كود HTML فقم بكتابة هذا الكود يدلاً من السابق .
<?php
if ( has_post_thumbnail() ) { ?>
<span class="my_image">
<?php the_post_thumbnail(array(600, 400)); ?>
</span>
} ?>الخطوة الرابعة : التعامل مع حجم الصورة المصغرة
هنالك ثلاث أنواع للتعامل مع حجم الصورة المصغرة معرفة فى الوورد بريس large -medium – default . ان الحجم الافتراضى default للصورة المصغرة هنا هو حجمها الاصلى دون تصغير .
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php the_post_thumbnail( 'large' ); ?>
بينما اذا اردت من تعديل حجم الصورة المصغرة فسوف نستخدم مصفوفة العنصر الأول يمثل العرض والعنصر الثانى يمثل الارتفاع كما أن class = “alignleft”. هى class موجودة فلى ملف css لتعين خصائص الصورة .
<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>
الخطوة الخامسة : التعامل مع الصورة المصغرة فى ملف css
فى ملف css قم بكتابة class باسم .wp-post-image وحدد فيها الخصائص التى تريد تطبيقها على الصورة وذلك اذا لم تقم بتعين Class للصورة المصغرة.
.wp-post-image { float:left; padding:3px 3px; margin: 0px 5px 5px 7px; background:#2F4C5F; }
كما يمكنك تعريف class جديدة للتعامل مع الصورة المصغرة وفى هذه الحالة سوف تكتب الكود الخاص بظهور الصورة كالتالى.
<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>
وفى ملف css الخاص بالقالب سوف تضيف الفئة class alignleft
.alignleft { float:left; padding:3px 3px; margin: 0px 5px 5px 7px; background:#2F4C5F; }
إذا أردت المزيد من التفاصيل فأقرأ ايضاً :
- Post Thumbnail
- Using The New Post Thumbnail Feature In WordPress 2.9
- Post Thumbnails in RSS feeds
- Everything you need to know about WordPress 2.9’s post image feature
- The Ultimative Guide For the_post_thumbnail In WordPress 2.9
- About WordPress Post Thumbnail
- screencast-on-how-to-add-thumbnails
برغم إستخدامى طريقة أخرى وهى تعتمد على الخصائص الإضافية إلى أن فعلا تلك الطريقة أسهل كثيراً وأفضل من وجهة نظرى .. شكرا لك على تلك المقاله المفيده
شكراً لك اخى الكريم وأرجو أن اكون وفقت فى الشرح
رااائع جدا اخي بدي اجرب ما قلته الان ولكن اريد التأكد أن هذه الأكواد
لن تؤثر في عمل الاستايل الذي أستخدمه ،،، بامكانك مشاهدته من هنا
http://www.taif-a.com/ta
اخى العزيزى قم فقط بأخذ نسخة من السطر الخاص بظهور صورة صغيرة بجانب كل تدونية ثم احذفه وع هذا السطر مكانه
< ?php the_post_thumbnail(array( 200,200 ), array( 'class' => ‘alignleft’ )); ?>
طبعاً alignleft قد تكون اى class موجودة فى ملف css خاصة بتنسيق الصورة المصغرة وبالتوفيق
رائع
جزاكم الله خيرا
شكرا لك اخى امجاد
ملحوظه بسيطة اخى مصطفى
لم تذكر بالشرح اين توضع الاكواد بالتحديد
مثلا انت ذكرت ان الكود يوضع فى ملف xx و لكن اين بالتحديد داخل هذا الملف كى نتمكن من التعديل الصحيح
بارك الله بك
عزيزى هذا الدرس اذا كنت سوف تقوم بانشاء قالب جديد او تحديث قالب قديم، فى الخطوة الاولى يتم وضع الكود فى ملف functions.php بينما فى الخطوة الثالثة او الرابعة فيتم وضعه فى ملف index.php بداخل كود التكرار وكذلك من الممكن وضعه فى اى ملف من ملفات الوورد بريس يكون هناك loop
السلام عليكم ..
اولا احب اشكرك على الجهود ومن جد استفد كثير من مواضيعك
..
انا عندي مشكله بسيطه :
الصور المصغره تطلع بجانب المدونه في الصفحه الرئيسيه فقط اما داخل التصنيف لا تظهر بجانب المدونه
ما المشكله ؟
عزيزى المشكلة فى القالب ان صفحة الارشيف او التصنيف حسب القالب المستخدم لم يتم فيها اضافة كود ظهور المصغرة تحتاج أن تقوم ببعض التعديلات
مشكور على سرعة الاستجابة
اخوي انا استخدم القالب الموجود على هذا الرابط
http://www.wparabia.com/?p=937
داخل التصنيف يظهر لي مربع اسود لكن لا تظهر الصوره داخل المربع
مع العلم انها ظاهره في الصفحه الرئيسية
اخى العزيز تاكد من وجود الصور فربما تم حذف الصور القديمة
اخي في قالب Arras Theme
عن اختيار عرض المدونه .. بالعرض السريع Quick preview تختفي الصوره ويبان مكانها في المربع خالي باللون الاسود ..
لكن عن اختيار عرض Node Based تظهر الصور بجانب التدوينات
الصوره توضح
http://www9.0zz0.com/2010/08/15/01/861706290.jpg
وهذي الصوره الي باين فيها المشكله
http://www9.0zz0.com/2010/08/15/01/625014216.jpg
جزاك الله خير على اهتمامك
اخى عبد الله قم بوضع رابط الموقع حيث أن الصور تظهر عندى
اخي مع الاسف انا اشتغل على السيرفر الاباتشي
لو انا رافع الموقع كان من زمان اعطيك الرابط عشان يكون واضلح لك
اخى عبدالله لم اجرب القالب على سيرفر محلى ولكن لاتقلق على عمل القالب على سيرفر حقيقى فان شاء الله يعمل بكفائة
يعطيك العافيه اخي
ولي عوده للتطبيق بأذن الله
تحياتي
مشكور اخى يوسف ويارب ينال القالب اعجابكم