فایل header.php که با آن در آناتومی پوسته وردپرس آشنا شدیم یکی از مهترین بخش های پوسته وردپرس است که در اکثر پوسته استاندارد طراحی شده برای این سیستم چنین فایلی را در میان فایل های موجود در شاخه پوسته وجود دارد. اما در این آموزش قصد داریم شما را با نکات پایه و ساده ای آشنا کنیم که با استفاده از آن ها در طراحی پوسته شخصی و یا حتی ویرایش پوسته فعلی سایت خود برای رسیدن به بهترین نتیجه ممکن کمک می کند. توجه داشته باشید تعدادی از این باید و نبایدها بر مبنای استاندارد طراحی وب و الباقی آن ها نیز بر اساس تکنیک استفاده شده در پوسته های محبوب و استاندارد طراحی شده برای وردپرس تهیه شده اند.
باید نوع سند مناسب را در ابتدای فایل سرآیند تعیین کنیم
در نوشته نسخه جدید راهنمای HTML / CSS گوگل برای طراحی سایت نیز با اهمیت تعیین نوع سند یا DOCTYPE در ابتدای فایل سرآیند آشنا شدیم. تقریبا همه ما با کنسرسیوم شبکه گسترده جهانی (W3C) آشنا هستیم، که استانداردها و توصیه هایی را برای وب تعیین می‌کند. در اعتبارسنجی و یا همان W3C Validator یکی از مهمترین پارامترها DOCTYPE است که بسیاری از دیگر پارامترهای دیگر در صفحات سایت شما بر اساس همین پارامتر و استاندارد تعیین شده برای آن ارزیابی می‌شوند.
XHTML 1.0 Transitional، XHTML 1.0 Strict، XHTML 1.1 و HTML5 چهار انتخاب محبوب در بین طراحان و توسعه دهندکان وب است که HTML5 پیشرفته ترین انتخاب برای نوع سند وب است که در حال حاضر نیز اسناد رسمی آموزشی و راهنمای آن انتشار یافته است و به زودی در سال 2015 میلادی با نسخه 5.1 آن نیز که هم اکنون در حال توسعه می‌باشد آشنا خواهیم شد. برای تعیین اینکه سند شما بر اساس استانداردهای نوع HTML5 است کافی است کد <!DOCTYPE HTML> را در ابتدای فایل Header خود قبل از هر کد دیگری قرار دهید که هم اکنون این صفحه و دیگر صفحات سایت تورتک نیز دارای این کد هستند.
نباید بیش از حد از متاتگ ها استفاده کنیم
زمانی بود که استفاده از متاتگ ها یکی از راه های افزایش ارتباط با موتورهای جستوجو بود. اما از آن زمان دهه ها می‌گذرد و حال استفاده بیش از حد از متاتگ‌ها حتی می‌تواند باعث آسیب رساندن به موقعیت وبگاه شما در موتورهای جستوجو شود. البته هنوز هم بایستی از متاتگ هایی چون تگ توضیحات استفاده کرد، اما استفاده تگ های کلمات کلیدی، کپی رایت، تاریخ انتشار، نام طراح و … چندان جالب به نظر نمی‌رسد. اکنون کم‌حجم بودن <head> و دیگر اجزای صفحه مهم‌تر است. وجود تگ‌هایی مانند تگ تعیین اندازه نمایش پیش فرض صفحه در نمایشگر و دستگاه مختلف، آدرس خوراک RRS سایت یا وبلاگ، تگ‌های استایل و برخی از فایل‌های جاوا اسکریپت، تگ‌های دریافت بازخورد و دیگر تگ‌های ارتباطی با دیگر وبگاه ها باید در فایل سرآیند حفظ شوند.
باید منوی ناوبری سایت را در فایل header قرار دهیم
در صورتی که منوی ناوبری (Navigation Menu) سایت شما قرار است در بالای صفحات سایت نمایش داده شوند هیچ دلیلی برای قرار نگرفتن منوی پوسته وردپرس در فایل header.php وجود ندارد. بلکه قرار دادن منوی اصلی وبگاه در فایل header.php باعث آسان‌تر شدن روند طراحی می‌شود و بازدید کننده نیز با مشاهده ثابت آن در همه صفحات و حتی با کمک آن به آسانی به محتوای اصلی دسترسی پیدا می‌کند.
باید فایل JS و CSS مورد نیاز را با استفاده از wp_enqueue اضافه کنیم
همانطور که گفتیم یک فایل سرآیند سبک بهتر از سرآیندی است که ده ها کد بیشتر دارد. در صورت امکان سعی کنید کدهای جاوا اسکریپت را در فوتر بگنجانید. در صورتی که نیاز است تا کدهای جاوا اسکریپت در Header باشد، بهتر است تا آنها را در یک فایل JS ذخیره کرده و با استفاده از کد زیر در فایل Functions.php پوسته سایت خود که از wp_enqueue به این منظور استفاده می‌کند در قسمت سرآیند کدهای HTML سایت خود بارگذاری کنیم.
<?php wp_enqueue_script( 'نام اسکریپت با حروف کوچک لاتین', 'آدرس فایل اسکریپت', 'آرایه ای از اسکریپت هایی که اسکریپت ما برای اجرای صحیح به بارگذاری آن ها نیاز دارد', 'نسخه اسکریپت ما', 'اضافه شدن کدهای فراخوان این اسکریپت در بخش سرآیند و یا پایین صفحه با مقدار True/False' ); ?>
و البته برای این که مطمئن شویم این روند به درستی انجام می‌شود به شیوه زیر از کدها استفاده می‌کنیم.
<?php
function mv_my_theme_scripts()
{
wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/scriptname.js',array('jquery'),'1.0',true);
}
add_action('wp_enqueue_scripts','mv_my_theme_scripts');
?>همچنین در صورتی که می‌خواهید فایل CSS مختلفی را در بخش Head صفحات سایت خود بارگذاری کنید بهتر است برای اعمال تغییرات و توسعه کدها در آینده به جای استفاده از روش معمول (اضافه کردن کد به صورت دستی در فایل header.php) از کدهای زیر بهره برید.
<?php
function mv_my_theme_styles()
{
if (!is_admin())
wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css',false,'1.1','all');
}
add_action('wp_enqueue_scripts','mv_my_theme_styles');
?>باید تابع wp_head را در header.php قرار دهیم
قلاب‌ها و یا همان Hook در وردپرس به ما و افزونه‌های نصب شده بر روی سایت یا وبلاگ ما کمک می کنند به سادگی کدهای مورد نیاز خود را به سادگی و تنها با نوشتن یک خط کد به بخش مختلف پوسته سایت وردپرسی خود اضافه کنیم. قلاب wp_head نیز یکی از مهمترین Action Hook تعریف شده در سیستم وردپرس است که معمولاً قبل از کد </Head> در فایل header.php پوسته وردپرسی از آن استفاده می شود و افزونه های زیادی مانند افزونه سئو سایت، افزونه آمارگیر و … از آن برای اضافه کردن متا تگ، فراخوانی فایل CSS، JS و … خود استفاده می کنند.
باید در انتهای کار خروجی فایل header.php را امتحان کنیم
یکی از بزرگترین اشتباهات این است که پس از اتمام کدنویسی کدهای خروجی بخش header پوسته وردپرسی خود را امتحان نکنیم. شاید در ظاهر هیچ مشکلی در قسمت سربرگ سایت ما وجود نداشته باشد و وب سایت به خوبی نمایش داده شود. پس از اتمام کار یک‌بار دیگر با دقت فایل را ارزیابی کنید و پس از انتشار با استفاده از W3C Validator آن را اعتبار سنجی کنید. با کمی دقت و توجه به جزئیات خواهید توانست کدهای سرآیندی خوب و بهینه سازی شده ایجاد کنید که هم برای طراحی و توسعه وبگاه و هم برای خوانندگان و موتورهای جستجو مورد علاقه و کاربردی باشد.
