آموزش جامع و کامل کار با افزونه ویژوال کامپوزر

ویژوال کامپوزر visible composer یک پلاگین پیج بیلدر بسیار محبوب در میان تمامی کاربران وردپرس می باشد که نرخ فروش و استفاده از آن در سراسر دنیا از تمامی پیج بیلدرهای دیگر که دارای عملکرد مشابهی هستند، با اختلاف چشم گیری بیشتر می باشد. این پیج بیلدر که عملکرد آن به صورت درگ اند دراپ می باشد دارای یک ویژوگی منحصر به فرد بوده که موجب شده است کاربران بسیاری استفاده از آن را به سایر پیج بیلدرهای ترجیح دهند، این ویژگی منحصر به فرد فراهم نمودن امکان ویرایش صفحات هم در Backend و هم در Frontend برای کاربران می باشد. پیج بیلدرهای بسیاری برای ورد پرس وجود دارند که عملکرد آنها به صورت درگ اند دراپ می باشد اما هیچ یک از آنها امکان ویرایش هم در Backend و هم در Frontend را برای کاربران فراهم نمی کنند و این ویژگی فقط و فقط مختص ویژوال کامپوزر می باشد.
هدف توسعه دهندگان ویژوال کامپوزر از ایجاد این پلاگین سرعت بخشیدن و بهبود فرایند کار کاربران در وردپرس بوده است، خواه این کار ایجاد صفحات لندینگ باشد، خواه ایجاد پست های وبلاگ باشد و خواه ایجاد صفحات Call To Action یا هر صفحه دیگر، ویژوال کامپوزر می تواند برای انجام این کارها سرعت و کیفیت را چاشنی کار کاربران نماید.
استفاده از ویژوال کامپوزر می تواند یک فرصت استثنایی برای مبتدیان ایجاد نماید مخصوصا برای آنها که با کد نویسی آشنایی چندانی ندارند اما می خواهند در زمان کوتاهی، وب سایت قوی و باکیفیتی ایجاد نمایند. استفاده از ویژوال کامپوزر موجب می شود که کاربران ورد پرس بتوانند وقت و انرژی کمتری صرف ایجاد صفحات وب سایت کنند و در عین حال صفحات با کیفیت تری ایجاد نمایند. ویژوال کامپوزر المان های محتوای متنوعی دارد و می تواند بر روی هرگونه محتوایی که کاربران بخواهند امکان ویرایش را برای آنها فراهم نماید. این پلاگین کامپوزر شامل تمپلیت های آماده برای ایجاد صفحات می باشد و آن دسته از کاربرانی که قادر به ایجاد تمپلیت برای صفحات وب سایت خود نمی باشند می توانند از این تمپلیت های آماده استفاده نمایند و محتوای مورد نظر خود را درون آنها قرار دهند.
تا اینجا ما توضیحات مختصری درباره پلاگین ویژوال کامپوزر برای شما آوردیم و مقدمه ای از آن را به شما کاربران عزیز ارائه نمودیم. در ادامه این مجموعه ما قصد داریم تا شما را گام به گام در مسیر یادگیری کار با ویژوال کامپوزر راهنمایی و همراهی نماییم.که البته در مطلب قبل توضیحی درباره اینکه ویژوال کامپوزر چیست مروری کرده بودیم .
این مجموعه شامل بخش های مختلفی از جمله نصب و راه اندازی ویژوال کامپوزر، کار با ویرایشگر Frontend در ویژوال کامپوزر، کار با ویرایشگر Backend در ویژوال کامپوزر، ایجاد تنظیمات و شخصی سازی ها و بسیاری بخش های دیگر می باشد. اگر شما به دنبال یک مجموعه آموزشی هستید که تمامی بخش های مختلف ویژوال کامپوزر را به صورت مجزا برای شما آموزش دهد و شما را با صفر تا صد کار با این پلاگین آشنا نماید، ما شما عزیزان را دعوت می نماییم که تا انتها این مجموعه با ما همراه باشید.

چگونه پلاگین وژوال کامپوزر را در وردپرس نصب و فعال سازی نماییم؟
شما پیش از آنکه به یادگیری کار با ویژوال کامپوزر بیاندیشید ابتدا باید آن را نصب و فعال سازی نمایید. برای این کار ابتدا باید به سایت رسمی ویژوال کامپوزر مراجعه کنید و آن را خریداری نمایید و پس از خرید آن را نصب و فعال سازی کنید. اگر شما پس از نصب این پلاگین لایسنس آن را فعال سازی کنید خواهید توانست تمامی بروز رسانی های آن را به صورت اتوماتیک دریافت نمایید و همچنین از پشتیبانی های آن بهره مند شوید. در صورتی که شما لایسنس این پلاگین را فعال سازی کنید، اگر در استفاده از این محصول با مشکلی مواجه شدید می توانید مشکلات خود را برای توسعه دهندگان آن بنویسید تا آنها برای حل آن مشکلات به شما کمک کنند.98b09_New-plugin آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
نصب و فعال سازی پلاگین ویژوال کامپوزر بر روی وردپرس برای کاربرانی که تازه کار هستند کار مشکلی است مخصوصا انجام پروسه فعال سازی این پلاگین که فرایند آن اندکی پیچیده تر می باشد برای مبتدیان و حتی افراد حرفه ای نیز تا حدودی مشکل می باشد. در این بخش از مجموعه آموزش پلاگین ویژوال کامپوزر ما قصد داریم که نصب و فعال سازی این پلاگین بر روی یک وب سایت ایجاد شده با استفاده از وردپرس را به شما آموزش دهیم و همچنین چگونگی فعال سازی لایسنس آن را به شما بیاموزیم تا بتوانید پس از نصب و فعال سازی این پلاگین هرگاه که نسخه جدیدی از آن ارائه می شود آن را به صورت اتوماتیک دریافت نمایید و از خدمات بروز پلاگین جدید و همچنین امکانات پشتیبانی آن بهره مند گردید.

38d5b_Install-Now آموزش جامع و کامل کار با افزونه ویژوال کامپوزر

برای آنکه بتوانید از این پلاگین استفاده کنید ابتدا باید آخرین نسخه آن را خریداری نموده و هزینه ای برای آن پرداخت کنید و سپس آن را دانلود نمایید. دقت داشته باشید که شما عزیزانی که نسخه های رایگان این ابزار را که در وب سایت های ایرانی موجود می باشد دانلود می نمایید و هیچ هزینه ای بابت استفاده از آن پرداخت نمی کنید ممکن است با مشکلاتی از قبیل عدم بروز رسانی آن مواجه شوید. در صورتی که شما نسخه منسوخ شده ای از این پلاگین را نصب نمایید ممکن است وب سایت شما در معرض خطراتی همچون احتمال هک شدن قرار بگیرد و اگر شما می خواهید هزینه ای را برای خرید آن پرداخت نکنید باید دائما چک کنید که آیا نسخه جدیدی از آن به بازار آمده است یا خیر و به مجرد آنکه نسخه جدیدی از آن عرضه گردید سریعا آن را دانلود کرده و نصب نمایید. بهتر است که شما آخرین ورژن این ابزار را از سایت رسمی آن خریداری نموده تا از کیفیت و امنیت آن مطمئن باشید. این پلاگین قیمت چندانی ندارد و هزینه خرید آن چیزی حدود ۳۴ دلار می باشد که در برابر احتمال خطراتی که ممکن است در اثر استفاده از نسخه رایگان آن برای وب سایت شما پیش بیاید بسیار ناچیز می باشد.
پس از دانلود فایل ویژوال کامپوزر شما باید آن را اکسترکت نمایید، سپس درون آن فایل زیپی با نام “js_composer” مشاهده خواهید نمود، این فایل را به صورت درگ اند دراپ به روی دسکتاپ منتقل کنید و سپس وارد پنل ادمین وب سایت خود شوید و مسیر زیر را طی کنید:
Plugins – Add Plugin (Add New)
حال بر روی Upload Plugin کلیک کنید و فایل “js_composer” را انتخاب کنید و بر روی دکمه Open کلیک نمایید. سپس بر روی گزینه Install Now کلیک کرده و منتظر بمانید تا پلاگین ویژوال کامپوزر نصب گردد.
فعال سازی با استفاده از لایسنس
برای فعال سازی لایسنس ویژوال کامپوزر شما ابتدا باید به codecanyon.net/downloads بروید، سپس به بخشی که در آن فایل های مربوط به ویژوال کامپوزر موجود می باشند مراجعه نمایید. سپس بر روی دکمه Download کلیک کنید و گزینه “License certificate certificate code” را انتخاب نمایید. (ممکن است به جای این گزینه گزینه ای با نام “License certificate certificate code” وجود داشته باشد). دو گزینه با نام مشابه وجود دارد که شما باید گزینه ای که جلوی آن داخل پرانتز عبارت “text” نوشته شده است را انتخاب و دانلود نمایید. سپس این فایل را باز کنید و Item Purchase Code یا کد خرید محصول را در آن بیابید.
حال شما باید یک Secret API Code یا کد API محرمانه دریافت نمایید، و برای خود در Envato یک اکانت ایجاد نمایید. برای این کار به codecanyon.net مراجعه کنید و نشان گر موس خود را بر روی Account Username قرار دهید و گزینه Setting را انتخاب کنید. حال بر روی گزینه “API Key” کلیک کنید و یک کلمه به دلخواه خود در آن تایپ کنید و سپس بر روی گزینه “Generate API Key” کلیک نمایید تا یک API Key جدید دریافت نمایید. پس از دریافت API Key جدید وارد پانل اکانت وردپرس خود شوید و مسیر زیر را طی کنید:
Visual Composer − Product License
سپس در صفحه جدید باید نام اکانت خود در Envato، API Key محرمانه دریافتی و کد خرید محصول را وارد کنید تا بتوانید لایسنس ویژوال کامپوزر خود را فعال سازی نمایید.
اگر لایسنس شما با موفقیت فعال سازی گردد شما پس از انجام این پروسه پیام License successfully activated را بر روی صفحه مشاهده خواهید نمود.
خب تمام شد، شما توانستید با موفقیت ویژوال کامپوزر را بر روی وب سایت وردپرس خود نصب و فعال سازی نمایید تا هر گاه ورژن جدیدی از آن عرضه می گردد بتوانید بلافاصله به صورت اتوماتیک آن را دریافت نمایید و از امکانات آن بهره مند گردید.
حال که پروسه نصب این پلاگین به پایان رسید باید کار با آن را بیاموزید تا بتوانید صفحات بسیار حرفه ای با استفاده از آن ایجاد نمایید. در ادامه این مجموعه با ما همراه باشید تا گام به گام شما را در مسیر یادگیری کار با این ابزار همراهی نماییم.

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

