سلام

از وردپرس ۲٫۹ یک امکان خیلی خوب به وردپرس اضافه شد و اون امکان اضافه کردن تصاویر بندانگشتی (یا همون thumbnail) به پست ها بود که از خیلی وقت پیش کلی راه کار و پلاگین براش ارائه شده بود و خب نیازش واقعن حس میشد.

در دو مطلب میخواهیم دو تا کار ساده انجام بدیم ، یکی اینکه تصاویر بندانگشتی رو به قالبمون اضافه کنیم و دو اینکه یاد بگیرم چطوری یک اسلایدشو از این تصاویر در قسمتی دلخواه از وبلاگمون قرار بدیم تا از یک دسته ی خاص ، تصاویر بند انگشتی تعدادی مشخص مطلب رو بگیره و اونارو با یک افکت زیبا و با قدرت جی کوئری نمایش بده

۱- افزودن امکان نمایش thumbnail به قالب وبلاگ

اولین کاری که باید بکنیم (و امکانش از ورژن ۲٫۹ به وردپرس اضافه شده) اینه که به وردپرس بفهمونیم قالب ما از تصاویر بندانگشتی پشتیبانی میکنه و یه سری تنظیمات لازم که بسته به کارمون میتونه متفاوت باشه رو انجام بدیم

در functions.php  موجود در فولدر تم مربوطه میریم و کد زیر رو وارد میکنیم:

<?php
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
}
?>

خط اول یک شرط میکنه که اگر تابع add_theme_support که از ورژن ۲٫۹ اضافه شده وجود داشت (یعنی وردپرس ما به روز بوده و کمتر از ۲٫۹ نیست) از تابع استفاده کنه و به وردپرس بفهمونه که قالب از امکان نمایش thumbnail بهره میبره.

البته شاید زیاد نیازی به اون if  هم نباشه و میتونیم یک راست کد زیر رو وارد کنیم:

<?php add_theme_support('post-thumbnails'); ?>

برای اینکه بفهمیم کدمون درست کار میکنه به قسمت انتشار و یا ویرایش مطلب میریم و یک عکس به پست اضافه میکنیم، بعد از آپلود شدن عکس در قسمت پایینی باید جمله ی ” استفاده به عنوان تصویر شاخص” اومده باشه که ما با کلیک کردن روی این گزینه تصویر رو به عنوان تصویر بندانگشتی اون پست انتخاب میکنیم.

حالا با قرار دادن کد زیر در هرجای قالب ( به طور مثال فایلهای single.php  یا index.php یا هرجای دیگه که حلقه ی مطالب قرار دارد) میتونیم تصویر مربوط به هر پست رو نمایش بدیم.

<?php the_post_thumbnail(); ?>

توجه کنید که این کد رو باید داخل حلقه ی پست ها قرار بدین ( حلقه چیست؟ )، اگه چیز زیادی از حلقه نمیدونین کد

<?php the_content(); ?>

رو پیدا کنید و بلافاصله قبلش کد داده شده مربوط به تصویر بندانگشتی رو قرار بدین.

این تابع هم مانند دیگر توابع آرگومان هایی داره که بررسی میکنیم،

Medium : این آرگومان حجم کمتری از تصویر رو در وبلاگ قرار میده که میتونه به سرعت لود صفحه کمک کنه.

the_post_thumbnail('medium');

Large : این آرگومان هم بالاترین کیفیت موجود رو استفاده میکنه.

the_post_thumbnail('large');

و در آخر برای تنظیم سایز تصاویر از حالت زیر میتونیم استفاده کنیم:

the_post_thumbnail( array(100,100) );

به همین راحتی!

تا قبل از این تابع یا باید از پلاگین برای اینکار استفاده میشد و یا از زمینه های دلخواه که هر کدوم دردسر های خودشون رو داشتن، این امکان یکی از محاسن خیلی مهم وردپرس در نسخه های جدید نسبت به نسخه های گذشته اش هست که کمک زیادی به طراحان کرده.

در درس بعدی که امیدوارم زیاد نوشتنش زمان نبره و تنبلی نکنم تو انتشارش یاد میگیریم که چطوری این تصاویر رو به صورت اسلاید در قسمت مورد نظرمون در وبلاگ قرار بدیم

موفق و خوشحال باشین

بای

درباره این نویسنده

