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

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

آناتومی قالب های وردپرس

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

wp-content/themes

سابدایرکتوری مربوط به هر قالب (فولدر هر قالب) حاوی فایل های استایل یا css، فایل های حاوی فانکشن ها (functions.php)، فایل های جاوا اسکریپت، عکس ها و هر چیز دیگر مربوط به قالب هستند. برای مثال یک قالب با نام test را در نظر بگیرید. جایگاه این فولدر یا سابدایرکتوری این قالب (که فولدری با نام test است) در هاست به صورت زیر خواهد بود:

wp-content/themes/test

وردپرس در هر ورژن خود، یک قالب را به صورت پیش فرض ارائه می دهد. (که همکنون قالب 2020 است). فایل های موجود در فولدر مربوط به این قالب را با دقت مورد بررسی قرار دهید تا پیش زمینه ای در ذهنتان از فایل های تشکیل دهنده ی قالب به وجود بیاید.

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

فایل های استایل شیت یا style.css که نمای بصری سایت را کنترل می کنند.
فایل های template که نحوه ی دریافت اطلاعات سایت، از داشبورد وردپرس را کنترل می کنند. اطلاعاتی که باید از داشبورد وردپرس گرفته شود و در برگه های سایت نمایش داده شود.
فایل های فانکشن (functions.php)

کمی بعد، هر یک را بررسی خواهیم کرد.

‏قالب فرزند یا Child Theme

ساده ترین نوع از یک قالب وردپرسی، قالب فرزند است. این نوع قالب فقط دارای یک فایل style.css و یک عکس می باشد. قالب فرزند، دیگر خصوصیات خود را از قالب والد (parent) به ارث می برد و به همین دلیل بدون مشکل کار خواهد کرد.

فایل استایل شیت

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

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

کدهای زیر مربوط به ابتدای فایل style.css قالب 2020 می باشد. به این قسمت از فایل، «هدر فایل استایل شیت» نیز گفته می شود.

/*
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.
*/

نکته: لیست تگ های نوشته شده در کد بالا برای بهتر پیدا شدن قالب شما با استفاده فیلترهای وردپرس است که می توانید از آن ها استفاده کنید.

اگر قالب شما کدهای بالا را نداشته باشد، آنگاه آن قالب در بخش پوسته های داشبورد وردپرس نمایش داده نخواهد شد.

آنچه باید در فایل های ستایل شیت رعایت شوند

حتما استانداردهای کدنویسی css را در آن ها رعایت کنید.
تا حد امکان، از css خام استفاده کنید.
فایل ها را کم حجم بسازید یا اگر ممکن بود، فایل های بزرگ را به چند فایل کوچک تقسیم کنید.
تمام عناصر html موجود در قالب شما از جمله جداول، متون، عکس ها، لیست ها و غیره، باید استایل دهی شوند، مگر این که قالب شما یک قالب فرزند باشد.
استایل شیت هایی قابل پرینت بسازید. (به کمک "media="print این کار ممکن است)

فایل فانکشن

همانطور که قبلا گفتیم، هر قالب در سابدایرکتوری خود یک فایل حاوی فانکشن های مهم دارد. نام این فایل functions.php است.

آنچه باید در فایل فانکشن رعایت شوند

استایل شیت ها و اسکریپت های قالب را بنویسید.
فانکشن های مورد نیاز قالب را فعال کنید. مواردی مثل سایدبار، منو، پست ها، فرمت پست ها، هدر، بک گراند و غیره.
فانکشن هایی که در برگه های مختلف قالب مورد استفاده قرار می گیرد را مشخص کنید.
یک منوی انتخابی (options menu) بسازید تا ادمین های سایت بتوانند از بین رنگ بندی ها، استایل ها و غیره حق انتخاب داشته باشند.

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

فایل های Template

