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

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

توی این آموزش، اول روش پیشنهادی و امروزی وردپرس رو قدم‌به‌قدم می‌بینید. بعد سراغ افزونه Forget About Shortcode Buttons می‌ریم تا اگه هنوز با ویرایشگر کلاسیک کار می‌کنید، بتونید توی اون محیط هم دکمه بسازید. این افزونه قدیمیه و برای سایت‌های تازه پیشنهاد اول ما نیست؛ پس قبل از نصب، حتماً بخش هشدار سازگاری رو بخونید.

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

دکمه به کاربر نشون می‌ده برای انجام کار اصلی صفحه باید کجا کلیک کنه؛ مثلاً یک فایل رو دانلود کنه، وارد صفحه خرید بشه یا فرم ثبت‌نام رو باز کنه. وقتی متن دکمه روشن باشه و اون رو جای مناسبی بذارید، کاربر بین چند لینک مختلف دنبال مرحله بعد نمی‌گرده. همین جزئیات ساده می‌تونه تجربه کاربری بهتری برای سایتتون بسازه.

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

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

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

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

تغییر رنگ، اندازه و ظاهر دکمه

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

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

باز کردن لینک در تب جدید

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

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

بلوک Buttons مثل یک ظرفه که چند بلوک Button رو کنار هم نگه می‌داره. بلوک اصلی رو انتخاب کنید و با گزینه افزودن، دکمه‌های بعدی رو بسازید. بعد از تنظیمات همین بلوک می‌تونید چینش و فاصله بین دکمه‌ها رو تغییر بدید.

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

ساخت دکمه در ویرایشگر کلاسیک

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

وضعیت فعلی افزونه Forget About Shortcode Buttons

این افزونه هنوز توی مخزن رسمی وردپرس در دسترسه، ولی صفحه رسمی اون هشدار می‌ده که با سه نسخه اصلی اخیر وردپرس آزمایش نشده. در زمان این به‌روزرسانی، نسخه 2.1.3 افزونه بیشتر از ۲۰ هزار نصب فعال داره، به وردپرس 4.2 یا بالاتر نیاز داره و سازگاری اون فقط تا وردپرس 6.7.10 ثبت شده. نسخه‌های قدیمی سری 1.x هم برای وردپرس 3.9 تا 4.1 پیشنهاد شده بودن.

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

آموزش کار با افزونه Forget About Shortcode Buttons

از پیشخوان وردپرس به بخش «افزونه‌ها > افزودن افزونه تازه» برید و عبارت Forget About Shortcode Buttons رو جستجو کنید. قبل از نصب، اطلاعات سازگاری افزونه رو با نسخه وردپرس سایتتون مقایسه کنید. اگه شرایط مناسب بود، روی «نصب» و بعد «فعال‌سازی» بزنید.

بعد از فعال‌سازی، بخش تنظیمات جداگانه‌ای به پیشخوان اضافه نمی‌شه. ابزار افزونه رو باید داخل ویرایشگر کلاسیک ببینید. اگه با ویرایشگر بلوکی کار می‌کنید، ممکنه گزینه Insert Button نمایش داده نشه؛ چون این افزونه برای نوار ابزار TinyMCE ساخته شده. TinyMCE همون محیط نوشتاری ویرایشگر کلاسیکه.

یکی از نوشته‌های قدیمی رو ویرایش کنید یا از مسیر «نوشته‌ها > افزودن نوشته» یک نوشته تازه بسازید. توی نوار ابزار ویرایشگر باید گزینه Insert Button رو ببینید. روی این گزینه بزنید تا پنجره طراحی دکمه باز بشه.

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

گزینه Open Link in a New Tab لینک رو توی یک تب تازه باز می‌کنه. گزینه Add Nofollow هم ویژگی nofollow رو به لینک اضافه می‌کنه. nofollow یعنی به موتور جستجو می‌گید این لینک رو مثل یک تأیید عادی برای رتبه‌بندی حساب نکنه. لازم نیست این گزینه رو برای همه لینک‌ها روشن کنید؛ فقط وقتی دلیل مشخصی دارید سراغش برید.

اضافه کردن آیکون به دکمه

اگه می‌خواید کنار نوشته دکمه یک آیکون بذارید، بخش Icon رو باز کنید. از فهرست آیکون‌ها گزینه‌ای رو بردارید که با کار دکمه ارتباط داره. مثلاً آیکون دانلود برای دکمه دریافت فایل انتخاب مناسبیه. اگه فهرست دسته‌بندی توی نسخه شما نمایش داده می‌شه، اول دسته مرتبط رو انتخاب کنید تا زودتر به آیکون دلخواهتون برسید.

گزینه‌های Before و After مشخص می‌کنن آیکون قبل از نوشته قرار بگیره یا بعد از اون. وقتی دکمه رو اضافه کردید، ظاهرش رو هم با رایانه و هم با موبایل ببینید تا مطمئن بشید نوشته و آیکون از کادر بیرون نمی‌زنن.

ذخیره قالب دکمه در بخش Templates

بخش Templates برای ذخیره یک مدل آماده از دکمه کاربرد داره. فرض کنید دکمه‌ای با رنگ و اندازه دلخواهتون ساختید و می‌خواید همین ظاهر رو دوباره استفاده کنید. کافیه اون رو به‌عنوان قالب ذخیره کنید. موقع ساخت دکمه‌های بعدی، قالب آماده رو بردارید و فقط نوشته یا لینک رو عوض کنید.

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

برای بیشتر سایت‌های امروزی، بلوک داخلی Buttons بهترین نقطه شروعه. این بلوک همراه خود وردپرس نصب شده، تنظیمات ضروری رو در اختیارتون می‌ذاره و افزونه اضافه‌ای هم به سایت تحمیل نمی‌کنه. افزونه Forget About Shortcode Buttons بیشتر برای وقتیه که واقعاً به ویرایشگر کلاسیک وابسته‌اید و بعد از آزمایش، از سازگاری اون با سایتتون مطمئن شده‌اید.

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

جمع‌بندی

برای ساخت دکمه در وردپرس، اول سراغ بلوک داخلی Buttons برید؛ چون بدون نصب افزونه، همه تنظیمات اصلی مثل متن، لینک، رنگ، اندازه و چینش رو در اختیارتون می‌ذاره. اگه هنوز از ویرایشگر کلاسیک استفاده می‌کنید، افزونه Forget About Shortcode Buttons هم می‌تونه کمکتون کنه، ولی بهتره قبل از نصب، سازگاری اون رو روی یک سایت آزمایشی بررسی کنید.

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

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

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

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