21fa1_Control-Responsiveness آموزش جامع و کامل کار با افزونه ویژوال کامپوزر

با استفاده از پلاگین ویژوال کامپوزر شما امکان کنترل کامل بر روی وب سایت وردپرس خود را خواهید داشت و شما می توانید با استفاده از این پلاگین انواع مختلف صفحات را در وب سایت خود ایجاد نمایید. برای کنترل ریسپانسیو بودن صفحات ایجاد شده در سایت وردپرس خود، شما باید به بخش General Setting در ویژوال کامپوزر مراجعه نمایید و در این بخش شما چک باکسی را مشاهده خواهید نمود که در کنار آن عبارت ” Disable manageable calm elements” نوشته شده است. شما می توانید با استفاده از این چک باکس فعال یا غیر فعال بودن ریسپانسیو بودن المان های محتوا را کنترل نمایید.

همان طور که شما عزیزان می دانید Disable به معنی غیر فعال بودن می باشد و شما با تیک زدن این چک باکس امکان ریسپانسیو بودن المان های محتوا را غیر فعال می کنید و اگر تیک درون این چک باکس را بردارید، امکان ریسپانسیو بودن المان های محتوا فعال سازی می گردد.
دقت داشته باشید که پس از اتمام فرایند تنظیمات فعال یا غیر فعال بودن امکان ریسپانسیو بودن المان های محتوا شما باید حتما بر روی دکمه “Save Changes” کلیک نمایید تا تغییراتی که ایجاد نموده اید ذخیره سازی گردد در غیر این صورت تغییرات ایجاد شده توسط شما اعمال نخواهد شد.

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

برای آنکه بتوانید میزان دسترسی یوزر گروپ ها را به بخش های مختلف ویژوال کامپوزر کنترل نمایید باید از Role manager استفاده نمایید.

a0d94_Role-Manager آموزش جامع و کامل کار با افزونه ویژوال کامپوزرپیش از هر کار شما باید به پنل ورد پرس خود مراجعه نمایید و وارد اکانت خود شوید و وارد ویژوال کامپوزر گردید، از داخل ویژوال کامپوزر گزینه Role manager را انتخاب نمایید و سپس اندکی صبر کنید تا صفحه مربوط به Role manager برای شما بارگذاری گردد.
در صفحه Role manager شما منوهای آبشاری بسیاری را مشاهده می نمایید که در کنار هریک از آنها عبارتی به عنوان نام آن منوی آبشاری حک شده است. شما با استفاده از همین منوهای آبشاری می توانید میزان دسترسی یوزر گروپ ها را کنترل نمایید. در ادامه هریک از این منوهای آبشاری را به صورت مجزا مورد بررسی قرار خواهیم داد.
Post Types : به صورت پیش فرض گزینه Only Page بر روی این منوی آبشاری انتخاب شده است که موجب می شود شما با استفاده از ویژوال کامپوزر تنها قادر به ویرایش صفحات باشید، اما اگر شما گزینه Custom را در این منوی آبشاری انتخاب نمایید علاوه بر صفحات می توانید پست ها را نیز با استفاده از این پلاگین مورد ویرایش قرار دهید.
Backend Editor: در این منوی آبشاری تنها دو گزینه وجود دارد، Disable و Enable که به شما این امکان را می دهد که استفاده از ویرایشگر Backend ویژوال کامپوزر را برای تمامی ویرایشگران سایت خود فعال یا غیر فعال نمایید.

 

a0d94_for-admin آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
Frontend Editor: این منوی آبشاری نیز مشابه منوی Frontend Editor تنها دو گزینهDisable و Enable را شامل می شود که با استفاده از آنها می توانید امکان استفاده از ویرایشگر Frontend را برای تمامی ویرایشگران سایت خود فعال یا غیر فعال نمایید.
Page Setting: این منوی آبشاری همان طور که از نام آن پیداست برای کنترل دسترسی به صفحه تنظیمات ویژوال کامپوزر استفاده می گردد. بهتر است که شما در این منوی آبشاری گزینه Disable را انتخاب نمایید تا دسترسی تمامی یوزر گروپ ها را به تنظیمات ویژوال کامپوزر محدود نمایید.
Settings Options: این منوی آبشاری برای کنترل دسترسی یوزر گروپ ها به زبانه های تنظیمات ادمین در ویژوال کامپوزر (General Settings، Shortcode Mapper و …) مورد استفاده قرار می گیرد.
Templates: این منوی آبشاری برای کنترل دسترسی یوزر گروپ ها به تمپلیت ها و همچنین تمپلیت های پیش ساخته مورد استفاده قرار می گیرد. به خاطر داشته باشید که اگر شما در این منوی آبشاری گزینه “Apply Templates Only” را انتخاب نمایید دسترسی یوزر گروپ ها را برای اضافه کردن تمپلیت های جدید و حذف تمپلیت های ذخیره شده محدود می نمایید.
Elements: این منوی آبشاری نیز دسترسی یوزر گروپ ها به المان های محتوا را کنترل می نماید.
Grid Builder: این منوی آبشاری به منظور کنترل دسترسی یوزر گروپ ها به و Grid Builder و المان های Grid Builder مورد استفاده قرار می گیرد.
Element Presets : این منوی آبشاری دسترسی یوزر گروپ ها را به تنظیمات پیش فرض المان ها در فرم ویرایش المان ها کنترل می نماید. به خاطر داشته باشید که اگر شما در این منوی آبشاری گزینه “Apply Preset Only” را انتخاب نمایید دسترسی یوزر گروپ ها را برای ایجاد تنظیمات جدید و حذف تنظیمات اولیه موجود محدود می نمایید.
با استفاده از این منوهای آبشاری موجود در Role Manager شما می توانید میزان دسترسی ویرایشگرها، نویسندگان و حتی سایر ادمین های سایت را به تمامی بخش های ویژوال کامپوزر کنترل نمایید. فقط باید حتما پیش از آنکه این صفحه را ترک کنید بر روی کلید “Save Changes” کلیک کنید تا تنظیمات انجام شده توسط شما در این صفحه اعمال شود و در صورتی که شما فراموش کنید که بر روی کلید “Save Changes” کلیک نمایید تمامی تنظیماتی که انجام داده اید به حالت قبلی باز خواهد گشت.
نتیجه گیری
Role Manager در ویژوال کامپوزر یک ابزار بسیار موثر و مفید است و به صاحبان وب سایت ها این امکان را می دهد که تمامی تنظیمات لازم و کنترل های مورد نیاز برای دسترسی کاربران به بخش های مختلف را به صورت دستی انجام دهند.

چگونه با استفاده از ویژوال کامپوزر ظاهر سایت وردپرسی خود را تغییر دهیم؟
ظاهر وب سایت از پارامترهای بسیار تاثیر گذار در جذب یا دفع کاربران وب سایت است و انتخاب المان های ظاهری معقول و متناسب برای یک وب سایت می تواند به طرز چشم گیری در موفقیت آمیز بودن یا نبودن عملکرد وب سایت ثاثیر گذار باشد. ویژوال کامپوزر برای ایجاد آرایش ظاهری وب سایت و همچنین ایجاد تغییرات در ظاهر وب سایت نیز خدماتی را به کاربران ارائه می نماید، بخش “Designing Options” به منظور ارائه خدماتی برای ایجاد امکان تغییرات در ظاهر وب سایت برای کاربران تعبیه شده است.
با استفاده از بخش “Designing Option” در پلاگین ویژوال کامپوزر شما می توانید تغییراتی بنیادی همچون تغییر رنگ زمینه وب سایت، رنگ نوشته های درون وب سایت، رنگ زمینه کلیدهای CTA، رنگ زمینه نوار پیشرفت یا Progress Bar و موارد مشابه دیگری را در ظاهر وب سایت خود ایجاد نمایید.
برای آنکه بتوانید وارد بخش مربوط به ایجاد تغییرات در ظاهر وب سایت شوید ابتدا باید وارد پنل وب سایت وردپرس خود شده و سپس وارد اکانت خود شوید. پس از آن باید مسیر زیر را طی کنید:

Visual Composer – Designing Options

پس از وارد شدن به صفحه “Designing Option” شما باید ابتدا چک باکس مربوط به فعال سازی امکان استفاده از گزینه های طراحی را تیک بزنید. این چک باکس در بالای صفحه قرار دارد و در کنار آن عبارت “Use Custom Designing Options” حک شده است. اگر این چک با کس را تیک نزنید گزینه های مربوط به ویرایش ظاهر وب سایت موجود در این صفحه برای شما فعال سازی نمی شوند و شما نمی توانید از آنها استفاده کنید.
در این صفحه امکان تنظیم موارد زیر در ظاهر وب سایت برای شما وجود دارد:
Main accent tone (رنگ زمینه اصلی وب سایت)
Hover tone (رنگ ثانویه وب سایت یا رنگ شناور)
Call to movement credentials tone (رنگ کلید های CTA)
Google maps credentials tone (رنگ زمینه گوگل مپ)
Post slider heading credentials tone (رنگ زمینه کپشن یا توضیحات پست اسلایدر)
Progress bar credentials tone (رنگ زمینه نوار پیشرفت)
Separator limit tone (رنگ حاشیه جداساز )
Tabs navigation credentials tone (رنگ زبانه در هنگام کلیک کردن بر روی آنها)
Active add-on credentials tone (رنگ زبانه های فعال)
Elements bottom domain (حاشیه پایینی المان ها): با استفاده از این گزینه شما می توانید اندازه حاشیه پایینی را برای هر المانی که در صفحات خود ایجاد می نمایید تعیین نمایید.
Grid gutter Width (تعیین فاصله در بین گراید ها)
Mobile Screen Width (اندازه پهنای صفحه وب سایت در هنگام نمایش بر روی تلفنهای همراه)
شما پس از وارد شدن به صفحه Designing Options هر یک از گزینه های بالا را به صورت یک منوی آبشاری مشاهده می کنید که به سادگی می توانید با کلیک کردن بر روی منوی آبشاری هر یک از گزینه های موجود در آن را انتخاب نمایید.

38547_Design-Options-Visual آموزش جامع و کامل کار با افزونه ویژوال کامپوزر

در انتها این صفحه دو کلید دیگر وجود دارد که بر روی آنها عبارات “Save Changes” و “Restore Default” حک شده است. با استفاده از کلید “Save Changes” شما می توانید تغییراتی را که ایجاد نموده اید ذخیره کنید و با استفاده از کلید “Restore Default” شما می توانید تمامی تنظیمات را به حالت اولیه بازگردانید.

اضافه کردن CSS های رایج به سایت با استفاده از ویژوال کامپوزر
کاربران وردپرس برای آنکه بتوانند بدون ادیت کردن کد CSS اصلی قالب ها، طراحی های مجزای ثانویه ای در وب سایت خود انجام دهند اغلب ملزم به نصب پلاگین CSS Custom در سایت وردپرس خود می باشند. ویژوال کامپوزر برای این مساله راه حل جایگزینی اندیشیده است و این راه حل جایگزین در بخش “Custom CSS” ویژوال کامپوزر برای کاربران ارائه شده است. با استفاده از بخش “Custom CSS” ویژوال کامپوزر کاربران دیگر نیازی به نصب پلاگین های اضافه برای اضافه کردن CSS ها ندارند و علاوه بر این، بخش “Custom CSS” ویژوال کامپوزر بسیار شهودی تر و یوزر فرندلی تر از سایر پلاگین ها می باشد.
اضافه کردن CSS ها به سایت وردپرس با استفاده از ویژوال کامپوزر کار ساده ای است و ما در این فایل آموزشی آن را به صورت کاملا ساده و قابل درک برای شما بیان خواهیم نمود. اگر شما ورژن جدید ویژوال کامپوزر را در اختیار داشته باشید که در آن بخش “Custom CSS” فعال سازی شده است دیگر نیازی به مراجعه به بخش تنظیمات نخواهید داشت و تنها با نوشتن کد CSS مد نظر خود در بخش “Custom CSS” می توانید CSS مد نظر خود را به سایت اضافه نمایید(در نسخه های قدیمی تر این بخش فعال سازی نشده و اضافه کردن CSS ها با استفاده از ویژوال کامپوزر های ورژن قدیمی تر کار مشکلی می باشد).
برای اضافه کردن CSS ها به سایت وردپرس خود باید ابتدا وارد پنل ورد پرس خود شوید و وارد اکانت خود گردید، سپس مسیر زیر را طی کنید:
Visual Composer – Custom CSS

f1f5f_Custom-CSS آموزش جامع و کامل کار با افزونه ویژوال کامپوزر

سپس در صفحه جدید باز شده کد CSS مد نظر خود را که می خواهید در وب سایت خود اضافه نمایید، وارد کنید.

f1f5f_Paste-your-CSS-Code آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
اگر شما در هنگام وارد نمودن کد اشتباهی مرتکب شوید و کد را به درستی وارد ننمایید، ویژوال کامپوزر به شما یک اخطار مبنی بر وقوع اشتباه در کد وارد شده، نمایش می دهد و همچنین دلیل اشتباه بودن کد را نیز بیان می کند، مثلا به شما یک اخطار مبنی بر وقوع اشتباه در سینتکس خط سوم کد شما نمایش می دهد. پس شما باید در نوشتن کدها درون بلوک “Custom CSS” بسیار محتاط و دقیق باشید که اشتباهی رخ ندهد.

b7102_Mistake-on-Code آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
در انتها شما باید بر روی کلید “Save Changes” کلیک نمایید تا تغییرات اعمال شده توسط شما ذخیره شوند. در صورتی که پیش از ذخیره نمودن تغییرات از صفحه خارج شوید، تغییرات اعمالی شما و یا به عبارت دیگر کد CSS وارد شده توسط شما حذف می گردد و در سیستم ذخیره نمی شود.

اضافه کردن شورت کدها به ویژوال کامپوزر
یکی دیگر از قابلیت هایی که برای کاربران پلاگین های پیج بیلدر بسیار با اهمیت است و می تواند در میزان عملکرد و کارایی یک پیج بیلدر بسیار تاثیر گذار باشد، قابلیت افزودن شورت کد ها به آن برای بالا بردن کارایی های آن و ساده سازی انجام کارهای معمول در آن می باشد. ویژوال کامپوزر قابلیت افزودن شورت کد ها را در بخش “Shortcode Mapper” به کاربران ارائه نموده است و با استفاده از آن کاربران می توانند کدهای ثانویه ای را به ویژوال کامپوزر اضافه نمایند تا در هنگام ویرایش صفحات و پست های بلاگ در ویرایشگرهای Backend و Frontend قابلیت های ثانویه ای را در پلاگین خود ایجاد نمایند که انجام کارها را برای آنها ساده تر نماید.
در این فایل آموزشی ما قصد داریم تا طریقه اضافه نمودن شورت کدها به ویژوال کامپوزر را به شما بیاموزیم. برای این کار از یک مثال به عنوان نمونه شورت کد استفاده می نماییم. فرض کنید شما می خواهید شورت کد “YouTube” را به ویژوال کامپوزر خود اضافه کنید تا با استفاده از آن ویدیوهای یوتیوب را در وب سایت خود اضافه نمایید و برای کاربران نمایش دهید.

da38a_Youtube-shortcodes آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
پیش از هر کاری شما باید پلاگین یوتیوب را به بر روی وب سایت وردپرس خود نصب نموده و سپس آن را فعال سازی کنید. پس از نصب این پلاگین باید شورت کد مربوط به آن را بیابید، برای این کار بر روی بخش “YouTube Free” در این پلاگین کلیک کنید و شورت کد مربوط به آن را شناسایی نمایید. سپس وارد ویژوال کامپوزر شوید و در این پلاگین به بخش “ShortCode Mapper” مراجعه نمایید و در در کادری که در بالای آن عبارت “ShortCode String” حک شده است، شورت کد مربوط به یوتیوب را وارد نمایید و بر روی کلید “Parse Code” در انتهای صفحه کلیک کنید.

eae3d_Parse-Shortcodes آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
در ادامه شما می توانید در بخش “General Information” چک باکس “include calm Param into shortcode” را تیک بزنید تا بتوانید پارامترهایی مثل عنوان، نوع، توضیحات و … را به شورت کد وارد شده اضافه نمایید.
در انتها شما باید تغییراتی را که ایجاد نموده اید ذخیره کنید، برای این کار کافیست که بر روی دکمه “Save Changes” کلیک نمایید.
استفاده از شورت کدها
حال که شما شورت کد مربوط به ویدیوهای یوتیوب را در ویژوال کامپوزر خود اضافه نمودید می توانید ویدیوهایی از یوتیوب را در صفحات مختلف وب سایت خود وارد نمایید. برای این کار باید ابتدا وارد ویژوال کامپوزر شده و سپس وارد ویرایشگر Frontend شوید و بر روی گزینه “Add Element” کلیک کنید، سپس گزینه “My Shortcode” را انتخاب نمایید و بر روی کلید “Embedyt” کلیک کنید. حال در صفحه باز شده باید لینک ویدیوی یوتیوب مد نظر خود را وارد کنید و بر روی دکمه “Update” کلیک کنید . با این روش می توانید هریک از ویدیوهای یوتیوب را که می خواهدی در صفحات خود اضافه نمایید.

eae3d_My-Shortcodes آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
شما می توانید در بخش “Designing Options” تغییرات بیشتری در شورت کدهای خود ایجاد نمایید و آنها را به دلخواه خود تغییر دهید.

 

آموزش کامل کار با ویرایشگر Backend در ویژوال کامپوزر
ویژوال کامپوزر در میان تمامی پلاگین های پیج بیلدر تنها پلاگینی است که هم قابلیت ویرایش در Backend را به کاربران می دهد و هم قابلیت ویرایش در Frontend. این ویژگی منحصر به فرد ویژوال کامپوزر باعث شده است که این پلاگین در میان کاربران از محبوبیت دو چندانی برخوردار باشد. با وجود آنکه ویرایشگر Backend ویژوال کامپوزر چندان منعطف نمی باشد و ویرایشگر Frontend عملکرد بهتری نسبت به آن دارد، اما همچنان بعضی از کاربران که به دلیل استفاده از ویرایشگر پیش فرض ورد پرس (WordPress Post Editor) و عادت کردن به استفاده از آن ترجیح می دهند که از ویرایشگر Backend ویژوال کامپوزر که دارای محیط مشابهی می باشد، استفاده نمایند. ویرایشگر Backend ویژوال کامپوزر داراری محیط مشابهی با ویرایشگر پیش فرض وردپرس دارد و تنها تفاوت موجود در بین این دو ویرایشگر آن است که ویرایشگر Backend ویژوال کامپوزر دارای قابلیت نمایش فول اسکرین می باشد.
هر دو ویرایشگر Backend و Frontend ویژوال کامپوزر ابزارهای بسیار قوی و پر کاربردی می باشند و کارایی های بسیاری دارند. اما از نظر من ویرایشگر Frontend از ویرایشگر Backend بهتر می باشد و این مساله بدان دلیل است که ویرایشگر Frontend قابلیت نمایش همزمان تغییرات را دارد، این بدان معنی است که زمانی که شما تغییری در یکی از صفحات ایجاد می کنید، ویرایشگر Frontend تغییر ایجاد شده را در همان لحظه به شما نمایش می دهد و همچنین شما می توانید تغییر ایجاد شده را هم از نظر کاربران و هم از نظر موتورهای جستجوگر به صورت کاملا Real-time مورد بررسی قرار دهید.
ما در این بخش از آموزش قصد داریم شما را با ویرایشگر Backend ویژوال کامپوزر آشنا نماییم و در آموزش بعدی درباره ویرایشگر Frontend با شما صحبت خواهیم نمود. اگر شما جزو آن دسته افرادی باشید که مثل من کار کردن با ویرایشگر Frontend را ترجیح می دهند شاید با خود بگویید که مطالعه این بخش از آموزش برای شما ضرورتی ندارد، اما من به شما توصیه می کنم که این بخش از آموزش را نیز مطالعه نمایید زیرا ممکن است در هنگام استفاده از پلاگین ویژوال کامپوزر در برخی مواقع نیاز به استفاده از ویرایشگر Backend داشته باشید.
برای کار کردن با ویرایشگر Backend شما ابتدا باید وارد پنل ادمین در ورد پرس شوید و با طی کردن مسیر زیر یک صفحه ایجاد نمایید:

Pages – Add New Page

8777d_Switch-to-backend آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
حال اگر به بخش Post Editor یا ویرایشگر پست ها در وردپرس مراجعه نمایید خواهید دید که در این بخش دو دکمه اضافه ضاهر شده است که بر روی یکی از آنها عبارت “Backend Editor” نوشته شده و بر روی دیگری عبارت “Frontend Editor”. اگر بر روی کلیدی که عبارت “Backend Editor” بر روی آن نوشته شده است کلیک کنید، ویرایشگر Backend ویژوال کامپوزر برای شما بارگذاری خواهد شد.

0fe52_backend-editor آموزش جامع و کامل کار با افزونه ویژوال کامپوزر
زمانی که شما وارد ویرایشگر Backend ویژوال کامپوزر می گردید با چند گزینه مواجه می شوید که این گزینه ها به شرح زیر می باشند:
لوگوی ویژوال کامپوزر: اگر شما بر روی این گزینه کلیک کنید به وب سایت ارائه کننده ویژوال کامپوزر هدایت خواهید شد.
کلیدی با علامت “+”: با استفاده از این گزینه شما می توانید یک المان جدید از میان المان های محتوای موجود در کتابخانه المان های ویژوال کامپوزر انتخاب نمایید تا با استفاده از این المان در صفحه جدید ایجاد شده محتوای یا چدیمان جدیدی ایجاد نمایید.
کلید طوسی با علامت “T” بر روی آن: این کلید که به آن کلید تمپلیت گفته می شود برای انتخاب کردن یک تمپلیت جدید از میان تمپلیت های پیش ساخته موجود در ویژوال کامپوزر مورد استفاده قرار می گیرد. در ویژوال کامپوزر چندین تمپلیت پیش ساخته وجود دارد که هر یک کاربرد مجزایی دارند و کاربران می توانند برای ایجاد صفحات لندینگ، صفحات فروش، صفحات CTA و … از آنها استفاده نمایند.
کلیدی با علامت فول اسکرین: همان طور که از شکل این کلید کاملا پیداست کاربران می توانند با استفاده از این کلید ویرایشگر ویژاول کامپوزر Backend خود را تمام صفحه کنند و یا از حالت تمام صفحه خارج نمایند. این کلید بدین منظور طراحی شده است که کاربرانی که صفحه نمایش آنها کوچکتر است و نمی خواهند چیزهای اضافه در اطراف ویژوال کامپوزر خود ببینند با استفاده از آن ویژوال کامپوزر خود را فول اسکرین نمایند.
کلید با علامت چرخ دنده: در تمامی ابزارهای مختلف علامت چرخ دنده بر روی یک کلید نمایشگر آن است که این کلید مربوط به تنظیمات می باشد. با استفاده از کلید تنظیمات در ویرایشگر Backend شما می توانید تنظیمات CSS مشخصی را بر روی المان هایی که در صفحات خود اضافه می نمایید اعمال کنید.
کلیدی که بر روی آن عبارت “Frontend Editor” حک شده: همان طور که عبارت حک شده بر روی این کلید مشخص است، این کلید به منظور سوییچ کردن ویرایشگر از حالت “Backend” به حالت “Frontend” کاربرد دارد. اما شما باید به خاطر داشته باشید که پیش از آنکه بر روی این کلید کلیک نمایید حتما باید بر روی کلید “Save Changes” در انتهای صفحه کلیک نمایید تا تغییراتی که ایجاد نموده اید کاملا ذخیره سازی شوند. در صورتی که پیش از کلیک کردن بر روی کلید “Save Changes” بر روی کلید “Frontend Editor” کلیک کنید، تمام تنظیماتی که در ویرایشگر Backend ایجاد نموده اید کاملا حذف می گردد و صفحه شما به حالت اولیه باز می گردد.
استفاده از کلید “Add New Element”
همان طور که گفته شد شما می توانید با استفاده از کلید “Add New Element” المان های محتوای جدیدی را به صفحات خود اضافه نمایید. برای مثال شما می توانید بر روی کلید “Add New Element” کلیک نموده و در صفحه جدید باز شده المان “Row” را انتخاب کنید تا یک سطر جدید به صفحه شما اضافه شود. سطر مهم ترین المان یک صفحه است، زیرا سایر المان ها مثل ستون ها، تصاویر، متن ها و … همه و همه درون سطر ها قرار می گیرند.
پس از آن که شما در صفحه خود یک سطر جدید اضافه نمایید، می توانید درون آن با استفاده از آپشن “Choose Column” یکی از چیدمان ستون های از پیش آماده در ویژوال کامپوزر را انتخاب نمایید، یا اگر نمی خواهید هیچ یک از چدیمان های پیش فرض را انتخاب کنید می توانید با استفاده از گزینه “Add Column” ستون های جدیدی در سطر ایجاد شده خود اضافه کنید.
پس از اضافه کردن سطرها و ستون ها نوبت به افزودن محتوا به ستون های ایجاد شده است. اگر بخواهید در یکی از ستون ها تصویری قرار دهید باید از المان محتوای “Single Image” استفاده نمایید. برای این کار کافیست بر روی “Add Element” کلیک کنید و “Single Image” را انتخاب نمایید سپس تصویری را انتخاب نموده و سایز آن را تعیین نمایید (معمولا سایز “Medium” برای تصاویر درون وب سایت مناسب می باشد)، پس از انتخاب تصویر و تعیین سایز آن بر روی گزینه “Prepend To Column” کلیک کنید تا تصویر شما درون ستون مورد نظرتان واقع گردد.
حال اگر بخواهید متنی را در ادامه تصویر قرار دهید باید از المان محتوای “Text Block” استفاده کنید و سپس درون این المان یک محتوا را برای قرار گرفتن در محل مورد نظرتان تعیین نمایید.
اگر شما بخواهید تصویر مشترکی را در چند ستون استفاده نمایید باید از گزینه “Clone” یا نسخه برداری استفاده کنید. برای این کار کافیست بر روی “Clone Image” کلیک کنید و سپس تصویر کپی شده را در ستون های دیگر دراپ کنید. شما می توانید همین کار را برای متن ها نیز انجام دهید، یعنی اگر بخواهید متن مشترکی را در زیر تصاویر یا در هر جای دیگری از صفحه خود قرار دهید باید از گزینه “Clone Text Block” استفاده کنید و پس از آنکه متن مورد نظر را نسخه برداری نمودید، آن را در ستون های دیگر دراپ کنید.
برای اضافه نمودن هر المانی شما باید از طریق گزینه “Add Element” اقدام کنید و با استفاده از آن تک تک المان هایی که می خواهید درون صفحه مورد نظر خود قرار دهید را انتخاب کنید و هر یک را به صورت مجزا درون صفحه قرار دهید.
تنظیمات سطرها
شما می توانید به سادگی سطرهایی که درون صفحه مد نظر خود ایجاد نموده اید را تنظیم کنید و در آنها تغییراتی به دلخواه خود ایجاد نمایید. برای اعمال تغییرات در سطرها باید بر روی گزینه “Edit This Row” کلیک نمایید و وارد صفحه “Row Setting” یا تنظیمات سطر، شوید. در این صفحه شما با گزینه ها و تنظیمات متعددی مواجه خواهید شد که در ادامه این مقاله من برای شما لیست آنها و توضیحات مختصری در رابطه با هر یک از آنها آورده ام.
Row Stretch: با استفاده از این گزینه شما می توانید طولی را که مد نظر دارید برای سطر مورد نظرتان تعیین کنید. به خاطر داشته باشید که طول سطر باید با المان های موجود در آن متناسب باشد و اگر طول سطر کمتر از حدی باشد که المان ها برای جای گرفتن به آن نیاز دارند، ممکن است سرریز شدن یا Overflow در سطر شما اتفاق بیفتد.
Columns Gap: با استفاده از این گزینه شما می توانید فاصله میان ستون ها در یک سطر مشخص را تعیین نمایید.
Full tallness row: اگر چک باکس مربوط به Full Height Row را تیک بزنید، سطر مورد نظر شما تمام صفحه خواهد شد و هیچ سطر دیگری در صفحه شما جای نخواهد گرفت.
Equal Height: اگر چک باکس مربوط به این گزینه را تیک بزنید تمامی ستون های موجود در یک سطر طول برابری خواهند داشت.
Content position: با استفاده از این گزینه شما می توانید محل مورد نظر خود را برای محتوا درون یک ستون تعیین نمایید.
Parallax: این آپشن به شما امکان انتخاب یک تصویر زمینه پارالاکس را برای سطرها می دهد.
نسخه برداری از سطر ها
شما می توانید سطر ها را نیز مانند تصاویر، متن ها و ستون ها عینا نسخه برداری یا Clone نمایید و یک سطر دیگر کاملا مشابه با سطر قبلی درون صفحه خود ایجاد نمایید. برای این کار باید با استفاده از نوار ابزار بالای سطر و آپشن “Clone This Row” سطر را نسخه برداری نموده و در محل دیگری دراپ کنید. علاوه بر این شما می توانید کارهای دیگری همچون حذف سطر ها، ادغام سطر ها و … را نیز با استفاده از نوار ابزار سطر انجام دهید.
پس از آنکه کار شما در صفحه به پایان رسید باید بر روی گزینه Update کلیک کنید تا تغییراتی که ایجاد نموده اید کاملا در صفحه شما اعمال گردند و پس از آن می توانید با استفاده از گزینه “Preview” صفحه ایجاد شده را مشاهده نمایید.

 

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

در صورت درج در وب سایت خود لطفا همراه با لینک به منبع 

منبع : آموزش ویژوال کامپوزر

منبع: seorooz https://seorooz.net/visual-composer-plugin-training/

درباره نویسنده

ابراهیم حنفی (متخصص سئو) هستم، 8 سال سابقه فعالیت در حوزه وب رو دارم و بطور تخصصی 4 سال هست که سئو کار میکنم و به لطف خدا نمونه کارهای خوبی در این زمینه بدست آوردم.

دیدگاه خود را بنویسید