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

تاریخ : 17th سپتامبر 2018
موضوع : اسکریپت , اسکریپت جدید , اسکریپت رایگان , اسکریپت فارسی
بازدید : 276 نمایش
نظرات : بدون نظر

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

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

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

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

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

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

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

function sButton($atts, $content = null)

{

extract(shortcode_atts(array(‘link’ => ‘#’), $atts));

return ‘<a class=”button” href=”‘.$link.‘”>’ . do_shortcode($content) . ‘</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.png) 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.png) no-repeat top left; } a.button:hover span { color: #fff; background-position: bottom left; }

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

a.button {

display: inline–block;

font–size: 13px; font–weight: bold;

height: 31px;

padding–right: 10px;

color: #183f4c;

background: transparent url(images/sm_a.png) 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.png) 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>

<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 را انتخاب کنید. بعد یک شورتکد در ویرایشگر ظاهر میشه و نوشته را به روز رسانی کنید.

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

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

[ad_2]

لینک منبع مطلب

لینک کوتاه مطلب :

https://digiscript.ir/?p=4654

برچسب ها

دیجی اسکریپت