آموزش ساخت هدرهای مختلف در وردپرس

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

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

چرا ساخت header در سایت وردپرسی مهم است؟

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

اهمیت ساختار صحیح header به دلایل زیر است:

1. نشانگر هویت و برند:

اکثر طراحان وبسایت سعی دارند که بخش هدر Header را برای قرار دادن عنوان اصلی و لوگوی وبسایت در نظر بگیرند تا در بالای صفحه و مرکز دید قرار بگیرد. این قسمت اولین چیزی است که بازدیدکننده‌ها با آن روبرو می‌شوند و به آنها کمک می‌کند تا هویت و برند شما را شناسایی کنند. طراحی مناسب هدرها می‌تواند اعتبار و حرفه‌ای بودن وبسایت شما را نشان دهد.

2. جستجوی سریع:

اگر می خواهید تا مشتریان به راحتی محصولات و خدمات مورد نظر خود را در وبسایت شما پیدا کنند، از ورژن ناوبری یا همان جستجو در هد خود باید استفاده کنید که لینک‌های مهم و بخش‌های کلیدی وبسایت را در بالای صفحه نمایش می‌دهد. ساختار درست و منظم header به کاربران کمک می‌کند تا به سرعت و راحتی به صفحات مورد نظر دسترسی پیدا کنند و تجربه کاربری بهتری داشته باشند.

3. SEO بهبود یافته:

ساخت هدرهای مختلف در وردپرس و همچنین ساختار مناسب آن‌ها به بهبود سئو (SEO) کمک می‌کند. در مثلا در قسمت وبلاگ عناصر مهمی مانند عنوان اصلی (H1) و عناوین فرعی (H2، H3 و غیره) در هدرها قرار می‌گیرند. استفاده صحیح از عناصر عنوان و ساختار سلسله مراتبی هدرهای وبسایت شما، به موتورهای جستجو کمک می‌کند تا محتوای وبسایت را درک کرده و رتبه‌بندی مناسب‌تری در نتایج جستجو داشته باشد.

4. ریسپانسیو بودن:

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

به طور کلی، ساختار درست و مناسب هدرها در وبسایت وردپرسی می‌تواند به بهبود هویت کالا و خدماتی که ارائه می‌دهید تاثیر مستقیمی داشته باشد و تا حد بسیار زیادی در درصد فروش و نرخ کلیک بر روی وبسایت شما تاثیر تاثیر مثبت یا منفی داشته باشد.

مقدمات ساخت هدرهای مختلف در ورپرس

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

شاید نیاز داشته باشید که درباره این تغییرات کمی بیشتر بدانید؛ ساخت هدرهای مختلف در وردپرس و جریان این تغییرات را به حالت کلی در ادامه برایتان شرح خواهیم داد:

• پلتفرم بسیار قدرتمند وردپرس به شما اجازه می‌دهد تا از قالب‌های آماده برای وبسایت خود بارگذاری و نصب کنید. این قالب‌ها معمولاً شامل هدرهای طراحی شده آماده هستند که دارای قابلیت تنظیمات دستی برای سفارشی‌سازی هدر هستند. شما می‌توانید یک قالب مناسب را انتخاب کرده و با استفاده از تنظیمات موجود در قالب، هدر را به سلیقه خود تنظیم کنید.
• وردپرس دارای قابلیت Customizer است که به کاربران و طراحان سایت اجازه می‌دهد هدر و سایر قسمت‌های وبسایت را سفارشی کنید. با ورود به بخش Customizer از پیشخوان وردپرس، می‌توانید تنظیمات هدر را تغییر دهید، نوع هدر را انتخاب کنید، تصاویر و لوگو را بارگذاری کنید و سایر تنظیمات دلخواه را اعمال کنید.
• و همچنین شما می‌توانید از قابلیت‌های دیگر وردپرس استفاده کنید؛ به‌طور مثال با نصب و فعالسازی پلاگین‌هایی مانند Elementor، Beaver Builder، و Divi Builder، می‌توانید به راحتی هدرهای سفارشی را طراحی و ساخته و آنها را با استفاده از ابزارهای بصری سفارشی کنید.
• استفاده از کدنویسی سفارشی:

این مورد را خوب به خاطر بسپارید، زیرا مهمترین قسمت برای ایجاد هدرهای مجزا است. اگر دارای مهارت کدنویسی هستید، می‌توانید هدر سفارشی خود را با استفاده از کدهای HTML، CSS و PHP در قالب‌های وردپرسی ایجاد کنید. برای این کار، می‌توانید از ویرایشگر قالب وردپرس یا افزونه‌هایی مانند Custom CSS یا Simple Custom CSS استفاده کنید. با این روش، می‌توانید هدر دلخواه خود را طراحی کنید و کاملترین کنترل را بر روی ظاهر هدر داشته باشید.

ما در ادامه روند و ‌نحوه ساخت هدرهای مختلف در وردپرس با کدنویسی را توضیح خواهیم داد؛ تا انتهای این بحث همراه ما باشید تا به طور کامل نحوه انجام آن را به شما عزیزان آموزش دهیم.

