اموزش امروز نوین سورس در مورد قرار دادن تصویر شاخص در قالب وردپرس هست که برخی قالب ها در وردپرس از این امکان محرومن و ما تو این اموزش بهتون میگیم که چجوری این امکان رو به قالبتون اضافه کنید
تصویر شاخص، تصویری هست که به عنوان تصویر اصلی مطلب در نظر گرفته میشه و در صفحه اصلی و اسلایدر و … به عنوان تصویر مطلب نمایش داده میشه.بنابراین در اغلب سایت های وردپرسی پشتیبانی از تصویر شاخص یک اصل مهم به شمار میاد.مثل سایت های موزیک،فیلم،خبری،تفریحی و …
برای اضافه کردن قابلیت تصویر شاخص به پوسته وردپرس خودتون کافیه کد زیر رو به فایل function.php پوسته مورد نظرتون اضافه کنید.
|
1
|
add_theme_support( ‘post-thumbnails’ );
|
البته همونطور که میدونین کد بالا یک کد php هست و حتما باید بین دو تگ
|
1
|
<?php ?>
|
قرار بگیره وگرنه عمل نمیکنه.
با اضافه شدن این کد به فایل function.php قالبتون،در قسمت ارسال نوشته شما(معمولا در زیر قسمت برچسب ها) یک فیلد جدید ایجاد میشه که از طریق اون میتونید برای مطلبتون تصویر شاخص یا بند انگشتی (thumbnail) قرار بدین.
خب حالا قالب شما از تصویر شاخص پشتیبانی میکنه به همین راحتی
ولی حالا مسئله اینجاست که چطوری میشه این تصویر شاخصی که برای مطالب انتخاب شده رو درون قالب استفاده کرد؟
برای قرار دادن تصویر شاخص درون پوسته باید از کد زیر استفاده کنیم
|
1
|
<?php the_post_thumbnail(); ?>
|
در هر کجای پوسته که میخوایم تصویر شاخص نمایش داده بشه کافیه کد بالا رو قرار بدیم تا بصورت خودکار تصویر شاخص مطلب مورد نظرمون در اون مکان به نمایش دربیاد.
البته باید دقت کنیم که نمایش تصویر شاخص باید درون حلقه مطالب وردپرس باشه.
اگر این کد در خارج از حلقه مطالب وردپرس قرار داده بشه فقط تصویر شاخص آخرین مطلب رو نمایش میده.
نمایش تصویر شاخص در صورت وجود
ممکنه شما گاهی فراموش کنید که برای یک پست تصویر شاخص تعیین کنید.ما میتونیم کاری بکنیم که اگر یک پست تصویر شاخص نداشت،بصورت اتوماتیک یک تصویر پیشفرض به عنوان تصویر شاخص مطلب قرار داده بشه.برای اینکار کافیه از کد زیر استفاده کنیم:
|
1
2
3
4
5
|
<? if ( has_post_thumbnail() ) { ?>
<? the_post_thumbnail(); ?>
<? } else { ?>
<img src=“linke-ax-pishfarz”>
<? } ?>
|
به جای linke-ax-pishfarz میتونید لینک تصویری که میخواین به عنوان تصویر شاخص پیشفرض قرار داده بشه رو بذارین.
با این کد ما داریم تعیین میکنیم که
اگر مطلب مورد نظر تصویر شاخص (thumbnail) داشت => تصویر شاخص نمایش داده بشه.
اما اگر مطلب مورد نظر تصویر شاخص نداشت => تصویر پیشفرضی که لینکش رو دادیم نمایش داده بشه.
تعیین سایز تصویر شاخص
بعضی اوقات احتیاج داریم که سایز خاصی رو برای تصویر شاخص تعیین کنیم.در این صورت کافیه که متناسب با نیازمون از کد های زیر استفاده کنیم و اونها رو درون فایل functions.php قالب قرار بدیم:
۱- تغییر سایز تصویر شاخص به سایز مورد نظر
|
1
|
set_post_thumbnail_size( 50, 50 );
|
در این صورت سایز تصویر شاخصی که برای مطالب قرار میدیم به صورت یک عکس ۵۰ در ۵۰ در میاد(۵۰ اولی عرض تصویر و ۵۰ دومی ارتفاع تصویر رو تعیین میکنه)
برای تغییر سایز مورد نظرتون کافیه که اعداد بالا رو تغییر بدین.
۲- تغییر سایز تصویر شاخص با برش
|
1
2
3
|
set_post_thumbnail_size( 50, 50, true ); // عکس با نسبت 50 در 50 بریده میشه
set_post_thumbnail_size( 50, 50, array( ‘top’, ‘left’) ); // عکس با نسبت 50 در 50 از گوشه بالا سمت چپ بریده میشه
set_post_thumbnail_size( 50, 50, array( ‘center’, ‘center’) ); // عکس با نسبت 50 در 50 از وسط بریده میشه
|
به همین صورت در مورد دوم میتونید از right و bottom برای راست و پایین هم استفاده کنید.
استایل دهی به تصویر شاخص در قالب
برای استایل دهی به تصویر شاخص کافیه از class زیر استفاده کنیم:
|
1
|
.wp-post-image
|
مثلا برای افزودن حاشیه (border) به تصویر شاخص کافیه کد زیر رو درون فایل style.css قالب قرار بدیم:
|
1
2
3
|
.wp-post-image{
border:1px solid #000;
}
|
امیدوارم که مفید بوده باشه…
دو زبانه زیر، محتوای زیر را تغییر می دهد.
محمد رضا جدی 28 ساله فارغ التحصیل رشته نرم افزار دانشکده فنی تبریز علاقه مند به سئو و تولید محتوا علاقه مند به دیجیتال مارکتینگ و شبکه و انتشار مطالبی هر چند کوتاه در این زمینه
آخرین پست توسطمحمد رضا (همه را ببین)
- رنج‌های IP در شبکه‌های کامپیوتری: آشنایی با کلاس‌های A، B، C و D در IPv4 - 1402-07-09
- اموزش کد نویسی برنامه فاکتوریل با C++ - 1402-07-09
- چگونه اسکریپت های php را برای موتور های جست و جو گر سئو و بهینه سازی کنیم ؟ - 1402-07-09
- افزونه باز کردن اینستاگرام در مرورگر - 1398-07-18
