مقدمه:

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

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

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

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

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

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

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

وبسایت وردپرسی خودتان

یک طرح فضای میزبانی با کیفیت

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

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

قالب استارتر چیست و چرا باید از آن استفاده کنید.

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

تعداد بسیار زیادی قالب استارتر عالی وجود دارند که تنها برای نمونه چند تا از آنها را ذکر می کنیم:

بیشتر بخوانید:  وردپرس: بررسی اجمالی، نصب و راه اندازی، داشبورد مدیریت

Underscores, FoundationPress, UnderStrap و Bones.

ما از Underscores برای نمونه استفاده می کنیم.

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

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

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

مرحله ۱: یک محیط لوکال نصب کنید.

wp-setup-local-env

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

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

هنگامی که نصب کننده را دانلود کردید می توانید آن را اجرا کنید.

wp-install-desktopserver

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

مرحله ۲: دانلود و نصب قالب استارتر

wp-install-starter-theme

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

wp-underscores-generate

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

wp-underscores-advanced

در اینجا همچنین گزینه ای وجود دارد با نام sassify که فایل های Syntactically Awesome StyleSheets یا به طور مخفف (SASS) رابه قالب شما اضافه می کند. SASS یک زبان پیش پردازشی برای CSS است که شما را قادر می سازد تا از متغیر ها، نست ها، عملیات ریاضی و موارد بیشتری استفاده نمائید.

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

بیشتر بخوانید:  HTML چیست؟

مرحله ۳: فهم اینکه وردپرس در پشت صحنه چگونه کار می کند.

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

اینکه کدام یک از فایل های قالب در هر صفحه استفاده شوند را وردپرس از طریق سلسله مراتب قالب تعیین می کند. این ترتیبی است که وردپرس برای هماهنگ کردن فایل های قالب در هر باری که صفحه ای از سایت شما لود می شود اتخاذ می کند. برای مثال اگر آدرس http://example.com/post/this-post را بازدید کنید، وردپرس به ترتیب زیر برای فایل های قالب شروع به جستجو خواهد نمود:

۱٫ فایل های که با اسلاگ مطابقت دارند همانند this-post.

۲٫ فایل هایی که با ID پست مطابقت دارند.

۳٫ فایل پست تکی عمومی مانند single.php.

۴٫ یک فایل آرشیو مانند archive.php.

۵٫ فایل index.php.

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

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

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

مرحله ۴: قالبتان را پیکربندی کنید.

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

قابلیت هایی را بوسیله هوک ها به قالب بیفزائید.

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

اجازه دهید نگاهی به رایجترین هوک ها و اینکه آنها برای چه چیزی می توانند مفید باشند بیندازیم:

()wp_head

به المنت <head> در header.php اضافه می شود و استایل ها، اسکریپت ها و سایر اطلاعاتی که همزمان با لود شدن سایت اجرا می شوند را فعال می سازد.

بیشتر بخوانید:  المنت article در HTML5

()wp_footer

به footer.php درست پیش از تگ <body/> اضافه می شود. این مورد اغلب برای قرار دادن کد گوگل آنالیتیکس استفاده می شود.

()wp_meta

این مورد معمولا در sidebar.php، برای در بر گرفتن اسکریپت های اضافی همچون تگ cloud، ظاهر می شود.

()comment_form

درست پیش از تگ پایان فایل <div/>، برای نمایش داده های کامنت، به comments.php اضافه می شود.

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

اضافه نمودن استایل ها با CSS

Cascading Style Sheets یا به شکل مخفف CSS آن چیزی هستند که ظاهر همه محتوای موجود در سایت شما را تعیین می کنند. CSS در وردپرس بوسیله فایل style.css ایجاد می گردد. شما هم اکنون این فایل را در قالب تان دارید اما قالب شما حاوی نسخه ابتدائی این فایل یعنی استایل پیشفرض است.

wp-styles-css

اگر خواهان مثال فوری از اینکه CSS چگونه کار می کند هستید می توانید هر استایلی را در این فایل ویرایش کنید و پس از دخیره فایل تأثیرات ویرایشتان را ببینید.

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

مرحله ۵: از قالبتان خروجی بگیرید و آن را بر روی سایتتان آپلود نمائید.

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

وقتی که طور کلی قالبتان را تست کردید و قانع شدید که استانداردهای لازم را دارد، تنها کاری که باقی می ماند خروجی گرفتن از آن است. آسانترین راه برای این کار پیدا کردن جایی است که وبسایت بر روی ماشین لوکال شما نصب شده است که احتمالا در یک فولدر با نام وبسایت درون مسیر پیشفرض داکیومنت های شماست. فولدر وبسایت را باز کنید تا قالبتان را در مسیر /wp-content/themes/ بیابید.

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

نتیجه گیری

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


سیامک قربانی پور

سیامک قربانی پور هستم؛ مدیر عامل شرکت "آبتین ارتباط ایرانیان"؛ دانش آموخته کارشناسی ارشد مدیریت فناوری اطلاعات. موضوع فعالیت شرکت ما به شماره ثبت 1050، برنامه نویسی، طراحی وبسایت و شبکه های کامپیوتری هست. از سال 94 تا 96 به مدت دو سال مشاور مرکز رشد و کسب و کار پارک علم و فناوری چهارمحال و بختیاری بودم اما الان کسب و کار خودم رو در زمینه برنامه نویسی و طراحی وبسایت دارم. همچنین در زمینه مسائل کسب و کاری به علاقه مندان مشاوره هایی رو ارائه می دهم و مطالبی رو در این زمینه خصوصا در مورد کسب و کارهای حوزه فناوری اطلاعات و ارتباطات در این وبسایت منتشر می کنم.

0 دیدگاه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

1 × 1 =

تائید دیدگاه فعال است. دیدگاه شما ممکن است کمی طول بکشد تا ظاهر شود.

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