قالب وردپرس

قالب وردپرس چیست؟ چه ساختاری دارد؟ قالب یا پوسته وردپرس

سلام دوستان

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

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

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

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

سهم قالب وردپرس در استفاده در اینترنت ایران، تقریبا نسبتی ۷۰ درصدی و پوسته نیز سهمی ۲۹ درصدی دارد.

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

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

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

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

چگونه یک قالب خوب برای سایت خود انتخاب کنید

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

index.php

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

style.css

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

rtl.css

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

comments.php

این فایل وظیفه تعیین دیدگاه ها در قالب را به عهده دارد

front-page.php

این فایل، همیشه به عنوان برگه اول وبسایت استفاده می شود البته اگر وجود داشته باشد، و از بخش تنظیمات > خواندن تنظیمات روی این برگه اعمال می شود

home.php

این فایل هم وظیفه ارائه برگه اصلی وبسایت را بر عهده دارد، وقتی وردپرس را روی برگه ایستا تنظیم نکرده باشید این فایل به طور پیش فرض برگه اصلی وبسایت موسوم به “خانه” را ارائه میدهد

header.php

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

singular.php

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

single.php

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

single-{post-type}.php

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

archive-{post-type}.php

وقتی کاربر پستی سفارشی را از دسته بایگانی وبسایت شما درخواست میکند، این فایل استفاده می شود، وقتی هم این فایل وجود نداشته باشد و کاربر پست سفارشی از بایگانی درخواست کند، فایل archive.php استفاده می شود

page.php

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

page-{slug}.php

نامک برگه وقتی استفاده می شود که کاربر یک برگه یکتا درخواست می کند، مثلا برگه درباره ما که در این صورت نام میشود page-about.php

category.php

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

tag.php

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

taxonomy.php

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

author.php

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

date.php

فایل زمان/روزشمار برای نمایش روز و زمان در وبسایت استفاده می شود، مانند:

http://example.com/blog/2014/

http://example.com/blog/2014/05/

http://example.com/blog/2014/05/26/

archive.php

فایل بایگانی وقتی استفاده خواهد شد که کاربر درخواست های خود را از نویسنده ها، پست ها، دسته بندی ها یا تاریخ ارسال میکند. اگر فایل هایی چون category.php, author.php, و date.php وجود داشته باشد، فایل archive.php استفاده نمی شود.

search.php

از این فایل برای نمایش نتایج جستجوی کاربر استفاده می شود

attachment.php

وقتی یک فایل پیوست جداگانه مانند تصاویر، فایل های PDF و یا دیگر فایل های رسانه ای نمایش داده می شود از این فایل استفاده می شود

image.php

فایل رسانه ای تصویر یک نسخه ویژه تری از attachment.php است، و وقتی استفاده می شود که یک فایل تصویر به تنهای نمایش داده می شود، اگر وجود نداشته باشد، وردپرس از attachment.php استفاده می کند.

حphp.04404.php

وقتی از مضمون ۴۰۴ استفاده می شود که وردپرس نمیتواند آنچه که توسط کاربر درخواست شده است را پیدا کند.

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

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

در سایت خود وردپرس میتوان به هزاران نمونه قالب وردپرس رایگان دست پیدا کرد که برخی تا نزدیک به ۱۰۰ میلیون بار شمار دانلود دارند.

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

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

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

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

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

اما بگذارید یک قالب وردپرس که در تم فارست وجود دارد را از نظر کیفی بررسی کنیم:شرایط یک فایل قابل فروش در تم فارست

فناوری های مورد نیاز در این قالب

پوسته هایی با استایل پیش فرض قابل قبول نیستند.
پوسته ها باید به اندازه کافی نسبت به بوتسترپ پیش فرض قابل تغییر باشند.
تمام عنصر های پیش فرض قالب باید باشند.
کدنویسی سی اس اس باید پیرو هسته ی استایل بوتسترپ باشد
در کدنویسی سی اس اس باید شناسه ها کم باشند (ID-less)، کاملا بر پایه کلاس باشند و فقط به اندازه ای از قوانین (Rules) در سی اس اس استفاده شود که نیاز است. سی اس اس پف کرده نباشد (bloated)
هر کجا ممکن است، اگر از ترکیب های رنگی (گرادینت) به وسیله کد استفاده شده است، باید به جای تصاویر استفاده شود.
ساختار دایرکتوری پوسته باید ساختار دایرکتوری پیش فرض بوتسترپ را دنبال کند.

شرایط یک قالب وردپرس قابل فروش در تم فارست

هسته ی رابط کاربری برنامه اپلیکیشن وردپرس WordPress Core API

فقط برچسب های صحیح برای قالب مجاز هستند

قالب ها تا حدد ممکن باید فاقد اطلاعیه های هشدار (WARNING)، مورد نیاز (REQUIRED)، توصیه شده ها (RECOMMENDED) و هشدار های مشخصاتی (INFO notices) در افزونه وردپرس بررسی قالب Theme Check باشند. اما برخی موارد مجاز که در ادامه نام برده میشوند:

Warning: Found base64_encode()

Warning: Found base64_decode()

Warning: Found fwrite()

Warning: Found fopen()

Warning: Found fclose()

Recommended: Found add_theme_support(‘custom-header’, $args)

Recommended: Found add_theme_support(‘custom-background’, $args)

Info: Found include_once()

Info: Found include()

Info: Found require_once()

Info: Found require()

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

عملکرد های (functions) دنباله اجباری هستند:

wp_title()
wp_head()
wp_footer() – Present just before </body>
post_class()
body_class() – (inside <body> or <html> tags)

اگر هر یک از موارد بالا با قالب یکی شده باشند، فایل های سفارشی قالب باید با get_template_part() یا locate_template() خطاب و فراخوانی شوند.

نام فایل و ساختار باید تابع بهترین طراحی وردپرس باشد. مثلا نباید از نام های اینچنینی برای فایل ها استفاده کرد: category-header.php و custom-header.php

ویژگی های هسته ی وردپرس باید با قالب یکی شده باشد

پیوند های خوراک خودکار | Automatic Feed Links
تصویر شاخص (بندانگشتی و … تصاویر) | Post Thumbnails
دیدگاه ها | Comments
قالب های دیدگاه | comments_template()
فهرست دیدگاه ها (اختیاری) | wp_list_comments() – optional
اسکریپت پاسخ دهی به دیدگاه (دیدگاه های تو در تو) | wp_enqueue_script(‘comment-reply’)

$content_width عرض محتوا برای تنظیم حداکثر عرض استفاده شده و اجباری است

تغییر و تبدیل فیلترها امکان پذیر نیست و مجاز نیست در wptexturize()

تغییر و تبدیل فیلترها امکان پذیر نیست و مجاز نیست در wpautop

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

از یک نام پیش ساخته ی یکتا برای تمام نام عملکرد ها (Functions) ، کلاس ها، هوک ها، تغییر پذیرهای همگانی/عمومی، و دیتابیس استفاده کنید تا از بروز تداخل و مشکلات با دیگر افزونه ها و قالب ها جلوگیری شود.

رشته های قابل ترجمه شاید شامل تغییر پذیر ها نباشند

ویژگی های وردپرس

قالب باید از ابزارک ها در تمام قسمت هایی که تبلیغ شده است پشتیبانی کند

استفاده از Timthumb گوگل مجاز نیست

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

ناوبری منو | wp_nav_menu() | باید حداقل در یکی از قسمت های قالب درج شود تا ناوبری منو و مدیریت بتواند صورت گیرد.

تمام ابزارک های پیش فرض وردپرس باید طرح بندی شده و به خوبی در مکان های خود بتوانند نمایش داده شوند

فایل صفحه بندی | index.php باید به خوبی برای نمایش استاندارد “آخرین نوشته ها” آماده شود

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

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

نوشته باید به خوبی نمایش داده شوند، و هیچ گونه مشکل و خطای بصری و گرافیکی در آن مشاهده نشود
نوشته ها باید به شیوه ی صحیح نمایش داده شوند
صفحه بندی باید نمایش داده شده و به طرز صحیحی کار کند
صفحه ی نمایش نتایج جستجو باید بخوبی نمایش داده شود
به عنوان ” نوشته های مهم” که یک ویژگی هسته ای محسوب میشود، قالب باید آن راه طرح بندی و بخوبی نمایش دهد
دکمه ی “بیشتر بخوانید” باید به خوبی کار کند. و با برچسب (“<!–more–>”) کار کند
اگر قالب از ساختار نوشته (Post Type) پشتیبانی میکند نوشته ها باید در نمایش صفحه بندی بر آن ساختار نوشته باشند
محتوا و بدنه ی متن نباید چیدمان و طرح بندی را تحت فشار قرار داده و برای آن مشکل ایجاد کند
قالب باید هر دو طبقه بندی :دسته بندی” و ” برچسب” را در یک رفتار و عملکرد ترکیب کند
چینش عناصر (Floats) به خوبی برای عناصر شناور (تصویر بندانگشتی) در انتخاب نوشته ها مشخص شده باشد. (شاید منظور نوشته های مرتبط است)
توجه داشتن به اینکه قالب ناحیه ی عنوان کوچکی داشته باشد و عناصری که در این قسمت تعریف شده اند نباید بیرون زدگی داشته باشند.