مهم است که در طراحی هدر، به اصول طراحی و تجربه کاربری توجه کنید. هدر باید جذاب و حرفه‌ای باشد و محتوای مناسب و جستجوی آسان را را ارائه کند. همچنین، در نظر داشته باشید که هدر باید سرعت بارگذاری صفحه را تحت تأثیر قرار ندهد و بهینه شده باشد تا بهبود عملکرد وبسایت را فراهم کند.

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

برای ساخت هدر مجزا با استفاده از کدنویسی در وردپرس، شما می‌توانید از قابلیت‌ها و ابزارهای قالب وردپرس استفاده کنید.

در ادامه، روند ساخت هدر مجزا را به‌صورت مفصل توضیح خواهیم داد:

1. ایجاد یک قالب فرعی (Child Theme):

قبل از شروع به کدنویسی، بهتر است یک قالب فرعی “چایلدتم (Child Theme)” ایجاد کنید که از قالب اصلی وردپرسی خود جداست. این کار شما تضمین می‌کند که تغییرات شما در قالب بر اثر بروزرسانی‌های آینده قالب اصلی از بین نرود.

2. ایجاد فایل هدر:

در قالب فرعی خود، باید فایل هدر را ایجاد کنید. برای این کار، شما باید یک فایل PHP با نام “header.php” ایجاد کنید.

معمولاً این فایل در مسیر “wp-content/themes/نام-قالب-فرعی/header.php” قرار می‌گیرد.

3. کدنویسی هدر:

در فایل “header.php”، شما می‌توانید کد HTML و PHP خود را بنویسید تا هدر موردنظر خود را طراحی کنید.

از تگ‌های HTML مختلفی مانند `<header>، <nav>، <div>` و… برای طراحی هدر می‌توان استفاده نمود. همچنین، از کدهای PHP برای اضافه کردن مانند لوگو یا منوهای ناوبری( جستجو محصولات و یا خدمات) یعنی به اصطلاح عناصر داینامیک استفاده نمود.

4. اضافه کردن هدر به قالب:

بعد از طراحی هدر، اکنون نوبت این است که باید آن را به تنظیمات قالب خود اضافه کنید.

برای این کار، باید کدی مانند:

• get_header: ()

را در قالب اصلی یا صفحات موردنظرتان قرار دهید. این کد، ورودی هدر را از فایل “header.php” قالب فرعی شما دریافت می‌کند و هدر را نمایش می‌دهد.

5. سفارشی‌سازی هدر:

هنگامی که هدر را  به قالب افزودید، اکنون می‌توانید آن را با استفاده از کدنویسی CSS و تگ‌های HTML سفارشی‌سازی کنید.

یک مثال از ایجاد هدر مجزا برای صفحه وبلاگ با کدنویسی

در اینجا یک مثال از ایجاد هدر مجزا برای صفحه وبلاگ با استفاده از کدنویسی در قالب فرعی وردپرس آورده شده است:

1. ایجاد پوشه قالب فرعی:

ابتدا پوشه قالب فرعی خود را در مسیر “wp-content/themes/” ایجاد کنید، به عنوان مثال “my-child-theme”.

2. ایجاد فایل php:

در پوشه قالب فرعی، فایل “functions.php” را ایجاد کنید و کد زیر را در آن قرار دهید:

• ?>php

• function my_child_theme_header_file() {

• // بررسی اینکه آیا فایل “header-blog.php” در قالب فرعی وجود دارد یا نه

• if ( file_exists( get_stylesheet_directory() . ‘/header-blog.php’ ) ) {

• // استفاده از فایل “header-blog.php” در صفحات وبلاگ

• get_template_part( ‘header-blog’ );

• }

• }

• add_action( ‘wp_head’, ‘my_child_theme_header_file’ );

• ?>

• ایجاد فایل header-blog.php:

در پوشه قالب فرعی خود، فایل “header-blog.php” را ایجاد کنید و کد HTML و PHP هدر مجزا را در آن قرار دهید. برای مثال:

• <!DOCTYPE html>
• <html <?php language_attributes(); ?>>
• <head>
• <meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
• <meta name=”viewport” content=”width=device-width, initial-scale=1.0>
• <?php wp_head(); ?>
• </head>
• <body <?php body_class(); ?>>
• <header>
• <h1>بلاگ من</h1>
• <nav>
  • <!– منوی هدر بلاگ –>
• </nav>
• </header>
• </body>
• </html>

در این مثال، فایل “header-blog.php” شامل یک هدر ساده است که شامل یک عنوان (بلاگ من) و یک نوار ناوبری یا همان نوار جستجوی است. شما می‌توانید این کد را طبق نیاز خود تغییر دهید.

اکنون، وقتی شما وارد وبسایت خود می‌شوید و صفحات وبلاگ را مشاهده می‌کنید، وردپرس فایل “header-blog.php” را بازخوانی می کند . در صورتی که فایل “header-blog.php” در قالب فرعی وجود نداشته باشد، وردپرس به جای آن از فایل “header.php” در قالب اصلی استفاده می‌کند.

سخن نهایی

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