سلام

از وردپرس ۲٫۹ یک امکان خیلی خوب به وردپرس اضافه شد و اون امکان اضافه کردن تصاویر بندانگشتی (یا همون 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) );

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

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

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

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

بای

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

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

  1. امیررضا گفت:

    فایل function.php کجا قرار داره؟
    من گشتم فایل functionS.php بود،یکی توی پوشه قالب و یکی هم توی پوشه wp-includes هست.
    ممنون

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ تیر ۲۳ام, ۱۳۸۹ ۹:۳۲ ب.ظ:

    سلام، ببخشید اشتباه از من بود، منظور همون functions.php در فولدر تم هست

    [پاسخ]

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

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ تیر ۲۵ام, ۱۳۸۹ ۱۱:۱۴ ق.ظ:

    خواهش میکنم، امیدوارم به دردتون خورده باشه:) موفق باشین

    [پاسخ]

  3. vahid گفت:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ تیر ۲۵ام, ۱۳۸۹ ۹:۲۵ ب.ظ:

    جالبه تو ۲٫۹ درسته ولی تو ۳ نه! برام ایمیل کنین فایل فانکشنز رو ببنم چشه

    [پاسخ]

  4. najee گفت:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ شهریور ۱ام, ۱۳۸۹ ۹:۳۲ ب.ظ:

    چشم، یکم سرم خلوت تر بشه اون هم آموزشش رو مینویسم :)

    [پاسخ]

  5. ali گفت:

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

    [پاسخ]

  6. سجاد گفت:

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

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

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

    ممنون.

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آبان ۱۲ام, ۱۳۸۹ ۱۰:۴۹ ق.ظ:

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

    [پاسخ]

  7. سجاد گفت:

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

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

    [پاسخ]

    سجاد پاسخ در تاريخ آبان ۱۲ام, ۱۳۸۹ ۴:۴۰ ب.ظ:

    درست شد، عکس رو از یه نشانی روی اینترنت وارد میکردم کار نمیکرد، از روی کامپیوتر یه عکس رو آپلود کردم کار کرد، ممنون

    [پاسخ]

  8. mohsen گفت:

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

    با تشکر

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ دی ۵ام, ۱۳۸۹ ۴:۵۷ ب.ظ:

    سلام اینها کارهای ساده ای نیستن که من بتونم توی کامنت براتون توضیح بدم، اما شاید پلاگین buddypress کار شما رو راه بندازه ;)

    [پاسخ]

  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

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

    [پاسخ]

    blogadmin پاسخ در تاريخ اردیبهشت ۱۱ام, ۱۳۹۰ ۴:۳۳ ب.ظ:

    حتمن کدتون یه اشکالی داره، دوباره چک کنین اگه درست نشد بفرستین به ایمیلم

    [پاسخ]

  10. آرمین گفت:

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

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

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

    [پاسخ]

    blogadmin پاسخ در تاريخ تیر ۲۲ام, ۱۳۹۰ ۵:۵۳ ق.ظ:

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

    [پاسخ]

  11. امین گفت:

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

    [پاسخ]

    blogadmin پاسخ در تاريخ مرداد ۸ام, ۱۳۹۰ ۵:۳۸ ق.ظ:

    اینکه کجای فایل فانکشنز بذارینش زیاد مهم نیست، مشکلتون کجاست؟

    [پاسخ]

  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 قسمتی که میخواین رو انتخاب کنین و ببینین چیکار کرده

    [پاسخ]

پاسخ دهید

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

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>