۱۶
مرداد

جلسه ۲۰ : ساخت هدر سفارشی در وردپرس

دسته‌بندی‌ها :

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

فهرست

مقدمه

هدر های سفارشی به صاحبان نویسنده سایت ها این امکان را می‌دهد تا سربرگ صفحات را سفارشی کرده و عنوان و تصویر دلخواه را در آن ها نمایش دهند.
این کار می‌تواند توسط کاربر در ویرایشگر بصری در قسمت Apearance > Header در پنل مدیریت انجام شود.
همچنین می‌توانید متنی را در پایین یا بالای هدر قرار دهید.
هدر های سفارشی می‌توانند توسط تابع ()get_custom_header در قالب قرار گیرند. اما ابتدا باید آن ها را توسط تابع ()add_theme_support به فایل functions.php اضافه کرد.
استفاده از هدر های سفارشی اختیاری است و می‌توانیم به صورت پیش‌فرض از همان فایل header.php استفاده کنیم.

برای راه اندازی و ساخت هدر سفارشی در وردپرس ، باید کد های زیر را در فایل functions.php قرار دهید.

مثال :

function themename_custom_header_setup() {
    $args = array(
        'default-image'      => get_template_directory_uri() . 'img/default-image.jpg',
        'default-text-color' => '000',
        'width'              => 1000,
        'height'             => 250,
        'flex-width'         => true,
        'flex-height'        => true,
    )
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

function themename_custom_header_setup() {

$args = array(

'default-image' => get_template_directory_uri() . 'img/default-image.jpg',

'default-text-color' => '000',

'width' => 1000,

'height' => 250,

'flex-width' => true,

'flex-height' => true,

)

add_theme_support( 'custom-header', $args );

}

add_action( 'after_setup_theme', 'themename_custom_header_setup' );

چرا از هدر های سفارشی استفاده می‌کنیم؟

مواقعی که شما قالب را در اختیار عموم گذاشته اید یا آن را به شرکت یا شخصی فروخته اید، کاربران قالب می‌توانند هدر سایت خود را با استفاده از بخش ویرایشگر قالب وردپرس، هدر سایت خود را سفارشی کنند و عنوان و تصاویر آن را تغییر دهند.

اضافه کردن پشتیبانی از هدر سفارشی به قالب

همانطور که در ابتدا گفتیم، برای فعال کردن هدر سفارشی در قالب باید تابع زیر را در فایل functions.php قرار دهیم.

مثال :

add_theme_support( 'custom-header' );

1	add_theme_support( 'custom-header' );

تنظیم یک تصویر در هدر سفارشی

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

در کد زیر یک تصویر با ابعاد ۹۸۰*۶۰ px را در هدر قرار می‌دهیم.

مثال :

$header_info = array(
    'width'         => 980,
    'height'        => 60,
    'default-image' => get_template_directory_uri() . '/images/sunset.jpg',
);
add_theme_support( 'custom-header', $header_info );
 
$header_images = array(
    'sunset' => array(
            'url'           => get_template_directory_uri() . '/images/sunset.jpg',
            'thumbnail_url' => get_template_directory_uri() . '/images/sunset_thumbnail.jpg',
            'description'   => 'Sunset',
    ),
    'flower' => array(
            'url'           => get_template_directory_uri() . '/images/flower.jpg',
            'thumbnail_url' => get_template_directory_uri() . '/images/flower_thumbnail.jpg',
            'description'   => 'Flower',
    ),  
);
register_default_headers( $header_images );

$header_info = array(

'width' => 980,

'height' => 60,

'default-image' => get_template_directory_uri() . '/images/sunset.jpg',

);

add_theme_support( 'custom-header', $header_info );

$header_images = array(

'sunset' => array(

'url' => get_template_directory_uri() . '/images/sunset.jpg',

'thumbnail_url' => get_template_directory_uri() . '/images/sunset_thumbnail.jpg',

'description' => 'Sunset',

'flower' => array(

'url' => get_template_directory_uri() . '/images/flower.jpg',

'thumbnail_url' => get_template_directory_uri() . '/images/flower_thumbnail.jpg',

'description' => 'Flower',

);

register_default_headers( $header_images );

فراموش نکنید که از تابع ()register_default_headers برای ثبت تصویر پیش‌فرض استفاده کنید.

استفاده از هدر های انعطاف پذیر

به صورت پیش‌فرض کاربر مجبور است تا ابعاد تصویر مد نظر خود را برای اینکه با تصویر پیش‌فرض هدر متناسب باشد، تغییر دهد.
با استفاده از “flex-width” و “flex-height” می‌توانید به کاربر اجازه دهید تا هر تصویری را با هر ابعاد و اندازه ای در هدر استفاده کند.

برای ایجاد این قابلیت از کد زیر استفاده می‌کنیم.

مثال :

$args = array(
    'flex-width'    => true,
    'width'         => 980,
    'flex-height'   => true,
    'height'        => 200,
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );

$args = array(

'flex-width' => true,

'width' => 980,

'flex-height' => true,

'height' => 200,

'default-image' => get_template_directory_uri() . '/images/header.jpg',

);

add_theme_support( 'custom-header', $args );

از کد زیر نیز برای آپلود استفاده کنید:

مثال :

<img alt="" src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>">

1	<img alt="" src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>">

نمایش هدر سفارشی

از تابع ()get_custom_header برای نمایش هدر سفارشی خود استفاده کنید.
همچنین از تابع ()get_header_image برای نمایش تصویر هدر استفاده می‌شود.

کد زیر نشان می‌دهد که چگونه می‌توان از تصاویر هدر سفارشی برای نمایش هدر در قالب استفاده کرد.
کد زیر در فایل header.php قرار می‌گیرد.

مثال :

<?php if ( get_header_image() ) : ?>
    <div id="site-header">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
            <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
        </a>
    </div>
<?php endif; ?>

<?php if ( get_header_image() ) : ?>

<img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

</a>

</div>

<?php endif; ?>

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

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

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۰ : ساخت هدر سفارشی در وردپرس

مقدمه

چرا از هدر های سفارشی استفاده می‌کنیم؟

اضافه کردن پشتیبانی از هدر سفارشی به قالب

تنظیم یک تصویر در هدر سفارشی

استفاده از هدر های انعطاف پذیر

نمایش هدر سفارشی

لیست مطالب دوره

مفاهیم پایه

عملکرد قالب

Customizer وردپرس

امنیت

حریم خصوصی

انتشار قالب در سایت Wordpress

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