0 0

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

مهشید اعتماد
۱۳۹۵/۱۰/۱۶
نظرات : ۴
بازدیدها : 1198

آموزش طراحی قالب وردپرس |  یک قالب برای وردپرس یکی از مباحث جذاب بوده که در این ساعت قرار است به آموزش آن بپردازیم. اکثرا کسانی که با ورد پرس کار می کنند از قالب های آماده و از پیش طراحی شده برای ایجاد سایت خود استفاده می کنند.

بدون شک شما حتما در جستجوی این بوده اید که چگونه یک قالب برای وردپرس طراحی کنید؟

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

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

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

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

همچنین شما باید با زبان تحت وب php هم آشنا باشید تا به راحتی بتوانید به طراحی قالب های زیبا بپردازید.

قالب Thirteen یکی از قالب های پیش فرض وردپرس بوده که در داخل پوشه themes دورن فایل وردپرس قرار دارد.

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

 

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

شکل زیر تمام فایل های مربوط قالب مذکور را نشان می دهد.

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

  جهت طراحی قالب برای وردپرس باید مطابق شکل وارد پوشه wp-content شده و در پوشه themes یک پوشه جدید ایجاد کنید.

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

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

سپس باید براساس شکل زیر درون note pad یک فایل style.css ایجاد کنیم.

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

با ایجاد فایل style.css داخل پوشه wpbdemo می توانید اسکلت قالب خود را مانند شکل زیر در قسمت پوسته ها ببینید.

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

فایل style.css قالب تمام اطلاعات مربوط به ظاهر قالب را در خود نگه داری می کند.

در شکل زیر قسمت منو قالب آبی رنگ است برای تغییر رنگ آن و ایجاد تغییرات دیگر در ظاهر آن باید به فایل style.css مراجعه کنیم.

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

براساس کد زیر می توانیم در فایل style.css رنگ قسمت منو را تغییر دهیم.

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

فایل style.css قالب در شکل زیر قابل مشاهده است.

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

با کدهای موجود در فایل style.css، قالب مطابق شکل زیر تغییر پیدا می کند.

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

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

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

همه قالب های دارای فایل fuction.php هستند که براساس قالب دلخواه خود باید آن را کدنویسی کنید.

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

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

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

پوشه image این قالب ما دارای دو عکس بوده که در هدر قالب قابل مشاهده است و می توانیم آن را براساس شکل زیر تغییر دهیم.

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

لینک دانلود قالب 

اشتراك گذاری نوشته

پاسخی بگذارید