روز جهانی طراح وب مبارک 50 درصد تخفیف مدت محدود دوره طراحی قالب HTML5 CSS3 بوت استرپ 5 حرفه ای دریافت آموزش

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

مطالب پیشنهادی برای شما مهمان عزیز

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

در هنگام ایجاد یک پست(نوشته) یا صفحه در وردپرس، معمولا متاباکسی(Meta Box) با عنوان “تصویر شاخص” مشاهده می کنید
که به شما اجازه می دهد تصویری را برای نوشته موردنظرتان انتخاب کنید
در این باکس تصویر انتخاب شده به صورت بند انگشتی یا Thumbnail نشان داده خواهد شد.

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

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

یکی از ویژگی‌های خوبی که در قالب‌های وردپرس وجود دارد استفاده از تصویر شاخص در وردپرس (thumbnail) است. زمانی که شما مطلبی را در سایت خود منتشر می‌کنید این امکان را دارید که برای مطلب خود تصویر شاخص انتخاب کنید. می‌توان گفت تقریباً تمام قالب‌های وردپرس که کاربران از آن‌ها استفاده می‌کنند از این قابلیت پشتیبانی می‌کنند.

امروز می‌خواهیم آموزش اضافه کردن تصویر شاخص به قالب وردپرس را به شما عزیزان آموزش دهیم. برای اضافه کردن تصویر شاخص به قالب وردپرس باید چند قطعه کد PHP در قسمت فانکشن (Function.php) اضافه کنید؛ و کدها را درون حلقه نوشته قرار دهید.

تصاویر شاخص در کجا نمایان می شوند؟

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

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

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

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

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

بعد از قرار دادن کد وردپرس بالا چه اتفاق خواهد افتاد ؟

خب با کدهای بالا شما به سیستم محتوا وردپرس می‌فهمانید که باید بخش تصویر شاخص را نمایش دهد و قالب از تصویر شاخص پشتیبانی کند.
همچنین برای افزودن تصویر شاخص به مکان‌های مختلف سایت باید کد زیر را در حلقه‌های نوشته قرار دهید تا تصاویر در مکان‌های مختلف سایت نمایش داده شود.

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

قبل از قرار نمایش دادن تصویر شاخص وردپرس بریم چندتا مثال باحال بزنیم .

برای ایجاد محدودیت و فعال سازی این باکس در نوشته ها از کد زیر:

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

و در صفحات از این کد استفاده نمائید:

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

زمانی که یک تصویر را آپلود می کنید وردپرس به صورت پیش فرض ابعاد مختلفی از آن تصویر را در اندازه های Thumbnail ،Medium ،Medium_Large ،Large ،Full تولید می کند.

برای فراخوانی هر کدام از این تصاویر در قالب وب سایت تان می توانید از کدهای وردپرس زیر استفاده نمائید:

برای نمایش هر کدام از کد های وردپرس بالا مثل روش زیر عمل کنید .

بیشتر بخوانید :
آموزش 2 توابع کاربردی برای فایل فانکشن (functions.php) وردپرس

دقت داشته باشید باید داخل حلقه قرار داده شود

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

خب حالا می‌توانید برای تغییرات ظاهری کادر تصویر شاخص، از html و CSS استفاده کنید. اگر با کد های html css آشنایی ندارید پیشنها می کنم آموزش طراحی سایت HTML5 CSS3 با bootstrap 5 حتما ببینید .

استفاده از تصویر شاخص وردپرس در عمل

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

  • has_post_thumbnail: آیا تصویر شاخص برای نوشته یا صفحه موردنظر وجود دارد.
  • the_post_thumbnail: رشته ای حاوی تگ img چاپ(Echo) می کند.
  • get_the_post_thumbnail: رشته ای حاوی تگ img بر می گرداند(Return).

در ساده ترین حالت می توانید از این کد وردپرس  استفاده کنید:

این روش نمایش تصویر شاخص وردپرس در بالا هم گفته بودیم بریم برای مثال های بیشتر .

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

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

فایل no-image.png را در پوشه Images موجود در قالب سایتتان قرار دهید.

بیشتر بخوانید :
نمایش قسمتی از محتوا فقط به اعضا در وردپرس

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

می توانید به توابع the_post_thumbnail و get_the_post_thumbnail دو پارامتر اختیاری ارسال کنید که پارامتر اول اندازه تصویر و دومی آرایه ای از ویژگی های src ،class، alt و title می باشد:

نتیجه کار نیز بدین صورت خواهد بود:

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

همچنین شما این امکان را دارید که اندازه تصویر شاخص را در سایتتان تغییر دهید. برای انجام این کار باید از کد زیر استفاده نمایید.
این کد را باید به فایل functions.php خود اضافه نمایید.

جمع بندی

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

دوستان عزیز امیدوارم این آموزش کد وردپرس  به کارتون اومده باشه ، مثل همیشه اگر نظر یا سوالی داشتید حتما در بخش دیدگاه ها مطرح کنید 🙂

 

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

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

لینک کپی شد!

نظر شما در این‌باره چیست؟

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