ساخت سایت بدون برنامه نویسی با ویژوال کامپوزر+آموزش
با سلام به تمامی دوستان برنامه نویس و غیر برنامه نویس . قسمت شد بعد از 4 سال دوباره به انجمن برنامه نویسان برگردم .حامد مهدیزاده هستم کارشناس کامپیوتر(سخت افزار) و مدیر سایت سئو روز .
یک آموزشی تهیه کردم امیدوارم کارامد و مفید برای دوستان تازه کار واقع گردد .
ویژوال کامپوزر در میان تمامی پلاگین ها در CodeCanyon از لحاظ میزان فروش رتبه اول را به خود اختصاص داده است و تعداد فروش این پلاگین از مرز ۲۰۰۰۰ فروش در ماه مارچ سال ۲۰۱۴ عبور کرد.
این پلاگین توسط WP Bakery تولید شده است و در ThemeForest بیش از ۳۰۰ قالب اضافه برای آن در اختیار استفاده کنندگان قرار داده شده است که همگی به صورت درگ اند دراپ می باشند و تا کنون بیش از ۶۵۰۰۰ وب سایت مختلف در سراسر دنیا این پلاگین را نصب نموده اند.
اگر نمیدانید ویژوال کامپوزر چیست ؟ حتما کامل بخوانید .
آموزش کامل کار با افزونه ویژوال کامپوزر
این مجموعه شامل بخش های مختلفی از جمله نصب و راه اندازی ویژوال کامپوزر، کار با ویرایشگر Frontendd در ویژوال کامپوزر، کار با ویرایشگر Backend در ویژوال کامپوزر، ایجاد تنظیمات و شخصی سازی ها و بسیاری بخش های دیگر می باشد. اگر شما به دنبال یک مجموعه آموزشی هستید که تمامی بخش های مختلف ویژوال کامپوزر را به صورت مجزا برای شما آموزش دهد و شما را با صفر تا صد کار با این پلاگین آشنا نماید، ما شما عزیزان را دعوت می نماییم که تا انتها این مجموعه با ما همراه باشید.چگونه پلاگین وژوال کامپوزر را در وردپرس نصب و فعال سازی نماییم؟
شما پیش از آنکه به یادگیری کار با ویژوال کامپوزر بیاندیشید ابتدا باید آن را نصب و فعال سازی نمایید. برای این کار ابتدا باید به سایت رسمی ویژوال کامپوزر مراجعه کنید و آن را خریداری نمایید و پس از خرید آن را نصب و فعال سازی کنید. اگر شما پس از نصب این پلاگین لایسنس آن را فعال سازی کنید خواهید توانست تمامی بروز رسانی های آن را به صورت اتوماتیک دریافت نمایید و همچنین از پشتیبانی های آن بهره مند شوید. در صورتی که شما لایسنس این پلاگین را فعال سازی کنید، اگر در استفاده از این محصول با مشکلی مواجه شدید می توانید مشکلات خود را برای توسعه دهندگان آن بنویسید تا آنها برای حل آن مشکلات به شما کمک کنند.
نصب و فعال سازی پلاگین ویژوال کامپوزر بر روی وردپرس برای کاربرانی که تازه کار هستند کار مشکلی است مخصوصا انجام پروسه فعال سازی این پلاگین که فرایند آن اندکی پیچیده تر می باشد برای مبتدیان و حتی افراد حرفه ای نیز تا حدودی مشکل می باشد. در این بخش از مجموعه آموزش پلاگین ویژوال کامپوزر ما قصد داریم که نصب و فعال سازی این پلاگین بر روی یک وب سایت ایجاد شده با استفاده از وردپرس را به شما آموزش دهیم و همچنین چگونگی فعال سازی لایسنس آن را به شما بیاموزیم تا بتوانید پس از نصب و فعال سازی این پلاگین هرگاه که نسخه جدیدی از آن ارائه می شود آن را به صورت اتوماتیک دریافت نمایید و از خدمات بروز پلاگین جدید و همچنین امکانات پشتیبانی آن بهره مند گردید.
برای آنکه بتوانید از این پلاگین استفاده کنید ابتدا باید آخرین نسخه آن را خریداری نموده و هزینه ای برای آن پرداخت کنید و سپس آن را دانلود نمایید. دقت داشته باشید که شما عزیزانی که نسخه های رایگان این ابزار را که در وب سایت های ایرانی موجود می باشد دانلود می نمایید و هیچ هزینه ای بابت استفاده از آن پرداخت نمی کنید ممکن است با مشکلاتی از قبیل عدم بروز رسانی آن مواجه شوید. در صورتی که شما نسخه منسوخ شده ای از این پلاگین را نصب نمایید ممکن است وب سایت شما در معرض خطراتی همچون احتمال هک شدن قرار بگیرد و اگر شما می خواهید هزینه ای را برای خرید آن پرداخت نکنید باید دائما چک کنید که آیا نسخه جدیدی از آن به بازار آمده است یا خیر و به مجرد آنکه نسخه جدیدی از آن عرضه گردید سریعا آن را دانلود کرده و نصب نمایید. بهتر است که شما آخرین ورژن این ابزار را از سایت رسمی آن خریداری نموده تا از کیفیت و امنیت آن مطمئن باشید. این پلاگین قیمت چندانی ندارد و هزینه خرید آن چیزی حدود ۳۴ دلار می باشد که در برابر احتمال خطراتی که ممکن است در اثر استفاده از نسخه رایگان آن برای وب سایت شما پیش بیاید بسیار ناچیز می باشد.
پس از دانلود فایل ویژوال کامپوزر شما باید آن را اکسترکت نمایید، سپس درون آن فایل زیپی با نام “js_composerr” مشاهده خواهید نمود، این فایل را به صورت درگ اند دراپ به روی دسکتاپ منتقل کنید و سپس وارد پنل ادمین وب سایت خود شوید و مسیر زیر را طی کنید:
Plugins -> Add Plugin (Add New)
حال بر روی Upload Plugin کلیک کنید و فایل “js_composer” را انتخاب کنید و بر روی دکمه Openn کلیک نمایید. سپس بر روی گزینه Install Now کلیک کرده و منتظر بمانید تا پلاگین ویژوال کامپوزر نصب گردد.
فعال سازی با استفاده از لایسنس
برای فعال سازی لایسنس ویژوال کامپوزر شما ابتدا باید به codecanyon.net/downloadss بروید، سپس به بخشی که در آن فایل های مربوط به ویژوال کامپوزر موجود می باشند مراجعه نمایید. سپس بر روی دکمه Download کلیک کنید و گزینه “License certificate & certificate code” را انتخاب نمایید. (ممکن است به جای این گزینه گزینه ای با نام “License certificate & certificate code” وجود داشته باشد). دو گزینه با نام مشابه وجود دارد که شما باید گزینه ای که جلوی آن داخل پرانتز عبارت “text” نوشته شده است را انتخاب و دانلود نمایید. سپس این فایل را باز کنید و Item Purchase Code یا کد خرید محصول را در آن بیابید.
حال شما باید یک Secret API Code یا کد API محرمانه دریافت نمایید، و برای خود در Envatoo یک اکانت ایجاد نمایید. برای این کار به codecanyon.net مراجعه کنید و نشان گر موس خود را بر روی Account Username قرار دهید و گزینه Setting را انتخاب کنید. حال بر روی گزینه “API Key” کلیک کنید و یک کلمه به دلخواه خود در آن تایپ کنید و سپس بر روی گزینه “Generate API Key” کلیک نمایید تا یک API Key جدید دریافت نمایید. پس از دریافت API Key جدید وارد پانل اکانت وردپرس خود شوید و مسیر زیر را طی کنید:
Visual Composer −> Product License
سپس در صفحه جدید باید نام اکانت خود در Envato، API Keyy محرمانه دریافتی و کد خرید محصول را وارد کنید تا بتوانید لایسنس ویژوال کامپوزر خود را فعال سازی نمایید.
اگر لایسنس شما با موفقیت فعال سازی گردد شما پس از انجام این پروسه پیام License successfully activatedd را بر روی صفحه مشاهده خواهید نمود.
خب تمام شد، شما توانستید با موفقیت ویژوال کامپوزر را بر روی وب سایت وردپرس خود نصب و فعال سازی نمایید تا هر گاه ورژن جدیدی از آن عرضه می گردد بتوانید بلافاصله به صورت اتوماتیک آن را دریافت نمایید و از امکانات آن بهره مند گردید.
حال که پروسه نصب این پلاگین به پایان رسید باید کار با آن را بیاموزید تا بتوانید صفحات بسیار حرفه ای با استفاده از آن ایجاد نمایید. در ادامه این مجموعه با ما همراه باشید تا گام به گام شما را در مسیر یادگیری کار با این ابزار همراهی نماییم.
کنترل ریسپانسیو بودن صفحات ایجاد شده با ویژوال کامپوزر
ویژوال کامپوزر در میان کاربران به عنوان یک پیج بیلدر درگ اند دراپ که دارای قابلیت ایجاد صفحات کاملا ریسپانسیو است، شناخته شده است. این بدان معنی است که شما هرکاری که با استفاده از ویژوال کامپوزر انجام دهید، خواه ایجاد صفحات لندینگ، خواه ایجاد پست گراید ها و مدیا گراید ها، خواه ایجاد صفحات CTA و هر کار دیگری که باشد، همه و همه ی آنچه که با استفاده از این ابزار انجام می شود بصورت کاملا ریسپانسیو است.
کنترل دسترسی یوزر گروپ ها در ویژوال کامپوزر
با استفاده از پلاگین ویژوال کامپوزر شما امکان کنترل کامل بر روی وب سایت وردپرس خود را خواهید داشت و شما می توانید با استفاده از این پلاگین انواع مختلف صفحات را در وب سایت خود ایجاد نمایید. برای کنترل ریسپانسیو بودن صفحات ایجاد شده در سایت وردپرس خود، شما باید به بخش General Setting در ویژوال کامپوزر مراجعه نمایید و در این بخش شما چک باکسی را مشاهده خواهید نمود که در کنار آن عبارت ” Disable responsive content elements” نوشته شده است. شما می توانید با استفاده از این چک باکس فعال یا غیر فعال بودن ریسپانسیو بودن المان های محتوا را کنترل نمایید.
همان طور که شما عزیزان می دانید Disable به معنی غیر فعال بودن می باشد و شما با تیک زدن این چک باکس امکان ریسپانسیو بودن المان های محتوا را غیر فعال می کنید و اگر تیک درون این چک باکس را بردارید، امکان ریسپانسیو بودن المان های محتوا فعال سازی می گردد.
دقت داشته باشید که پس از اتمام فرایند تنظیمات فعال یا غیر فعال بودن امکان ریسپانسیو بودن المان های محتوا شما باید حتما بر روی دکمه “Save Changes” کلیک نمایید تا تغییراتی که ایجاد نموده اید ذخیره سازی گردد در غیر این صورت تغییرات ایجاد شده توسط شما اعمال نخواهد شد.
ویژوال کامپوزر به صاحبان وب سایت ها این امکان را می دهد که میزان دسترسی یوزر گروپ ها به بخش های مختلف این پلاگین و آپشن های مختلف موجود در آن را کنترل نماید. ممکن است یک وب سایت دارای گروه های مختلفی از اعضا، ادمینستریتورها، ویرایشگرها و نویسنده ها باشد و صاحب وب سایت بخواهد که میزان دسترسی هر یک از این گروه ها را به بخش های مختلف این پلاگین را محدود نماید و تنها اجازه دسترسی به بخش های محدودی را به هر یوزر گروپ بدهد، ویژوال کامپوزر برای این مساله چاره ای اندیشیده است.
برای آنکه بتوانید میزان دسترسی یوزر گروپ ها را به بخش های مختلف ویژوال کامپوزر کنترل نمایید باید از Role manager استفاده نمایید.
پیش از هر کار شما باید به پنل ورد پرس خود مراجعه نمایید و وارد اکانت خود شوید و وارد ویژوال کامپوزر گردید، از داخل ویژوال کامپوزر گزینه Role manager را انتخاب نمایید و سپس اندکی صبر کنید تا صفحه مربوط به Role manager برای شما بارگذاری گردد.
در صفحه Role managerr شما منوهای آبشاری بسیاری را مشاهده می نمایید که در کنار هریک از آنها عبارتی به عنوان نام آن منوی آبشاری حک شده است. شما با استفاده از همین منوهای آبشاری می توانید میزان دسترسی یوزر گروپ ها را کنترل نمایید. در ادامه هریک از این منوهای آبشاری را به صورت مجزا مورد بررسی قرار خواهیم داد.
Post Types : به صورت پیش فرض گزینه Only Page بر روی این منوی آبشاری انتخاب شده است که موجب می شود شما با استفاده از ویژوال کامپوزر تنها قادر به ویرایش صفحات باشید، اما اگر شما گزینه Custom را در این منوی آبشاری انتخاب نمایید علاوه بر صفحات می توانید پست ها را نیز با استفاده از این پلاگین مورد ویرایش قرار دهید.
Backend Editor: در این منوی آبشاری تنها دو گزینه وجود دارد، Disable و Enablee که به شما این امکان را می دهد که استفاده از ویرایشگر Backend ویژوال کامپوزر را برای تمامی ویرایشگران سایت خود فعال یا غیر فعال نمایید.
Frontend Editor: این منوی آبشاری نیز مشابه منوی Frontend Editor تنها دو گزینهDisable و Enable را شامل می شود که با استفاده از آنها می توانید امکان استفاده از ویرایشگر Frontend را برای تمامی ویرایشگران سایت خود فعال یا غیر فعال نمایید.
Page Settingg: این منوی آبشاری همان طور که از نام آن پیداست برای کنترل دسترسی به صفحه تنظیمات ویژوال کامپوزر استفاده می گردد. بهتر است که شما در این منوی آبشاری گزینه Disable را انتخاب نمایید تا دسترسی تمامی یوزر گروپ ها را به تنظیمات ویژوال کامپوزر محدود نمایید.
Settings Optionss: این منوی آبشاری برای کنترل دسترسی یوزر گروپ ها به زبانه های تنظیمات ادمین در ویژوال کامپوزر (General Settings، Shortcode Mapper و …) مورد استفاده قرار می گیرد.
Templatess: این منوی آبشاری برای کنترل دسترسی یوزر گروپ ها به تمپلیت ها و همچنین تمپلیت های پیش ساخته مورد استفاده قرار می گیرد. به خاطر داشته باشید که اگر شما در این منوی آبشاری گزینه “Apply Templates Only” را انتخاب نمایید دسترسی یوزر گروپ ها را برای اضافه کردن تمپلیت های جدید و حذف تمپلیت های ذخیره شده محدود می نمایید.
Elements: این منوی آبشاری نیز دسترسی یوزر گروپ ها به المان های محتوا را کنترل می نماید.
Grid Builder: این منوی آبشاری به منظور کنترل دسترسی یوزر گروپ ها به و Grid Builder و المان های Grid Builder مورد استفاده قرار می گیرد.
Element Presetss : این منوی آبشاری دسترسی یوزر گروپ ها را به تنظیمات پیش فرض المان ها در فرم ویرایش المان ها کنترل می نماید. به خاطر داشته باشید که اگر شما در این منوی آبشاری گزینه “Apply Preset Only” را انتخاب نمایید دسترسی یوزر گروپ ها را برای ایجاد تنظیمات جدید و حذف تنظیمات اولیه موجود محدود می نمایید.
با استفاده از این منوهای آبشاری موجود در Role Managerr شما می توانید میزان دسترسی ویرایشگرها، نویسندگان و حتی سایر ادمین های سایت را به تمامی بخش های ویژوال کامپوزر کنترل نمایید. فقط باید حتما پیش از آنکه این صفحه را ترک کنید بر روی کلید “Save Changes” کلیک کنید تا تنظیمات انجام شده توسط شما در این صفحه اعمال شود و در صورتی که شما فراموش کنید که بر روی کلید “Save Changes” کلیک نمایید تمامی تنظیماتی که انجام داده اید به حالت قبلی باز خواهد گشت.
نتیجه گیری
Role Managerr در ویژوال کامپوزر یک ابزار بسیار موثر و مفید است و به صاحبان وب سایت ها این امکان را می دهد که تمامی تنظیمات لازم و کنترل های مورد نیاز برای دسترسی کاربران به بخش های مختلف را به صورت دستی انجام دهند.
چگونه با استفاده از ویژوال کامپوزر ظاهر سایت وردپرسی خود را تغییر دهیم؟
ظاهر وب سایت از پارامترهای بسیار تاثیر گذار در جذب یا دفع کاربران وب سایت است و انتخاب المان های ظاهری معقول و متناسب برای یک وب سایت می تواند به طرز چشم گیری در موفقیت آمیز بودن یا نبودن عملکرد وب سایت ثاثیر گذار باشد. ویژوال کامپوزر برای ایجاد آرایش ظاهری وب سایت و همچنین ایجاد تغییرات در ظاهر وب سایت نیز خدماتی را به کاربران ارائه می نماید، بخش “Designing Options” به منظور ارائه خدماتی برای ایجاد امکان تغییرات در ظاهر وب سایت برای کاربران تعبیه شده است.
با استفاده از بخش “Designing Optionn” در پلاگین ویژوال کامپوزر شما می توانید تغییراتی بنیادی همچون تغییر رنگ زمینه وب سایت، رنگ نوشته های درون وب سایت، رنگ زمینه کلیدهای 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 marginn (حاشیه پایینی المان ها): با استفاده از این گزینه شما می توانید اندازه حاشیه پایینی را برای هر المانی که در صفحات خود ایجاد می نمایید تعیین نمایید.
Grid gutter Width (تعیین فاصله در بین گراید ها)
Mobile Screen Width (اندازه پهنای صفحه وب سایت در هنگام نمایش بر روی تلفنهای همراه)
شما پس از وارد شدن به صفحه Designing Optionss هر یک از گزینه های بالا را به صورت یک منوی آبشاری مشاهده می کنید که به سادگی می توانید با کلیک کردن بر روی منوی آبشاری هر یک از گزینه های موجود در آن را انتخاب نمایید.
در انتها این صفحه دو کلید دیگر وجود دارد که بر روی آنها عبارات “Save Changes” و “Restore Default” حک شده است. با استفاده از کلید “Save Changes” شما می توانید تغییراتی را که ایجاد نموده اید ذخیره کنید و با استفاده از کلید “Restore Default” شما می توانید تمامی تنظیمات را به حالت اولیه بازگردانید.
اضافه کردن CSS های رایج به سایت با استفاده از ویژوال کامپوزر
کاربران وردپرس برای آنکه بتوانند بدون ادیت کردن کد CSSS اصلی قالب ها، طراحی های مجزای ثانویه ای در وب سایت خود انجام دهند اغلب ملزم به نصب پلاگین CSS Custom در سایت وردپرس خود می باشند. ویژوال کامپوزر برای این مساله راه حل جایگزینی اندیشیده است و این راه حل جایگزین در بخش “Custom CSS” ویژوال کامپوزر برای کاربران ارائه شده است. با استفاده از بخش “Custom CSS” ویژوال کامپوزر کاربران دیگر نیازی به نصب پلاگین های اضافه برای اضافه کردن CSS ها ندارند و علاوه بر این، بخش “Custom CSS” ویژوال کامپوزر بسیار شهودی تر و یوزر فرندلی تر از سایر پلاگین ها می باشد.
اضافه کردن CSSS ها به سایت وردپرس با استفاده از ویژوال کامپوزر کار ساده ای است و ما در این فایل آموزشی آن را به صورت کاملا ساده و قابل درک برای شما بیان خواهیم نمود. اگر شما ورژن جدید ویژوال کامپوزر را در اختیار داشته باشید که در آن بخش “Custom CSS” فعال سازی شده است دیگر نیازی به مراجعه به بخش تنظیمات نخواهید داشت و تنها با نوشتن کد CSS مد نظر خود در بخش “Custom CSS” می توانید CSS مد نظر خود را به سایت اضافه نمایید(در نسخه های قدیمی تر این بخش فعال سازی نشده و اضافه کردن CSS ها با استفاده از ویژوال کامپوزر های ورژن قدیمی تر کار مشکلی می باشد).
برای اضافه کردن CSSS ها به سایت وردپرس خود باید ابتدا وارد پنل ورد پرس خود شوید و وارد اکانت خود گردید، سپس مسیر زیر را طی کنید:
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 Changess” کلیک نمایید.
استفاده از شورت کدها
حال که شما شورت کد مربوط به ویدیوهای یوتیوب را در ویژوال کامپوزر خود اضافه نمودید می توانید ویدیوهایی از یوتیوب را در صفحات مختلف وب سایت خود وارد نمایید. برای این کار باید ابتدا وارد ویژوال کامپوزر شده و سپس وارد ویرایشگر Frontend شوید و بر روی گزینه “Add Element” کلیک کنید، سپس گزینه “My Shortcode” را انتخاب نمایید و بر روی کلید “Embedyt” کلیک کنید. حال در صفحه باز شده باید لینک ویدیوی یوتیوب مد نظر خود را وارد کنید و بر روی دکمه “Update” کلیک کنید . با این روش می توانید هریک از ویدیوهای یوتیوب را که می خواهدی در صفحات خود اضافه نمایید.
شما می توانید در بخش “Designing Options” تغییرات بیشتری در شورت کدهای خود ایجاد نمایید و آنها را به دلخواه خود تغییر دهید.
آموزش کامل کار با ویرایشگر Backend در ویژوال کامپوزر
ویژوال کامپوزر در میان تمامی پلاگین های پیج بیلدر تنها پلاگینی است که هم قابلیت ویرایش در Backendd را به کاربران می دهد و هم قابلیت ویرایش در Frontend. این ویژگی منحصر به فرد ویژوال کامپوزر باعث شده است که این پلاگین در میان کاربران از محبوبیت دو چندانی برخوردار باشد. با وجود آنکه ویرایشگر Backend ویژوال کامپوزر چندان منعطف نمی باشد و ویرایشگر Frontend عملکرد بهتری نسبت به آن دارد، اما همچنان بعضی از کاربران که به دلیل استفاده از ویرایشگر پیش فرض ورد پرس (WordPress Post Editor) و عادت کردن به استفاده از آن ترجیح می دهند که از ویرایشگر Backend ویژوال کامپوزر که دارای محیط مشابهی می باشد، استفاده نمایند. ویرایشگر Backend ویژوال کامپوزر داراری محیط مشابهی با ویرایشگر پیش فرض وردپرس دارد و تنها تفاوت موجود در بین این دو ویرایشگر آن است که ویرایشگر Backend ویژوال کامپوزر دارای قابلیت نمایش فول اسکرین می باشد.
هر دو ویرایشگر Backend و Frontendd ویژوال کامپوزر ابزارهای بسیار قوی و پر کاربردی می باشند و کارایی های بسیاری دارند. اما از نظر من ویرایشگر Frontend از ویرایشگر Backend بهتر می باشد و این مساله بدان دلیل است که ویرایشگر Frontend قابلیت نمایش همزمان تغییرات را دارد، این بدان معنی است که زمانی که شما تغییری در یکی از صفحات ایجاد می کنید، ویرایشگر Frontend تغییر ایجاد شده را در همان لحظه به شما نمایش می دهد و همچنین شما می توانید تغییر ایجاد شده را هم از نظر کاربران و هم از نظر موتورهای جستجوگر به صورت کاملا Real-time مورد بررسی قرار دهید.
ما در این بخش از آموزش قصد داریم شما را با ویرایشگر Backendd ویژوال کامپوزر آشنا نماییم و در آموزش بعدی درباره ویرایشگر Frontend با شما صحبت خواهیم نمود. اگر شما جزو آن دسته افرادی باشید که مثل من کار کردن با ویرایشگر Frontend را ترجیح می دهند شاید با خود بگویید که مطالعه این بخش از آموزش برای شما ضرورتی ندارد، اما من به شما توصیه می کنم که این بخش از آموزش را نیز مطالعه نمایید زیرا ممکن است در هنگام استفاده از پلاگین ویژوال کامپوزر در برخی مواقع نیاز به استفاده از ویرایشگر Backend داشته باشید.
برای کار کردن با ویرایشگر Backendd شما ابتدا باید وارد پنل ادمین در ورد پرس شوید و با طی کردن مسیر زیر یک صفحه ایجاد نمایید:
Pages -> Add New Page
حال اگر به بخش Post Editor یا ویرایشگر پست ها در وردپرس مراجعه نمایید خواهید دید که در این بخش دو دکمه اضافه ضاهر شده است که بر روی یکی از آنها عبارت “Backend Editor” نوشته شده و بر روی دیگری عبارت “Frontend Editor”. اگر بر روی کلیدی که عبارت “Backend Editor” بر روی آن نوشته شده است کلیک کنید، ویرایشگر Backend ویژوال کامپوزر برای شما بارگذاری خواهد شد.
زمانی که شما وارد ویرایشگر Backend ویژوال کامپوزر می گردید با چند گزینه مواجه می شوید که این گزینه ها به شرح زیر می باشند:
لوگوی ویژوال کامپوزر: اگر شما بر روی این گزینه کلیک کنید به وب سایت ارائه کننده ویژوال کامپوزر هدایت خواهید شد.
کلیدی با علامت “+”: با استفاده از این گزینه شما می توانید یک المان جدید از میان المان های محتوای موجود در کتابخانه المان های ویژوال کامپوزر انتخاب نمایید تا با استفاده از این المان در صفحه جدید ایجاد شده محتوای یا چدیمان جدیدی ایجاد نمایید.
یک سوم آموزش کار با افزونه ویژوال کامپوزر تمام شد . انشالله در مطالب بعدی , آموزش تکمیل خواهد شد
پاسخ با نقل قول