44 Responses to تصاویر بندانگشتی در وردپرس

  1. مهدی نعیمی گفت:

    مرسی سیاوش جان 🙂
    راستش می‌خواستم برم بگردم دنبال یه پلاگینی چیزی که برام اینکار رو انجام بده به محض ورورد به صفحه‌ی مدیریت وردپرس این مطلب رو دیدم وقتی باز کردم دیدم وبلاگ دوست خوبمه که 🙂
    موفق باشی 🙂

  2. vahid گفت:

    نشد :((
    آقا من قبل از اینکه ۳ رو نصب کنم درست بود ! شما میتونی برام درست کنی ؟
    اگر نه هم که نسخه ۲٫۹ رو دوباره نصب کنممممم

  3. najee گفت:

    سلام
    خیلی عالی بود من که استفاده کردم و دارم باهاش کار می کنم. فقط اگه امکان داره اون مورد دوم رو هم که قول دادید اضافه کنید یعنی این که چه طور مطالب رو به صورت بندانگشتی در یک جایی امنند سایدبار یا ابزارک نشون بدیم. ممنون

  4. ali گفت:

    خسته نباشید من استفاده کردم جواب داد خیلی راحت حتی تو ساید بار قسمت پر بیننده و آخرین مطالب استفاده کردم کاملا درست خوبیش این بود چون array هم توضیح دادی ۴۸X48 تنظیم کردم که سایز و به هم نزنه

  5. سجاد گفت:

    سلام
    ۱-من کدها رو گذاشتم تو قالب اما کار نمی کنه، یعنی هیچی اضافه نمیشه.

    ۲-این کدها رو باید کجا بزارم:

    the_post_thumbnail(‘medium’);
    the_post_thumbnail(‘large’);
    the_post_thumbnail( array(100,100) );

    ممنون.

  6. سجاد گفت:

    ممنون دوست عزیز

    در رابطه با قسمت اول چی: افزودن امکان نمایش thumbnail به قالب وبلاگ– کدها رو به فانکشن و ایندکس اضافه کردم اما هیچی اضافه نشده.

  7. mohsen گفت:

    سلام سایت کاملی دارید
    هدف دیگرم تست ارسال نظرات آجاکس هست!!!
    چگونه اینکار را انجام دادید؟

  8. mohsen گفت:

    ممنون
    من چندتا کار میخوام انجام بدم:
    ۱- اضافه کردن فیلدهای اضافی به قسمت نظرات مثل سن
    ۲- کاربر عضو شده فقط نظر خودش را در صفحه مشاهده کنه و نظرات بقیه پنهان باشد
    ۳- برگه بسازم که در اون کاربر بتونه تمامی نظرات خودش را مشاهده کند
    ۴- کاربر عضو شده بتواند نظر خودش را ویرایش نماید

    با تشکر

  9. نگار گفت:

    Warning: Cannot modify header information – headers already sent by (output started at /home/shookado/public_html/wp-content/themes/AzinWeb/functions.php:120) in /home/shookado/public_html/wp-includes/pluggable.php on line 897

    این خطا رو میده وقتی که پست و میزنم واسه ارسال و تصویر بند انگشتی و میبره بالای صفحه و باعث میشه قالب به هم بریزع

  10. آرمین گفت:

    سلام آقای کشمیری
    ببخشید کامنتم بی ربط به پستتون هست
    می شه لطف کنید سایتی معرفی کنید که بشه ازش دامنه گرفت و مورد اعتماد باشه؟
    چه فرقی دارند با هم دیگه ؟ البته فقط برای دامنه رو می گم

    و اگر بخوام از وبلاگ بلاگفایم استفاده کنم فقط دامنه بگیرم کافیه؟
    یه سوال دیگه هم داشتم. اگر از وردپرس یا بلاگ اسپات به عنوان هاست استفاده کنم یعنی دامنه رو وصل کنم به اونجا، باز هم فیلتر می شه؟ یا چون دامنه یه چیز دیگه ست نه؟

    خیلی ممنون
    لطف می کنید جواب بدید

    • blogadmin گفت:

      سلام فرقی نداره زیاد، persiantools یا radcom و خیلی شرکتهای دیگه هستن که دامین میگیرن براتون، اینکه فیلتر میمونه وبلاگی که فیلتر هست یا نه بستگی داره به نوع فیلتر کردن، مثلا اگر دامین شما فقط فیلتر باشه شاید مشکلتون برطرف شه اما اگه مثلا شما وبلاگتون روی وردپرس.کام هست که کلا فیلتره فکر میکنم بعد از تغییر دامنه اش هم فیلتر باقی بمونه

  11. امین گفت:

    سلام به خدا نمیدونم چرا این همه آدم این مسئله رو توضیح داده ولی کسی نمیگه این کد مخصوص رو کجای فایل فانکشن بزاریم، بالاش، پایینش، کجاش؟!! مردم از بس تست کردم نشد

  12. Amin گفت:

    سلام
    من از نسخه ۳٫۲٫۱ استفاده می کنم.
    و تو این کد توش هست به صورت خودکار
    ولی می خوام عکسی قرار لدم،فقط میانه و راست یا چپ داره
    دیگه بند انگشتی نداره

  13. محمود گفت:

    با سلام آموزش بسیار عالی بود.
    همه این کارهارو انجام دادم و به خوبی عمل کرد.حالا برای اینکه عکس رو در سمت چپ قرار بدم به صورتی نوشته ی سمت راستش تا جایی که عکس باشه قرار بگیره مثل آدرسی که در زیر میدم.

    http://www.barsam.ir/archive/%D9%86%DA%A9%D8%A7%D8%AA-%DA%A9%D9%84%DB%8C%D8%AF%DB%8C-%D8%AC%D9%87%D8%AA-%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4-%D8%A7%D9%85%D9%86%DB%8C%D8%AA-%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA/

    با تشکر

    • blogadmin گفت:

      باید از float:left استفاده کنین، برای اینکه بتونین بهتر درک کنین ، مخصوصن وقتی یک سایت دیگه نمونه اش اجرا شده میتونین از inspect elements در مرورگرهای کروم یا اپرا با کلیک راست و انتخاب این گزینه و یا در مرورگر فایرفاکس با نصب افزونه firebug قسمتی که میخواین رو انتخاب کنین و ببینین چیکار کرده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *