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

ساخت برگه های سفارشی با ویژوال کامپوزر

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

visual composer در وردپرس

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

در این آموزش چه چیزهایی می‌آموزید؟

ما سعی کردیم در این آموزش تمامی قسمت‌های visual composer در وردپرس را بررسی کرده و به آن بپردازیم. این بخش‌های آموزشی شامل موارد زیر است:

• تنظیمات عمومی
• نقش مدیر
• استفاده از شورت‌کد
• سازنده شبکه‌بندی
• معرفی المان‌های ویژوال کامپوزر
• افزودن المان‌ها در صفحه مورد نظر

برای اینکه بتوانید به خوبی با ویژوال کامپوزر کار کنید حتما باید تمامی این بخش‌ها را بیاموزید و بدانید چگونه با آن کار کنید.

تنظیمات عمومی

غیرفعالسازی المان های محتوای ریسپانسیو: با علامت زدن این گزینه می‌توانید این افزونه را برای دستگاه‌های هوشمند مانند موبایل غیرفعال کنید.
زیرمجموعه های فونت های گوگل: می‌توانید فونت مشخصی را برای المان‌های visual composer در وردپرس انتخاب کنید. گزینه پیش‌فرض روی latin است.
الگو پیش فرض برای انواع نوشته: این بخش به شما اجازه می‌دهد تا یکی از صفحات از قبل طراحی شده را به عنوان الگوی اصلی انتخاب کنید. البته اگر می‌خواهید!

همچنین دکمه ریست را می‌بینید. هر زمان که بخواهید با کلیک کردن روی این دکمه می‌توانید تنظیمات ویژوال کامپوزر را به حالت پیش‌فرض بازگردانید.

نقش مدیر

در این بخش فهرست‌های کشویی مختلفی وجود دارد که در هر کدام تنظیمات به خصوصی گنجانده شده است. با هم به بررسی هر بخش آن در ساخت برگه های سفارشی با ویژوال کامپوزر می‌پردازیم.

مدیر کل

پست تایپ‌ها: با کمک این گزینه می‌توانید ویژوال کامپوزر را برای بخش‌های مورد نظر فعال کنید. مثلا فقط برای برگه‌ها
ویرایشگر پیشرفته: می‌توانید در این بخش ویرایشگر پیشرفته مربوط به visual composer را فعال کنید و همچنین بصورت کامل ویرایشگر کلاسیک را غیرفعال نمایید.
ویرایشگر زنده: با کمک این نوع از ویرایشگر می‌توان تغییراتی را که ایجاد می‌کنید در عین واحد مشاهده کنید.
تنظیمات صفحه: می‌توانید تنظیمات صفحه‌ای که ویرایشگر ویژوال کامپوزر در آن فعال است را فعال یا غیرفعال کنید.

گزینه های تنظیمات: اگر می‌خواهید این گزینه فعال یا غیرفعال شود، می‌توانید از این بخش آن را تعیین کنید.
الگوها: در این قسمت می‌توان تعیین کرد که چه کسانی به الگوها دسترسی داشته باشند.
المنت ها: دوست دارید چه کسانی به عناصر صفحه‌ساز visual composer در وردپرس دسترسی داشته باشند. از این بخش آن را مشخص کنید.
سازنده شبکه بندی: چنانچه می‌خواهید امکان دسترسی به عنصر شبکه‌ساز وجود داشته باشد می‌توانید این گزینه را فعال کنید.
پیش تنظیمات المان: عناصر هر کدام تنظیماتی دارند که با کمک این گزینه می‌توانید برای افراد صاحب دسترسی در سایت آن‌ها را فعال یا غیر فعال کنید.
Drag and Drop: المان‌های موجود قابلیت درگ و دراپ کردن (کشیدن و رها کردن) دارند. اگر می‌خواهید می‌توانید آن‌ها را فعال یا غیرفعال کنید.

ویرایشگر

همان‌طور که می‌بینید تمامی تنظیماتی که در بخش ادمین وجود داشت در این بخش نیز موجود است. سایر تب‌ها نیز به همین صورت هستند. به همین دلیل سخن را کوتاه می‌کنیم تا حوصله شما سر نرود.

قرار دهنده کد کوتاه

اگر افزونه‌ای را نصب می‌کنید که مربوط به ویرایشگر است و شورت‌کدی دارد که می‌خواهید در المان‌های visual composer در وردپرس نمایش داده شود، می‌توانید شورت‌کدهای آن را در این بخش اضافه کنید.

سازنده شبکه‌بندی

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

ویژوال کامپوزر در سمت برگه‌ها و نوشته‌ها

دکمه آبی رنگی در بالای ویرایشگر وردپرس ظاهر شده که مربوط به ویژوال کامپوزر است. در تصویر زیر آن را مشاهده می‌کنید:

همان‌طور که مشاهده می‌کنید دو دکمه آبی رنگ ویرایشگر پیشرفته و Frontend Editor را مشاهده می‌کنیم. هر کدام وضعیت ویرایشگر را به چه صورت تغییر می‌دهد؟ با هم ببینیم

ویرایشگر پیشرفته

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

Frontend Editor

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

معرفی المان‌های visual composer

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

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

ساخت صفحه نمونه به کمک ویژوال کامپوزر

مثلا می‌خواهیم اول ردیفی را در ویرایشگر ایجاد کنیم باید به بخش افزودن المان‌ها رفته و روی گزینه “ردیف” کلیک کنیم تا اضافه شود.

هر المانی را که بخواهید در یک صفحه اضافه کنید بهتر است یک ردیف جداگانه برایش تعریف کنید. این ردیف‌ها باعث ایجاد فاصله منطقی در صفحه می‌شوند. با افزودن ردیف با تصویر زیر رو به رو می‌شوید:

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

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

رو علامت + هر بخش که کلیک کنیم می‌توانیم المان مورد نظر خود را به آن اضافه کنیم و سپس مشغول تکمیل اطلاعات آن باشیم. حال صفحه‌ای را که بطور کامل با ویژوال کامپوزر ایجاد کردیم را می‌توانید ببینید:

همان‌طور که مشاهده می‌کنید به راحتی می‌توان با کمک visual composer در وردپرس یک صفحه اختصاصی و زیبا طراحی کرد.

تداخل ویرایشگر گوتنبرگ با ویژوال کامپوزر

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