آموزش ساخت پوسته HTML5 برای وردپرس توسط Bones
برای ساخت پوسته وردپرس برای سایت جدید خود و یا طراحی سایت برای مشتری‌های خود پس از طراحی گرافیکی از چه مراحلی استفاده می کنید؟ یکی از بهترین روش ها برای طراحی پوسته و قالب وردپرس استفاده از پوسته سفید و یا Blank Theme است که البته در محیط وب به Starter Theme نیز مشهور هستند. در صورت استفاده از این قالب ها می توانید مطمئن باشید که از تمامی قابلیت موجود در نسخه های جدید وردپرس برای ایجاد پوسته سایت خود استفاده کرده اید و البته کدهای نهایی شما کاملاً استاندارد و توسط هر طراح و توسعه دهنده وب دیگری قابل ویرایش کردن است.
اما در این نوشته قصد داریم پوسته سفید Bones و چگونگی استفاده از آن برای طراحی پوسته های مورد نظر شما را بررسی کنیم. این پوسته نیز همانند HTML 5 Blank WordPress Theme که در نوشته پوسته وردپرس سفید HTML5 برای طراحی سایت با آن آشنا شدیم با استفاده از HTML5 و آخرین متد طراحی صفحات وب آماده شده است و به همین خاطر نیز امکانات فراوانی همانند قابلیت نمایش در اندازه های مختلف صفحه نمایش و حتی در گوشی موبایلی که از صفحه نمایش کوچکی برخوردار هستند به همراه دارد. البته با دیگر امکانات و مزایای Bones در ادامه این آموزش آشنا خواهیم شد. توجه داشته باشید که Bones یک فریم ورک آماده برای طراحی پوسته وردپرس نیست و تنها یک قالب استاندارد و کاملاً ساده است که با توجه به قوانین کپی رایت آن مجوز هرگونه ویرایش و تغییری را در آن خواهیم داشت.
چگونگی دانلود و نصب پوسته وردپرس Bones
برای دانلود پوسته وردپرس Bones پس از مراجعه به سایت توسعه دهنده این پوسته با آدرس Bones - The HTML5 Wordpress Starter Theme بر روی دکمه سبز رنگ Download Bones کلیک کنید تا فایل اصلی این پوسته بر روی سیستم شما دانلود شود. سپس با استفاده از پیشخوان وردپرس > نمایش > پوسته‌ها > نصب پوسته‌ها و در انتها کلیک بر روی گزینه بارگذاری همانند دیگر پوسته های وردپرس می توانید این پوسته را به لیست قالب موجود وردپرس خود اضافه کنید. پس از نصب این پوسته با رفتن به پیشخوان وردپرس > نمایش > پوسته‌ها همانند تصویر زیر برای انتخاب Bones به عنوان پوسته پیش فرض بر روی دکمه فعال کردن کلیک کنید.
ساخت پوسته HTML 5
پس از فعال سازی Bones با رفتن به صفحه اصلی سایت خود با ظاهر اولیه این پوسته وردپرس همانند تصویر زیر روبرو خواهید شد. البته این تصویر در زمانی که با استفاده از یک صفحه نمایش با ابعاد بزرگ تهیه شده است و در صورتی که با صفحه نمایش کوچکتر همانند گوشی موبایل و یا تبلت ها سایت خود را باز کنید شاهد تغییرات آن خواهید بود. همچنین با تغییر اندازه مرورگر وب خود نیز می توانید طریقه نمایش این پوسته در صفحه نمایش کوچکتر را امتحان کنید.
دانلود پوسته سفید Bones وردپرس
آموزش ویرایش مشخصات اولیه این پوسته
برای ویرایش مشخصات اولیه همانند نام، توضیحات، سایت سازنده و … این پوسته پس از مراجعه به بخش نمایش > ویرایشگر از پیشخوان مدیریتی وردپرس فایل style.css را باز کرده تا با محتوایی همانند زیر روبرو شوید.
کد:
Theme Name: Bones (Rename Tortak!)
Theme URI: http://tortak.com
Description: This site was built using the Bones Development Theme.
Author: Ali Yazdi
Author URI: http://tortak.com
Version: 1.5
Tags: flexble-width, translation-ready, microformats, rtl-language-support
License: WTFPL
برای تغییر این مشخصات که در قسمت مدیریت پوسته‌ها نمایش داده می شوند اگر در حال طراحی پوسته برای مشتریان خود هستید تنها کافی است چند خط کد بالا را به گونه ای که دوست دارید ویرایش کنید. با ویرایش این متون تمامی اطلاعات نمایش داده شده به کاربران نیز درباره این پوسته تغییر خواهند کرد. برای تغییر تصویر پیش نمایش Bones نیز پس از مراجعه به آدرس wp-content/theme/Bones تصویر مورد نظر خود را به جای فایل screenshot.png البته با همین نام قرار دهید.
چگونگی شخصی سازی و ویرایش CSS
برای سرعت بخشیدن به روند توسعه و شخصی سازی این پوسته امکان استفاده از هر دو زبان پویای CSS یعنی LESS و Sass وجود دارد. برای دسترسی به فایل مربوط به CSS این پوسته نیز می توانید در شاخه library از این پوسته فایل LESS و یا Sass مورد نظر خود را باز کرده و شروع به ویرایش کدهای آن کنید. در نهایت نیز برای کامپایل این فایل ها به کدهای CSS معمول نیاز به یک برنامه واسط در ویندوز دارید که پیشنهاد ما برای کامپایل فایل نوشته شده توسط LESS برنامه WinLESS است.
در شاخه bones/library/less مجموع فایل های LESS زیر وجود دارد که با توجه به نیاز خود می توانید از هر کدام از آن ها برای ویرایش و شخصی سازی پوسته نهایی استفاده کنید.
1030up.less : طریقه نمایش در صفحه نمایش معمول سیستم رومیزی
1240up.less : طریقه نمایش در صفحه نمایش با وضوح بالا
2x.less : طریقه نمایش در صفحه نمایش رتینا که در سیستم مک از آن ها استفاده می شود
481up.less : طریقه نمایش در صفحه نمایش با عرض 480 پیکسل
768up.less : فایل مربوط به نمایش صفحات سایت در تبلت ها و صفحه نمایش کوچک
base.less : فایل اصلی مربوط به طریقه نمایش سایت در موبایل
ie.less : تعیین خصوصیات مختص به نمایش در مرورگر اینترنت اکسپلورر بدون نیاز به مدیا کوئری‌ها
login.less : طریفه نمایش صفحه ورود به پیشخوان وردپرس
mixins.less : فایل حاوی تنظیمات عمومی همانند رنگ، اندازه، سایه و غیره
normalize.less : ریست کردن اشیاء موجود در صفحه برای نمایش صحیح در تمامی مرورگر ها
style.less : فایل اصلی که در آن از تمامی فایل دیگر استفاده شده است
توجه داشته باشید تمامی فایل های Less بالا توسط مدیا کوئری در فایل style.less در صورت نیاز فراخوانی می شوند اما فایل base.less به صورت پیش فرض و بدون کوئری فراخوانی شده است که حاوی کدهای مربوط به نمایش قسمت های مختلف در صفحه نمایش کوچک همانند موبایل ها است. به دلیل استفاده از این تکنیک خیلی سریع و بدون نیاز به بارگذاری فایل اضافی سایت شما در مرورگر موبایل بازدید کنندگان نمایش داده می شود که این موضوع در کاهش مقدار هزینه استفاده از اینترنت GPRS بازدید کنندگان برای مرور سایت شما نیز بی تاثیر نخواهد بود.
البته پوسته وردپرسی Bones همانند دیگر پوسته سفید وردپرس دارای فایل نمونه برای ساخت قالب یکتا برای بعضی از برگه‌ها (Pages)، نوشته‌های سفارشی (Custom Post Types) و قالب آرشیو (Archive) نیز است که با ویرایش آن ها بخش های داخلی سایت خود را نیز می توانید به دلخواه خود طراحی کنید.
برای نمونه در فایل functions.php نیز یک ابزارک، Custom Post Type و اندازه های اضافی برای تصاویر آپلود شده که در آموزش اضافه کردن اندازه تصویر اضافی با چگونگی آن آشنا شدیم تعریف شده است تا شما نیز در صورت نیاز به سادگی و با استفاده از این نمونه‌ها اقدام به ایجاد قسمت مختلف پوسته خود کنید.
منبع : آموزش ساخت پوسته HTML5 برای وردپرس توسط Bones
