آموزش تبدیل PSD به وردپرس – مراحل اصلی تبدیل قالب فتوشاپ به قالب وردپرس
در این مطلب می خواهیم شما را با یکی از آموزش های مهم در زمینه طراحی سایت و طراحی قالب سایت آشنا کنیم. آموزش طراحی فایل PSD و تبدیل آن به وردپرس یکی از اصولی ترین روش ها برای طراحی یک قالب وبسایت وردپرسی است تا بتوانید با استفاده از سلایق و هنر طراحی خودتان قالب حرفه ای مناسب با هر موضوعی بسازید. برای انجام تبدیل آنچه در برنامه ی فتوشاپ طراحی شده به یک قالب کامل وردپرسی مراحل مختلفی هست که باید به صورت اصولی و مرحله به مرحله طی کنید. در ادامه شما را با کلیه ی مواردی که باید در آموزش تبدیل PSD به وردپرس به آنها توجه کنید آشنا خواهیم کرد.
آشنایی ابتدایی با برنامه فتوشاپ Photoshop
کمتر کسی هست که حتی نام برنامه ی حرفه ای طراحی بنر و پوستر و ویرایش عکس های کامپیوتری را نشنیده باشد. بله برنامه ی فتوشاپ از سری نرم افزارهای ساخت شرکت Adobe که همواره مورد توجه بوده و هر سال نسخه ی جدید و با امکانات متنوعی را اپدیت می کند. که با بهرمندی از آموزش ادوبی فتوشاپ می توانیم یکی از بهترین منابع جهت یادگیری را مشاهده و بررسی نماییم.
فتوشاپ به شما کمک می کند که تا همه ی جزئیات مورد نظر که برای یک قالب با صفحات اصلی، صفحه داخلی، مطالب و برگه های سایت وردپرسی نیاز دارید را طراحی کنید.
از جمله دلایلی که وردپرس به عنوان یک سیستم مدیریت محتوا محبوب معرفی شده این است که براحتی می توان با توجه به اوپن سورس بودن کدهای آن و با استفاده از برنامه قدرتمند فتوشاپ قالب های حرفه ای و مناسب با موضوع مورد نظرتان طراحی کنید.
یک فایل با فرمت PSD می تواند تمامی لایه های مورد استفاده در یک قالب طراحی شده را در خود ذخیره کند و برای اینکه بتوانید هر کدام از جزئیات در این فایل را در صفحات یک سایت ایجاد کنید نیاز دارید تا تمامی لایه های طراحی شده در فتوشاپ را به اجزای یک برگه در وبسایت تعریف و تبدیل کنید.
برای یادگیری اصولی فتوشاپ نیاز داریم تا با کلیه ی مراحل طراحی و ابزارهای موجود در این نرم افزار آشنایی پیدا کنیم. پیشنهاد می کنیم ابتدا فتوشاپ را به خوبی یاد بگیرید و آموزش های آن را مشاهده کنید.
فرمت PSD به عنوان فرمت پیشفرض فتوشاپ بود که اکثرا طراحی ها برنامه ی فتوشاپ در این نوع فرمت ذخیره می شود. تقریبا در سیستم عامل ویندوز کمتر برنامه ی طراحی عکس و پوستر را می شناسیم که بتواند به خوبی و جامع بودن فتوشاپ خواسته های ما را انجام دهد.
پس به همین خاطر هم ما از همین برنامه برای طراحی جزء به جزء صفحات سایت مان استفاده می کنیم. فقط نکته ای که هست باید تمامی اجزای طرح مان باید به صورت یک لایه مجزا باشد تا بتوان در پوشه ی مخصوص به تصاویر یک وبسایت آنها را برای مکان های مورد نظر بکار بگیریم.
آشنایی با سیستم مدیریت محتوا وردپرس Wordpress
جای هیچ گونه صحبت اضافی نیست چون وردپرس یکی از پایه ای ترین مباحث در مورد طراحی یک وبسایت مجهز و کامل در دنیای وب است.
دلیل این معروف بودن هم امکانات و ابزارهای متنوع و جذاب بکار گرفته شده در این سیستم مدیریت سایت است. وردپرس توانسته به خوبی با استفاده از بکارگیری زبان برنامه نویسی PHP در هسته ی اصلی خود تمامی نیاز های کاربران و مدیران سایت و وبمسترها را تامین کند.
برای اینکه بتوانید با وردپرس به خوبی کار کنید و ساختار کدنویسی های آن را بشناسید باید آشنایی ابتدایی با زبان برنامه نویسی PHP داشته باشید. برای کسب مهارت کامل و توانایی یادگیری این زبان می توانید از فیلم های آموزشی فرادرس کمک بگیرید.
علاوه بر عملکرد اصلی وردپرس، استفاده از قالب های جذاب و متنوع و همچنین ابزارک و پلاگین های کاربردی از دلایل دیگر محبوبیت وردپرس می تواند باشد.
ذکر این نکته مهم است که برای طراحی کلیه اجزای یک قالب وردپرس باید با نحوه ی کار با سایت های وردپرسی آشنایی داشته باشید. اکثر قالب های مورد استفاده برای این سیستم مدیریت محتوا دارای پلن تنظیمات اختصاصی هستند که کاربران می توانند آنها را شخصی سازی کنند.
ولی برای اینکه بدانید چطور با آموزش تبدیل PSD به وردپرس یک قالب حرفه ای و شخصی سازی شده بسازید باید به تمامی جوانب یک Theme در Wordpress آشنایی داشته باشیم.
این جنبه های مهم شامل رنگ بخش های سایت، الگوهای بکار رفته، دکمه ها و استایل آنها، فونت های استفاده شده و … است که تمامی اینها در وهله اول توسط طراح فتوشاپ ایجاد می شود و هنگام انجام پروژه طراحی سایت توسط ناظر و کارفرما تایید می شود و سپس به بخش افزودن اجزای قالب وردپرسی سپرده می شود.
معرفی اجزای مهم قالب وردپرس
برای اینکه بتوانیم اجزای یک قالب وردپرس را بررسی کنیم می توان ابتدا یک قالب رایگان که به صورت پیشفرض بر روی فایل نصبی وردپرس هست را بررسی کنیم.
در سورس فایل برنامه ی وردپرس 3 پوشه قرار دارد که نام یکی از آنها wp-content است. این پوشه شامل بخش های مختلفی مانند فایل های آپلود شده، ابزارک ها، قالب ها، اپدیت های نسخه اصلی وردپرس و … می باشد.
داخل پوشه ی Theme می توان قالب هایی که بر روی سایت وردپرسی ما نصب شده است را مشاهده کنیم. البته اینکه کدام قالب در حال حاضر به صورت پیشفرض نصب شده است را باید در داخل بخش مدیریت سایت یا پیشخوان مشاهده کنیم.
در داخل یکی از پوشه های قالب نصب شده فایل های مهمی قرار دارند که وجود هرکدام از آنها برای راه اندازی کامل و بی عیب و نقص آن الزامی است.
از مهمترین بخش هایی که برای آموزش طراحی سایت به آن نیاز داریم شناخت اجزای استاندارد یک قالب است تا در طراحی وبسایت بهترین نتیجه حاصل شود. برای فراگیری کامل آموزش طراحی سایت نیاز است تا آموزش های اصلی در این زمینه را به صورت عملی یاد بگیرید.
فایل های استاندارد قالب وردپرس
این فایل ها شامل فایل های با پسوند php می باشند که برای اجرای هر کدام از بخش های قالب وردپرس به این پوشه افزوده شده است که شامل :
- فایل هدر Header.php
کلیه ی بخش هایی که در بخش ابتدایی و بالای یک سایت و صفحات وب می بینیم شامل بخش هدر است.
در این فایل تنظیمات و کدنویسی های نمایش بخش هایی شامل لوگو، نام شرکت، تصویر بنر، منو و فهرست سایت، اسلایدر، نمایش تاریخ و … قرار داده شده است.
البته باید بدانیم که محتویات فایل هدر در تمامی صفحات سایت وردپرس نمایش داده خواهد شد و این فایل یکی از مهمترین بخش هایی است که در آموزش تبدیل PSD به وردپرس باید به طراحی آن دقت بیشتری شود.
- فایل فوتر Footer.php
در این فایل می توان تمامی بخش های مربوط به ناحیه ی زیرین و انتهایی سایت که مانند بخش هدر در تمامی صفحات قالب ما نمایش داده می شود را مشاهده کرد.
در فایل فوتر تنظیمات نمایش بخش هایی شامل : ابزارک های نمایشی، فهرست و منو، حقوق کپی رایت، لوگو شرکتهای همکار، طرح پس زمینه معرفی شرکت و … قرار داده می شود.
- فایل مطالب Single.php
منظور از فایل Single.php مربوط به بخش محتوا و پست های یک سایت وردپرسی است که اهمیت ویژه ای دارد. این فایل باید تمامی جزئیات یک مطلب و نوشته در وب سایت ما را داشته باشد.
بخش های مختلف موجود در فایل Single.php شامل : عنوان مطلب، تصویر مطلب، تاریخ نوشته، محتوای نوشته، برچسب تگ و دسته بندی و سایر جزئیات متنوع مورد استفاده در یک مطلب است.
- فایل نظرات Comment.php
این فایل از بخش های جانبی یک صفحه ی مطلب است که به کاربران سایت کمک می کند تا نظرات و بازخورد خود از سایت ما را ارسال و منتشر کنند.
در این فایل باید بخش هایی مانند : نام کاربر،ایمیل یا آدرس الکترونیکی، نام وبسایت و بخش محتوای نظر گنجانده شود.
- فایل سایدبار Sidebar.php
از بخش های جذاب یک سایت و قالب وردپرسی بخش ناحیه ی کناری یا سایدبار است که می توان برحسب سلیقه هر محتوا با نوشته، عکس و ویدئو را در آن قرار داد.
این فایل هم شامل بخش هایی برای نام ابزارک، محتوای ابزارک و همچنین ساز و کار استفاده از آنها است.
- فایل صفحه سایت Page.php
این فایل همانند فایل Single.php می باشد با این تفاوت که به صورت مقالات و بایگانی مطالب سایت نمایش داده نخواهد شد و بیشتر از این فایل برای ایجاد صفحات و برگه های تماس با ما، درباره ما، قوانین و مقررات و … استفاده می شود.
- فایل بدنه سایت Index.php
شاید مهمترین فایل که در داخل یک قالب وردپرس باید وجود داشته باشد همین فایل index.php است چون تمامی بخش های قالب را در کنار هم قرار می دهد و بدنه ی یک سایت وردپرسی را تشکیل می دهد.
حال که برای آموزش تبدیل PSD به وردپرس با اجزای یک قالب وردپرسی آشنا شدیم باید بدانیم که برای هر بخشی در نرم افزار فتوشاپ جزئیات و ریزه کاری های آن را طراحی و آماده سازی کنیم.
لازم است تا وقتی می خواهیم اجزا و فایل های وردپرس را به طور کامل بررسی و تغییر بدهیم ابتدا با آموزش برنامه نویسی همراه با فیلم های آموزشی آنلاین آشنایی داشته باشیم.
مراحل اصلی آموزش تبدیل PSD به وردپرس
برای شروع کار می خواهیم شما را با مراحل مهم تبدیل فایل فتوشاپ و PSD به وردپرس را شرح دهیم.
گام اول : فایل PSD قالب را طراحی کنید
در اولین مرحله همانطور که پیش تر توضیح داده شد با کسب آموزش فتوشاپ، کلیه ی اجزایی که می توان در یک قالب وردپرس نمایش دهیم را باید به صورت یک صفحه ی وب استاندارد طراحی کنیم.
از ابتدایی ترین بخش ها که شامل هدر، فوتر، بدنه یا Body و سایدبار شروع می کنیم و برای آنها چارچوب مشخصی را اندازه گیری می کنیم.
بعد از اندازه گیری و قرار دادن محتویات اصلی به سراغ محتویات ریز و کوچکتر می رویم.
سوال : چرا باید تمامی جزئیات قالب وردپرس را در فتوشاپ طراحی کنیم؟
یا بهتر بگوییم که چه نیازی هست اجزای یک قالب که در جای دیگری باید به قالب افزوده شود در یک فایل نمایشی PSD طراحی شود؟
پاسخ : با طراحی جزئیات یک قالب وردپرسی در فتوشاپ می توانیم نمای کاملی از سایتی که می خواهیم بسازیم خواهیم داشت.
فضاسازی داخل فایل PSD فتوشاپ به ما کمک می کند تا دید اولیه و ابتدایی خوبی از آنچه ساخته خواهد شد داشته باشیم.
گام دوم : بخش های فایل PSD را برش دهید
پس از اینکه فایل گرافیکی فتوشاپ را طراحی کردیم اینبار نوبت به برش دادن کلیه ی بخش های نمایش داده در این فایل است. چون ما نمی توانیم تمامی اجزا را به یکباره در یک صفحه ی وبسایت قرار دهیم باید جزء به جزء این طرح را تکه تکه کنیم.
اگر بخواهیم سایتی مانند سایت فروشگاه اینترنتی را طراحی کنیم باید به تمام بخش های مورد نیاز برای نمایش المان های آن دقت کنیم. آموزش ساخت فروشگاه اینترنتی می تواند به ما کمک کند تا بدانیم به چه بخش هایی برای طراحی آن نیاز داریم.
این اجزای اصلی شامل بخش های زیر می باشد :
- بخش فوقانی و هدر
- بخش محتوا و بنده سایت
- بخش زیرین و فوتر
- بخش کنار و سایدبار
تمامی بخش های برش داده شده باید به صورت فرمت تصویری قابل نمایش در یک مرورگر اینترنتی ذخیره شوند که مهمترین این فرمت های تصویری شامل JPG و PNG است.
در صورتی که فایل تصویری متحرک مانند بنر و اسلایدر داریم باید به صورت فرمت GIF آن را ذخیره کنیم تا در پوشه ی محتویات قالب در داخل فولدر تصاویر سایت یا img قرار دهیم.
گام سوم : فایل های JavaScript، CSS، HTML را طراحی کنید
بعد از طراحی بخش های گرافیکی در فایل PSD حال باید آنها را در یک مرورگر اینترنتی نمایش دهیم. که این امر با قرار دادن لایه های عکس موجود در بین تگ های زبان نشانه گذاری HTML قابل انجام است.
در ادامه ی مراحل آموزش تبدیل PSD به وردپرس نیاز است تا با آموزش طراحی سایت با HTML و CSS آشنایی کامل داشته باشیم و فیلم های آموزشی آنها را به طور کامل مشاهده کنیم.
پس از قرار دادن تگ های HTML در یک فایل اصلی به نام index.html حال باید به کلیه ی اجزای موجود رنگ، حرکت، انیمیشن و استایل مشخصی را داد که این مورد هم با افزودن دستورات استایل دهی در زبان CSS قابل اجرا است.
گام چهارم : فایل HTML و CSS را به چارچوب قالب وردپرس تبدیل کنید
حال که توانستیم در 3 مرحله ی قبلی فایل های HTML از قالب وردپرس را بسازیم باید آنها را با توجه به قواعد و ساختار Wordpress به یک چارچوب استاندارد تبدیل کنیم.
در این مرحله نیاز است فایل index.html را که آن را یک صفحه ی از نوع ایستا و استاتیک می شناسیم به یک قالب وردپرس تبدیل کنیم.
لازمه اینکار این است که با دستورات ایجاد فایل های قالب وردپرس که در بالا مشخص کردیم و دستور زبان PHP بتوانیم 4 فایل اصلی یک پوسته کامل وردپرس را ایجاد کنیم.
این چهار فایل اصلی قالب وردپرس عبارتند از :
- فایل Header.php
- فایل Index.php
- فایل Footer.php
- فایل Sidebar.php
بعد از اینکه فایل index.html را به فایل اصلی بدنه قالب یعنی index.php تبدیل کردیم باید کلیه ی دستورات استایل دهی را تحت عنوان فایل استایل قالب یعنی Style.css ایجاد کنیم.
مابقی فایل ها و بخش های قالب وردپرس تکمیل کننده صفحات سایت ما هستند که بعد از این 4 فایل اصلی به قالب ما اضافه می شوند.
گام پنجم : تگ های HTML و توابع وردپرس را با هم ادغام کنید
در این بخش باید تگ های متعددی که در فایل index.php افزوده شده است را با کلیه توابع استاندارد وردپرس که با زبان PHP نوشته شده است را ادغام کنیم.
برای هر بخش توابع مشخصی وجود دارد که در ساختار فایل های استاندارد قالب وردپرس مشخص شده است.
البته نیاز داریم تا دانش ابتدایی از کار با توابع وردپرس را فرا گرفته باشیم که این مورد با کسب آموزش وردپرس به صورت اصولی و پایه ای قابل انجام است.
این توابع برای هر بخش از فایل های اصلی قالب متفاوت است که باید به درستی در داخل آنها تگ های HTML که استفاده کردیم را قرار دهیم.
گام نهایی : قالب وردپرس طراحی شده را تست کنید
در آخرین مرحله و مهمترین مرحله باید تمامی اقدامات انجام شده را تست و بررسی کنیم تا قالب وردپرس به درستی ایجاد شده باشد.
در این بخش باید سعی کنیم تمامی استانداردها و کدنویسی های معتبر را با فایل های ساخته شده مطابقت دهیم تا اگر مشکلی هست در این مرحله برطرف کنیم.
جمع بندی درباره آموزش تبدیل PSD به وردپرس
خوشحالیم که در این مطلب سعی کردیم به صورت عملی و اصولی بخش های آموزش تبدیل PSD به وردپرس را شرح دهیم و شما را با گام های مرحله ای آن کاملا آشنا کنیم.
پیشنهاد می کنیم برای اینکه بتوانید قالب وردپرسی حرفه ای مورد نیاز خود را به صورت کارآمد بسازید ابتدا با استفاده از آموزش های آنلاین فرادرس شروع به یادگیری کنید و از فیلم های آموزشی که توسط اساتید برجسته و با تجربه تهیه شده است بهره مند شوید.
