ساخت دکمه در وردپرس؛ با بلوک داخلی، افزونه و کدنویسی

ساخت دکمه در وردپرس با ۳ روش

برای ساخت دکمه در وردپرس سه راه اصلی دارید. می‌تونید از بلوک داخلی «دکمه‌ها» استفاده کنید، با افزونه MaxButtons دکمه‌های قابل‌استفاده دوباره بسازید یا ظاهر دکمه رو با HTML و CSS خودتون طراحی کنید.

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

قبل از شروع، کدوم روش برای شما بهتره؟

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

اگه می‌خواید یک طرح مشخص رو در چند صفحه استفاده کنید و همه نمونه‌ها رو از یک بخش مدیریت کنید، افزونه MaxButtons انتخاب کاربردی‌تریه. کدنویسی هم وقتی مناسب‌تره که ظاهر یا رفتاری دقیق می‌خواید که ابزارهای آماده در اختیارتون نمی‌ذارن.

• بلوک داخلی وردپرس: ساده، سریع و مناسب بیشتر کاربران
• افزونه MaxButtons: مناسب دکمه‌های پیشرفته و قابل‌استفاده دوباره
• کدنویسی: مناسب کنترل دقیق‌تر روی ظاهر دکمه

روش اول: ساخت دکمه با بلوک داخلی وردپرس

ویرایشگر وردپرس یک بلوک آماده به نام «دکمه‌ها» داره. با این بلوک می‌تونید بدون افزونه و بدون نوشتن کد، یک یا چند دکمه به محتوای سایتتون اضافه کنید.

اضافه‌کردن بلوک دکمه‌ها

1. نوشته یا برگه موردنظرتون رو توی ویرایشگر وردپرس باز کنید.
2. روی علامت مثبت + کلیک کنید تا فهرست بلوک‌ها باز بشه.
3. عبارت «دکمه‌ها» یا Buttons رو جست‌وجو کنید.
4. روی بلوک دکمه‌ها کلیک کنید تا به صفحه اضافه بشه.

داخل بلوک دکمه‌ها، یک بلوک جدا برای خود دکمه می‌بینید. این ساختار کمک می‌کنه چند دکمه رو هم داخل یک ردیف قرار بدید.

نوشتن متن و قراردادن لینک روی دکمه

روی متن دکمه کلیک کنید و یک عبارت کوتاه مثل «مشاهده محصولات»، «ثبت‌نام» یا «دانلود فایل» بنویسید. بهتره متن دکمه دقیقاً بگه بعد از کلیک چه اتفاقی می‌افته.

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

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

تغییر رنگ، اندازه، حاشیه و فاصله‌های دکمه

دکمه رو انتخاب کنید و نوار تنظیمات سمت چپ یا راست ویرایشگر رو باز کنید. جای این نوار به زبان پیشخوانتون بستگی داره. توی بخش «سبک‌ها» یا Styles می‌تونید رنگ متن، رنگ پس‌زمینه، نوع حاشیه و گردی گوشه‌ها رو تغییر بدید.

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

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

تنظیم بازشدن لینک در زبانه جدید

دکمه رو انتخاب کنید و دوباره روی آیکون لینک بزنید. تنظیمات لینک رو باز کنید و گزینه «بازکردن در زبانه جدید» رو فعال کنید. این گزینه بیشتر برای لینک‌هایی مناسبه که کاربر رو به یک سایت دیگه می‌برن.

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

ساخت چند دکمه کنار هم

بلوک اصلی «دکمه‌ها» رو انتخاب کنید و از علامت مثبت داخل اون برای افزودن دکمه بعدی کمک بگیرید. بعد می‌تونید چینش دکمه‌ها، فاصله بین اون‌ها و جهت قرارگیریشون رو از نوار ابزار یا تنظیمات بلوک تغییر بدید.

برای نمونه، می‌تونید یک دکمه اصلی با متن «خرید دوره» و یک دکمه دوم با متن «مشاهده سرفصل‌ها» بسازید. بهتره فقط دکمه مهم‌تر رنگ پررنگ داشته باشه تا انتخاب اصلی برای کاربر واضح بمونه.

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

MaxButtons برای زمانی مناسبه که می‌خواید دکمه‌هایی با تنظیمات بیشتر بسازید یا یک دکمه رو در چند نوشته و برگه استفاده کنید. برای یک دکمه ساده، بلوک داخلی وردپرس معمولاً مسیر کوتاه‌تریه.

نصب و فعال‌کردن افزونه MaxButtons

1. از پیشخوان وردپرس وارد «افزونه‌ها ← افزودن افزونه تازه» بشید.
2. عبارت MaxButtons رو توی کادر جست‌وجو بنویسید.
3. نام، آیکون و اطلاعات افزونه رو با صفحه رسمی MaxButtons در مخزن وردپرس مقایسه کنید تا افزونه درست رو نصب کنید.
4. روی «نصب» بزنید و بعد از پایان نصب، گزینه «فعال‌کردن» رو انتخاب کنید.

ساخت اولین دکمه

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

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

تنظیم متن، لینک، رنگ، اندازه و حاشیه

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

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

تنظیم حالت هاور دکمه

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

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

قراردادن دکمه داخل نوشته یا برگه

بعد از ذخیره دکمه، MaxButtons برای دکمه یک شورت‌کد در اختیارتون می‌ذاره. شورت‌کد یک عبارت کوتاه داخل کروشه هست که وردپرس اون رو به دکمه ذخیره‌شده تبدیل می‌کنه.

