نحوه ایجاد دکمه در وردپرس با 3 روش مختلف (با افزونه و بدون افزونه)

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

نحوه ساخت دکمه در وردپرس

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

1. نحوه ساخت دکمه در وردپرس با استفاده از ویرایشگر گوتنبرگ
2. نحوه ایجاد دکمه در وردپرس با استفاده از افزونه
3. نحوه اضافه کردن دکمه کلیک برای تماس در وردپرس

در ادامه توضیحاتی در خصوص هریک از این روش ها در اختیار شما قرار می دهیم. امیدوارم تا انتهای این مطلب مارو همراهی کنید.

بیشتر بخوانید: بهترین افزونه های ساخت دکمه حرفه ای و زیبا در وردپرس

1- نحوه ساخت دکمه در وردپرس با استفاده از ویرایشگر گوتنبرگ

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

برای انجام اینکار؛ در ابتدا وارد پیشخوان وردپرس خود شده و سپس یک صفحه یا نوشته که قصد دارید در آن دکمه اضافه کنید را باز نمائید. پس از اینکه وارد صفحه ویرایشگر شدید، روی آیکون “+” کلیک کنید تا یک بلوک جدید به صفحه شما اضافه شود. سپس بلوک دکمه را در قسمت Layout Elements انتخاب نمائید.

سپس بلوک دکمه اضافه شده را مشاهده خواهید کرد.

کافیست روی قسمت “افزودن متن” کلیک و متن دکمه دلخواه خود را وارد کنید. پس از آن، باید URL صفحه‌ای را که قصد دارید به آن لینک دهید را در بخش “جای ‌گذاری URL یا تایپ برای جستجو” در زیر دکمه وارد نمائید. پس از اتمام، روی نماد Apply کلیک کنید.

بیشتر بخوانید: نحوه رفع خطای آپلود تصویر HTTP در وردپرس؛ 7 روش حل مشکل آپلود نشدن عکس

اگر می خواهید دکمه را در مرکز نمایش دهید، می توانید روی نماد Align Center در نوار ابزار بلوک خود در بالا کلیک کنید.

در مرحله بعد، می توانید سبک دکمه خود را سفارشی کنید. به عنوان مثال: می توانید رنگ پس زمینه و بسیاری از موارد دیگر را به دلخواه خود تغییر دهید.

به طور کلی؛ سه سبک دکمه وجود دارد که می توانید انتخاب کنید: پیش فرض، طرح کلی و مربع. شما می ‌توانید هر کدام را با کلیک کردن روی آن‌ ها امتحان و به دلخواه یکی را انتخاب نمائید.

بیشتر بخوانید: آموزش ایجاد برگه دلخواه با طرح سفارشی در وردپرس

بخش تنظیمات رنگ شامل پنج تغییر رنگ برای پس ‌زمینه دکمه و متن دکمه است. نه تنها این، بلکه می توانید با کلیک بر روی گزینه “سفارشی سازی رنگ” از رنگ دلخواه خود نیز استفاده کنید.

پس از اینکه طراحی دکمه را به گونه دلخواه سفارشی کردید، می توانید روی دکمه “ذخیره” کلیک کنید تا تغییرات شما ذخیره شود. سپس می توانید پیش نمایش دکمه را مشاهده کنید.

بیشتر بخوانید: آموزش نحوه ویرایش متن در وردپرس

2- نحوه ایجاد دکمه در وردپرس با استفاده از افزونه ها

• افزونه Forget About Shortcode Buttons

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

افزونه Forget About Shortcode Buttons یک افزونه رایگان وردپرس است که به شما امکان اضافه کردن دکمه‌ های CSS در ویرایشگر متن را می دهد. همچنین این پلاگین روند افزودن دکمه‌ ها به پست‌ ها و صفحات را بسیار سریع می کند و در عین حال به شما کمک می کند تا ظاهر و سبک دکمه های خود را نیز تنظیم کنید.

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

پس از فعال کردن افزونه، یک پست جدید ایجاد کنید و یا یک پست موجود را ویرایش نمائید. سپس در صفحه ویرایشگر، گزینه ای به نام Insert Button را مشاهده خواهید کرد.

حال برای درج یک دکمه جدید در پست خود، کافیست باید بر روی دکمه درج کلیک کنید. با این کار یک پنجره پاپ آپ برای شما ظاهر می شود که در آن می توانید دکمه جدید خود را طراحی نمائید.

ابتدا باید متن و آدرس دکمه خود را اضافه کنید. پس از وارد کردن متن می توانید پیش نمایش زنده دکمه خود را نیز مشاهده کنید. در مرحله بعد، می توانید تگ “نوفالو” را به لینک خود اضافه و با کلیک بر روی گزینه های چک باکس زیر، لینک را در یک تب جدید باز نمائید.

بیشتر بخوانید: افزونه Contact Form By Elfsight | ساخت انواع فرم تماس در وردپرس

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

همچنین در مرحله بعد، می توانید رنگ بندی متن و رنگ پس زمینه را برای دکمه خود با کلیک بر روی آیکون “رنگ” انتخاب کنید.

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

شما همچنین می توانید اندازه دکمه را از بسیار کوچک تا بسیار بزرگ تنظیم کنید همچنین می‌توانید تراز دکمه‌ها را با انتخاب متن دکمه و استفاده از دکمه‌های نوار ابزار در ویرایشگر کلاسیک تنظیم کنید. در نهایت پس از اینکه دکمه خود را طراحی کردید، کافیست روی دکمه “آپدیت” کلیک کنید تا تغییرات شما اعمال شود.

بیشتر بخوانید: افزونه ایرانی لایک مطالب وردپرس WP Ulike

• ایجاد دکمه با استفاده از افزونه wordpress Button Plugin MaxButtons

مرحله 1: نصب افزونه MaxButtons

1. وارد پیشخوان وردپرس شوید.

2. از منو سمت راست روی افزونه‌ها > افزودن کلیک کنید.

3. در قسمت جستجو، بنویسید: MaxButtons

4. افزونه‌ای با نام کامل MaxButtons – WordPress Button Plugin را پیدا کنید.

5. روی نصب و سپس فعال‌سازی کلیک کنید.

پس از نصب، یک گزینه جدید به منو اضافه می‌شود به نام MaxButtons.

مرحله 2: ساخت دکمه جدید

1. از منوی وردپرس روی MaxButtons > Add New کلیک کنید.

2. حالا صفحه‌ای برای طراحی دکمه باز می‌شود. قسمت‌های مهم این صفحه:

قسمت‌های اصلی برای تنظیم دکمه:

• Button Name: نام دلخواه برای دکمه (مثلاً: Button 1)

• Button Text: متنی که روی دکمه نمایش داده می‌شود (مثلاً: «هم‌اکنون دانلود کنید»)

• URL: لینکی که کاربر با کلیک روی دکمه به آن منتقل می‌شود (مثلاً: https://yourwebsite.com/download)

مرحله 3: استایل‌دهی به دکمه

در همان صفحه ساخت دکمه، تب‌هایی برای تنظیم ظاهر دکمه دارید:

⚙️ تنظیمات اصلی:

• Text Size: اندازه فونت متن روی دکمه (مثلاً 18px)

• Button Width / Height: عرض و ارتفاع دکمه (مثلاً: عرض 200px، ارتفاع 50px)

• Text Color: رنگ متن روی دکمه (مثلاً سفید: #ffffff)

• Button Color: رنگ پس‌زمینه دکمه (مثلاً آبی: #0073e6)

• Hover Effects: تنظیمات رنگ هنگام هاور شدن (موس روی دکمه قرار می‌گیرد)

تنظیمات حاشیه و گردی:

• Border Radius: گردی گوشه‌ها (مثلاً: 10px برای دکمه گرد)

• Border Width / Color: ضخامت و رنگ حاشیه

مرحله 4: ذخیره و استفاده از دکمه

1. پس از طراحی دکمه، روی دکمه آبی رنگ Save کلیک کنید.

2. حالا به شما یک شورت‌کد (Shortcode) داده می‌شود، شبیه به:

   [maxbutton id="1"]


3. این شورت‌کد را کپی کنید و در هر نوشته یا برگه‌ای که می‌خواهید دکمه نمایش داده شود، جای‌گذاری کنید.

در گوتنبرگ، از بلوک کد کوتاه (Shortcode) استفاده کنید و آن را در داخل پست قرار دهید.

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

3- نحوه اضافه کردن دکمه کلیک برای تماس در وردپرس

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

برای افزودن این قابلیت به سایت، بهترین و ساده ترین روش استفاده از افزونه WP Call Button می باشد. این یک افزونه رایگان است که در مخزن وردپرس به ثبت رسیده و هم اکنون دارای بیش از 30 هزار نصب فعال می باشد. این افزونه به شما این امکان را می دهد که دکمه تماس زیبا را تنها با چند کلیک و بدون نیاز به دانش کدنویسی در وب سایت خود اضافه کنید.

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

پس از فعال شدن افزونه، وارد پیشخوان وردپرس خود شده و سپس از بخش “تنظیمات” روی گزینه “WP Call Button” کلیک کنید تا وارد صفحه پیکربندی افزونه شوید.

در ابتدا با تنظیمات “دکمه تماس چسبنده” مواجه خواهید شد. در واقع؛ دکمه تماس چسبنده یک ویژگی بهینه سازی شده برای تبدیل است که دکمه تماس را همراه با کاربران در هنگام مرور سایت شما حرکت می دهد.

پس از آن باید دکمه “الان تماس بگیر یا Call Now” را فعال کنید. برای انجام اینکار؛ روی کلید سوئیچ کلیک نمائید. پس از آن باید شماره تلفن همراه خود را وارد کنید. به سادگی کشور خود را انتخاب و شماره تلفن کسب و کار خود را وارد نمائید.

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

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

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

بیشتر بخوانید: معرفی بهترین افزونه ویرایشگر متن برای وردپرس

پس از آن، می‌ توانید متن دکمه، رنگ دکمه، رنگ متن، اندازه فونت را سفارشی و همچنین آیکون تلفن همراه خود را نشان و یا مخفی کنید.

در نهایت پس از طراحی، باید تغییرات خود را ذخیره کنید.

بیشتر بخوانید: بهترین افزونه های فرم تماس برای وردپرس

سوالات متداول

بیشتر بخوانید: آموزش افزونه Contact Form 7 | تنظیمات و کار با افزونه فرم تماس 7

جمع بندی: نحوه ایجاد دکمه در وردپرس 

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

منبع: wpbeginner