تصاویر در قالب وردپرس و تنظیمات آن – مقدمه:

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

در این بخش یاد می گیریم که چگونه تصویر بند انگشتی یا همان thumbnail را به پست های وردپرس اضافه کنیم. در اصل با نحوه اضافه کردن Featured Image برای نوشته یا صفحات سایت وردپرس آشنا می شویم.

همچنین می آموزیم که برای اضافه کردن سایز تصاویر در قالب وردپرس ، از چه توابعی باید استفاده کنیم و سپس چگونه می توانیم از این سایزها استفاده کنیم.

سایز تصاویر در قالب وردپرس

بخش اول: اضافه کردن قابلیت نمایش Featured image یا Post Thumbnail در قالب وردپرس:

تنظیمات متعددی برای تصاویر در قالب وردپرس وجود دارد. یکی از آن ها استفاده از تصاویر برای یک نوشته یا یک صفحه می باشد که در وردپرس به آن Featured Image یا Post Thumbnail گفته می شود. بصورت پیش فرض این قابلیت در قالب وردپرس شما فعال نیست و شما برای استفاده از Featured Image یا همان تصاویر در قالب وردپرس برای یک پست یا یک صفحه، می باید این ویژگی را به قالب خود اضافه نمایید.

برای اضافه کردن این ویژگی به قالب خود، می توانید از مراحل زیر استفاده کنید:

  • تعریف یک add_action با استفاده از هوک after_setup_theme  در داخل فایل functions.php قالب وردپرس و صدا زدن تابعی با نام msn_theme_initial_setup 

  • تعریف تابع msn_theme_initial_setup  در فایل functions.php

  • اضافه کردن ویژگی post-thumbnails با استفاده از تابع add_theme_support (بخش ۰۲۳ موجود در کدها)

function msn_theme_initial_setup()
{
    //۰۲۳- add post thumbnail
    add_theme_support('post-thumbnails');
}

//Hook your function to after_setup_theme
add_action('after_setup_theme', 'msn_theme_initial_setup');
  • جهت اضافه کردن تصاویر در قالب وردپرس برای یک نوشته سفارشی یا custom post type یا برای صفحات، می توانید از دستورات زیر استفاده کنید.

add_theme_support( 'post-thumbnails' );
add_theme_support( 'post-thumbnails', array( 'post' ) );          // Posts only
add_theme_support( 'post-thumbnails', array( 'page' ) );          // Pages only
add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) ); // Posts and Movies custom post type

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

یکی از موارد بسیار کاربردی در وردپرس، آپلود کردن یک عکس و سپس استفاده از سایزهای مختلف آن تصاویر در قالب وردپرس می باشد. این یعنی شما تصویر خود را در وردپرس آپلود می کنید و سپس می توانید با یک نام مشخص، به سایز مورد دلخواه از آن عکس، دسترسی داشته باشید. وردپرس به صورت اتوماتیک، تصویر شما را بریده (یا crop کرده) و شما می توانید از سایز مورد نظر خود، در بخش های مختلف وردپرس استفاده کنید.

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

  • تعریف یک add_action با استفاده از هوک after_setup_theme  در داخل فایل functions.php قالب وردپرس و صدا زدن تابعی با نام msn_theme_initial_setup 

  • تعریف تابع msn_theme_initial_setup  در فایل functions.php

  • اضافه کردن سایز مورد نظر برای تصاویر در قالب وردپرس با استفاده از  add_image_size  (بخش ۰۲۴ موجود در کدها)

  • حال شما می توانید از این سایز برای اندازه post thumbnail یا همان featured image خود، استفاده کنید. برای این کار می توانید از تابع the_post_thumbnail استفاده نمایید (بخش ۰۲۵ موجود در کدها)

function msn_theme_initial_setup()
{
    //۰۲۳- add post thumbnail
    add_theme_support('post-thumbnails');
    //۰۲۴- add custom image size
    add_image_size('msn-main-thumbnail', 500, 375);
    //۰۲۵- use from msn-main-thumbnail size for featured images
    the_post_thumbnail('msn-main-thumbnail');
}

//Hook your function to after_setup_theme
add_action('after_setup_theme', 'msn_theme_initial_setup');

نکته مهم:

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

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

راهنما برای چک لیست طراحی قالب وردپرس:

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

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

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید: