سه شنبه 7 آذر 1396
ن : bamana

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

آموزش گام به گام طراحی قالب وردپرس قسمت دوم : امیدوارم که شما تا این قسمت مقدماتی که جهت طراحی قالب وردپرس در قسمت اول گفته شد را انجام داده باشید . در این قسمت به شما آموزش داده خواهد شد که چطور دایرکتوری و ساختار پوسته را در وردپرس ایجاد کنید و پوسته خود را نصب کنید. اگر شما تجربه کار با وردپرس را داشته باشید، حتما می دانید که از قسمت تنظیمات -> پوسته ها می توانید قالب هایی که در وردپرس نصب شده اند را ببینید.

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



منظور از نصب شدن قالب در وردپرس چیست ؟


زمانی که شما فایل های قالب وردپرس خود را طبق تصویر درمسیر زیر قرار دهید، در واقع آن قالب را در وردپرس نصب کرده اید اما در این جا نکته ای وجود دارد که باید به آن اشاره کنم، مفهوم نصب بودن قالب و فعال بودن آن در وردپرس متفاوت است . همانطور که در عکس می بینید چندین قالب در وردپرس ما نصب می باشد اما فقط یکی از آن ها را می توانیم از طریق پیشخوان -> تنظیمات -> پوسته ها فعال کنیم تا نمایش داده شود.

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



زمانی وارد تنظیمات -> پوسته ها می شویم قالب هایی که در وردپرس نصب هستند نمایش داده می شوند که با کلیک بر روی گزینه ی فعال کردن می توانیم قالب موردنظرمان را فعال کنیم .

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



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


مراحل نصب قالب در وردپرس :

هدف ما این است قالب html خود را به صورت قالب وردپرسی در وردپرس معرفی کنیم در ابتدا فایل قالب html را از لینک زیر دانلود کنید تا مراحل را با هم دنبال کنیم.


دانلود قالب html

مرحله ی اول :

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


نکات قالب های وردپرس :


برای اینکه یک قالب در وردپرس به رسمیت شناخته شود باید دارای دو فایل
1- Index.php
2- style.css باشد.
در ابتدا ما یک فولدر با نام Avintheme در میان قالب های وردپرس ایجاد کردیم، که فاقد فایل می باشد. زمانی که از پیشخوان وردپرس به قسمت پوسته ها می رویم طبق تصویر زیر جزء پوسته های خراب می باشد واین پیام را می دهد که پوسته نصب شده است اما ناقص است.

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

مرحله ی دوم :

فایل های پوسته استاتیک موردنظر را دراین فولدر قرار دهید. طبق نکته ی بالا پوسته ای در وردپرس به رسمیت شناخته می شود که دارای دو فایل index.php و style.css باشد بنابراین باید پسوند فایل index.html را به php تغییر دهید.
نکته : از آنجایی که در ویندوز پسوند فایل ها قابل مشاهده نمی باشد. از Control Panel وارد Folder Options شوید و در تب view تیک گزینه hide extentsions for known file type رو بردارید و اوکی کنید.

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


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

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



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

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

و اما برای تصویر قالب وردپرسی، یک اسکرین شات از قالب html خود گرفته و با نام screenshot.png ذخیره کرده ودر میان فایل های قالب خود قرار دهید تا همانند تصویر زیر، پوسته وردپرسی شما دارای هویت شود.

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

با کلیک بر روی جزئیات قالب، که با نام Avintheme در تصویر بالا قابل مشاهده است می توانید اطلاعات کامل پوسته طبق تصویر زیر ببینید.

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

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

منبع: وببیت