آموزش وردپرسوردپرس

طراحی قالب وردپرس – از کجا شروع کنیم | بخش اول

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

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

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

چگونه طراحی قالب وردپرس را شروع کنیم؟

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

HTML

زبان نشانه گذاری HTML پایه و اساس هر نوع طراحی صفحات وب به شمار می رود. در واقع استخوان بندی هر وب سایت HTML است و خوشبختانه یادگیری آن بسیار ساده است و می توان آن را در عرض یک روز به صورت کامل از وب سایت W3 Schools آموخت.

CSS

لباس یا ظاهر هر وب سایتی را CSS تولید می کند. CSS، رنگ ها، اندازه ها و فونت ها را تعیین می کند و جلوه و زیبایی هر وب سایتی را ایجاد می کند. یادگیری CSS برای طراحی وب یکی از الزامات است که می توان آن نیز از وب سایت W3 Schools به راحتی آموخت.

جاوا اسکریپت

جاوا اسکریپت، برای طراحی وب یا طراحی قالب وردپرس یک زبان حیاتی نیست اما در صورتی که قصد ایجاد یک محصول قابل رقابت و همچنین ایجاد یک اثر خوب را داشته باشید، یکی از الزامات طراحی وب به شمار می رود. در دنیای امروزی به دلیل رقابت برای ایجاد امکانات و قابلیت های ویژه، جاوا اسکریپت به یکی از زبان های مهم در طراحی وب تبدیل شده است. جاوا اسکریپت را نیز می توان از وب سایت W3 Schools آموخت.

PHP

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

فتوشاپ

برای طراحی حرفه یک قالب وردپرس یا هر صفحه وب، لازم است ابتدا طرح اولیه آن را در نرم افزاری مانند فتوشاپ ایجاد نموده و سپس بر اساس طرح نهایی کدنویسی را شروع کنید. لذا آشنایی با فتوشاپ که یک نرم افزار پرکاربرد در ایران است، امر لازم است. در عین حال می توان از نرم افزارهای دیگر مانند Sketch و یا Adobe XD استفاده نمود. برای یادگیری فتوشاپ منابع آموزشی رایگان در وب فارسی وجود دارد.

گوگل

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

زبان انگلیسی

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

ویرایشگر کد یا IDE مناسب

ویرایشگر کد یا Text Editor و یا یک فضای یکپارچه توسعه (IDE) برای هر برنامه نویس لازم است. هرچند برای طراحی قالب وردپرس یک ویرایشگر کد ساده مانند Visual Studio Code مایکروسافت کفایت می کند اما اگر قصد برنامه نویسی حرفه ای دارید، لازم است تا با یک IDE قدرتمند مانند PHP Strom کار کنید. هر دو نرم افزار را می توانید از سایت های دانلود نرم افزار فارسی، دانلود و نصب کنید. لازم به ذکر است که VS Code رایگان و PHP Storm غیر رایگان است و برای نصب نیاز به فعال سازی دارد.

دیگر پیش نیازها

پیش نیازهای دیگری برای طراحی قالب وردپرس وجود دارند که برای کاربرانی که هنوز در ابتدای راه هستند کاربرد چندانی ندارند اما برای کاربران حرفه ای لازم هستند. بسته هایی مانند node.js، Composer و SASS یا LESS که برای راحتی کار و برای توسعه دهندگان حرفه ای به کار برده می شوند.

آشنایی با ساختار یک صفحه وب

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

هر صفحه وب از بخش های مختلفی ایجاد شده است. برای طراحی یک صفحه وب ابتدا لازم است طرح مورد نظر خود را در فتوشاپ (یا دیگر نرم افزار ها) پیاده کنیم. اگر بخواهیم صفحات وب را در بخش های مختلف به صورت خلاصه توضیح دهیم می توان گفت هر صفحه از بخش های زیر تشکیل شده است.

Header یا سربرگ

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

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

محتوا

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

ستون کناری

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

Footer یا پابرگ

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

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

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

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

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

طرح اولیه

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

پیاده سازی طرح در فتوشاپ

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

نصب وردپرس

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

تنظیمات اولیه

پس از نصب وردپرس آماده سازی فضای کار، لازم است تنظیماتی را روی وردپرس انجام دهید. برای این کار ابتدا پوشه محل نصب وردپرس را در نرم افزار VS Code باز کنید. برای این کار می توانید روی دکمه Open Folder در VS Code کلیک کرده و پوشه مورد نظر را انتخاب کنید و یا می توانید به پوشه htdocs در محل نصب Xampp مراجعه نموده و روی پوشه وردپرس راست کلیک کنید. سپس گزینه Open with Code را کلیک نمایید.

برای مثال، اگر در پوشه htdocs یک پوشه به نام wp ایجاد کرده اید که وردپرس درون آن نصب شده، روی پوشه wp راست کلیک کنید و گزینه Open with Code را انتخاب کنید و یا در VS Code پوشه wp را باز کنید.

پس از باز شدن پوشه درون نرم افزار VS Code، فایل wp-config.php را باز کرده و کد زیر را پیدا کنید:

define( 'WP_DEBUG', false );

مقدار false را به true تغییر دهید. با این کار تمام خطاهای موجود در وردپرس نمایش داده می شود. در ادامه اگر خطایی در کدهای قالب باشد، با این روش می توان به راحتی آن را شناسایی و برطرف نمود.

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

در ادامه با مراجعه به پوشه نصب وردپرس از مسیر wp-contents پوشه plugins را باز کرده و تمام موارد موجود در پوشه بجز فایل index.php را حذف کنید.

ادامه در مطالب بعدی…

برچسب ها

ایرانووب

متولد 1368، طراح و توسعه دهنده وب، عاشق کدنویسی، ایده پردازی دیجیتال و بازی های ویدئویی!!!

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

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

دکمه بازگشت به بالا
بستن
بستن