ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، باید وارد حساب کاربری خود در سایت شوید.
در بین 692 آموزش و 1235 پرسش به دنبال چه هستید؟

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


آموزش طراحی قالب وردپرس – قسمت سوم(header.php)

سلام

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

دوره رایگان طراحی قالب وردپرس

دوره رایگان طراحی قالب وردپرس

فایل header.php چیست؟

یک قالب به بخش های مختلفی از جمله:

  • header: قسمت بالای سایت که شامل منوها و … می باشد.
  • body: بدنه ی اصلی سایت که محتوا درون این بخش قرار میگیرد.
  • footer: که قسمت پایین سایت هست.

در قالبی که ما میخواهیم طراحی کنیم، سه بخشی که در بالا توضیح داده شد بدین صورت می شود:

برای مشاهده تصویر کلیک کنید

در۹۹ درصد قالب ها header و footer بین تمامی قالب ها مشترک است، که قالب وردپرس ما هم از این قاعده مستثنی نیست. لذا یک فایل به نام header.php و یک فایل به نام footer.php می سازیم و کدهای مربوطه را درون این دو فایل قرار میدهیم تا در تمام قالب سایت مشترک باشد.

پس فایل header.php حاوی کدهای بخش هدر قالب می باشد که در تمامی صفحات مشترک است.

وارد کردن قالب در PhpStorm

همانطور که در جلسه ی اول گفتیم، با هر محیط برنامه نویسی می توانید قالب وردپرس را طراحی کنید، ولی برای راحتی کار از PhpStorm استفاده میکنیم، برای وارد کردن قالب در PhpStorm کافیست در لوکال هاست یک وردپرس نصب کنید و سپس قالبی که در اختیار شما قرار دادیم(به صورت html) را در پوشه themes قرار دهید.

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

قرار دادن قالب در وردپرس

قرار دادن قالب در وردپرس

با انجام این کار ما الان قالب را روی وردپرس نصب کردیم، ولی الان به سراغ فعالسازی قالب از داخل پیشخوان وردپرس نمیریم 🙂

ساخت فایل header.php

  • در محیط PhpStorm روی پوشه قالب(که ما اسم آن را beporsam گذاشتیم) راست کلیک کنید و New و سپس New PHP File را انتخاب کنید و اسم header.php را نوشته و ok را انتخاب کنید.
ساخت فایل جدید در phpstorm

ساخت فایل header.hpp در phpstorm

  • سپس در PhpStorm فایل index.html را باز کنید(روی فایل دابل کلیک کنید).
  • حالا باید ببینیم که تا خط چندم مربوط به هدر قالب است که باید کپی کنیم(اینجاست که اگر آشنایی مختصری با HTML داشته باشیم به راحتی خواهید فهمید).
  • از خط ۱ تا خط ۷۹ را کپی و در فایل header.php قرار میدهیم.

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

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

تابع get_template_directory_uri آدرس پوشه قالب را بر میگرداند(که اسم قالب ما beporsam هست که در پوشه themes قرار دارد)، لذا وقتی از این تابع استفاده میکنیم به آدرس site.ir/wp-content/themes/beporsam اشاره دارد.

  • در فایل header.php چندین آدرس فایل css و یک آدرس عکس داریم که باید به آدرس جدید تغییر بدیم تا در وردپرس قابل شناسایی باشد. برای مثال آدرس فایل style.css به صورت زیر است:
حتما بخوانید:  آموزش سیستم عامل DOS - قسمت هفتم(ساخت پوشه)

آدرس دهی بالا فقط در قالب های HTML صحیح است.

  • حالا میخواهیم آدرس دهی جدید با کمک تابع get_template_directory_uri  انجام بدیم که به صورت زیر میشود:

که قطعه کد بالا به فایل style.css موجود در پوشه beporsam اشاره میکند.

که پس از جایگذاری آدرس جدید، فایل header.php به صورت زیر میشود:

بخش هدر از قالب سایت را تکمیل کردیم، به دلیل طولانی نشدن آموزش فایل footer.php را در قسمت بعدی می سازیم.

حتما بخوانید:  آموزش ثبت وبلاگ در گوگل وب مستر

موفق باشید.

درباره احمد آخوندیمدیر

در صورتی که از بپرسم راضی بودید؛ میتوانید حمایت مالی کنید

دنبال کردن من

پاسخ دهید