خانه >> آموزشگاه >> آموزش وردپرس >> آموزش کامل کار با ویژال کامپوسر

آموزش کامل کار با ویژال کامپوسر

معرفی افزونه :

گاهی وقت ها پیش میاد که در اینترنت یک وب سایتی را ببینید که زیبایی و جذابیت بالایی داشته باشه و شمارو مجذوب خودش بکنه و شما هم بعد دیدن این وب سایت برید به سراغ وب سایت خودتون و بخواین که وب سایتتون رو مشابه همون کنید.

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

ویژگی های افزونه :

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

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

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

در آموزش های قبلی آموزش نصب افزونه های وردپرسی رو توضیح دادیم که در صورت نیاز میتونید مطالعه کنید.

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

آموزش کار با ویژال کامپوسر

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

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

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

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

یکی از این دکمه ها frontend editor هست که محیط ویرایشی رو دقیقاً در ظاهر سایتتون فراهم خواهد کرد برای شما و دکمه ی دیگری backend editor هست که محیط ویرایشی رو در همین قسمت ویرایش برگه ها برای شما به وجود خواهد آورد .

ویژال کامپوسر

برای اینکه بتونیم فقط لیست عناصر رو ببینیم روی دکمه ی BACKEND EDITOR کلیک می کنیم با این کار وارد محیط ویرایشی افزونه ویژال کامپوسر می شویم.

عناصر ویژال کامپوسر

حال با زدن علامت + در بالای صفحه میتونید لیست عناصر ویژال کامپوسر رو مشاهده کنید.

عناصر ویژال کامپوسر

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

لیستی که در پایین مشاهده میکنید عناصر قابل استفاده برای طراحی سایت هستند که در ادامه این مقاله توضیحات مختصری در باره هر کدام و پارامترهای آنها خواهم داد.

پارامتر ها همان تنظیماتی هستند که با زدن دکمه ای که مثل مداد هست ظاهر می شوند و شما میتوانید عناصر مود نظر خودتون رو مطابق با سلیقتون به کار ببرید.

  1. ردیف
  2. بلوک متنی
  3. جداکننده ی افقی
  4. جداکننده با متن
  5. باکس پیغام
  6. لایک فیسبوک
  7. دکمه ی توییت
  8. دکمه گوگل پلاس
  9. پینترست
  10. سوالات متداول (FAQ)
  11. تصویر تکی
  12. گالری تصاویر
  13. کروسل تصویر (carousel تصویر)
  14. تب ها
  15. تورها
  16. آکاردئون
  17. اسلایدر پست ها
  18. سایدبار یا ابزارک
  19. ویدئو پلیر
  20. گوگل مپ
  21. HTML خام
  22. JS خام
  23. ابزارک flickr
  24. نوار پیشرفت
  25. نمودار دایره ای
  26. فضای خالی
  27. هدینگ سفارشی
  28. شبکه بندی نوشته
  29. شبکه بندی رسانه
  30. شبکه بندی زیرساختی نوشته
  31. شبکه بندی زیرساختی رسانه
  32. آیکون
  33. دکمه
  34. فراخوانی کنش (call to action)
  35. فرم تماس نسخه ۷
  36. جستجوی وردپرس
  37. اطلاعات وردپرس
  38. آخرین دیدگاه های وردپرس
  39. تقویم وردپرس
  40. برگه های وردپرس
  41. ابربرچسب وردپرس
  42. فهرست دلخواه وردپرس
  43. متن وردپرس
  44. نوشته های تازه وردپرس
  45. دسته بندی های وردپرس
  46. بایگانی وردپرس
  47. خوراک وردپرس

خب میریم سراغ برسی عناصر.

۱ – ردیف :

این عنصر یکی از مهم ترین عناصر در افزوه ویژال کامپوسر هست . این عنصر برای تقسیم بندی صفحه ی شما به بلوک های کوچک تر به کار میروند . یان بلوک ها متشکل از یک یا چند ستون هستند . یعنی شما یک ردیف رو در نظرتون بگیرید . این ردیف میتونه متشکل از دو بلوک ۱/۲ و ۱/۲ باشه و یا همین ردیف میتونه متشکل از سه بلوک ۱/۳ و ۱/۳ و ۱/۳ باشه .

۲ – بلوک متنی :

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

۳ – جدا کننده افقی :

این عنصر یک خط افقی را به صفحه شما اضافه میکنه که در مواقعی که شما میخواین دو بخش رو از هم دیگه جدا کنید به کار میرود.

۴ – جدا کننده با متن :

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

۵ – باکس پیغام :

این عنصر یک پیغام مهم رو به صورت برجسته در وب سایت شما نشون میده که مثلا میتونید پیغام یک خطا یا اخطار یا هشدار رو باهاش قرار بدید.

۶ – لایک فیسبوک :

این عنصر دکمه لایک فیسبوک رو در داخل صفحه شما قرار میده تا بازدید کننده شما رو لایک کنند.

۷ – دکمه توییت :

این عنصر هم دکمه توییت رو به صفحه شما اضافه میکنده تا کاربران شما رو لایک کنند.

۸ – دکمه گوگل پلاس :

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

۹ – پینترست :

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

۱۰ – سوالات متداول (FAQ) :

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

۱۱ – تصویر تکی :

به کمک این عنصر میتونید یک تصویر تکی رو روی وب سایتتون قرار بدید

۱۲ -گالری تصاویر:

همان طور که از اسم این عنصر مشخص هست با تعدادی عکس سرو کار دارید و میتونید با این عنصر یک گالری تصاویر ریسپانسیو میتوانید در وب سایتتون ایجاد کنید . این گالری سه مدل Flex، Nivo و Image grid داره که میتونین یکی رو با سلیقه ی خودون انتخاب کنید.

۱۳ – کروسل تصویر (carousel تصویر) :

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

۱۴ – تب ها :

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

۱۵ – تور ها :

تور ها دقیقا بر عکس تب ها هستند . یعنی بجای اینکه چند ستون رو بر هم منطبق کنیم و قط سر برگ هاشونو مشاهده کنیم اینجا چند ردیف رو بر هم منطبق کرده و سر برگ هاشونو مشاهده می کنیم .

۱۶ – آکاردئون :

این عنصر نیز همانند تور ها می باشد با این تفاوت که هر ردیف به طور جدا گانه جمع می شود و با کلیک برروی هر ردیف محتوای آن باز میشود.

۱۷ – اسلایدر پست ها :

این عنصر دقیقا همانند اسلایدر تصاویر هست اما به جای تصاویر ، نوشته ها و برگه هارو نمایش میده . البته بهتر است که بگوییم تصاویر شاخص برگه ها و نوشته هارو نمایش میدهد .

۱۸ – ساید بار یا ابزارک :

این عنصر یک ناحیه ابزارکی یا سایدبار به سایت شما اضافه میکند.

۱۹ –  ویدئو پلیر :

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

۲۰ –  گوگل مپ :

این عنصر یک نقشه گوگل از طریق ifreme برای شما میسازد و بهترین راه برای نمایش آدرس محل کار برروی نقشه میباشد.

۲۱ – HTML خام :

این عنصر برای افرادی کاربرد دارد که با HTML آشنایی دارند و میخواند یک بخشی رو بر اساس کد نویسی به وب سایت خودشون اضافه کنند.

۲۲ – JS خام :

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

۲۳ -ابزارک flickr :

این عنصر امکان نمایش تصاویر فلیکرتون رو در سایت شما مهیا میکند.

۲۴ – نوار پیشرفت :

به کمک این عنصر میتونید نوار های پیشرفت با مقدار های دلخواه رو در سایتتون قرار بدید.

۲۵ – نمودار دایره ای  :
خب این عنصر هم بهتون اجازه میده تا به کمک مقدارهای مختلف، یه نمودار دایره ای زیبا ایجاد کنین و بعد استایل دلخواهتون رو بهش بدید.

۲۶ – عنصر خالی :

این عنصر یک فضای خالی در میان بقیه عناصر برای شما ایجاد میکند. این عنصر قابلیت تنظیم ارتفاع را دارد.

۲۷ – هدینگ سفارشی :

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

۲۸ – شبکه بندی نوشته :

به کمک این عنصر میتونید نوشته هارو به صورت جدول مانند روی وب سایتتون قرار بدید.

۲۹ – شبکه بندی رسانه :

با این عنصر میتوانید فایل های رسانه رو به صورت شبکه ای روی سایت نشان دهید.

۳۰ – شبکه بندی زیر ساختی نوشته :

این عنصر مثل “شبکه بندی نوشته” هست با این تفاوت که خودتون می توانیدخونه های این شبکه رو خودتون دستکاری کنید.

۳۱ – شبکه بندی زیرساختی رسانه :

این عنصر هم همانند عناصر با هست با این تفاوت که محتوای این عنصر رسانه ها هست.

۳۲ –  آیکون :

به کمک این عنصر می توانید ، به راحتی آیکون هایی رو از کتابخانه های زیر وارد کنید.

  • Font Awesome
  • Open icons
  • Typicons
  • Entype
  • Linecons

۳۳ – دکمه :

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

۳۴ – فراخوانی کنش (call to action) :

این عنصر یه دکمه ی کال تو اکشن رو ایجاد میکند . حالا این دکمه چیکار میکنه؟ به کمک این دکمه می تونین بازدیدکننده رو ترغیب می کنید تا کاری که شما می خواین (زدن دکمه) رو انجام بده. استایل این دکمه رو میتونین به دلخواه تغییر دهید.

 

 

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

  1. فرم تماس نسخه ۷

  2. جستجوی وردپرس

  3. اطلاعات وردپرس

  4. آخرین دیدگاه های وردپرس

  5. تقویم وردپرس

  6. برگه های وردپرس

  7. ابربرچسب وردپرس

  8. فهرست دلخواه وردپرس

  9. متن وردپرس

  10. نوشته های تازه وردپرس

  11. دسته بندی های وردپرس

  12. بایگانی وردپرس

  13. خوراک وردپرس

