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

[عکس: 53891_1.png]

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

[عکس: 30121_2.png]

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

[عکس: 85673_3.png]

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

[عکس: 77262_4.png]

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


[عکس: 25234_5.png]

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

[عکس: 55655_6.png]

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

[عکس: 88561_7.png]

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

[عکس: 21313_8.png]

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

منبع
پاسخ


پرش به انجمن:


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