سلام اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

اگه theme های مختلف ساخته شده برای وردپرس رو دیده باشین حتما دیدین که از فایل های مختلفی تشکیل شده اند.

header و footer و sidebar و غیره

حسن اینکار اینه که ما مثلا اگه یک زمانی میخواستیم قسمتی از هدر رو تغییر بدیم مجبور نباشیم اینکار رو در Pages و Index و Archive تغییر بدیم، فقط کافیه بریم به Header و اون رو هر کاری خواستیم بکنیم.

بعدا بیشتر توضیح میدم هرچند احتمالا قبلش خودتون میفهمین!

ما امروز بعد با style کاری نداریم، در درسهای قبل هدر،سایدبار و محتوا رو style کردیم و فوتر هم به هر نحوی دوست داریم میتونیم تغییر بدیم.

به پوشه ی amoozesh میریم جایی که فایلهای style.css و index.php و searchform.php قرار دارند.

۱-فایل index رو باز میکنیم.

۲-notepad رو باز میکنیم و تمام header Div رو از index کپی میکنیم (از شروع div هدر تا قبل از div مربوط به content)

3-به گزینه File میریم و بعد روی Save As کلیک میکنیم و اسم فایل رو header.php قرار میدیم روی save کلیک میکنیم.

۲-notepad رو باز میکنیم و تمام header Div و هر چی بالای اون هست رو از index کپی میکنیم (از شروع فایل index  تا قبل ازشروع div مربوط به content)

3-در یک فایل جدید به اسم header.php چیزهایی که کپی کرده بودیم رو paste میکنیم.

طی این سه مرحله ما قسمت هدر سایت رو جدا کردیم و در یک فایل به همین نام قرار دادیم.

حالا باید در index کاری کنیم که به جای کدی که کپی کردیم از کدی استفاده کنه که در فایل header.php قرار داره!

بنا بر این از یک تابع php استفاده میکنیم:

کد هایی که کپی کرده بودیم  رو پاک میکنیم و با کد زیر جایگزین میکنیم:

<?php get_header () ; ?>

این تابع اتوماتیک فایل هدر رو include میکنه یعنی کاری که الان انجام دادیم میتونیم به صورتی که برای searchform نوشتیم هم بنویسیم:

<?php include (TEMPLATEPATH . ‘/header.php’); ?>

این دو هیچ فرقی ندارن، من از بالای استفاده میکنم، چون دلیلی برای استفاده از پایینی نمیبینم.

با سایدبار هم دقیقا باید همین کار رو انجام میدیم.

۱-یک فایل با نام sidebar.php میسازیم و div مربوط به سایدبار (sidebar Div) رو کپی میکنیم به درون sidebar.php و کد زیر رو جایگزینش میکنیم:

<?php get_sidebar(); ?>

همین کار رو هم با فوتر میکنیم(یادتون نره کارهایی که میکنید رو سیو کنید هااا!)

۱- فایلی با نام footer.php میسازیم.

۲- در index قسمت div فوتر رو کپی میکنیم و در footer.php قرار میدیم.

۳- در index.php کد زیر رو جایگزین میکنیم.

<?php get_footer(); ?>

4- فایل رو ذخیره میکنیم.

امروز فایل index رو ۴ تکه کردیم.

اینکار برای تغییر دادن theme در آینده بسیار کمکمون میکنه.

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

amoozesh

لطف کنید اگه اشکالی پیدا کردین بهم بگین، ممنون.

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

۲ یا ۳ جلسه ی دیگه بیشتر نمونده که تموم بشه!

همینطور ۲ یا ۳ روز بیشتر نمونده به امتحانی که من تا حالا یک بار هم درسش رو نخوندم!

فکر کنم باید مشروط شم چون من کلن به این کلمه خیلی علاقه دارم! البته با یک ” ه ” در آخرش!

take care of سلف هاتون!

بابای.

ویرایش: شماره ی دو و سه  که خط خورده اند اشتباه هستند و خطهای قرمز رو باید انجام بدین، با عرض معذرت.

---

پستهای مرتبط

• آموزش طراحی سایت
• آموزش طراحی قالب وردپرس #۱
• آموزش طراحی قالب وردپرس-الف (مواد لازم)
• آموزش طراحی قالب وردپرس #۲
• آموزش طراحی قالب وردپرس #۳