افزونهvisual composer-بخش اول
#1
ویژوال کامپوزر (visual composer) یک پلاگین پیج بیلدر بسیار محبوب در میان تمامی کاربران وردپرس بوده که نرخ فروش و استفاده از آن در سراسر دنیا از تمامی پیج بیلدرهای دیگر که دارای عملکرد مشابهی هستند، با اختلاف چشم گیری بیشتر است. عملکرد این پیج بیلدر به صورت درگ اند دراپ است. دارای یک ویژگی منحصر به فرد بوده که موجب شده کاربران بسیاری استفاده از آن را به سایر پیج بیلدرهای ترجیح دهند، این ویژگی منحصر به فرد فراهم نمودن امکان ویرایش صفحات هم در Backend و هم در Frontend برای کاربران است. پیج بیلدرهای بسیاری برای ورد پرس وجود دارند که عملکرد آن‌ها به صورت درگ اند دراپ است اما هیچ یک از آن‌ها امکان ویرایش هم در Backend و هم در Frontend را برای کاربران فراهم نمی‌کنند و این ویژگی فقط و فقط مختص ویژوال کامپوزر است.
هدف توسعه دهندگان ویژوال کامپوزر از ایجاد این پلاگین سرعت بخشیدن و بهبود فرایند کار کاربران در وردپرس بوده است، خواه این کار ایجاد صفحات لندینگ باشد، خواه ایجاد پست‌های وبلاگ باشد و خواه ایجاد صفحات Call To Action یا هر صفحه دیگر، ویژوال کامپوزر می‌تواند برای انجام این کارها سرعت و کیفیت را چاشنی کار کاربران نماید.
استفاده از ویژوال کامپوزر می‌تواند یک فرصت استثنایی برای مبتدیان ایجاد نماید مخصوصا برای آنها که با کد نویسی آشنایی چندانی ندارند اما می‌خواهند در زمان کوتاهی، وب سایت قوی و باکیفیتی ایجاد نمایند. استفاده از ویژوال کامپوزر موجب می‌شود که کاربران ورد پرس بتوانند وقت و انرژی کمتری صرف ایجاد صفحات وب سایت کنند و در عین حال صفحات با کیفیت‌تری ایجاد نمایند. ویژوال کامپوزر المان‌های محتوای متنوعی دارد و می‌تواند بر روی هرگونه محتوایی که کاربران بخواهند امکان ویرایش را برای آن‌ها فراهم نماید. این پلاگین کامپوزر شامل تمپلیت‌های آماده برای ایجاد صفحات است و آن دسته از کاربرانی که قادر به ایجاد تمپلیت برای صفحات وب سایت خود نیستند می‌توانند از این تمپلیت‌های آماده استفاده نمایند و محتوای مورد نظر خود را درون آنها قرار دهند.
چگونه پلاگین ویژوال کامپوزر را در وردپرس نصب و فعال سازی نماییم؟

[عکس: 82098_11.png]

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

[عکس: 84360_12.png]

برای آنکه بتوانید از این پلاگین استفاده کنید ابتدا باید آخرین نسخه آن را خریداری نموده و هزینه‌ای برای آن پرداخت کنید و سپس آن را دانلود نمایید. دقت داشته باشید که نسخه‌های رایگان این افزونه که در سایت‌های ایرانی موجود است ممکن است با مشکلاتی از قبیل عدم بروز رسانی آن مواجه شوید. در صورتی که شما نسخه منسوخ شده‌ای از این پلاگین را نصب نمایید ممکن است وب سایت شما در معرض خطراتی همچون احتمال هک شدن قرار بگیرد و اگر شما می‌خواهید هزینه‌ای را برای خرید آن پرداخت نکنید باید دائما چک کنید که آیا نسخه جدیدی از آن به بازار آمده است یا خیر و به مجرد آنکه نسخه جدیدی از آن عرضه گردید سریعا آن را دانلود کرده و نصب نمایید. بهتر است که شما آخرین ورژن این ابزار را از سایت رسمی آن خریداری نموده تا از کیفیت و امنیت آن مطمئن باشید. قیمت این پلاگین  در برابر احتمال خطراتی که ممکن است در اثر استفاده از نسخه رایگان آن برای وب سایت شما پیش بیاید بسیار ناچیز است.
پس از دانلود فایل ویژوال کامپوزر شما باید آن را اکسترکت نمایید، سپس درون آن فایل زیپی با نام “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 و هر کار دیگری که باشد، همه و همه‌ی آنچه که با استفاده از این ابزار انجام می‌شود بصورت کاملا ریسپانسیو است.

[عکس: 30483_13.png]

کنترل ریسپانسیو بودن صفحات
با استفاده از پلاگین ویژوال کامپوزر شما امکان کنترل کامل بر روی وب سایت وردپرس خود را خواهید داشت و شما می‌توانید با استفاده از این پلاگین انواع مختلف صفحات را در وب سایت خود ایجاد نمایید. برای کنترل ریسپانسیو بودن صفحات ایجاد شده در سایت وردپرس خود، شما باید به بخش General Setting در ویژوال کامپوزر مراجعه نمایید و در این بخش شما چک باکسی را مشاهده خواهید نمود که در کنار آن عبارت ” Disable responsive content elements” نوشته شده است. شما می‌توانید با استفاده از این چک باکس فعال یا غیر فعال بودن ریسپانسیو بودن المان‌های محتوا را کنترل نمایید.
 
همان طور که می‌دانید Disable به معنی غیر فعال بودن است و شما با تیک زدن این چک باکس امکان ریسپانسیو بودن المان‌های محتوا را غیر فعال می‌کنید و اگر تیک درون این چک باکس را بردارید، امکان ریسپانسیو بودن المانهای محتوا فعال سازی می‌گردد.
دقت داشته باشید که پس از اتمام فرایند تنظیمات فعال یا غیر فعال بودن امکان ریسپانسیو بودن المان‌های محتوا شما باید حتما بر روی دکمه “Save Changes” کلیک نمایید تا تغییراتی که ایجاد نموده‌اید ذخیره سازی گردد در غیر این صورت تغییرات ایجاد شده توسط شما اعمال نخواهد شد.
کنترل دسترسی یوزر گروپ‌ها در ویژوال کامپوزر
ویژوال کامپوزر به صاحبان وب سایت‌ها این امکان را می‌دهد که میزان دسترسی یوزر گروپ‌ها به بخش‌های مختلف این پلاگین و آپشن‌های مختلف موجود در آن را کنترل نماید. ممکن است یک وب سایت دارای گروه‌های مختلفی از اعضا، ادمینستریتورها، ویرایشگرها و نویسنده‌ها باشد و صاحب وب سایت بخواهد که میزان دسترسی هر یک از این گروه‌ها را به بخش‌های مختلف این پلاگین را محدود نماید و تنها اجازه دسترسی به بخش‌های محدودی را به هر یوزر گروپ بدهد، ویژوال کامپوزر برای این مساله چاره‌ای اندیشیده است.
برای آنکه بتوانید میزان دسترسی یوزر گروپ‌ها را به بخش‌های مختلف ویژوال کامپوزر کنترل نمایید باید از Role  manager  استفاده نمایید.

[عکس: 70233_14.png]

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

[عکس: 53878_15.png]

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 color: رنگ زمینه اصلی وب سایت
Hover color ر: نگ ثانویه وب سایت یا رنگ شناور
:Call to action background color رنگ کلید‌های  CTA 
Google maps background color: رنگ زمینه گوگل مپ
Post slider caption background color: رنگ زمینه کپشن یا توضیحات پست اسلایدر
Progress bar background color: رنگ زمینه نوار پیشرفت
Separator border color : رنگ حاشیه جداساز 
Tabs navigation background color: رنگ زبانه در هنگام کلیک کردن بر روی آن‌ها
Active tab background color: رنگ زبانه‌های فعال
Elements bottom margin(حاشیه پایینی المان ها): با استفاده از این گزینه شما می‌توانید اندازه حاشیه پایینی را برای هر المانی که در صفحات خود ایجاد می‌نمایید تعیین نمایید.
Grid gutter Width: تعیین فاصله در بین گرایدها
:Mobile Screen Width اندازه پهنای صفحه وب سایت در هنگام نمایش بر روی تلفن‌های همراه
شما پس از وارد شدن به صفحه Designing Options هر یک از گزینه‌های بالا را به صورت یک منوی آبشاری مشاهده می‌کنید که به سادگی می‌توانید با کلیک کردن بر روی منوی آبشاری هر یک از گزینه‌های موجود در آن را انتخاب نمایید.

[عکس: 56822_16.png]

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


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  افزونهvisual composer-بخش پنجم fatemeh-roshangar 0 146 31-Aug-2017, 11:32 AM
آخرین ارسال: fatemeh-roshangar
  افزونهvisual composer-بخش چهارم fatemeh-roshangar 0 92 31-Aug-2017, 11:30 AM
آخرین ارسال: fatemeh-roshangar
  افزونهvisual composer-بخش سوم fatemeh-roshangar 0 98 31-Aug-2017, 11:25 AM
آخرین ارسال: fatemeh-roshangar

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان