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

5 دیدگاه 4,409 توابع وردپرس

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

فهرست موضوعات در این آموزش

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

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

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

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

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

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

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

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

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

یک آموزش جذاب دیگه!

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

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

/*=================== replywp.com code wordpress ================*/
if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

if ( function_exists( 'add_theme_support' ) ) {

add_theme_support( 'post-thumbnails' );

}

/*=================== replywp.com code wordpress ================*/

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

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

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

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

add_theme_support( 'post-thumbnails', array('post') );

1	add_theme_support( 'post-thumbnails', array('post') );

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

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

/*=================== replywp.com code wordpress ================*/
add_theme_support( 'post-thumbnails', array('page') );
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

add_theme_support( 'post-thumbnails', array('page') );

/*=================== replywp.com code wordpress ================*/

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

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

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

/*=================== replywp.com code wordpress ================*/
// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
the_post_thumbnail();
the_post_thumbnail( 'thumbnail' );       // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' );          // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' );    // Medium Large resolution (default 768px x 0px max)
the_post_thumbnail( 'large' );           // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' );            // Original image resolution (unmodified)
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())

the_post_thumbnail();

the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)

the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)

the_post_thumbnail( 'medium_large' ); // Medium Large resolution (default 768px x 0px max)

the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)

the_post_thumbnail( 'full' ); // Original image resolution (unmodified)

/*=================== replywp.com code wordpress ================*/

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

آموزش توابع bloginfo در وردپرس

یک آموزش جذاب دیگه!

/*=================== replywp.com code wordpress ================*/
<?php while ( have_posts() ) : the_post();?>// شروع حلقه
<?php the_post_thumbnail(); ?>
<?php endwhile;?>// پایان حلقه 
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

<?php while ( have_posts() ) : the_post();?>// شروع حلقه

<?php the_post_thumbnail(); ?>

<?php endwhile;?>// پایان حلقه

/*=================== replywp.com code wordpress ================*/

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

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

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

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

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

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

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

/*=================== replywp.com code wordpress ================*/
<?php
while ( have_posts() ) : the_post();
    if( has_post_thumbnail() ):
        echo get_the_post_thumbnail();
    endif;  
endwhile; 
?>
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

<?php

while ( have_posts() ) : the_post();

if( has_post_thumbnail() ):

echo get_the_post_thumbnail();

endif;

endwhile;

/*=================== replywp.com code wordpress ================*/

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

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

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

/*=================== replywp.com code wordpress ================*/
<?php
echo '<a href="', get_permalink(), '">';
if ( has_post_thumbnail() ) {
	the_post_thumbnail("medium");
}
else {
	echo '<img src="', get_bloginfo('template_directory'),
           '/images/no-image.png',
           '" width="300" height="300" alt="no image selected" />';
}
echo '</a>';
?>
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

<?php

echo '<a href="', get_permalink(), '">';

if ( has_post_thumbnail() ) {

the_post_thumbnail("medium");

}

else {

echo '<img src="', get_bloginfo('template_directory'),

'/images/no-image.png',

'" width="300" height="300" alt="no image selected" />';

}

echo '</a>';

/*=================== replywp.com code wordpress ================*/

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

آموزش نمایش محصولات خریداری شده توسط کاربر در ووکامرس

یک آموزش جذاب دیگه!

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

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

/*=================== replywp.com code wordpress ================*/
the_post_thumbnail(
    array(250, 250),
    array(
        'src' => 'replywp-image.png',
        'class' => 'img-responsive',
        'alt' => 'این قسمت تضیحات تصویر قرار داده شود',
        'title' => 'عنوان تصویر '
    )
);
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

the_post_thumbnail(

array(250, 250),

array(

'src' => 'replywp-image.png',

'class' => 'img-responsive',

'alt' => 'این قسمت تضیحات تصویر قرار داده شود',

'title' => 'عنوان تصویر '

)

);

/*=================== replywp.com code wordpress ================*/

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

/*=================== replywp.com code wordpress ================*/
<img width="250" height="250" src="replywp-image.png" class="img-responsive" alt="این قسمت تضیحات تصویر قرار داده شود" title="عنوان تصویر" />
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

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

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

/*=================== replywp.com code wordpress ================*/
add_image_size( 'custom-size', 250, 250 );
/*=================== replywp.com code wordpress ================*/

/*=================== replywp.com code wordpress ================*/

add_image_size( 'custom-size', 250, 250 );

/*=================== replywp.com code wordpress ================*/

جمع بندی

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

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

میانگین رتبه 5/5 تعداد رای : 8

کاربر پاسخ وردپرس

2 سال پیش

پاسخ

سلام
من یه برگه سفارشی برای نتایج جستجو ساختم که تصویر شاخص هم داره.
چطور توی قالبم تصویر شاخص برگه سفارشی رو نمایش بدم؟
- زمان الله ابراهیمی ( مدیریت )
  
  2 سال پیش
  
  پاسخ
  
  سلام خدمت شما دوست گرامی برگه برای جستجو ساختید را درست متوجه نشدم لطفا بیشتر توضیح بدید اگه منظور شما صفحه جستجو است که باید یک فایل بنام search.php بسازید داخل فایل قالب خود قرار بدید
  موفق باشید
کاربر پاسخ وردپرس

3 سال پیش

پاسخ

ممنون از راهنمایی
کاربر پاسخ وردپرس

3 سال پیش

پاسخ

عالی بود
- زمان الله ابراهیمی ( مدیریت )
  
  3 سال پیش
  
  پاسخ
  
  خواهش میکنم موفق باشید

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