دارایی های وردپرسی که باید موجود باشند

شیوه نامه های وردپرس باید به خوبی پشت سر هم باشند wp_enqueue_style() در بالاتر در این مورد صحبت شد!

برای افزودن جاوا اسکریپت به هر برگه ای باید از این ویژگی استفاده شود wp_enqueue_script()

قالب ها باید بتوانند از هر ورژن jQuery با نسخه ی فعلی وردپرس سازگاری داشته باشند

طراح قالب مجاز نیستند تا نسخه ی پیش فرض jQuery را بازنشسته کرده و نسخه ی دیگری را استفاده کنند

اگر نسخه ای از کتابخانه ی “شبکه تحویل محتوا ()” شامل شده است. یک کپی از کتابخانه باید در قالب برای فراخوان موجود باشد

دارایی های مورد نیاز باید در یک SSL خوب بارگذاری شوند. این مورد میتواند توسط تنظیمات is_ssl() در پروتوکل از پیش تعریف شده ی وارد شود. یا اینکه با استفاده از آدرس های URL بدون پروتوکل protocol-less باشند مانند //example.com/file.js به جای http://example.com/file.js

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

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

برای استفاده

wp_filter_nohtml_kses()
wp_filter_kses()
wp_kses()

برای تولید

esc_attr()
esc_html()
esc_js()
esc_textarea()
esc_url()

افزونه های وردپرس

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

پی اچ پی در قالب وردپرس

قالب وردپرس نباید هیچ گونه اعلانیه، هشدار یا خطایی داشته باشد لطفا هنگام توسعه از اشکال زدایی پی اِچ پی استفاده کنید و WP_DEBUG را روی فعال (True) قرار دهید.

برچسب های کوتاه PHP مجاز نیستند

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

زبانه ها باید به طور دندانه دار و دقیق استفاده شوند، زبانه ها باید در ابتدای خطها و فاصله ها در میان خط ها استفاده شوند. کدنویسی استاندارد پی اِچ پی وردپرس را مشاهده کنید PHP Coding Standards

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

برای فراخوان یک تصویر با نام filename به این شیوه استفاده کنید:

۱	<img src=“<?php echo get_template_directory_uri(); ?>/images/png” />

طراحان قالب باید همیشه به فکر این باشند که بهتر کدنویشی را انجام دهند. مثلا کدنویشی مشکل دار زیر را انجام نداده و از کدنویسی بهتر استفاده کنند

کدنویسی ضعیف

if ( empty( $somevar ) )

return false;

کدنویسی خوب

if ( empty( $somevar ) ) {

return false;

}

استفاده از عملکرد eval() مجاز نمی باشد

بخش کدنویسی سی اِس اِس و اِچ تی اِم اِل HTML/CSS

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

برای یک قالبی که به عنوان کدنویس شده ی اِچ تی اِم اِل ۵ نشانگذاری شده است، ساختار معنایی وابسته به عناصر باید به طرزی مناسب آماده و استفاده شوند.

استایل و طرح بندی درون خطی (Inline) کدنویسی سخت و ناجور (hardcoded) همه جا مجاز هستند. استایل های درون خطی دینامیک جایی که نیاز است مجاز هستند. و البته wp_add_inline_style() باید در جایی که نیاز است استفاده شود.

شناسه ها و کلاس ها باید به طرزی مناسب نامگذاری شده و یک نام یکتا را دنبال کنند.

از انتخاب گرهای قابل خواندن برای انسان برای تعریف استایل عناصر استفاده شود

از استفاده از انتخاب گرهای ناشایست خودداری شود و به سادگی از .container به جای مورد ناشایست div.container استفاده کرد.

جاوا اسکریپت در قالب وردپرس

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

پرونده های جاوا اسکریپت باید در جایی از فوتر که ممکن است قرار داده شوند. به جز مواردی چون Modernizr, jQuery UI و …

کدهای جاوا اسکریپت نباید هیچ گونه خطایی ایجاد کنند

تمامی کدهای جاوا اسکریپت باید به شیوه ی “”use strict تولید شوند. برای مثال شما میتوانید با جی کوئری این طوری شروع کنید:

(function($) {

“use strict”;

// Author code here

})(jQuery);

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

موفق باشید