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

همانطور که می دانید در فضای وب و در منابع محصولات وردپرسی، تعداد بی شماری از قالب های متنوع وردپرسی در دسترس هستند. برای استفاده از این قالب ها نیز کافیست آنها را دانلود و نصب کرده و بعد سفارشی سازی های لازم را انجام دهید. اما گاهی اوقات نمی توانیم قالبی را که دقیقاً متناسب با نیازهای سایت مد نظر است پیدا کنیم. این مشکل ممکن است گاهی مربوط به ظاهر قالب ها باشد و گاهی مربوط به عملکرد آنها. در این صورت لازم است که دست به کار شوید و قالب سایت را خودتان طراحی کنید. در همین راستا در این مطلب از ژاکت می خواهیم مراحل کلی و اصول و قواعد طراحی قالب وردپرس را با هم بررسی کنیم.درباره طراحی قالب وردپرس بیشتر بدانیدطراحی قالب وردپرس (که به آن تم یا پوسته هم می گویند) به لطف محیط کاربرپسند و ابزارهای کاربردی وردپرس، چندان کار پیچیده ای نیست. مراحل کلی طراحی قالب وردپرسی به این ترتیب است که به کمک قابلیت های وردپرس، بخش های مختلف سایت را طراحی می کنید. در این میان اگر دانش CSS و HTML داشته باشید، کار سفارشی سازی به مراتب راحت تر و البته حرفه ای تر خواهد بود. چرا که امکان اعمال بعضی از این تغییرات در خود وردپرس وجود ندارد. اما به کمک تکه کدها می توانید تغییرات دلخواه خود را مستقیماً پیاده سازی کنید. ضمناً این کدها را می توانید در بخش های سفارشی سازی داخل خود وردپرس قرار دهید یا این که به سراغ فایل های اصلی وردپرس بروید و این کدها را مستقیماً داخل فایل های مد نظر بنویسید.لازم به ذکر است که در کنار CSS و HTML، زبان برنامه نویسی JavaScriptنیز می تواند مسئولیت بخش زیادی از کار را به عهده بگیرد. در واقع به کمک جاوااسکریپت می توانید کنترل بیشتری بر قالب خود داشته باشید و افکت ها و تنظیمات حرفه ای تری را بسازید. اما مجدداً یادآوری می کنیم که در مجموع برای طراحی قالب وردپرسی، الزامی بر دانش CSS، HTML و JavaScript نیست.نکته: قالب های وردپرسی را می توان از خود وردپرس خام به مرور طراحی کرد. اما کار دیگری که می توان انجام داد، استفاده از یک قالب پایه یا یک فریم ورک قالب است. به این معنی که ابتدا یکی از این دو قالب را روی وردپرس خود نصب کنید و بعد کار سفارشی سازی را شروع کنید. در ادامه با این قالب های خام بیشتر آشنا می شویم.منظور از قالب پایه و فریم ورک قالب چیست؟قالب پایه و فریم ورک قالب، هر دو قالب های سبُک و نسبتاً خامی هستند که کار طراحی قالب جدید را راحت تر می کنند. البته دقت کنید که این دو نوع قالب با هم متفاوت اند.با نصب قالب پایه (Starter Theme) یک سری قابلیت پایه ای و کلی به وردپرس اضافه می شود که با در اختیار داشتن این قابلیت ها راحت تر می توانید یک قالب کامل جدید را طراحی کنید.فریم ورک قالب (Theme Framework) نیز مثل قالب پایه است؛ با این تفاوت که این نوع قالب امکانات بیشتری را ارائه می دهد. بنابراین طراحی یک قالب کامل جدید به کمک فریم ورک قالب، به نسبت قالب پایه راحت تر است.نمونه هایی از قالب های پایه عبارت اند از: Underscores، UnderStrap ، Bones و ... .به عنوان مثال Underscores یکی از محبوب ترین قالب های پایه است که فقط شامل امکانات اولیه است. به علاوه این قالب توسط Automattic توسعه یافته که باعث می شود که در طولانی مدت نیز امن و سازگار باشد.امتیاز طراحی یک قالب جدید وردپرسی چیست؟همانطور که قبلاً اشاره کردیم، در بسیاری از مواقع ممکن است قالب دلخواه خود را پیدا نکنیم. اینجاست که فکر قالبی جدید می افتیم که همه ویژگی های مد نظرمان را داشته باشد. اما مزایای طراحی یک قالب به همین جا ختم نمی شود. دیگر امتیازات طراحی یک قالب جدید به صورت کامل عبارت اند:فردیت: طبیعی است قالبی که خودتان تمام بخش های آن را طراحی می کنید، شبیه هیچ قالب دیگری نخواهد بود.ایمنی بیشتر: جالب است بدانید رایج ترین درگاهی که هکرها از طریق آن به وب سایت های وردپرسی نفوذ می کنند، قالب ها هستند. اما چگونه؟ متأسفانه بسیاری از قالب های وردپرس دارای کدهای خرابی هستند. هکرها نیز از طریق همین کدهای خراب، راه خود را به وب سایت پیدا می کنند. از طرفی ممکن خود قالب نیز دارای کدهایی برای جاسوسی و نفوذ باشند. البته این مشکلات اغلب زمانی رخ می دهند که قالب مد نظر را از یک منبع نامعتبر تهیه کنید.اما در هر صورت اگر قالبی را خودتان طراحی کرده باشید، خیالتان از بابت امن بودن کدها آسوده خواهد بود. چرا که هیچ شخص دیگری در وارد کردن کدهای این قالب دخیل نبوده است.نبود هیچگونه فایل اضافه: وقتی یک تم آماده را دانلود و نصب می کنید، این تم شامل افزونه ها، ابزارک ها، کدها و ... است که نیازی به آنها ندارید. اما همین فایل های اضافه سایت را سنگین کرده و سرعت آن را به میزان چشمگیری کاهش می دهند. اما در مقابل وقتی صفر تا صد قالب را خودتان طراحی می کنید، دیگر خبری از فایل های اضافه نیست.ساختار کلی قالب های وردپرس چگونه است؟حالا که قرار است خودتان صفر تا صد یک قالب را طراحی کنید، باید بدانید که قالب های وردپرس اصولاً شامل چه فایل ها و عناصری هستند و در واقع پیش نیازهای طراحی یک قالب جدید چیست.برای شروع اول از همه به خود وردپرس نیاز دارید. در کنار آن به یک پایگاه داده نیز احتیاج دارید. پایگاه داده نیز به صورت کلی در وردپرس موجود است. قفط کافیست یک پایگاه داده جدید با نام قالب جدید خود بسازید.اما ساختار قالب های وردپرس چگونه است؟ یک قالب وردپرس در ساده ترین شکل ممکن، یک صفحه HTMLاست که از فایل های زیر تشکیل شده است: کدهای هدر header.phpکدهای فوتر footer.php کدهای گزینه های کنار صفحه sidebar.php کدهای CSS برای طراحی ظاهر سایت style.cssکدهای تنظیمات صفحه اصلی index.phpکدهایی برای نحوه نمایش مقاله در صفحه خود single.php کدهایی برای نمایش محتوای یک صفحه page.phpکدهای archive.php کدهای برای نمایش و لیست بندی آیتم های موجود در آرشیو و دسته هایی که کاربران را طبق آن دسته بندی می کنیمکد های داخل functions.php: کدهایی پیرامون عملکرد قالب؛ شامل: لوگو، منوها، رنگ ها، Thumbnailها، اسکریپت ها و ...لندینک 404.php: کدهای خطایی که نشان می دهند فایل درخواستی پیدا نشده استمراحل اصلی طراحی قالب وردپرسیحالا که دیدی کلی نسبت به چگونگی طراحی قالب وردپرس وهمینطور فایل های اساسی وردپرس پیدا کردید، وقت آن است که به اصل مطلب، یعنی مراحل کلی طراحی قاب وردپرس جدید بپردازیم.مرحله 1- ساخت پوشه اصلی دربرگیرنده فایل های قالبوقتی وردپرس را نصب می کنید، یک سری فایل که زیربنای سایت را می سازند، در یک پوشه ایجاد خواهند شد. در تصویر زیر فایل های اصلی وردپرس را مشاهده می کنید:اما سؤال این است که فایل های قالب جدید باید کجا قرار بگیرند؟ تمام فایل های قالب، در پوشه "themes" که داخل پوشه "wp-content" قرار دارند ایجاد می شوند. بنابراین باید یک پوشه جدید داخل پوشه Themes بسازید و نام آن را طوری انتخاب کنید که بعداً ان را فراموش نکنید. برای مثال در تصویر زیر مشاهده می کنید که نام پوشه قالب جدید "Customtheme" است.مرحله 2- ساخت فایل های index.php و style.cssبعد از این که پوشه اصلی کدهای قالب خود را ساختید، نوبت به ایجاد فایل های index.php و style.css می رسد.فایل style.css:فقط کافیست نام قالب را در این فایل CSS قرار دهید تا وردپرس بتواند آن را پیدا کند. برای نوشتن نام قالب، کدهای زیر را بنویسید:/*Theme Name: customthemeAuthor: ZhaketVersion: 1.0*/در کدهای بالا به جای customtheme نام قالب خود را بنویسید. در قسمت Author نیز می توانید نام خود یا شرکت خود را بنویسید. همچنین اطلاعات دیگری نیز می توانید در این کدها بنویسید؛ مثل:بخش Theme URL: می توانید لینکی که در این بخش قرار دهید که کاربران در صورت تمایل بتوانند اطلاعات بیشتری درباره این قالب را آنجا مشاهده کنند. منظور از کاربران، افرادی است که احیاناً می خواهند بعداً از این قالب جدید شما استفاده کنند.بخش Author URI: آدرسی برای ارائه اطلاعات بیشتری درباره نویسنده (یعنی خودتان).بخش License: می توانید مشخص کنید که قالب تان از چه مجوزی استفاده می کند. البته اگر این مجوز با GPL-compatible سازگار نباشید، با وردپرس نیز سازگار نخواهد بود.فایل index.php:وردپرس از کدهای این فایل برای نمایش محتواهای سایت استفاده می کند. به علاوه اگر یکی از فایل های پایه ای پیدا نشوند، وردپرس از این فایل استفاده می کند. حداقل کد لازم برای نوشتن داخل این فایل کد زیر است:<h1>Custom Theme!</h1>حالا دیگر می دانید که به جای Custom Theme باید نام قالب خود را بنویسید.مرحله 3- فعال کردن قالبحالا باید این قالب تازه را در وردپرس خود فعال کنید. برای این کار در پیشخوان وردپرس به مسیر نمایش> پوسته ها بروید.در این قسمت در جایی که همه پوسته ها نشان داده می شود، قالب جدید را مشاهده می کنید. پس موس را روی آن ببرید و گزینه "فعال نمایید" را انتخاب کنید. حالا سایت را رفرش کنید و چک کنید که آیا این قالب روی سایت اعمال شده است یا نه.مرحله 4- تنظیمات فایل index.php را تغییر دهیدبرای این که مطمئن شوید که قالب تان کار می کند یا نه، به فایل بروید و کدهای قبلی را پاک کنید. حالا باید تکه کدهایی را بنویسید که وردپرس بتواند فایل های محتواهای جدید را از پایگاه داده فراخوانی کند. دستور "have posts" که در تصویر زیر می بینید، دستور می دهد که پست های بلاگ در پایگاه داده جست و جو شوند. همچنین در صورت وجود محتوای جدید نیز این صفحه به روز شود. در واقع یک تابع " the post" وجود دارد که باید در حلقه " have posts" قرار گیرد. به کمک این تابع وردپرس دائماً محتواهای جدید را از پایگاه داده تحویل می گیرد و به کاربران نشان می دهد. به کدهای زیر نگاه کنید:<?phpif ( have_posts() ) :while ( have_posts() ) : the_post(); ?><h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2><?php the_content() ?><?php endwhile;else :echo ‘<p>There are no posts!</p>’;endif;?>مرحله 5- اضافه کردن سرصفحه و پاصفحهدر این مرحله باید هدر و فوتر سایت را بسازید. پس دو فایل جدید کنار فایل های style.css و index.php بسازید. نام آنها را Header.phpو footer.php قرار دهید. فایل هدر شامل کدهای داخل تگ باز و بسته <head> است. این کدهای می توانند کدهای توضیح متا، استایل ها و ... باشند.فایل فوتر نیز می تواند شامل کدهای زیر باشد:<footer class=&quotsite-footer&quot><p><?php bloginfo('name')?></p></footer><?php wp-footer()?></body></html>6- ساخت پوشه functions.phpتا این جای کار 4 پوشه زیر را برای قالب جدید ساخته ایم:1. index.php2. index.php3. header.php4. footer.phpفایل آخری که از پایه های قالب جدید محسوب می شود و باید آن را بسازید، فایل functions.php است. این فایل فقط وقتی این تم فعال باشد کار می کند و فقط روی همین تم اعمال می شود. کدهای این فایل که کنار فایل های قبلی قرار دارد، به کدهای CSS مربوط به ظاهر سایت اشاره دارند. کدهای این فایل نیز می توانند کدهای زیر باشند:<?phpfinction custom-theme-assets() {wp-enqueue-style('style',get-stylesheet-uri());}add-action('wp-enqueue-scripts','custom-theme-assets');مرحله 7: کامل کردن قالببا گذارندن مراحل بالا، پایه و اساس قالب جدید شما ساخته شده است. حالا کافیست باقی تنظیمات را از داخل خود وردپرس و به کمک قابلیت های آن یا از طریق وارد کردن کد به فایل های قالب، اعمال کنید.در پایانبا طراحی قالب وردپرس از صفر تا صد می توانید تمام نیازهای یک سایت را خودتان بسازید. ضمناً این گزینه را هم در نظر بگیرید که می توانید از طریق ساخت قالب های جدید، به کسب درآمد بپردازید. به این ترتیب که قالب های جدیدی را با یک ظاهر و عملکرد منحصر به فرد تولید کنید. سپس با مجموعه های مانند ژاکت همکاری کرده و قالب وردپرسی خود را به کمک آن به فروش برسانید. البته طبیعتاً این روش کسب درامد مستلزم کسب مهارت های بیشتر در این زمینه است. پس کار را شروع کرده و اولین قالب خود را طراحی کنید تا با آزمون و خطا، تبدیل به یک طراح قالب حرفه ای شوید. امیدواریم این مطلب برایتان مفید واقع شده باشد.تیم تحریریه ژاکت سرویس