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

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

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

3 / 5
2

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

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

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

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

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

اگر شما قصد این را دارید که سربرگ یا همان هدر سایت خود را ویرایش کنید یا تغییر دهید ابتدا باید تنظیمات سربرگ را به قالبتان اضافه کنید، برای این کار ابتدا شما باید فایل 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',    250 ) );
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' )
),
'1' => array (
'url' => '%s/img/headers/1.png',
'thumbnail_url' => '%s/img/headers/1.png',
'description' => __( '1', 'dgw' )
),
'2' => array (
'url' => '%s/img/headers/2.png',
'thumbnail_url' => '%s/img/headers/2.png',
'description' => __( '2', 'dgw' )
),
'3' => 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 قرار دهید. بعد از این که این کد را در فایل مورد نظر قرار دادید قابلیت های گفته شده برای شما فعال می شود و شما می توانید به سادگی تصویری را به عنوان تصویر پیش فرض سربرگ یا همان هدر بارگذاری کنید و همچنین برای شما تعدادی هدر به تنظیمات سربرگ اضافه می شود که تعداد پیش فرض آن 3 عدد و اندازه پیش فرض آن ها 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 فراخوانی می شود پس شما هم باید کلاس یا آیدی را که برای هدر خود تعریف کرده اید را جایگزین آیدی بالا کنید.

اشتراک گذاری

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

10 دیدگاه

  1. میلاد

    سلام ببخشید سایتی هست که لوگو واسه هدر بسازه

    • علی غلامی

      سلام عزیز
      اگه میخوایید یک لوگو همیشگی برای سایتتون طراحی کنید که مختص به خودتون باشه و معرف سایتتون باشه باید با استفاده از برنامه هایی مانند فتوشاپ و… لوگو طراحی کنید یا اگه آشنایی ندارید میتونید به طراحان مربوطه سفارش بدید.
      سایت هایی (معمولا خارجی) هستند که با گرفتن نام سایت (ترجیحا انگلیسی) یک لوگو به شما تحویل میدن که درواقع همون متن رو با یک شکل دیگه آماده میکنه و نمیشه گفت یه لوگو هست. این سایت ها زیاد پیشنهاد نمیشه اما برای تست میتونید سایت زیر رو ببینید.
      https://placeit.net/logo-maker
      موفق باشید

  2. امیر

    سلام
    من دارم یه قالب طراحی میکنم
    میخوام طوری باشه که چند تا header باشه طرف بتونه خودش انتخاب کنه کدوم تو سایت تنظیم بشه .اگر امکان ش هست راهنمایی کنید . ممنون

    • علی غلامی

      سلام
      میتونید کدهای php چند قالب پریمیوم که این قابلیت رو دارند چک کنید. مثل قالب revo ، shoppystore ، maxshop marketo و…

  3. نوید

    با سلام و خسته نباشید…ببینید دوست عزیزم اولا که قالب بنده انفولد هست…دوم اینکه تنظیماتی که گفتید رو اعمال کردم چند نکته هست باید بگم…اولا که عبارت your template nameوجود نداشت که اسم قالبمو جایگزینش کنم…دوم اینکه اعدادی که قرار داده بودید فارسی بود بعضیاش بعضیاش انگلیسی و استاندارد نبود…سوم اینکه اصلا کلا هیچ تغییری اعمال نشد به هدرم،یعنی همون شکلی که بود الانم هست با اینکه همه تنظیماتو اعمال کردم ولی اون اخر متوجه نشدم درمورد آیدی…سایتم البته لوکاله هنوز نمیتونم ادرس بدم ممنون میشم یه راهنمایی کنید

  4. علیرضا

    سلام
    ببخشید افزونه نظرات شما چیه؟
    همین که این شکلی شده؟ تو خیلی از سایتها دیدم از این استفاده میکنن و مثل دفتر خطی هست
    ممنون میشم راهنمایی کنید

    • علی غلامی

      سلام
      برای قسمت دیدگاه ها از افزونه ای استفاده نشده و قسمتی که میفرمایید کدنویسی شده

  5. حمید

    سلام
    تازه کار هستم
    یه قالب ایجاد کردم با html , css
    تو قسمت هدر سایت یه شماره تماس گذاشتم
    حالا کاربر چطوری می تونه این شماره رو تغییر بده ؟
    کد php و لازم دارم
    با تشکر فراوان

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

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

    • هادی قربانی

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

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

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