آموزش ساخت قالب وردپرس – قسمت اول

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

چند وقتی می شد که قصد نوشتن یه مطلب جدید داشتم، از طرفی برای پروژه ای باید یک طرح رو تبدیل به قالب وردپرس می کردم. این شد که تصمیم گرفتم سری «آموزش ساخت قالب وردپرس» رو بنویسم. امیدوارم هر چه سریعتر این آموزش رو کامل کنم. احتمال اینکه نسخه ویدیویی این آموزش رو هم تهیه کنم وجود داره! ( آموزش ساخت قالب وردپرس – قسمت اول )

توضیحات

قبل از شروع یک سری توضیحات رو بگم. هدف ساختن یک Theme برای وردپرس هست. Theme رو بعضی، «قالب» و بعضی هم «پوسته» ترجمه می کنند. پس اگر جایی در طول آموزش گفته شد «قالب وردپرس» و جای دیگری گفته شد «پوسته وردپرس» منظور همون Theme بوده! تا جایی که من دیدم انگلیسی زبان ها از Create برای ساختن پوسته استفاده می کنند نه Design ! به همین دلیل من هم تصمیم گرفتم در طول آموزش از «ساختن قالب وردپرس» و یا «ایجاد قالب وردپرس» («ساختن پوسته وردپرس» و یا «ایجاد پوسته وردپرس») استفاده کنم، نه عبارت «طراحی قالب وردپرس» («طراحی پوسته وردپرس»)!  از اونجایی که آموزش به زبان فارسی هست و با نسخه فارسی وردپرس تهیه شده، عبارت ها و ترجمه ها و مسیر هایی که در طول آموزش استفاده می شه، همون هایی هستند که در ترجمه وردپرس فارسی و پنل فارسی وردپرس استفاده شده.

شروع ساخت پوسته وردپرس

برای ساختن قالب وردپرس اولین کار ساختن یک پوشه (فولدر) با نام قالب در مسیر قالب های وردپرس (wordpress/wp-content/themes/your-theme) است. اگر بعد از ساختن پوشه، در پنل مدیریت وردپرس به قسمت نمایش و پوسته ها بروید در انتهای پوسته های نصب شده با پیغام “پوسته‌ی خراب: شیوه‌نامه گم شده.” مواجه خواهید شد. نگران نباشید، چون ساختن پوشه در حقیقت کار صفرم است!

اولین کار ساختن فایل استایل (style.css) داخل پوشه قالب است. اما چرا اولین کار ساختن این فایل است؟ چون وردپرس از فایل style.css (دقت کنید نام فایل حتما درست و به همین شکل نوشته شده باشد) برای جمع آوری و نمایش اطلاعات قالب (پوسته) استفاده می کند. این اطلاعات شامل نام قالب، نویسنده، لایسنس و … می شود. کدهای زیر کدهای پایه و استانداردی هستند که وردپرس قادر خواهد بود به وسیله آنها قالب را تشخیص دهد و یک تصویر (پیش نمایش) از قالب ارایه کند. کد های زیر را در فایل استایل می نویسیم و فایل را دخیره می کنیم:

این کد‌ها در حقیقت اطلاعات قالب هستند که در قسمت پوسته ها و هنگامی که روی جزئیات قالب کلیک می کنید، نمایش داده می شود. اگر کدها به همین ترتیب نوشته شوند در قسمت جزئیات قالب، نام قالب (لینک به آدرس: http://site.com) و در کنار آن ورژن قالب (۱.۰)، سپس نام طراح/نویسنده کد قالب (لینک به آدرس: http://author.com) بعد از آن توضیحات قالب و در پایان برچسب هایی که برای قالب نوشته اید نمایش داده می شود.

اگر در قسمت مدیریت وردپرس دوباره به مسیر نمایش/پوسته ها بروید، دوباره با پیغامی تقریبا مشابه به پیغام خطای قبل روبرو خواهید شد. “پوسته‌ی خراب: قالب پیدا نشد. پوسته‌های مستقل باید یک پرونده‌ی index.php داشته باشند. زیرپوسته‌ها باید یک سربرگ قالب در style.css داشته باشند.”

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

داخل فایل header.php کدهای زیر که کدهای قسمت هدر html هستند را می نویسیم:

و داخل فایل footer.php کد های زیر، که کدهای معمول html هستند را می نویسم:

این بار اگر به قسمت پوسته ها بروید، دیگر پیغام خطایی مشاهده نمی کنید، بلکه کادری خالی در کنار کادر بقیه قالب ها مشاهده می کنید که در زیر آن نام قالب و توضیحات مربوط به آن نوشته شده است. کادر به این دلیلی خالی است که شما عکسی از قالب را به عنوان پیش نمایش آن در داخل پوشه قالب قراره نداده اید.

حالا اگر داخل فایل index.php کد زیر را قرار دهید:

و سپس از قسمت مدیریت پوسته ها، قالب خود را فعال کنید و صفحه اصلی سایت را رفرش نمایید، عبارت “تست قالب” نمایش داده خواهد شد! اگر سورس صفحه را مشاهده کنید، می بینید که سورس به صورت زیر خواهد بود:

که کدهای قسمت هدر و فوتر در آن مشاهده نمی شوند. حال اگر کد های زیر را به فایل index.php اضافه کنید، مشاهده می کنید که قسمت هدر و فوتر نیز نمایش داده می شوند.

کار این کد ها فراخوانی فایل header.php و footer.php است.

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

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

You may also like

دیدگاه بگذارید

avatar
  Subscribe  
Notify of