1. شورت‌کد دکمه رو از صفحه مدیریت MaxButtons کپی کنید.
2. نوشته یا برگه موردنظرتون رو باز کنید.
3. یک بلوک «کد کوتاه» یا Shortcode اضافه کنید.
4. شورت‌کد رو داخل بلوک بچسبونید و صفحه رو ذخیره کنید.

در پایان، صفحه منتشرشده رو باز کنید و متن، ظاهر و آدرس دکمه رو آزمایش کنید.

ویرایش و استفاده دوباره از دکمه

هر وقت ظاهر یا لینک دکمه تغییر کرد، از بخش MaxButtons همون دکمه رو ویرایش کنید. صفحه‌هایی که شورت‌کد همون دکمه ذخیره‌شده رو دارن، معمولاً نسخه ویرایش‌شده رو نمایش می‌دن. بعد از هر تغییر، یکی از این صفحه‌ها رو باز کنید و نتیجه رو بررسی کنید. این ویژگی برای دکمه‌هایی مثل «خرید محصول» یا «تماس با ما» که در چند صفحه تکرار می‌شن مفیده.

روش سوم: ساخت دکمه با کدنویسی

اگه با کد آشنا هستید، می‌تونید یک لینک HTML بسازید و ظاهر اون رو با CSS تغییر بدید. HTML ساختار دکمه رو مشخص می‌کنه و CSS مسئول رنگ، اندازه، فاصله و حالت‌های ظاهریه.

قبل از افزودن کد به سایت اصلی، نسخه پشتیبان تهیه کنید. فایل‌های قالب اصلی مثل functions.php و style.css رو هم مستقیم ویرایش نکنید، چون اشتباه توی کد می‌تونه سایت رو دچار مشکل کنه و تغییرها ممکنه با به‌روزرسانی قالب از بین برن.

ساخت دکمه با HTML معتبر

برای لینکی که کاربر رو به یک صفحه دیگه می‌بره، از عنصر <a> استفاده کنید. توی ویرایشگر وردپرس یک بلوک «HTML سفارشی» اضافه کنید و کد زیر رو داخل اون بذارید:

<a class="mihanwp-cta" href="https://example.com/">مشاهده محصولات</a>

آدرس https://example.com/ رو با لینک واقعی صفحه مقصد عوض کنید. متن «مشاهده محصولات» هم باید متناسب با کاری باشه که کاربر بعد از کلیک انجام می‌ده.

اگه قرار نیست کاربر به صفحه دیگه‌ای بره و دکمه یک عمل داخل صفحه مثل بازکردن پنجره یا ارسال فرم رو اجرا می‌کنه، استفاده از عنصر <button> انتخاب درست‌تریه. اجرای چنین کاری معمولاً به JavaScript هم نیاز داره و برای کاربر مبتدی پیشنهاد نمی‌شه.

شخصی‌سازی ظاهر دکمه با CSS

کد CSS زیر یک ظاهر ساده و خوانا برای لینک قبلی می‌سازه. رنگ‌های این نمونه ثابت هستن، پس بهتره اون‌ها رو با رنگ‌های سایتتون هماهنگ کنید و خوانایی متن رو دوباره بسنجید:

.mihanwp-cta {
  display: inline-block;
  padding: 12px 20px;
  color: #ffffff;
  background-color: #1565c0;
  border: 2px solid #1565c0;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mihanwp-cta:hover {
  color: #ffffff;
  background-color: #0d47a1;
  border-color: #0d47a1;
}

.mihanwp-cta:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

حالت focus-visible برای کاربرانیه که با صفحه‌کلید بین لینک‌ها حرکت می‌کنن. خط دور دکمه کمک می‌کنه جای انتخاب فعلی رو راحت‌تر ببینن، پس بهتره اون رو حذف نکنید.

اضافه‌کردن امن کد بدون ویرایش قالب اصلی

محل افزودن CSS به نوع قالب و نسخه وردپرستون بستگی داره. توی قالب‌های کلاسیک ممکنه گزینه «CSS اضافی» رو در مسیر «نمایش ← سفارشی‌سازی» ببینید. توی بعضی قالب‌های بلوکی هم این امکان از بخش سبک‌های ویرایشگر سایت در دسترسه، ولی مسیر و نمایش اون می‌تونه با قالب و نسخه وردپرس فرق داشته باشه.

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

مقایسه روش‌های ساخت دکمه در وردپرس

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

نکات مهم برای ساخت یک دکمه بهتر

انتخاب متن روشن و کوتاه

عبارت‌هایی مثل «اینجا کلیک کنید» به‌تنهایی اطلاعات زیادی به کاربر نمی‌دن. متن‌هایی مثل «دانلود نسخه رایگان»، «مشاهده قیمت‌ها» یا «شروع ثبت‌نام» مقصد و نتیجه کلیک رو روشن‌تر می‌کنن.

استفاده از رنگ مناسب و خوانا

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

بررسی دکمه در موبایل

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

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

توجه به بازشدن لینک و دسترس‌پذیری

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

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

جمع‌بندی

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

اگه دکمه‌های قابل‌استفاده دوباره با تنظیمات بیشتر می‌خواید، MaxButtons گزینه مناسبیه. کدنویسی HTML و CSS هم کنترل بیشتری بهتون می‌ده، ولی به بررسی دقیق‌تر و رعایت نکات ایمنی نیاز داره.

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

تیم تولید محتوا

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