آموزش افزونه ویژوال کامپوزر
یکی از مهم‌ترین ویژگی‌های وردپرس، آسان بودن کار با آن است. به طوری که حتی تازه‌کارها و کسانی که با کدنویسی آشنایی ندارند، می‌توانند برای خود سایت بسازند و در آن تغییرات ایجاد کنند. دلیل این سهولت، افزونه‌های بسیار زیادی هستند که به شما کمک می‌کنند. صفحه سازها دسته‌ای از افزونه‌ها هستند که در کار طراحی سایت بسیار به کار می‌آیند و افزونه ویژوال کامپوزر که در این مقاله در مورد آن صحبت می‌کنیم، یکی از معروف‌ترین صفحه سازهای وردپرس است.
صفحه ساز وردپرس چیست؟
همان طور که پیش از این نیز اشاره کردیم، در وردپرس شما می‌توانید به کمک افزونه‌های مختلفی که وجود دارد، کار طراحی سایت را انجام دهید. یک گروه از این افزونه‌ها که معمولاً در راستای طراحی و چینش بلوک‌های مختلف سایت، کمک زیادی به شما می‌کنند، صفحه سازها هستند.
صفحه سازها یا Page Builders، افزونه‌هایی هستند که به شما اجازه می‌دهند تا با استفاده از تکنیک درگ اند دراپ (drag and drop) صفحات سایت خود را ویرایش کنید و چینش آن را به شکل دلخواه دربیاورید. به این معنا که دیگر لازم نیست تا برای ایجاد تغییر در صفحات سایت خود، تغییراتی در کد این صفحات به وجود بیاورید. بلکه با استفاده از صفحه سازها می‌توانید به صورت ویژوال یا تصویری به ویرایش صفحات بپردازید.
به این صورت که شما به راحتی و با استفاده از حرکت ماوس، می‌توانید بلاک‌های مورد نظر خود را در صفحه قرار دهید، جایشان را تغییر دهید و یا ویژگی‌های مختلف آن‌ها را امتحان کنید.
افزونه ویژوال کامپوزر و افزونه المنتور (Elementor) از معروف‌ترین افزونه‌های صفحه ساز وردپرس هستند که ما در این مقاله به افزونه ویژوال کامپوزر می‌پردازیم.
آشنایی با ویژوال کامپوزر یا WP bakery page builder
افزونه ویژوال کامپوزر این روزها با نام WP bakery page builder شناخته می‌شود و اگر به دنبال دانلود این افزونه باشید، می‌بینید که این نام را دارد. ویژوال کامپوزر (Visual Composer) نام قدیم آن است. با وجود آن که نام توسط تیم سازنده تغییر کرده، اما بسیاری از فعالان در حوزه وردپرس، همچنان با نام ویژوال کامپوزر به این افزونه اشاره می‌کنند. ما نیز در این مقاله به این افزونه، ویژوال کامپوزر می‌گوییم و صرفاً این بخش را گفتیم که در هنگام خرید و دانلود افزونه، از دیدن نامِ جدید آن یعنی WP bakery page builder تعجب نکنید.
افزونه ویژوال کامپوزر یکی از کامل‌ترین و به‌روزترین افزونه‌های صفحه ساز برای وردپرس است. تقریباً با تمامی قالب‌های مدرن وردپرس سازگاری دارد و شما می‌توانید بدون هیچ گونه مهارت در برنامه نویسی یا کد نویسی، از آن استفاده کنید. برای ورود به وبسایت اصلی افزونه می‌توانید اینجا کلیک کنید. بر روی این وبسایت نیز ویدئوهای زیادی برای آموزش افزونه وجود دارد که می‌توانید از آن‌ها استفاده کنید.
روش تهیه ویژوال کامپوزر از سایت‌های ایرانی و خارجی
اگر بخواهید لایسنس اصلی این افزونه را خریداری کنید، می‌توانید از طریق وبسایت رسمی WP Bakery Page Builder اقدام کنید. قیمت لایسنس اصلی این افزونه در وبسایت، ۴۵ دلار است. طبعاً پرداخت چنین پولی برای وبسایت‌هایی که در داخل کشور فعالیت می‌کنند خیلی به صرفه نیست. از طرفی، راه‌های پرداخت زیادی نیز وجود ندارد و در ایران به علت تحریم‌های بانکی، خیلی نمی‌توان محصولات را مستقیماً و از سایت اصلی خرید.
در عوض بسیاری از وبسایت‌های ایرانی، نسخه‌های فارسی سازی شده این افزونه را با قیمت بسیار مناسب‌تری ارائه می‌کنند. تعدادی از آن‌ها را در ادامه آورده‌ایم. قیمت‌ها مربوط به لحظه نگارش این مقاله هستند.
- وبسایت ژاکت – ۸۹ هزار تومان
- طراحی پلاس – ۶۹ هزار تومان
- ابزار وردپرس – ۱۲۰ هزار تومان
وبسایت‌های دیگری نیز هستند که ممکن است این افزونه را ارائه کرده باشند. می‌توان گفت که قیمت‌ها بیشتر بر مبنای سابقه یا داشتن پشتیبانی و به روزرسانی مرتب برای افزونه، تعیین شده.
ضمن این که ممکن است بتوانید انواع خاصی از نسخه‌های کرک شده یا قفل شکسته این افزونه را نیز به صورت رایگان دانلود کنید. در ادامه توضیح می‌دهیم که چرا بهتر است از این نسخه‌ها استفاده نکنیم.
چرا از نسخه قفل شکسته استفاده نکنیم؟
بسیاری از افزونه‌های وردپرس که پولی هستند، نسخه رایگان و قفل شکسته‌ی آن‌ها نیز بر روی اینترنت یافت می‌شود. افزونه ویژوال کامپوزر نیز از این امر مستنثنی نیست و بسیاری از وبسایت‌ها این افزونه را به صورت کرک شده برای دانلود قرار داده‌اند. هر چند که ممکن است از این افزونه‌ها استفاده کنید و مشکلی هم پیش نیاید، اما محض احتیاط بهتر است که از این نوع افزونه‌ها استفاده نکنیم.
این افزونه‌ها به این نحو تهیه می‌شوند که یک شخص یا یک تیم، اقدام به شکستن قفل آن می‌کند. شکستن قفل به این معناست که در کدهای آن دست می‌برند و افزونه را به گونه‌ای آماده می‌کنند که بتوان آن را به صورت رایگان در هر جایی استفاده کرد. چنین کاری خطرناک است و ممکن است مشکلات امنیتی بسیاری را برای افزونه به وجود بیاورد. وجود حفره‌های امنیتی در یک افزونه نیز می‌تواند برای امنیت سایت شما مضر باشد.
زمانی که شما افزونه را از مبدا اصلی تهیه می‌کنید، این افزونه به صورت صددرصدی دارای پشتیبانی و تضمین خواهد بود. حتی اگر مشکلی هم پیش بیاید، فروشنده موظف است که مشکل را رفع کند. در حالی که درباره افزونه‌های دانلودی این مورد وجود ندارد و کسی پاسخگوی اشکالات احتمالی آن‌ها نخواهد بود. برای همین هم هست که تأکید می‌کنیم هنگام خریداری افزونه (چه افزونه ویژوال کامپوزر و چه افزونه‌های دیگر) حتماً دقت کنید که دارای پشتیبانی باشند.
چند نمونه سایت طراحی شده با این افزونه
در این قسمت چند وبسایت نمونه که کاملاً با استفاده از افزونه ویژوال کامپوزر طراحی و ساخته شده‌اند را معرفی می‌کنیم. با یک نگاه به این وبسایت‌ها می‌توانید متوجه شوید که به وسیله این افزونه می‌توان چه وبسایت‌های خارق العاده‌ای خلق کرد. فهرست این وبسایت‌ها در ادامه آمده است:
- کریس لما: وبسایت شخصی یک اینفلوئنسر حوزه کسب‌وکار
- Hiraya Solutions: وبسایت متعلق به یک تیم حوزه دیجیتال مارکتینگ
- Social Pulsar: وبسایت متعلق به یک آژانس بازاریابی
- TOCSI eSPORTs: وبسایت مربوط به بازی‌های ورزشی رایانه‌ای
- Geek Owl: وبسایت مربوط به یک طراح وب
آموزش ویژوال کامپوزر
آموزش نصب ویژوال کامپوزر
بعد از تهیه افزونه ویژوال کامپوزر، یک فایل زیپ در اختیار شما قرار می‌گیرد که در واقع همان افزونه است.
برای نصب این افزونه، کافی است تا در داشبورد وردپرس خود، به بخش افزونه‌ها بروید و گزینه‌ی افزودن را انتخاب کنید. از آن جایی که این افزونه را باید به صورت فایل بارگذاری نمایید، گزینه‌ی بارگذاری افزونه در بالای صفحه را انتخاب کنید.
بعد از بارگذاری، افزونه نصب و آماده راه اندازی می‌شود و شما تنها با یک کلیک می‌توانید این افزونه را بر روی وبسایت خود نصب نمایید.
بعد از نصب، یک گزینه به نام ویژوال کامپوزر در منوی سمت راسمت داشبورد وردپرس اضافه می‌شود. از طریق آن می‌توانید به بخش تنظیمات این افزونه بروید و تغییرات لازم و مد نظر را اعمال کنید.
طراحی یک برگه یا نوشته با ویژوال کامپوزر
بعد از اتمام نصب و انجام تنظیمات لازم، می‌توانید کار خود را با این افزونه آغاز کنید. زمانی که به ویرایشگر یک برگه یا صفحه جدید می‌روید، می‌توانید با استفاده از ویژوال کامپوزر، آن برگه را ویرایش کنید یا این که با استفاده از این افزونه، یک برگه جدید بسازید. در ادامه توضیح می‌دهیم که چگونه می‌توان با استفاده از این افزونه، یک برگه جدید برای سایت طراحی کرد.
برای این کار کافی است تا از منوی داشبورد، قسمت برگه و افزودن جدید را انتخاب کنید. با انتخاب این گزینه، ویرایشگر کلاسیک برای شما باز می‌شود. (البته اگر ویرایشگر کلاسیک را از ابتدا نصب کرده باشید، در غیر این صورت ویرایشگر جدید وردپرس یعنی بلاک ادیتور برایتان باز خواهد شد)
کافی است تا در بالای صفحه، گزینه ویرایشگر حرفه‌ای را انتخاب کنید تا بتوانید برگه جدید خود را با استفاده از ویژوال کامپوزر طراحی کنید و بسازید.
حالا با سه گزینه مواجه می‌شوید که در مورد هر کدام توضیحاتی را ارائه می‌کنیم.
از طریق گزینه افزودن المان، می‌توانید المان‌ها یا همان بلاک‌های مختلفی را به صفحه اضافه کنید. در ادامه مفصلاً در مورد المان‌های ویژوال کامپوزر توضیح خواهیم داد.
گزینه دوم، اضافه کردن بلاک متن نام دارد که با استفاده از آن، یک بلاک متنی به صفحه شما اضافه می‌شود.
گزینه سوم، انتخاب الگو است. شما از طریق این گزینه، می‌توانید از الگوها و طرح‌های از پیش آماده که برای صفحات مختلف وبسایت ساخته شده‌اند، استفاده کنید.
المان‌های ویژوال کامپوزر
با انتخاب گزینه افزودن المان، مجموعه‌ای از المان‌های مختلف پیش روی شما باز می‌شود که می‌توانید از هر کدام از آن‌ها برای ساختن صفحه خود استفاده کنید. در این بخش به توضیح تعدادی از المان‌های عمومی که در تصویر دیده می‌شود، می‌پردازیم. همچنین باید این نکته را در نظر داشته باشد که هر کدام از افزونه‌هایی مثل ووکامرس، می‌توانند تعدادی المان به افزونه ویژوال کامپوزر اضافه کنند. در ادامه در مورد المان‌های این افزونه‌ها نیز صحبت خواهیم کرد.
- ردیف: با استفاده از المان ردیف، می‌توانید یک ردیف جدید به محتواهای خود در صفحه اضافه کنید و در آن محتواهای مختلف قرار دهید.
- بلاک متن: یک بلاک متن به صفحه اضافه می‌شود که می‌توانید متن آن را به دلخواه ویرایش کنید و در جای دلخواه قرار دهید.
- آیکون: با استفاده از این المان، می‌توانید آیکون‌های مختلفی را که قبلا آپلود کرده‌اید، در صفحه اصلی قرار دهید. همچنین می‌توانید از تعدادی آیکون آماده نیز استفاده کنید.
- جداکننده و جداکننده با متن: این‌ها المان‌هایی هستند که برای جدا کردن ردیف‌ها و بخش‌های مختلف صفحه از هم به کار می‌روند. جداکننده صرفا یک خط میان ردیف‌های مختلف ایجاد می‌کند. اما به وسیله جداکننده با متن، می‌توانید جای آن خط، یک متن قرار دهید.
- تصویر تکی: با استفاده از این المان می‌توانید یک عکس تکی در صفحه قرار دهید.
- گالری تصویر: با استفاده از این المان می‌توانید مجموعه عکس در صفحه قرار دهید.
- کاروسل تصویر: با استفاده از این المان می‌توانید یک کاروسل تصویر درست کنید. به این صورت که چند تصویر به صورت چرخشی یا چرخ و فلکی (کاروسل) به نمایش درمی‌آیند.
- اسلایدر پست‌ها: با استفاده از این المان می‌توانید تعدادی از پست‌های خود را به صورت اسلایدر نمایش دهید. مثلاً برای بخش آخرین پست‌ها در صفحه اصلی.
المان‌های پرکابرد ویژوال کامپوزر برای برگه نخست
معمولاً پرکاربردترین المانی که برای برگه صفحه نخست به کار می‌رود، المان مربوط به افزونه اسلایدر روولوشن است. این المان باید در بالای صفحه نخست قرار بگیرد. همچنین استفاده از المان کاروسل تصاویر نیز در برگه نخست معمول است. معمولاً با استفاده از این المان، تصاویری از نمونه کارها یا اعضای تیم به نمایش گذاشته می‌شود. در انتها نیز می‌توان از المان اسلایدر پست‌ها برای نمایش آخرین پست‌های وبلاگ استفاده کرد. همچنین می‌توان از ابزارک‌های مربوط به خود وردپرس در صفحه اول استفاده کرد، مثل المان‌های جست‌وجو، بایگانی، دسته بندی و غیره. استفاده از این المان‌ها همچنین در صفحه وبلاگ نیز مرسوم است.
المان های مورد نیاز برای طراحی صفحه تماس با ما
برای طراحی صفحه تماس با ما، نیاز به نصب یک افزونه دارید. پر استفاده ترین افزونه در این زمینه، Contact Form 7 است. با نصب این افزونه، یک المان مخصوص اضافه کردن فرم تماس به المان‌های ویژوال کامپوزر اضافه می‌شود. کافی است تا فرم یا فرم‌های تماس خود را قبلاً با استفاده از افزونه Contact Form 7 طراحی کنید و سپس با قرار دادن المان آن در صفحه تماس با ما، این فرم تماس در آن جا قرار خواهد گرفت.
المان های مورد نیاز برای طراحی برگه فروشگاه و ووکامرس
با نصب افزونه ووکامرس، تعدادی المان جدید به افزونه ویژوال کامپوزر اضافه می‌شود. این المان‌ها حتی در یک تب جداگانه تحت عنوان ووکامرس قرار می‌گیرند و شما با انتخاب این تب، می‌توانید به صورت اختصاصی به همه‌ی این المان‌ها دسترسی داشته باشید.
همانطور که در لیست المان‌ها مشاهده می‌کنید، می‌توانید مواردی همچون سبد خرید، نمایش محصولات، دسته بندی محصولات، ویژگی‌های محصولات، پرامتیازترین محصولات و بلاک‌هایی از این دست را به صفحه مورد نظر خود اضافه نمایید.
آپدیت افزونه ویژوال کامپوزر
شما اگر افزونه خود را از وبسایت رسمی یا وبسایت‌های معتبر دیگر تهیه کنید، این افزونه به صورت خودکار و بلافاصله بعد از انتشار آپدیت رسمی، برای شما نیز آپدیت خواهد شد. اما اگر افزونه را به صورت کرک شده یا قفل شکسته از سایت‌های دیگر دانلود کنید، این افزونه آپدیت خودکار نخواهد داشت و باید به صورت دستی نسخه‌های جدید را دانلود و جایگزین کنید. ضمناً آپدیت جدید نسخه‌های کرک شده معمولاً کمی دیرتر از نسخه رسمی در دسترس قرار می‌گیرد.
