آموزش افزودن تصویر شاخص(Featured Image) به قالب وردپرس

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

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

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

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

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}

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

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

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

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

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

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

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

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

// 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)

لازم به ذکر است که این ابعاد از طریق گزینه “رسانه” در “تنظیمات” وردپرس قابل تغییر هستند.

تنظیمات رسانه در وردپرس

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

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

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

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

<?php
while ( have_posts() ) : the_post();
    if( has_post_thumbnail() ):
        echo get_the_post_thumbnail();
    endif;  
endwhile; 
?>

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

<?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>';
?>

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

the_post_thumbnail(
	array(50, 50), 
	array(
		'src' => 'image.png',
		'class' => 'img-responsive',
		'alt' => 'alt post thumbnail',
		'title' => 'custom title'
	)
);

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

<img width="50" height="50" src="image.jpg" class="img-responsive" alt="alt post thumbnail" title="custom title" />

جمع بندی

در پایان به این نکته توجه داشته باشید که استفاده از تصاویر جذاب، با کیفیت و متناسب با موضوع می تواند در میزان درگیر شدن کاربران و جذب آنها به وب سایت تان بسیار تاثیرگذار باشد.

برچسب ها
سعید یاورنیا 117 نوشته 117 دیدگاه

توسعه دهنده وب، کارشناس ارشد نرم افزار.

دیدگاه ‌ها

  • امین ۷ خرداد ۱۳۹۹ - ۰۰:۵۲

    سلام و خسته نباشید خدمت مهندس یاورنیا عزیز
    مهندس پارامترهای تصاویر شاخص مانند متن جایگزین و عنوان عکس و غیره را چگونه هنگام نمایش مطالب می توانیم برای هر مطلب فراخوانی کنیم مثلا عنوان جایگزین را فراخوانی کنیم برای تگaltتصویر شاخص مطلب
    ممنون

    • سعید یاورنیا ۷ خرداد ۱۳۹۹ - ۱۴:۵۵

      سلام امین جان.
      اگر برای نمایش تصویر شاخص از تابع the_post_thumbnail استفاده کنی به طور خودکار ویژگی alt به تگ img اضافه میشه.
      اگر فنی تر به این موضوع نگاه کنیم مقداری که شما برای ویژگی alt مشخص می کنی در جدول wp_postmeta ذخیره می شود، برای بازیابی این مقدار کافیه از کدهای زیر استفاده کنید:


      $image_id = get_post_thumbnail_id();

      $image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true);

  • امین ۷ خرداد ۱۳۹۹ - ۱۵:۳۵

    ممنون مهندس یاور نیا من چون url میخاستم از the_post_thumbnail_url(); استفاده کردم
    و با کدی که شما فرمودید مشکل بر طرف شد
    ممنون از لطفتون مثل همیشه ساده قابل فهم و عالی متشکرم

  • امین ۷ خرداد ۱۳۹۹ - ۲۳:۵۱

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

  • امین ۲۷ خرداد ۱۳۹۹ - ۰۹:۲۰

    سلام و وقت بخیر خدمت مهندس یاور نیا عزیز
    دو تابع زیر در چه مواردی و چگونه می توان ازشون استفاده کرد
    add_theme_support( ‘custom-background’ );
    add_theme_support( ‘custom-logo’ );
    add_theme_support( ‘html5(
    در codexوردپرس فقط معرفی کرده بود و توضیحات کاملی نداده بود اگر لطف کنید یه توضیحی بدید ممنون میشم
    با تشکر

    • سعید یاورنیا ۲۷ خرداد ۱۳۹۹ - ۱۷:۰۳

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

      add_theme_support( ‘custom-background’ ) و add_theme_support( ‘custom-logo’ ) رو اگه به فایل functions.php اضافه کنی امکان انتخاب لوگو و تغییر پس زمینه به سایدبار سفارشی سازی اضافه میشه، بعدا می تونی در قالب سایت با تابع the_custom_logo لوگوی ست شده کاربر رو فراخوانی و نمایش بدی.

      به طور کلی این قابلیت با عنوان Theme Customizer شناخته می شه که با یادگیری Theme Customizer API می تونی سکشن ها و تنظیمات سفارشی اختصاصی و بیشتری برای یک قالب تعریف کنی.

      مورد سوم: وردپرس به صورت پیش فرض کدهای HTML رو سازگار با استاندارد XHTML تولید می کنه(مثل فرم جستجو)، add_theme_support( ‘html5 باعث میشه وردپرس برای تولید و رندر این کدهای HTML از تگ های HTML 5 استفاده کنه، اینکار باعث می شه که ساختار کدها و تگ های تولید شده با HTML 5 سازگار باشه.

  • امین ۲۷ خرداد ۱۳۹۹ - ۰۹:۵۱

    سلام مجدد
    مهتدس یاورنیا برای این تابع add_theme_support( ‘post-formats’, باید قالب فرمت ها را خودمان طراحی کنیم و کلا به چه صورت هست
    ممنون

    • سعید یاورنیا ۲۷ خرداد ۱۳۹۹ - ۲۱:۳۸

      درود بر شما.
      شما میتونی به ازای هر Post Format دیزاین متفاوتی داشته باشی.
      برای اینکار در قالب سایت یک دایرکتوری به نام template_parts یا partials ایجاد کن و به ازای هر فرمت یک فایل php با کدهای HTML و دیزاین مربوط به اون فرمت قرار بده.

      برای نامگذاری فایل ها از این روش استفاده کن:
      content.php برای فرمت پیش فرض یا همون standard
      content-aside.php
      content-audio.php
      content-gallery.php
      content-image.php
      content-link.php
      content-quote.php
      content-video.php

      حالا با کد زیر میتونی قالب مربوط به هر فرمت رو لود کنی، مثلا در داخل حلقه while مربوط به لیست پست ها.


      get_template_part('template-parts/content', get_post_format());

  • امین ۲۸ خرداد ۱۳۹۹ - ۰۱:۰۸

    ممنون مهندس یاور نیا عزیز بابت پاسختون دقیقل کد get_template_part(‘template-parts/content’, get_post_format()); کجای حلقه باید قرار بگیره و مورد دوم مثلا فایل تولید شده با نام content-aside.php پیش فرض ورد پرس هست یا میتونیم با نام دیگری نامگذاری کنیم
    ممنون

    • سعید یاورنیا ۲۹ خرداد ۱۳۹۹ - ۱۲:۵۶

      خواهش می کنم.
      امین جان اگه خاطرت باشه برای نمایش لیست پست های یک بلاگ از حلقه while have_post استفاده می کنیم، حالا کافیه تابع get_template_part رو داخل این حلقه یا حلقه مشاهده نوشته بذاری(بسته به دیزاینی که مدنظرته)، اونوقت تابع get_post_format به ازای هر نوشته؛ post format ذخیره شده رو که یکی از مقادیر aside، video، quote و … رو برگشت میده.
      نام فایل ها را به صورت اختیاری با -content شروع کردیم که کمی ساختارمند باشه، مقداری که تابع get_post_format برگشت میده رو به انتهای -content الحاق و فایل معادل اون پست فرمت رو لود می کنیم، اینجوری دیگه نیازی نیست به ازای هر post_format یک شرط if بذاری که چه کاری باید انجام بشه(سورس پروژه تروتمیز و نگهداریش راحتره).

      post_format پیش فرض هر نوشته گزینه استاندارده که تابع get_post_format برای اون رشته خالی برگشت میده، برای همین فایل content.php رو برای این پست فرمت لود می کنیم.
      در کل نامگذاری فایل ها به این صورت کاملا اختیاریه و ربطی به وردپرس نداره.

دیدگاهتان را بنویسید.

نشانی ایمیل شما منتشر نخواهد شد، بخش‌های موردنیاز با * مشخص شده‌اند.