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

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

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

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

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

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

چیجوری پلاگین وژوال کامپوزر رو در وردپرس نصب و فعال سازی کنیم؟

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

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

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

پس از دانلود فایل ویژوال کامپوزر شما باید اونو اکسترکت کنین، بعد درون اون فایل زیپی با نام “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 و هر کار دیگری که باشه، همه و همه اون چیزی که با به کار گیری این وسیله انجام می شه به شکل به طور کامل ریسپانسیوه.

کنترل ریسپانسیو بودن صفحات

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

همونجوریکه شما عزیزان میدونید Disable به معنی غیر فعال بودنه و شما با تیک زدن این چک باکس امکان ریسپانسیو بودن المانای محتوا رو غیر فعال می کنین و اگه تیک درون این چک باکس رو وردارین، امکان ریسپانسیو بودن المانای محتوا فعال سازی می شه.

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

کنترل دسترسی یوزر گروپا در ویژوال کامپوزر

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

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

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

در صفحه Role manager شما منوهای آبشاری بسیاری رو می بینین که در کنار هر کدوم از اونا عبارتی به عنوان نام اون منوی آبشاری حک شده. شما با به کار گیری همین منوهای آبشاری می تونین اندازه دسترسی یوزر گروپا رو کنترل کنین. در ادامه هر کدوم از این منوهای آبشاری رو به صورت جدا از هم مورد بررسی قرار میدیم.

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

Backend Editor: در این منوی آبشاری فقط دو گزینه هست، Disable و Enable که به شما این امکان رو میده که به کار گیری ویرایشگر Backend ویژوال کامپوزر رو واسه همه ویرایشگران سایت خود فعال یا غیر فعال کنین.

 

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 هر کدوم از گزینه های بالا رو به صورت یه منوی آبشاری مشاهده می کنین که خیلی راحت می تونین با کلیک کردن روی منوی آبشاری هر کدوم از گزینه های موجود در اونو انتخاب کنین.

در آخر این صفحه دو کلید دیگه س که روی اونا عبارات “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

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

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

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

اضافه کردن شورت کدها به ویژوال کامپوزر

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

در این فایل آموزشی ما می خوایم تا روش اضافه کردن شورت کدها به ویژوال کامپوزر رو به شما بیاموزیم. واسه این کار از یه مثال مثلا شورت کد استفاده میکنیم. فرض کنین شما می خواین شورت کد “YouTube” رو به ویژوال کامپوزر خود اضافه کنین تا با به کار گیری اون ویدیوهای یوتیوب رو در سایت خود اضافه کنین و واسه کاربران نمایش بدین.

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

در ادامه شما می تونین در بخش “General Information” چک باکس “include content Param into shortcode” رو تیک بزنین تا بتونین فاکتورهایی مثل عنوان، نوع، توضیحات و … رو به شورت کد وارد شده اضافه کنین.

در آخر شما باید تغییراتی رو که ایجاد کردین ذخیره کنین، واسه این کار کافیه که روی دکمه “Save Changes” کلیک کنین.

به کار گیری شورت کدها

حالا که شما شورت کد مربوط به ویدیوهای یوتیوب رو در ویژوال کامپوزر خود اضافه کردین می تونین ویدیوهایی از یوتیوب رو در صفحات جور واجور سایت خود وارد کنین. واسه این کار باید اول وارد ویژوال کامپوزر شده و بعد وارد ویرایشگر Frontend شید و روی گزینه “Add Element” کلیک کنین، بعد گزینه “My Shortcode” رو انتخاب کنین و روی کلید “Embedyt” کلیک کنین. حال در صفحه باز شده باید لینک ویدیوی یوتیوب مورد توجه خود رو وارد کنین و روی دکمه “Update” کلیک کنین . با این روش می تونین هر کدوم از ویدیوهای یوتیوب رو که می خواهدی در صفحات خود اضافه کنین.

شما می تونین در بخش “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

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

وقتی که شما وارد ویرایشگر Backend ویژوال کامپوزر می گردید با چند گزینه مواجه میشین که این گزینه ها به توضیح زیر هستن:

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

