The post آموزش ساخت هدرهای مختلف در وردپرس appeared first on ویرا وردپرس.
]]>به همین دلیل یکheader مرتبط و جذاب میتواند به خوبی ذهن مخاطبان را آماده کند که دقیقا به سوی صفحات دیگر و گشتن در آن برای پیداکردن خدمات و هدف مورد نظرشان بروند. در ادامه همرا ما بشید تا بهصورت کامل در اینباره بحث کنیم.
ساختار صحیح و مناسب برای header در یک وبسایت وردپرسی بسیار مهم است. هدرها یکی از اجزای اصلی و قسمت بالایی وبسایت را تشکیل می دهند، که در هر صفحه نمایش داده میشود. بنابراین ساخت هدرهای مختلف در وردپرس متناسب با نوع کارایی هر صفحه ( وبلاگ، صفحه فروش محصولات، صفحه اصلی سایت و صفحات لندینگ پیج ممکن متفاوت و مجزا طراحی و کدنویسی شوند.
اهمیت ساختار صحیح header به دلایل زیر است:
اکثر طراحان وبسایت سعی دارند که بخش هدر Header را برای قرار دادن عنوان اصلی و لوگوی وبسایت در نظر بگیرند تا در بالای صفحه و مرکز دید قرار بگیرد. این قسمت اولین چیزی است که بازدیدکنندهها با آن روبرو میشوند و به آنها کمک میکند تا هویت و برند شما را شناسایی کنند. طراحی مناسب هدرها میتواند اعتبار و حرفهای بودن وبسایت شما را نشان دهد.
اگر می خواهید تا مشتریان به راحتی محصولات و خدمات مورد نظر خود را در وبسایت شما پیدا کنند، از ورژن ناوبری یا همان جستجو در هد خود باید استفاده کنید که لینکهای مهم و بخشهای کلیدی وبسایت را در بالای صفحه نمایش میدهد. ساختار درست و منظم header به کاربران کمک میکند تا به سرعت و راحتی به صفحات مورد نظر دسترسی پیدا کنند و تجربه کاربری بهتری داشته باشند.
ساخت هدرهای مختلف در وردپرس و همچنین ساختار مناسب آنها به بهبود سئو (SEO) کمک میکند. در مثلا در قسمت وبلاگ عناصر مهمی مانند عنوان اصلی (H1) و عناوین فرعی (H2، H3 و غیره) در هدرها قرار میگیرند. استفاده صحیح از عناصر عنوان و ساختار سلسله مراتبی هدرهای وبسایت شما، به موتورهای جستجو کمک میکند تا محتوای وبسایت را درک کرده و رتبهبندی مناسبتری در نتایج جستجو داشته باشد.
طراحی header ریسپانسیو به معنای آن است که header به طور خودکار با توجه به اندازه صفحه نمایش دستگاه، مناسب ترین نمایش را داشته باشد. این به کاربران کمک میکند تا به راحتی به سایت دسترسی پیدا کنند و تجربه کاربری بهتری داشته باشند. بسیاری از وبسایتها از طریق دستگاههای مختلفی مانند کامپیوترها، تبلتها و تلفنهای همراه سرچ میشوند.
به طور کلی، ساختار درست و مناسب هدرها در وبسایت وردپرسی میتواند به بهبود هویت کالا و خدماتی که ارائه میدهید تاثیر مستقیمی داشته باشد و تا حد بسیار زیادی در درصد فروش و نرخ کلیک بر روی وبسایت شما تاثیر تاثیر مثبت یا منفی داشته باشد.
در وبسایتهای وردپرسی، شما میتوانید از انواع مختلفی از هدرها برای طراحی و نمایش وبسایت خود استفاده کنید. قالبهای مختلفی وجود دارند که شما برای وبسایت خود از آن ها استفاده میکنید که هر کدام دارای طراحی خاصی برای هدر ها هستند که می توانید آن ها را متناسب با کاربرد سایت و سلیقه خودتان تغییر دهید.
شاید نیاز داشته باشید که درباره این تغییرات کمی بیشتر بدانید؛ ساخت هدرهای مختلف در وردپرس و جریان این تغییرات را به حالت کلی در ادامه برایتان شرح خواهیم داد:
این مورد را خوب به خاطر بسپارید، زیرا مهمترین قسمت برای ایجاد هدرهای مجزا است. اگر دارای مهارت کدنویسی هستید، میتوانید هدر سفارشی خود را با استفاده از کدهای HTML، CSS و PHP در قالبهای وردپرسی ایجاد کنید. برای این کار، میتوانید از ویرایشگر قالب وردپرس یا افزونههایی مانند Custom CSS یا Simple Custom CSS استفاده کنید. با این روش، میتوانید هدر دلخواه خود را طراحی کنید و کاملترین کنترل را بر روی ظاهر هدر داشته باشید.
ما در ادامه روند و نحوه ساخت هدرهای مختلف در وردپرس با کدنویسی را توضیح خواهیم داد؛ تا انتهای این بحث همراه ما باشید تا به طور کامل نحوه انجام آن را به شما عزیزان آموزش دهیم.
مهم است که در طراحی هدر، به اصول طراحی و تجربه کاربری توجه کنید. هدر باید جذاب و حرفهای باشد و محتوای مناسب و جستجوی آسان را را ارائه کند. همچنین، در نظر داشته باشید که هدر باید سرعت بارگذاری صفحه را تحت تأثیر قرار ندهد و بهینه شده باشد تا بهبود عملکرد وبسایت را فراهم کند.
برای ساخت هدر مجزا با استفاده از کدنویسی در وردپرس، شما میتوانید از قابلیتها و ابزارهای قالب وردپرس استفاده کنید.
در ادامه، روند ساخت هدر مجزا را بهصورت مفصل توضیح خواهیم داد:
قبل از شروع به کدنویسی، بهتر است یک قالب فرعی “چایلدتم (Child Theme)” ایجاد کنید که از قالب اصلی وردپرسی خود جداست. این کار شما تضمین میکند که تغییرات شما در قالب بر اثر بروزرسانیهای آینده قالب اصلی از بین نرود.
در قالب فرعی خود، باید فایل هدر را ایجاد کنید. برای این کار، شما باید یک فایل PHP با نام “header.php” ایجاد کنید.
معمولاً این فایل در مسیر “wp-content/themes/نام-قالب-فرعی/header.php” قرار میگیرد.
در فایل “header.php”، شما میتوانید کد HTML و PHP خود را بنویسید تا هدر موردنظر خود را طراحی کنید.
از تگهای HTML مختلفی مانند `<header>، <nav>، <div>` و… برای طراحی هدر میتوان استفاده نمود. همچنین، از کدهای PHP برای اضافه کردن مانند لوگو یا منوهای ناوبری( جستجو محصولات و یا خدمات) یعنی به اصطلاح عناصر داینامیک استفاده نمود.
بعد از طراحی هدر، اکنون نوبت این است که باید آن را به تنظیمات قالب خود اضافه کنید.
برای این کار، باید کدی مانند:
get_header: ()
را در قالب اصلی یا صفحات موردنظرتان قرار دهید. این کد، ورودی هدر را از فایل “header.php” قالب فرعی شما دریافت میکند و هدر را نمایش میدهد.
هنگامی که هدر را به قالب افزودید، اکنون میتوانید آن را با استفاده از کدنویسی CSS و تگهای HTML سفارشیسازی کنید.
در اینجا یک مثال از ایجاد هدر مجزا برای صفحه وبلاگ با استفاده از کدنویسی در قالب فرعی وردپرس آورده شده است:
ابتدا پوشه قالب فرعی خود را در مسیر “wp-content/themes/” ایجاد کنید، به عنوان مثال “my-child-theme”.
در پوشه قالب فرعی، فایل “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 هدر مجزا را در آن قرار دهید. برای مثال:
در این مثال، فایل “header-blog.php” شامل یک هدر ساده است که شامل یک عنوان (بلاگ من) و یک نوار ناوبری یا همان نوار جستجوی است. شما میتوانید این کد را طبق نیاز خود تغییر دهید.
اکنون، وقتی شما وارد وبسایت خود میشوید و صفحات وبلاگ را مشاهده میکنید، وردپرس فایل “header-blog.php” را بازخوانی می کند . در صورتی که فایل “header-blog.php” در قالب فرعی وجود نداشته باشد، وردپرس به جای آن از فایل “header.php” در قالب اصلی استفاده میکند.
سخن نهایی
در این مقاله نحوه ساخت هدرهای مختلف در وردپرس را برای شما همراهان همیشگی وبسایت ویرا وردپرس تشریح نمودیم. به روشهای مختلفی برای ایجاد هدر برای صفحات مختلف اشاره نمودیم و نحوه عملکرد هر مورد را نیز در این مقاله بررسی کردیم. برای کسب اطلاعات آموزشی بیشتر در این زمینه میتوانید به قسمت آموزش وردپرس در وبسایت ویراوردپرس مراجعه کنید.
The post آموزش ساخت هدرهای مختلف در وردپرس appeared first on ویرا وردپرس.
]]>