خب حالا که شما مقداری با افزونه ویژال کامپوسر آشنا شدید  میریم سراغ تنظیمات افزونه .

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

 

آموزش ویژال کامپوسر

شما میتوانید در قسمت تنظیمات افزونه ویژال کامپوسر مشخص کنید که افزونه ویژال کامپوسر به کدوم محتوا ( برگه ها و یا نوشته ) اعمال شود همچنین میتوانید سطح دسترسی هر کاربر به این افزونه رو نیز تعیین کنید. همچنین در این قسمت ریسپانسیو  بودن عناصر ویژال کامپوسر رو فعال و یا غیر فعال کنید.

تنظیمات ویژال کامپوسر

در قسمت بعدی که مدیریت نقش هس میتوانید دسترسی هارو تنظیم و در قسمت تنظیمات طراحی میتوانید با عال سازی گزینه “استفاده از طراحی سفارشی” رنگ ، حاشیه و عرض همه قسمت هارو به به دلخواه تنظیم کنید.

قسمت css سفارشی برای افرادی هست که به استایل نویسی آشنا هستند ومیخواهند از کد های css خودشون استفاده کنند.

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

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

انتخاب ساختار صفحه در ویژال

ساختار هر کدام از این موارد را می توانید از روی عکس آن ها متوجه بشید که هر کدام به چه نوعی هستند.

خب توی انی قسمت ساختارتون رو انتخاب کنید تا در ادامه نحوه کار رو بیشتر توضیح بدیم.

ویژال کامپوسر

در این قسمت ۵ بخش هست که در بخش یک میتوانید توضیحاتی را قرار دهید و در بخش ۲ تا ۴ میتوانید تصاویری را قرار دهید و همچنین در بخش ۵ نیز میتوانید متن دلخواه خودتون رو بنویسید.

حال به بخش ویرایش عناصر ویژال کامپوسر میرسیم این قسمت هارو با دقت بخونید چوی برای ویرایش همه عناصر ویژال کاموپوسر کاربرد دارد

ویژال کامپوسر

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

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

۳-  این گزینه مربوط به ساختار صفحه هست و میتوانید قالبی که خودتون ساختید رو ذخیره کنید و یا از قالب های پیش فرضی که روی ویژال کامپوسر هستند استفاه کنید.

۴ – در این قسمت می توانید استایل مورد نظرتون رو برای این صفحه تعیین کنید . این قسمت برای افرادی مورد نیاز هست که به استایل نویسی مسلط هستند.

۵ –  با کلیک برروی این گزینه به صفحه ویرایش بامحیط سایت هدایت می شوید.

۶ – همان طور که از شکل این قسمت مشخص هست می توانید با استفاده ازش ردیف مورد نظر رو جابجا کنید .

۷ – وقتی ماوس رو روی این قسمت ببرید یه بخشی باز میشه که می تونید باهاش ساختار هر ردیفتون رو مشخص کنید .

۸ – علامت + همیشه نشان دهنده افزودن یک قسمت و یا یک مورد جدید هست که میتونید در اینجا یک ستون به ردیفتون اضافه کنید.

۹ – اگر برروی این گزینه کلیک نمایید کل ردیف به همراه اجزای داخل آن جمع خواهد شد و دوباره با کلیک برروی آن ردیفتون باز خواهد شد.

۱۰ – این قسمت مربوط به ویرایش ردیف هست و میتوانید با کلیک برروی آن تنظیمات ردیف، مثل مارجین، پدینگ و حاشیه رو ویرایش کنید.

۱۱ – با کلیک برروی این گزینه میتوانید یک کپی از کل ردیفتون به همراه عناصر آن بردارید .

۱۲ –  از شکل این هم که پیداس  باهاش میتونید کل ردیف رو پاک کنید.

۱۳ – همچنین با استفاده از این مورد هم میتونید ستون موردنظرتون رو پاک کنید.

۱۴ – با کلیک برروی این گزینه صفحه ای براتون باز میشه که میتونید باهاش تظیمات ستون رو انجام بدید.

۱۵ – با کلیک برروی این گزینه صفحه عناصر باز خواهد شد که می توانید با استفاده ازش عناصر مورد نظروتون رو به ستون اضافه کنید.

۱۶ – با استفاده از این گزینه میتونید عنصر مورد نظر رو پاک کنید.

۱۷ – یک کپی از عنصر فعلیتون براتون تهیه میکنه .

۱۸ – پنجره تنظیمات عنصری که دارید ازش استفاده میکنید باز میشه و میتونید ویژگی های عنصر رو تغییر دهید.

۱۹ – با استفاده از این گزینه میتوانید عنصر مورد نظر رو جابجا کنید

خب تمامی موارد و بخش های ویژال کامپوسر رو به صورت خلاصه برای شما توضیح دادیم و با مقداری تمرین میتوانید صفحه های دلخواه خودتون رو با ویژال کامپوسر طراحی و اجرا کنید.

درباره ی بهنام باقری

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

پاسخ دهید

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

جهت تشخیص انسان از ربات معادله زیر را حل کنید *

عضویت در کانال تلگرام ایرانی تم