شتاب فایل

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

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

شتاب فایلجهت سفارش تبلیغات ثابت تماس بگیرید

شتاب فایل

:)

thumbnail-hamyarwp

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

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

برای اضافه کردن قابلیت تصویر شاخص به پوسته وردپرس خودتون کافیه کد زیر رو به فایل function.php پوسته مورد نظرتون اضافه کنید.

 

۱
add_theme_support( ‘post-thumbnails’ );

البته همونطور که میدونین کد بالا یک کد php هست و حتما باید بین دو تگ

۱
<?php     ?>

قرار بگیره وگرنه عمل نمیکنه.

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

 

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

خب حالا قالب شما از تصویر شاخص پشتیبانی میکنه  به همین راحتی

ولی حالا مسئله اینجاست که چطوری میشه این تصویر شاخصی که برای مطالب انتخاب شده رو درون قالب استفاده کرد؟

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

 

۱
<?php the_post_thumbnail(); ?>

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

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

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

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

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

 

۱
۲
۳
۴
۵
<? if ( has_post_thumbnail() ) { ?>
<? the_post_thumbnail(); ?>
<? } else { ?>
<img src=“linke-ax-pishfarz”>
<? } ?>

به جای linke-ax-pishfarz میتونید لینک تصویری که میخواین به عنوان تصویر شاخص پیشفرض قرار داده بشه رو بذارین.

با این کد ما داریم تعیین میکنیم که

اگر مطلب مورد نظر تصویر شاخص (thumbnail) داشت => تصویر شاخص نمایش داده بشه.

اما اگر مطلب مورد نظر تصویر شاخص نداشت => تصویر پیشفرضی که لینکش رو دادیم نمایش داده بشه.

تعیین سایز تصویر شاخص

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

۱- تغییر سایز تصویر شاخص به سایز مورد نظر

 

۱
set_post_thumbnail_size( 50, 50 );

در این صورت سایز تصویر شاخصی که برای مطالب قرار میدیم به صورت یک عکس ۵۰ در ۵۰ در میاد(۵۰ اولی عرض تصویر و ۵۰ دومی ارتفاع تصویر رو تعیین میکنه)

برای تغییر سایز مورد نظرتون کافیه که اعداد بالا رو تغییر بدین.

۲- تغییر سایز تصویر شاخص با برش

 

۱
۲
۳
set_post_thumbnail_size( 50, 50, true ); // عکس با نسبت ۵۰ در ۵۰ بریده میشه
set_post_thumbnail_size( 50, 50, array( ‘top’, ‘left’)  ); // عکس با نسبت ۵۰ در ۵۰ از گوشه بالا سمت چپ بریده میشه
set_post_thumbnail_size( 50, 50, array( ‘center’, ‘center’)  ); // عکس با نسبت ۵۰ در ۵۰ از وسط بریده میشه

به همین صورت در مورد دوم میتونید از right و bottom برای راست و پایین هم استفاده کنید.

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

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

 

۱
.wp-post-image

مثلا برای افزودن حاشیه (border) به تصویر شاخص کافیه کد زیر رو درون فایل style.css قالب قرار بدیم:

 

۱
۲
۳
.wp-post-image{
border:1px solid #000;
}

امیدوارم که مفید بوده باشه…

The following two tabs change content below.
shetabfile
سلام من رضا هستم 22 سالمه و از 17 سالگی علاقه ی شدیدی به برنامه نویسی و وردپرس دارم و دوست دارم همیشه تو این زمینه بروز باشم این وب رو هم برای انتشار مطالبی که باعث پیشرفت خودم شدن ایجاد کردم
به این مطلب امتیاز دهید.
5 / 0
[ 0 رای ]
بازدید : 1 views بار دسته بندی : اموزش وردپرس تاريخ : ۲ آبان ۱۳۹۵ به اشتراک بگذارید :
دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.