کلیدی با علامت “+”: با به کار گیری این گزینه شما می تونین یه المان جدید از بین المانای محتوای موجود در کتابخونه المانای ویژوال کامپوزر انتخاب کنین تا با به کار گیری این المان در صفحه جدید ایجاد شده محتوای یا چدیمان جدیدی ایجاد کنین.

کلید طوسی با علامت “T” روی اون: این کلید که به اون کلید تمپلیت می گن واسه انتخاب کردن یه تمپلیت جدید از بین تمپلیتای پیش ساخته موجود در ویژوال کامپوزر استفاده میشن. در ویژوال کامپوزر چندین تمپلیت پیش ساخته هست که هر یک کاربرد مجزایی دارن و کاربران می تونن واسه ایجاد صفحات لندینگ، صفحات فروش، صفحات CTA و … از اونا استفاده کنن.

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

کلیدی با علامت مربع یا مستطیل: در کنار کلید تنظیمات کلیدی هست که روی اون چیزی مثل یه نمایشگر بسیار کوچیک هست که بیشتر به دلیل اینکه تصویر نمایشگر روی کلید بسیار کوچکه، به شکل یه مربع یا مستطیل دیده می شه. این کلید که به نام کلید “Responsive Preview” شناخته شده واسه بررسی ریسپانسیو بودن یا نبودن صفحات سایت می تونه مورد استفاده قرار بگیره. اگه شما روی این کلید کلیک کنین می بینین که واسه شما امکان مشاهده صفحه در صفحات نمایش با اندازه های جور واجور (لپ تاپ، تبلت در حالت عادی، تبلت در حالت لند اسکیپ تلفنای همراه جور واجور در حالت عادی و لند اسکیپ) ارائه می شه. شما می تونین با انتخاب هر کدوم از گزینه های موجود شکل نمایش سایت خود رو در اون اندازه از صفحه نمایش ببینین.

کلیدی که روی اون عبارت “Backend Editor” حک شده: این کلید امکان سوییچ کردن به ویرایشگر Backend رو به شما میده یعنی هر زمان که شما با ویرایشگر Frontend احساس راحتی نکنین و یا بخواین کاری انجام بدین که انجام اون در ویرایشگر Backend واسه شما راحت تر باشه شما می تونین با کلیک کردن روی این دکمه خیلی راحت به ویرایشگر Backend سوییچ کنین. فقط یادتون باشه که هر وقتی که خواستین از مود ویرایشگر Frontend به مود ویرایشگر Backend سوییچ کنین باید حتما قبل از کلیک کردن روی دکمه نام برده روی دکمه “Update” کلیک کنین تا تغییراتی که اعمال کردین ذخیره سازی شه وگرنه تموم تغییرات ایجاد شده شما به حالت اولیه برمی گرده.

کلیدی که روی اون “Update” حک شده: این کلید واسه ذخیره سازی و اعمال پایانی تغییرات ایجاد شده در صفحاته. شما باید پس از اینکه ایجاد و تنظیمات صفحه تموم شد روی این کلید کلیک کنین تا تغییرات مورد نظر شما پایانی شن.

کلیدی با علامت “×”: در گوشه بالای سمت راست ویژوال کامپوزر مانند همه وسیله ها و نرم افزارای دیگه کلیدی با علامت کراس روی اون هست که این کلید واسه بستن و خارج شدن کلی از ویژوال کامپوزر می تونه استفاده بشه.

کلیدی با علامت فول اسکرین: همونجوریکه از شکل این کلید به طور کامل پیداست کاربران می تونن با به کار گیری این کلید ویرایشگر ویژاول کامپوزر 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 height row: اگه چک باکس مربوط به Full Height Row رو تیک بزنین، سطر مورد نظر شما تموم صفحه می شه و هیچ سطر دیگری در صفحه شما جای نمی گیره.

Equal Height: اگه چک باکس مربوط به این گزینه رو تیک بزنین تم

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *