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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 دمو آنلاین افزونه Shortcode Ultimate