Developer

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

صویر شاخص وردپرس یکی از ویژگی های قابل استفاده در قالبهای وردپرس است که در نسخه ۳ وردپرس شاهد معرفی آن بودیم. این قابلیت به قدری پرطرفدار و محبوب شده که تقریبا در تمامی قالبهای وردپرس از تصاویر شاخص با ابعاد متفاوت استفاده میشود. در این مقاله به طور کامل با تصاویر شاخص یا عکس بند انگشتی Post Thumbnails آشنا میشوید و نحوه بکارگیری آن در طراحی قالب وردپرس را یاد خواهید گرفت پس تا انتها همراه  ای دولوپر باشید.

چرا از تصویر شاخص وردپرس استفاده میکنیم؟

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

  • مدیریت کامل بر روی ابعاد تصاویر
  • امکان ساخت کوئری های مختلف و زیبا
  • امکان استفاده از تصویر دلخواه در بخشهای مختلف پوسته
  • افزایش سرعت بارگذاری سایت به دلیل بکارگیری تصاویر در ابعاد مورد نظر
  • قابلیت مدیریت بیشتر بر روی بهینه سازی و سئو تصاویر
  • امکان اختصاص دستورات css دلخواه به تصاویر شاخص متفاوت
  • و …

اکنون به آموزش استفاده از عکس شاخص در سایتهای وردپرسی میپردازیم.

آموزش افزودن تصویر شاخص وردپرس به پوسته

برای فعال کردن تصویر شاخص باید قطعه کد زیر را در فایل فانکشن functions.php قالب وردپرس کپی کنید.

 

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

آموزش تنظیمات ابعاد تصویر شاخص در وردپرس

برای تنظیم ابعاد تصاویر شاخص محدودیتی وجود ندارد و میتوانید انواع تصاویر شاخص با ابعاد دلخواه ایجاد کنید.
به طور پیشفرض وردپرس دارای ۵ اندازه مختلف است که عبارتند از:

  • thumbnail با ابعاد ۵۰ در ۵۰ پیکسل
  • medium با ابعاد ۳۰۰ در ۳۰۰ پیکسل
  • medium_large با ابعاد ۷۶۸ در ۰ پیکسل !
  • large با ابعاد تصویر ۱۰۲۴ در ۱۰۲۴ پیکسل
  • full سایز اصلی تصویر

برای ساخت ابعاد دلخواه تنها باید از آرایه array(100,100) به عنوان مقدار در تابع the_post_thumbnail استفاده کنید. نحوه استفاده از ابعاد مختلف به شکل زیر خواهد بود.

تغییر اندازه تصویر شاخص وردپرس

با استفاده از تابع add_image_size امکان ساخت تصویر شاخص با ابعاد دلخواه وجود دارد.
برای اینکار دستورات زیر را به فایل فانکشن functions.php قالب وردپرس اضافه میکنیم.

تابع add_image_size در مثال بالا ۴ متغییر دریافت میکند.
متغییر اول نام تصویر شاخص وردپرس است که در اینجا thumb1 نام دارد. متغییر دوم و سوم ابعاد عکس بند انگشتی هستند و متغییر چهارم که مقادیر true و false را دریافت میکند برای برش تصویر کاربرد دارد. برش تصویر در برخی قالبهای وردپرس ممکن است باعث حذف جزئیات اصلی عکس های دارای ابعاد مستطیلی شود برای رفع این مشکل ناخوشایند بهتر است آنرا با دادن مقدار false غیرفعال کنیم.

کد نمایش تصویر شاخص وردپرس در پوسته

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

تابع the_post_thumbnail چندین متغییر میگیرد.
اولین آن نام تصویر شاخص معرفی شده در فایل فانکشن پوسته است و سایر متغییرها مربوط به نمایش عنوان و متن جایگزین برای تصویر هستند. کد معرفی شده کاملترین کد نمایش تصویر شاخص وردپرس است زیرا قابلیت عنوان و متن جایگزین alt و title را نیز به تصویر شاخص اضافه میکند که باعث بهبود سئو قالب وردپرس خواهد شد. همچنین اگر نویسنده برای مطلب تصویر شاخص قرار ندهد و در صورت نبودن تصویر شاخص، عکسی با نام thumb.jpg که در پوشه images پوسته وردپرس قرار دارد را به عنوان جایگزین نمایش میدهد که میتوانید از تصویر دلخواه به عنوان تصویر شاخص پیشفرض استفاده کنید.

آموزش اختصاص دستورات Css به تصویر شاخص وردپرس

هر تصویر شاخصی که در پوسته استفاده میکنیم دارای class مخصوص به خود است

هنوز هیچ دیدگاهی وجود ندارد