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

ایجاد دکمه در وردپرس

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

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

در وردپرس راه های زیادی برای ایجاد دکمه در سایت وجود دارد، یکی از روش ها استفاده از کد زیر در ویرایشگر است. بله درسته، با کدهای html و css میتونید اینکار را کنید ولی یکم زمان بر است و وقت گیر و باید با شورتکد این کار را انجام دهید.

کد زیر را در فایل قالب functions.php نوشته و ذخیره کنید.

function sButton($atts, $content = null)
{
   extract(shortcode_atts(array('link' => '#'), $atts));
   return '<a class="button" href="'.$link.'"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('button', 'sButton');

با نوشتن کد بالا در ویرایگشر دکمه زیر در سایت خود مشاهده می‌کنید. دکمه اصلا جذاب نیست و خیلی ساده است. برای جذاب کرن دکمه میتونید کد css زیر را به کار ببرید.

حال کدهای زیر را به فایل style.css قالب خود اضافه کنید.

a.button {
display: inline-block;
font-size: 13px; font-weight: bold;
height: 31px;
padding-right: 10px;
color: #183f4c;
background: transparent url(images/sm_a.webp) no-repeat top right;
text-decoration: none;
}
a.button:hover
{ color: #fff;
 background-position: bottom right;
text-decoration: none;
 }
 a.button span {
display: block;
line-height: 14px;
padding: 8px 0 9px 10px;
background: transparent url(images/sm_span.webp) no-repeat top left;
 }
 a.button:hover span {
 color: #fff; background-position: bottom left;
 }

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

<a class="vc_btn vc_btn-black vc_btn-sm vc_btn_square " href=""http://google.com"">ارسال کن</a>

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

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

استفاده از افزونه مطلبوب‌تر از کده، به این خاطر که کدها را کاهش میدهد و عملکرد نرم‌افزار را بهبود می‌بخشند. بسیاری افزونه در این زمینه وجود دارد، اما به جرات میتوان گفت بهترین افزونه، افزونه MaxButtons است.

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

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

در ادامه وارد نوشته و صفحه دلخواه خود شده و در نوار ابزار ویرایشگر روی دکمه “Add Button” کنید. در پنجره باز شده روی دکمه ایجاد شده کلیک و دکمه InsertButton into Editor را انتخاب کنید. بعد یک شورتکد در ویرایشگر ظاهر می‌شود و نوشته را به روز رسانی کنید.

اکنون دکمه را مشاهده کنید، وقتی روی دکمه هاور کنید، طرح دکمه عوض می‌شود.

موفق و پیروز باشید.

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

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