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

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

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

طراحی قالب وردپرس

چرا باید طراحی قالب وردپرس را یاد بگیریم؟

قالب وردپرس دارای فایل هایی هست که با یکدیگر کار می کنند تا طراحی و قابلیت یک سایت وردپرس را ایجاد کنند. هر قالب ممکن است ظاهری متفاوت نسبت به بقیه پوسته های وردپرس داشته باشد، پس ارائه ظاهری متفاوت برای صاحبان سایت بسیار مهم است.

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

چرا باید یک قالب وردپرس اختصاصی طراحی کنید ؟

• برای ایجاد یک نگاه منحصر به فرد برای سایت وردپرس خودتان.
• برای استفاده بهتر از قالب ها، تگ های قالب و حلقه وردپرس برای تولید نتایج و ظاهر مختلف وب سایت.
• برای ارائه قالب های جایگزین برای ویژگی های خاص سایت، مانند صفحات دسته بندی و صفحات نتایج جستجو.
• برای تغییر سریع بین دو طرح بندی سایت، یا برای استفاده بهتر از یک قالب یا استایل، به صاحبان سایت اجازه دهید که ظاهر سایت شما را تغییر دهند.

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

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

چرا باید قالب وردپرس اختصاصی را طراحی کنید؟

• این یک فرصت برای کسب اطلاعات بیشتر در مورد CSS، HTML و PHP است.
• این فرصتی است تا تخصص خود را با CSS، HTML و PHP در کار بسنجید.
• این یک فرصت برای خلاقیت های شماست.
• این کار سرگرم کننده است (اغلب اوقات).
• اگر قالب خود را برای عموم منتشر کنید، می توانید احساس خوبی داشته باشید که قالب خود را به اشتراک گذاشته اید تا همگان از آن بهره مند شوند.

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

• استفاده از PHP ساختار یافته، بدون خطا و HTML معتبر.
• از CSS معتبر استفاده کنید.
• دستورالعمل های طراحی در طراحی سایت و طرح بندی را دنبال کنید.

ساختمان و ساختار یک قالب وردپرس

قالب های وردپرس در زیر شاخه های فولدر themes (به طور پیش فرضwp-content/themes/ ) قرار می گیرند که نمی توانند به طور مستقیم با استفاده از فایل wp-config.php منتقل شوند. زیر شاخه themes (قالب ها) تمامی فایل های قالب از جمله فایل های استایل، فایل های قالب و فایل های توابع اختیاری (functions.php)، فایل های جاوا اسکریپت و تصاویر را در خود نگه داری می کند. به عنوان مثال، یک قالب با نام “test” در شاخه wp-content / themes / test / قرار می گیرد. از اعداد برای نامگذاری قالب ها استفاده نکنید، چرا که در لیست قالب های شما نمایش داده نخواهند شد.

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

طراحی قالب وردپرس

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

1. فایل استایلی به نام style.css است که ارائه (طراحی و طرح بندی بصری) صفحات وب را کنترل می کند.
2. فایل های قالب وردپرس که کنترل صفحات سایت را از اطلاعات پایگاه داده وردپرس خود برای تولید در سایت نشان می دهند.
3. فایل توابع اختیاری (functions.php) به عنوان بخشی از فایل های قالب وردپرس.

بیایید به طور جداگانه نگاهی به هر کدام کنیم.

قالب های Child

ساده ترین قالب ممکن است child theme  باشد که شامل تنها یک فایل style.css و یک تصویر است. این ممکن است زیرا این یک بچه از قالب دیگری است که به عنوان والد خود عمل می کند.

استایل دهی در طراحی قالب وردپرس

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

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

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

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

نکته: نامی که برای نویسنده استفاده می شود پیشنهاد می شود که همان نام کاربری نویسنده باشد، اگرچه می تواند نام واقعی نویسنده باشد.

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

قسمت کامنت سربرگ در فایل style.css برای شناسایی قالب مورد نیاز است و نمایش آن در پنل مدیریت در قسمت طراحی >  قالب ها

به عنوان یک تنظیم برای قالب موجود در میان دیگر قالب های نصب شده در دسترس قرار دارد.

دستورالعمل های استایل دهی در طراحی قالب وردپرس

• هنگام نوشتن CSS خود، استانداردهای کدگذاری CSS را دنبال کنید.
• از CSS معتبر هنگامی که ممکن است استفاده کنید. به عنوان یک استثنا، از پیشوندهای مخصوص استفاده کنید تا از ویژگی های CSS3  بهره مند شوید.
• CSS hackها را به حداقل برسانید. استثناء واضح پشتیبانی یک مرورگر به خصوص است که معمولا نسخه های اینترنت اکسپلورر می باشد. اگر ممکن است، CSS hackهای جداگانه را به بخش های جداگانه یا فایل های جداگانه متصل کنید.
• تمامی عناصر ممکن اچ تی ام ال باید توسط قالب شما استایل دهی شوند (مگر اینکه child theme داشته باشد)، هم در محتوای مطلب یا صفحه و هم در محتوای دیدگاه.
  • جداول، زیرنویس ها، تصاویر، لیست ها، نقل قول ها و غیره.
• افزودن استایل های چاپ بسیار توصیه می شود.
  • می توانید یک استایل چاپ را با media = “print” یا یک بلوک رسانه چاپ در استایل اصلی خود اضافه کنید.

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