با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره جامع آموزش ساخت قالب وردپرس در خدمت شما هستیم.
در این جلسه قصد داریم به آموزش ساخت هدر سفارشی در وردپرس بپردازیم.
هدر های سفارشی به صاحبان نویسنده سایت ها این امکان را میدهد تا سربرگ صفحات را سفارشی کرده و عنوان و تصویر دلخواه را در آن ها نمایش دهند.
این کار میتواند توسط کاربر در ویرایشگر بصری در قسمت Apearance > Header در پنل مدیریت انجام شود.
همچنین میتوانید متنی را در پایین یا بالای هدر قرار دهید.
هدر های سفارشی میتوانند توسط تابع ()get_custom_header در قالب قرار گیرند. اما ابتدا باید آن ها را توسط تابع ()add_theme_support به فایل functions.php اضافه کرد.
استفاده از هدر های سفارشی اختیاری است و میتوانیم به صورت پیشفرض از همان فایل header.php استفاده کنیم.
برای راه اندازی و ساخت هدر سفارشی در وردپرس ، باید کد های زیر را در فایل functions.php قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 | 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 قرار دهیم.
1 | add_theme_support( 'custom-header' ); |
هنگام که کاربر قالب شما را نصب میکند، قالب میتواند یک هدر پیشفرض را قبل از اینکه کاربر هدر خود را تنظیم کند، داشته باشد.
این کار به کاربران این امکان را میدهد تا هدر قالب را سریع تر راه اندازی کرده و از تصویر پیشفرض آن تا زمانیکه که تصویر موردنظر خود را قرار دهند، استفاده کنند.
در کد زیر یک تصویر با ابعاد ۹۸۰*۶۰ px را در هدر قرار میدهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $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” میتوانید به کاربر اجازه دهید تا هر تصویری را با هر ابعاد و اندازه ای در هدر استفاده کند.
برای ایجاد این قابلیت از کد زیر استفاده میکنیم.
1 2 3 4 5 6 7 8 | $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 ); |
از کد زیر نیز برای آپلود استفاده کنید:
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 قرار میگیرد.
1 2 3 4 5 6 7 | <?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; ?> |
جلسه آموزش ساخت هدر سفارشی در وردپرس نیز به پایان رسید.
در جلسه بعد به آموزش ساخت لوگو سفارشی در وردپرس خواهیم پرداخت.