خراسان جنوبی - بیرجند
حد فاصل میدان ابوذر و طالقانی یک
تلفن ثابت :
056-32222900
تماس با ما :
ارسال تیکت

آموزش ساخت انواع دکمه و باکس در وردپرس

آموزش ساخت انواع دکمه و باکس در وردپرس

Learn how to create buttons and boxes in WordPress

 

shortcode ultimate plugin 780x350 آموزش ساخت انواع دکمه و باکس در وردپرس

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

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

آموزش ساخت شورت کد در وردپرس و نمایش در سایت

افزونه‌ای که برای ساخت انواع دکمه و باکس در وردپرس قصد دارم بهتون معرفی کنم با نام Shortcodes Ultimate در مخزن وردپرس به ثبت رسیده و تاکنون موفق شده بیش از 700.000 نصب فعال و کسب امتیاز 4.9 را ازآن خودش بکنه که با استفاده کردن از این افزونه میتونید انواع مختلفی از دکمه، تب، آیکون، باکس، آکاردئون، گالری عکس و… را در نوشته‌ها و ابزارک وردپرس قرار داده و نمایش بدین. برای استفاده از این افزونه کافیه روی دکمه زیر کلیک کرده و بعد از اینکه وارد صفحه افزونه در مخزن وردپرس شدید، مشابه چیزی که در مقاله نصب افزونه در وردپرس توضیح دادم افزونه را نصب و فعال کنید و در نهایت با استفاده از آموزش افزونه Shortcodes Ultimate کارهای شخصی سازی تنظیمات و نحوه استفاده از افزونه را دنبال کنید.

بعد از نصب و فعال سازی افزونه مشابه تصویر زیر منویی با نام Shortcodes اضافه خواهد شد. روی زیر منوی Settings مراجعه کنید و قبل از هر کاری تنظیمات افزونه Shortcodes Ultimate را شخصی سازی کنید.

32 copy آموزش ساخت انواع دکمه و باکس در وردپرس

Custom formatting: با فعال کردن این گزینه اگر هر مشکلی با قالب بندی افزونه در توزیع کدها وجود داشته باشه برطرف خواهد شد.

Skip default settings: با فعال کردن این گزینه کدهای کوتاه به صورت خلاصه‌تر درج خواهند شد. حتما این گزینه رو هم فعال کنید.

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

Custom CSS code: این گزینه هم برای قرار دادن استایل شخص در افزونه هست. به عنوان نمونه اگر فونتی که برای المان‌ها استفاده میشه از قالب شما خونده نشد میتونید با تعریف کردن توسط زبان CSS کاری کنید که با فونت سایت هماهنگ بشه.

33 copy آموزش ساخت انواع دکمه و باکس در وردپرس

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

34 copy آموزش ساخت انواع دکمه و باکس در وردپرس

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

  • افزودن هدینگ در وردپرس
  • افزودن انواع تب در وردپرس
  • افزودن آکاردئون در وردپرس
  • افزودن جدا کننده در وردپرس
  • افزودن هایلایت متن در وردپرس
  • افزودن لیبل در وردپرس
  • افزودن نقل قول در وردپرس
  • افزودن فریم در وردپرس
  • افزودن ستون در وردپرس
  • افزودن لیست در وردپرس
  • افزودن دکمه در وردپرس
  • افزودن لیست سرویس در وردپرس
  • افزودن باکس در وردپرس
  • افزودن یادداشت در وردپرس
  • افزودن لایت باکس در وردپرس
  • افزودن تولتیپ متن در وردپرس
  • افزودن ویدئو و صوت در وردپرس
  • افزودن جدول در وردپرس
  • افزودن جدول قیمت گذاری در وردپرس
  • افزودن گالری و انیمیشن در وردپرس
  • افزودن کد QR در وردپرس
  • و…

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

34 copy 1 آموزش ساخت انواع دکمه و باکس در وردپرس

.بعد از کلیک روی المان مورد نظر که در این مثال دکمه هست، پنجره‌ای بسته به نوع المان و تنظیماتی که در اختیارتون قرار داده میشه باز خواهد شد که میتونید با استفاده از گزینه‌ها و فیلدهایی که قرار داره کلیه موارد اعم از عناوین، رنگ‌ها، استایل، نوع و… را شاخصی سازی کنید. در اینجا من دکمه رو انتخاب کردم که پنجره ای به شکل زیر نشون داده میشه.

35 copy آموزش ساخت انواع دکمه و باکس در وردپرس

Link: لینکی که کاربر بعد از کلیک کردن روی دکمه باید به اونجا هدایت بشه را وارد کنید.

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

Style: از اینجا هم میتونید استایل دکمه رو در یکی از حالت‌های فلت، گرد، حبابی، نرم، سه بعدی و… انتخاب کنید.

36 copy آموزش ساخت انواع دکمه و باکس در وردپرس

Background: از اینجا رنگ پس زمینه برای دکمه را انتخاب کنید.

Text color: از اینجا رنگ متن روی دکمه را انتخاب کنید.

Size: از اینجا اندازه دکمه را انتخاب کنید.

Fluid: با انتخاب این گزینه روی حالت YES دکمه به صورت تمام عرض نمایش داده خواهد شد.

37 copy آموزش ساخت انواع دکمه و باکس در وردپرس

Centered: با انتخاب این گزینه روی حالت YES دکمه به صورت وسط چین نمایش داده خواهد شد.

Radius: با استفاده از این گزینه میتونید میزان گرد کردن کوشه‌های دکمه را بر حسب پیکسل انتخاب کنید.

Icon: برای اینکه امکان استفاده از آیکون را در دکمه داشته باشید ابتدا روی دکمه icon picke کلیک کنید و سپس از بین لیست آیکون‌ها یک آیکون مرتبط را انتخاب کنید.

Icon color: از این بخش هم میتونید رنگ دلخواه برای آیکون را انتخاب کنید.

38 copy آموزش ساخت انواع دکمه و باکس در وردپرس

Text shadow: با استفاده از این قسمت میتونید رنگ سایه برای متن دکمه به همراه میزان سایه را بر حسب پیکسل انتخاب کنید.

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

Content: در این بخش عنوان دکمه را وارد کنید.

در نهایت بعد از هر تغییری که روی گزینه‌های بالا اعمال میکنید چند لحظه ای که مکث کنید آخرین تغییرات ذخیره شده روی هر المان به صورت زنده و در قالب پیش نمایش در قسمت Preview قابل مشاهده است. بعد از نهایی شدن روی دکمه Insert Shortcode که کلید کنید، شورت کدهای دکمه به صورت زیر در ویرایشگر وردپرس اضافه خواهند شد.

39 copy آموزش ساخت انواع دکمه و باکس در وردپرس

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

40 copy آموزش ساخت انواع دکمه و باکس در وردپرس

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

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


دیدگاهتان را بنویسید