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

به نامش که در کنار ماست

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

خب حالا فایل های header , footer , sidebar و نهایتا index در اختیار ماست.

خب حالا چطور این هارو پر کنیم تا قالب تکمیل میشه.

قبل از این به این عکس یک بار دیگه نگاه کنید:

site-info

گام هفتم- ساخت استایل header این بخش رو ما کپی می کنیم از فایل HTML خام و در header.php کپی می کنیم و محتوای داخل فایل میشود:

خب حالا این اطلاعات استاتیک هستش ما باید اون رو با وردپرس اجین کنیم.

گام هشتم -اصلاح header -به اصلاحات توجه ویژه کنید چون ما API های وردپرس رو اینجا معرفی می کنیم.

ست کردن زبان کد تابع  language_attributes در وردپرس زبان سایت رو نمایش میده کد جدید میشه :

خب حالا میریم سراغ درست کردن عنوان صفحه تابع wp_title عنوان را برمی گرداند ما اسم سایت هم اینجا اضافه می کنیم  با این تایع bloginfo(‘name’) و نتیجه نهایی:

خب حالا نوع انکد سایت رو درست می کنیم:

و مرحله بعدی فراخوانی فایل css اصلی هستش که اون رو باد کد زیر اضافه می کنیم:

خب این حالا یه نکته مهم تمامی منابع سایت اعم از عکس و اعم از فایل های js ,css هر چیزی باید لینکشون اصلاح بشه به این صورت که آدرس فولدر تم به قبل اونا اضافه بشه ما بعنوان مثال فایل لوگو رو به شکل زیر اصلاح می کنیم:

خب این قسمت ما تابع wp_head می باشد، که باید در مابین تگ head قرار بگیرد مثل زیر:

و اما ما اینجا یک منو داریم این منو رو میتونیم هر چیزی رو بهش نسبت بدیم ما لیست برگه ها رو براش در نظر میگیریم  و کد به شکل زیر میشود:

خب مرحله آخر ما تیتر اصلی و زیر تیتر رو با دو تا مورد  wp_title و bloginfo(‘name’) پر می کنیم به شکل زیر:

خب حالا فایل هدر ما به شکل زیر شد:

گام نهم پر کردن footer سایت که کد زیر رو کپی می کنیم:

اگر نیاز اصلاح داشت اصلاح می کنیم چون ما قصد نداریم قالب خیلی شاخی بزنیم به سادگی این رو همین شکل می ذاریمش.

خب گام دهم گذاشتن ساید بار در سایت هستش که در فایل sidebar.php این کد ها رو کپی می کنیم:

گام یازدهم – اصلاح sidebar هستش که ما این گام رو چون سنگین هستش در قسمت بعدی کامل آموزش میدیم پس ساید بار رو به همین شکل استاتیک اینجا رها می کنیم تا در قسمت بعدی به طور کامل داینامیکش کنیم تا کاربر بتونه ابزارک ها رو بهش اضافه کنه چون توضیحش الان باعث گمراهی میشود.

گام دوازدهم ساخت Index هستش – این گام خیلی مهم هستش چون index هسته اصلی قالب در وردپرس است چون اگر فایل های دیگر وجود نداشته باشد به این صفحه مراجعه میشود و جایگزین میشود مثل صفحات داخلی پس ما از فایل index.html که تو جلسه اول دانلود کردین اون رو به شکل زیر کپی می کنین:

خب در اینجا ما یک تکرار داریم خب اینها رو همه رو باید داخل یک حلقه بذاریم پس یک کاری بکنیم که عاقلانه باشد اول چک کنیم ببینیم پستی برای نمایش وجود دارد بعد داخل حلقه نمایش بدیم شیوه به این شکل میشه که بعد باید ادقام کنیم.

Loop حلقه تکرار هستش 404 اگر پستی نباشه نمایش داده میشه خب پس توضیح API  های این قسمت have_posts() اگر پستی وجود داشته باشه برمیگردونه تابع the_post پست ها رو به ترتیب فراخوانی میکنه و آماده میکنه برای دیگر API ها بقیه اش هم کد PHP هستش حالا نحوه ادقام:

حالا مرحله بعدی تکمیل قسمت حلقه هستش که الگوی پست ما داخل هستش به شکل زیر تکمیل می کنیم:

خب تابع ها جایگذاری شدند تابه the_post شرایط رو برای تابع های فعلی محیا می کنه تابه the_permalink لینک پست رو نمایش میده the_title عنوانش رو و تابع the_content متن تا قبل از ادامه مطلب نمایش میده که متن وسطش رو به جای جمله ادامه مطلب میذاره و تابع the_author نویسنده اون رو نمایش میده و نمایش تعداد کامنت ها رو به عهده شما میذاریم.

مرحلع بعدی حالا ما باید فایل عای header , footer , sidebar رو داخل این فایل اضافه کنیم چون header و sidebar قبل از این هستند این دو تا رو اول فایل اضافه می کنیم:

و برای footer آخر فایل این رو اضافه می کنیم:

خب در آخر فایل Index به شکل زیر شد:

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

HTML

‌A1Gard

اول از همه کوچک ترین عضو مجموعه 4xmen بنده حقیر هستم. در ثانی یک توسعه دهنده هستم زمینه های تخصصی کارم :‌ Delphi, PHP, C++ ,Python, JavaScript, Unity game engine, C#, asm و علاقه مند به لینوکس، RCE ، کریپتوگرافی هستم. تا الان حضرت حق اینا رو به ما داده و هر وقت که بخواد ازمون میگیره دست خودشه. یا حق، با حق، تا حق

More Posts

2 thoughts on “آموزش گام به گام طراحی قالب برای وردپرس – قسمت دوم”

  1. همین! تموم شد؟
    انتظار بیشتر از اینا داشتیم. اگه ممکنه این آموزش رو تا سطح حرفه ای ادامه بدید ممنون.
    یا شاید قسمت های دیگه را من پیدا نکردم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *