خانه / آموزش وردپرس / آموزش حرفه ای وردپرس / چطور برای قالب خود سربرگ بسازیم ؟

چطور برای قالب خود سربرگ بسازیم ؟

چگونه می توانیم برای پوسته های وردپرس تنظیمات سربرگ header بسازیم؟

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

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

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

add_theme_support( 'custom-header' );

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

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

<?php
add_action( 'after_setup_theme', 'themeline_setup' );
if ( ! function_exists('themeline_setup') ):
function themeline_setup() {
define( 'HEADER_TEXTCOLOR', '' );
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'themeline_header_image_width', 950 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'themeline_header_image_height',    ۲۵۰ ) );
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'themeline_admin_header_style' );
register_default_headers( array (
'default' => array (
'url' => '%s/img/headers/default.png',
'thumbnail_url' => '%s/img/headers/default.png',
'description' => __( 'default', 'themeline' )
),
'۱' => array (
'url' => '%s/img/headers/1.png',
'thumbnail_url' => '%s/img/headers/1.png',
'description' => __( '1', 'themeline' )
),
'۲' => array (
'url' => '%s/img/headers/2.png',
'thumbnail_url' => '%s/img/headers/2.png',
'description' => __( '2', 'themeline' )
),
'۳' => array (
'url' => '%s/img/headers/3.png',
'thumbnail_url' => '%s/img/headers/3.png',
'description' => __( '3', 'themeline' )
)
) );
}
endif;
if ( ! function_exists( 'themeline_admin_header_style' ) ) :
function themeline_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 از قالب خود قرار دهید . اگر شما دستورات زیر را بعد از تابع wp_head قرار دهید تصویر سربرگ از طریق فایل css استایل فراخوانی میشود :

<?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 فراخوان میشود قرار میگیرد شما هم باید آیدی که برای سربرگ پوسته خود تعریف کرده اید جایگزین کنید.

برای دیگر آموزش ها با تم لاین همراه باشید .

 

درباره فرید خسروی

موارد جالب

ویروس یابی قالب های نال شده وردپرس

ویروس یابی قالب های نال شده وردپرس

سلام دوستا عزیز تم لاین. امروز با یک پست بسیار عالی در خدمتتون هستم که ...

۳ نظر

  1. سلام
    من سربرگ انتخاب می کنم در اندازه ۱۶۰۰*۲۳۰ ولی پس از لود شدن، بخشی از سربرگ نمایش نمی یابد و بزرگتر از صفحه نمایش است. باید حدود ۲۵ درصد نمایش صفحه کوچک شود تا سربرگ کامل نمایش یابد. راه حل چیست؟

    • دوست عزیز شما باید یا تصویر خود را در اندازه کوچکتر انتخاب نمایید، یا اینکه با css عرض WIDTH هدر یا تصویر را کم کنید و با مقدار درصد به طور مثال ۷۰% آن را مشخص کنید.

  2. سلام دوست عزیزم من میخوام هدر قالبمو تغییر بدم قالب اماده هست
    تا الان چند بار ویرایش کردم ولی اندازه دلخواهم درنیومده لطفا راهنمایی کنید چون اگه کد هاتون رو در funcation,php قرار بدم ممکنه خطا بده و خراب بشه به خاطر این یکم ترس دارم
    ممنون میشم راهنمایی کنید
    باتشکر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

تخفیف ویژه به مناسبت سال جدید 1396 | کد تخفیف : eid96