این نوشته قسمت 4 از مجموع 8 در سری آموزش طراحی قالب وردپرس می باشد

معرفی و کاربرد دو فایل header.php و footer.php 

در قسمت سوم آموزش تا ساختن و نمایش پست ها در فایل single.php پیش رفتیم. و اکنون قالب ما شامل 3 فایل index.php, single.php, و style.css و همچنین Screenshot.png می باشد.

حال دو فایل دیگر در این پست به قالب خود اضافه می کنیم header.php و footer.php.

پس به قالب در دست ساخت بروید و دو فایل بالا را بسازید تا فایل های قالب ما مانند زیر باشد:

در ادامه مطلب مباحث زیر را بررسی می کنیم:

  1. معرفی و کاربرد فایل header.php
  2. معرفی و کاربرد فایل footer.php
  3. ادغام دو فایل معرفی شده با index.php
  4. ادغام دو فایل معرفی شده با single.php
  5. قدم آخر

1. معرفی و کاربرد فایل header.php

در یک قالب استاندارد وردپرس فایل header.php باید شامل موارد زیر باشد:

  • <DOCTYPE HTML!>
  • تگ  <html>
  • تگ  <head>
  • هر آنچه که باید درون تگ head قرار بگیرد شامل title, meta tags و …
  • قرار دادن تابع ()wp_head
  • بستن تگ <head/>

که یک فایل header.php استاندارد در وردپرس به شکل زیر است:

این کد را در فایل header.php خود کپی کنید.

شاید هنگامی که طراحی سایت را از ابتدا یاد می گرفتید، به شما گفته شده و یا یاد گرفته اید، فایل style.css را به صورت مستقیم و از درون تگ <head> به صفحه سایت اضافه کنید. درون وردپرس نیز به این گونه است اما به روشی دیگر که در قسمت بعدی آموزش یعنی قسمت 5 آن را آموزش می دهیم.

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

توضیح کد بالا

  • DOCTYPE html : برای اینکه مرورگر تشخیص دهد شما از HTML 5 استفاده می کنید.
  • ()language_attributes  : بر اساس زبان سایت شما ویژگی های لازم را به سند HTML بر اساس DOCTYPE اضافه می کند، مثلاً برای سایت های فارسی ویژگی dir=RTL را اضافه می کند.
  • meta charset : باید قبل از هر تگ دیگری درون تگ <head> قرار بگیرد.
  • ()bloginfo     : انتخاب بهترین charset برای سایت شما مثلا UTF-8.
  • ()wp_title     : برای تنظیم عنوان صفحه استفاده می شود و تگ <title> را پر می کند.
  • کدهای خط 6 و 7 مخصوص اضافه کردن قسمت feeds می باشد.
  • ()wp_head   : باید قبل از بسته شدن تگ <head > حتماً حتماً آورده شود بسیاری از افزونه ها و قسمت های مختلف وردپرس از این تابع استفاده می کنند.

در PHP برای فرا خواندن یک فایل در فایل دیگر از تابع ()include استفاده می شود. حال که ما یک فایل به نام header.php داریم و حاوی کد هایی است که ما باید در تمام صفحات خود از آن ها استفاده کنیم، کافی است به جای نوشتن هر بار این کد ها، آنها را یک بار بنویسیم و در بقیه ی صفحات آن را فراخوانی کنیم.

در وردپرس به جای ()include از ()get_header و ()get_footer برای فراخواندن دو فایل header.php  و footer.php  و برای فراخواندن بقیه ی فایل ها از تابع ()get_template_part استفاده می شود.

پس ساختار فایل index.php  و single.php و بقیه ی صفحات از این به بعد باید چیزی مانند زیر باشد:

البته تگ <body> در فایل footer.php بسته می شود که در مرحله ی بعد توضیح داده می شود.

بعضی طراحان تگ <body> را در فایل header.php باز می کنند و در تگ footer.php می بندند و بعضی اوقات در فایل header.php بعد از تگ <body> یک منو برای بالای صفحه طراحی می کنند. این ها دیگر به سلایق شما بستگی دارد.

همان طور که گفتیم برای فراخوانی فایل header.php در بقیه ی فایل ها مانند index.php و single.php از تابع ()get_header استفاده می شود.

2. معرفی و کاربرد فایل footer.php

فایل footer.php کمی ساده تر است و شامل کد زیر است:

این کد را در فایل footer.php خود ذخیره کنید.

توجه کنید که تگ <body> و <html> در این تگ بسته می شوند و تابع مهم ()wp_footer نیز در این فایل فراخوانی می شود. حتماً این تابع را قبل از بسته شدن تگ <body/> فراخوانی کنید.

و همان طور که در بالا گفتیم برای فراخوانی فایل footer.php در بقیه ی فایل ها مانند index.php و single.php از تابع ()get_footer استفاده می شود.

پس ساختار فایل ها همان طور که در بالا هم گفتیم در همه ی فایل های فالب شما باید مانند زیر باشد:

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

پس بر اساس دو مرحله بالا ، در مرحله 3 و 4 که در زیر آوردیم ساختار فایل های index.php و single.php به صورت زیر تغییر خواهد کرد.

3. ادغام دو فایل footer.php و header.php با index.php

اکنون فایل index.php قالبی که در حال ساخت آن هستیم حاوی کد زیر می باشد:

اگر پس از ذخیره کردن فایل ظاهر سایت شما به هم ریخت نگران نباشید به ادامه مطلب ( قسمت 5) بروید.

پس همان طور که می بینید الان 3 فایل مورد نظر با هم ادغام شده اند و محتوای سایت ما را نمایش می دهند.

4. ادغام دو فایل footer.php و header.php با single.php

و کد زیر را در فایل single.php خود ذخیره کنید:

اگر پس از ذخیره کردن فایل ظاهر سایت شما به هم ریخت نگران نباشید به ادامه مطلب( قسمت 5) بروید.

و همان طور که می بینید اکنون فایل single.php شامل محتوای دو فایل header.php و footer.php نیز می باشد.

در ضمن اکنون شما می توانید admin bar را در صفحات وب سایت خود هنگامی که به صورت ادمین در حال بازدید از سایت هستید ببینید چر اکه شما دو تابع ()wp_head و ()wp_footer را در قالب خود فراخوانی کرده اید.

5. قدم آخر 

بعد از جای گذاری کد های بالا در صفحه ی اصلی مجدداً مانند زیر شد یعنی نامرتب:

این به هم ریختگی در رابطه با کدهای CSS موجود در فایل ها بود که هنوز آن ها را وارد نکرده ایم.

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

درآموزش بعدی فایل کاربردی و مهم هر قالب یعنی functions.php را معرفی می کنیم و با استفاده از این فایل ویژگی های جدید به سایت اضافه می کنیم.

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