این فایل ها به صورت php هستند و مسئولیت ساختن برگه های سایت برای بازدید کنندگان را بر عهده دارند. البته خروجی این فایل ها به صورت html در خواهد بود. این فایل ها با استفاده از php و html و تگ های وردپرسی نوشته می شوند.

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

لست فایل ها

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

style.css: فایل اصلی استایل های قالب شما که از فایل های ضروری قالب می باشد. این فایل باید «کامنت های معرفی» قالب که در بالا به آن اشاره کردیم را دارا باشد.
rtl.css: این فایل برای وب سایت هایی است که زبان استفاده شده در آن ها، راست به چپ است، مثل زبان فارسی
index.php: این هم یکی دیگر از فایل های ضروری قالب است که «برگه خانه» ی وب سایت را نمایش خواهد داد.
comments.php
front-page.php
home.php: این برگه نمایش گر پست ها است که اگر به عنوان front-page مورد استفاده قرار بگیرد، آنگاه آخرین پست ها در اینجا نمایش داده خواهند شد.
single.php: برای نمایش محتوای یک پست یا نوشته در برگه ای مجزا
single-{post-type}.php: زمانی که یک پست تایپ دلخواه در وردپرس ایجاد می کنیم، این پست ها در این برگه ی مجزا نمایش داده خواهند شد.
page.php: این فایل برای نمایش برگه های شخصی مثل برگه ی «قوانین و مقررات» مورد استفاده قرار می گیرد.
category.php: برای نمایش یک دسته بندی خاص
tag.php: برای نمایش پست های مربوط به یک کلیدواژه ی خاص
texonomy.php: برای نمایش یک تکسونومی خاص
author.php: برای نمایش اطلاعات نویسنده
date.php: نمایش بر اساس یک تاریخ یا دوره ی زمانی خاص
archive.php: این فایل برای نمایش پست ها، بر اساس یک دسته بندی خاص یا پست های یک نویسنده ی خاص یا پست های یکدوره ی زمانی خاص ایجاد می شود. اما این برگه می تواند با استفاده از category.php و author.php و date.php بازنویسی یا override شود.
search.php: برای نمایش نتایج جست و جو
attachment.php: برای نمایش مجزای یک عدد پیوست خاص.
image.php: اگر این برگه وجود نداشته باشد، به جایش برگه ی attachment.php مورد استفاده قرار می گیرد. این برگه برای نمایش یک عکس به صورت مجزا ساخته می شود.
404.php: زمانی نمایش داده می شود که که وب سایت با ارور 404 (برگه پیدا نشد!) مواجه می شود.

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

یادآوری: گفتیم که فایل های ضروری برای یک قالب وردپرسی، style.css و index.php هستند. هر دوی این فایل ها در دایرکتوری اصلی قالب قرار می گیرند.

فایل های نیمه ضروری

استفاده از فایل های زیر برای داینامیک ساختن قالب وردپرس به شدت پیشنهاد می شود:

comments.php
comments-popup.php
footer.php
header.php
sidebar.php

بعد از ساختن این فایل ها می توانید آن ها را با استفاده از فرمان های زیر، درون کدهای index.php فراخوانی کنید.

() get_header: برای فراخوانی هدر قالب
() get_sidebar: برای فراخوانی سایدبار قالب
() get_footer: برای فراخوانی فوتر قالب
() get_search_form: برای فراخوانی سرچ‌فرم قالب

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

نتیجه گیری و جمع بندی

خب! دوستان و همراهان گرامی، ما تا اینجا استانداردهای مورد نظر اکثر مارکت های داخلی و خارجی را بررسی کردیم. استانداردهایی که برای تایید یک قالب وردپرسی مورد نیاز بود.

این استانداردها شامل «استانداردهای کدنویسی» و «استانداردهای دسترسی پذیری در کد» و «استانداردهای نمایشی و محتوایی قالب» بود که هر یک را به صورت مجزا بررسی کردیم.

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

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

منبع: سایت Wordpress