آموزش نحوه تغییر هدر قالب وردپرس

خانه / وردپرس / آموزش وردپرس / آموزش نحوه تغییر هدر قالب وردپرس

آموزش نحوه تغییر هدر قالب وردپرس

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

در این مقاله قصد داریم نحوه تغییر هدر قالب وردپرس را برای شما عزیزان شرح دهیم.

سفارشی سازی و تغییر هدر قالب وردپرس

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

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

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

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

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

add_theme_support( 'custom-header' );

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

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

<?php
add_action( 'after_setup_theme', 'dgw_setup' );
if ( ! function_exists('dgw_setup') ):
function dgw_setup() {
define( 'HEADER_TEXTCOLOR', '' );
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'dgw_header_image_width', 950 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'dgw_header_image_height',    ۲۵۰ ) );
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'dgw_admin_header_style' );
register_default_headers( array (
'default' => array (
'url' => '%s/img/headers/default.png',
'thumbnail_url' => '%s/img/headers/default.png',
'description' => __( 'default', 'dgw' )
),
'۱' => array (
'url' => '%s/img/headers/1.png',
'thumbnail_url' => '%s/img/headers/1.png',
'description' => __( '1', 'dgw' )
),
'۲' => array (
'url' => '%s/img/headers/2.png',
'thumbnail_url' => '%s/img/headers/2.png',
'description' => __( '2', 'dgw' )
),
'۳' => array (
'url' => '%s/img/headers/3.png',
'thumbnail_url' => '%s/img/headers/3.png',
'description' => __( '3', 'dgw' )
)
) );
}
endif;
if ( ! function_exists( 'dgw_admin_header_style' ) ) :
function dgw_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;
?>

نکته: در قطعه کد بالا شما باید به جای عبارت “Your template name” نام قالب خود را وارد کنید.

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

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 امتیاز, میانگین: 5٫00 از 5)
Loading...

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

۲ دیدگاه

  1. محمدقاسم افتخاری

    سلام من میخام هدر سایتم کامل حذف بشه و فقط مطالب پایین نمایش داده بشه باید چیکار کنم

    • هادی قربانی

      سلام
      محتوای هدر در اکثر قالب ها داخل فایل header.php کدنویسی میشه. داخل پوشه قالب این قایل رو در حالت ویرایش باز کنید ببینید چه مواردی داخل هست و بخش های مورد نظر رو حذف کنید.

پاسخ دهید

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

Time limit is exhausted. Please reload the CAPTCHA.