عضویت در سایت

ورود

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

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1171 آموزش و 2025 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش طراحی قالب وردپرس – قسمت سوم(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 به صورت زیر است:

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

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

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

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

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

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

موفق باشید.

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

همیشه در تلاش برای یادگیری :) ارتباط با من: 09159352892

دنبال کردن

ارسال نظر

رفتن به بالا

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

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

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