آموزش ساخت تنظیمات سربرگ برای پوسته های وردپرس

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

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

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

add_theme_support( 'custom-header' );

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

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

<?php
add_action( 'after_setup_theme', 'mandegarweb_setup' );
if ( ! function_exists('mandegarweb_setup') ):
function mandegarweb_setup() {
define( 'HEADER_TEXTCOLOR', '' );
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'mandegarweb_header_image_width', 950 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'mandegarweb_header_image_height',    ۲۵۰ ) );
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'mandegarweb_admin_header_style' );
register_default_headers( array (
'default' => array (
'url' => '%s/img/headers/default.png',
'thumbnail_url' => '%s/img/headers/default.png',
'description' => __( 'default', 'mandegarweb' )
),
'۱' => array (
'url' => '%s/img/headers/1.png',
'thumbnail_url' => '%s/img/headers/1.png',
'description' => __( '1', 'mandegarweb' )
),
'۲' => array (
'url' => '%s/img/headers/2.png',
'thumbnail_url' => '%s/img/headers/2.png',
'description' => __( '2', 'mandegarweb' )
),
'۳' => array (
'url' => '%s/img/headers/3.png',
'thumbnail_url' => '%s/img/headers/3.png',
'description' => __( '3', 'mandegarweb' )
)
) );
}
endif;
if ( ! function_exists( 'mandegarweb_admin_header_style' ) ) :
function mandegarweb_admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
?>

با قرار گرفتن دستورات فوق در فایل فانکشن ، قابلیت بارگذاری خودکار تصویری به عنوان هدر پیش فرض فراهم میگردد همچنین سه سربرگ به عنوان سربرگ های آماده به تنظیمات سربرگ اضافه میگردد که شما میتوانید همانند دستورات آمده تعداد سربرگ ها را به تعداد مورد نظر خود افزایش دهید . لازم به ذکر است اندازه ی سربرگ در دستور ۲۵۰×۹۵۰ پیکسل تعیین شده است که شما میتوانید آنرا به اندازه ی مورد نظر خود تغییر دهید .

در مرحله ی آخر تنها نیاز دارید خروجی تنظیمات را در محل مناسبی از پوسته خود (header.php) قرار دهید ، همانطور که میدانید تقریبا” در تمام پوسته ها تصویر سربرگ از طریق فایل css استایل فراخوان میشود که شما برای عملکرد صحیح این آموزش دستورات زیر را بعد از تابع wp_head قرار دهید :

<?php
$header_image = get_header_image();
if ( ! empty( $header_image ) ) { ?>
<style type="text/css">
#header{background: url(<?php header_image(); ?>)  #۲۹۲۹۲۹;}
</style>
<?php } else { ?>
<style type="text/css">
#header{background: url(<?php bloginfo('template_directory'); ?>/img/headers/default.png)  #۲۹۲۹۲۹;}
</style>
<?php } ?>

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