ایجاد تنظیمات سربرگ برای پوسته ها

دسته بندی ها : آموزشگاه 1 فوریه 2014 خانه وردپرس 1814 بازدید

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

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

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', 250 ) );
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' )
),
'1' => array (
'url' => '%s/img/headers/1.png',
'thumbnail_url' => '%s/img/headers/1.png',
'description' => __( '1', 'mandegarweb' )
),
'2' => array (
'url' => '%s/img/headers/2.png',
'thumbnail_url' => '%s/img/headers/2.png',
'description' => __( '2', 'mandegarweb' )
),
'3' => 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;
?>

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

در مرحله ی آخر تنها نیاز دارید خروجی تنظیمات را در محل مناسبی از پوسته خود (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(); ?>) #292929;}
</style>
<?php } else { ?>
<style type="text/css">
#header{background: url(<?php bloginfo('template_directory'); ?>/img/headers/default.png) #292929;}
</style>
<?php } ?>

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

فقط فراموش نکنید که حتما مارو تو گوگل پلاس محبوب کنید البته لایکم فراموش نشه…:)

منبع : ماندگار وب

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

نظرات کاربران

  1. درود فراوان

    دوست خوبم تشکر میکنم بابت احترامی که به زمان و زحمات دیگران میگذارید
    پیروز باشید

    • علی باقری نیا گفته :
      15:04 2014/02/01

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

دیدگاهتان را بنویسید

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

Time limit is exhausted. Please reload CAPTCHA.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

لینک کوتاه :
0