ساخت یک دکمه با شورتکد در وردپرس
اگر کار با ویرایشگر HTML وردپرس برایتان دشوار است یا ترجیح می‌دهید بدون درگیر شدن با کدها امکانات بیشتری به قالب خود اضافه کنید، شورتکدها یکی از بهترین و ساده‌ترین راه‌حل‌ها هستند. با استفاده از شورتکدها می‌توانید قابلیت‌های ویرایشگر وردپرس را به‌راحتی گسترش دهید، بدون آن‌که نیاز به مهارت خاصی در برنامه‌نویسی داشته باشید.
مدتی پیش تصمیم گرفتم دکمه‌ای طراحی کنم تا هنگام لینک دادن به فایل‌های رایگان یا سایت‌های دیگر از آن استفاده کنم. پس از ساخت این دکمه و افزودن شورتکد مربوط به آن در قالبم، به این فکر افتادم که کد را در وبلاگم منتشر کنم تا هرکسی بتواند از آن بهره ببرد. به این ترتیب، هر کاربری می‌تواند با یک کپی ساده، شورتکد را در قالب خود قرار دهد و بدون صرف زمان زیاد برای طراحی و استایل‌دهی، از یک دکمه‌ی زیبا و کاربردی استفاده کند.
راهنمای مطالعه:
شورتکد چیست؟
شورتکدها برای اولین بار در وردپرس 2.5 معرفی شدند و به شما اجازه می‌دهند کدهای کوتاهی (ماکرو) ایجاد کنید که داخل محتوای نوشته‌ها استفاده شوند. یک شورتکد ساده به شکل زیر خواهد بود:
[shortcode]وقتی این کد را در ویرایشگر نوشته اضافه کنید، مقدار تعریف‌شده آن در قالب سایت نمایش داده می‌شود. در ادامه روش ساخت یک شورتکد را آموزش می‌دهم که به شما امکان اضافه کردن دکمه را به ویرایشگر پست می‌دهد بدون اینکه نیازی به تغییر کدها داشته باشید.
اضافه کردن شورتکد اختصاصی “دکمه”
اولین قدم این است که کد PHP شورتکد خود را به قالب اضافه کنید. کد زیر می‌تواند به شما کمک کند تا یک دکمه ساده در سایت نمایش دهید. کافیست این قطعه کد را در فایل functions.php قرار دهید. اگر از قالب آماده استفاده می‌کنید، توصیه می‌شود این کار را با کمک چایلد تم (Child Theme) انجام دهید.
function myprefix_button_shortcode( $atts, $content = null ) {
// Extract shortcode attributes
extract( shortcode_atts( array(
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'green',
), $atts ) );
// Use text value for items without content
$content = $text ? $text : $content;
// Return button with link
if ( $url ) {
$link_attr = array(
'href' => esc_url( $url ),
'title' => esc_attr( $title ),
'target' => ( 'blank' == $target ) ? '_blank' : '',
'class' => 'myprefix-button color-' . esc_attr( $color ),
);
$link_attrs_str = '';
foreach ( $link_attr as $key => $val ) {
if ( $val ) {
$link_attrs_str .= ' ' . $key . '="' . $val . '"';
}
}
return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';
}
// No link defined so return button as a span
else {
return '<span class="myprefix-button"><span>' . do_shortcode( $content ) . '</span></span>';
}
}
add_shortcode( 'button', 'myprefix_button_shortcode' );استفاده از شورتکد در ویرایشگر نوشته
حالا که شورتکد را فعال کردید می‌توانید دکمه جدید “button” را اضافه کنید (فعلاً شبیه به یک لینک ساده است، چون استایل برایش تعریف نکردیم) و آن را در ویرایشگر نوشته استفاده کنید.
// Example usage 1
[button href="YOUR LINK" target="self"]Button Text[/button]
// Example usage 2
[button href="YOUR LINK" target="self" text="Button Text"]استایل دادن به دکمه
چه فایده‌ای دارد اگر شورتکد فقط مثل یک لینک ساده نمایش داده شود؟ قطعاً هیچ! برای همین در این بخش روش استایل‌دهی به دکمه دانلود را با CSS3 توضیح می‌دهم تا دکمه شما ظاهری جذاب پیدا کند.
همانطور که در شورتکد می‌بینید، یک کلاس با نام “myprefix-button” به آن اضافه کردم تا بتوانید به راحتی آن را در فایل style.css استایل دهید. کافیست کد زیر را به استایل خود اضافه کنید تا دکمه‌ای شبیه تصویر، با رنگ آبی ایجاد شود.
/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }
.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }
/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }
/* Active */
.myprefix-button:active{ background:#446F2D; }
پشتیبانی از چند رنگ مختلف
اگر دقت کرده باشید، شورتکد برای رنگ دکمه یک پارامتر دارد که می‌توانید با کمک آن استایل رنگ‌های متنوعی تعریف کنید. مثلاً برای دکمه آبی کافی است استایل زیر را اضافه کنید:
/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }
/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }
/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }حالا کافی است پارامتر رنگ را در شورتکد تعیین کنید:
[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]
نمونه‌هایی از استفاده‌های کاربردی شورتکد دکمه
شورتکدهای دکمه، فقط محدود به ایجاد لینک دانلود یا ارجاع کاربران به سایت دیگر نیستند. می‌توانید از این قابلیت‌ها به اشکال متنوعی استفاده کنید، برای مثال:
- دعوت به اقدام (CTA): برای ثبت‌نام در خبرنامه، دانلود رایگان، ارسال تیکت پشتیبانی و …
- ارائه لینک به صفحات فروش محصولات یا سرویس‌های ویژه سایت
- افزودن لینک شبکه‌های اجتماعی مثل تلگرام، اینستاگرام و …
- استفاده در پوسترها یا جداول برای جلب توجه بیشتر مخاطب به یک لینک خاص
شخصی‌سازی بیشتر شورتکد دکمه
شما می‌توانید شورتکد دکمه وردپرس را با افزودن پارامترهای جدید، کاملاً سفارشی کنید. به‌عنوان مثال:
- target: اگر دوست دارید لینک دکمه در تب جدید باز شود، می‌توانید یک پارامتر مثل
target="_blank"اضافه کنید. - icon: اضافه کردن آیکون یا تصویر کوچک کنار متن دکمه، برای جذاب‌تر شدن.
- size: تعیین سایز دکمه (کوچک، متوسط، بزرگ) با اعمال کلاس اختصاصی در CSS.
- rounded: فعال یا غیرفعال کردن گوشه‌های گرد دکمه با یک پارامتر ساده.
برای هرکدام از این موارد کافی است پارامتر را به تابع شورتکد و استایل خود اضافه کنید.
نمونه کد برای افزودن آیکون به دکمه
به فرض اگر بخواهید کنار متن دکمه یک آیکون نمایش داده شود، می‌توانید چنین کاری کنید:
function myprefix_button_shortcode( $atts, $content = null ) {
$atts = shortcode_atts( array(
'url' => '#',
'color' => 'blue',
'target' => '_self',
'icon' => '', // آیکون دلخواه اینجا وارد شود
), $atts, 'button' );
$icon_html = $atts['icon'] ? '<i class="' . esc_attr($atts['icon']) . '"></i> ' : '';
return '<a href="' . esc_url($atts['url']) . '" class="myprefix-button myprefix-button-' . esc_attr($atts['color']) . '" target="' . esc_attr($atts['target']) . '">' . $icon_html . do_shortcode($content) . '</a>';
}
add_shortcode('button', 'myprefix_button_shortcode');
حالا می‌توانید از شورتکد مثل نمونه زیر استفاده کنید:
[button url="https://example.com" color="green" icon="fa fa-download"]دانلود فایل[/button]رفع اشکال‌های رایج در استفاده از شورتکد دکمه
- عدم نمایش درست دکمه: احتمالاً کد CSS به درستی بارگذاری نشده یا آدرس کلاس صحیح در شورتکد وارد نشده است.
- ایجاد بهم‌ریختگی در قالب: قبل از ویرایش فایل‌های اصلی، حتماً یک نسخه پشتیبان تهیه کنید یا از Child Theme استفاده کنید.
- تداخل با پلاگین‌ها: در صورت مشاهده تداخل در عملکرد شورتکد با افزونه‌ها، نام کلاس‌ها را منحصر به فردتر کنید.
مزایای افزوده شدن شورتکد دکمه در وردپرس
- افزایش نرخ کلیک (CTR): دکمه‌های جذاب توجه کاربر را بیشتر جلب می‌کنند تا لینک‌های ساده و در نتیجه کلیک بیشتری دریافت می‌کنید.
- انسجام بصری سایت: داشتن یک استایل واحد برای فراخوان‌های اقدام (CTA) باعث هماهنگی گرافیکی و زیبایی بیشتر سایت خواهد شد.
- ساده‌سازی فرایند درج CTA: درج یک شورتکد کوتاه در متن پست، خیلی ساده‌تر و سریع‌تر از کدنویسی مجزاست.
- امکان استفاده نامحدود و در هر بخشی از محتوا: شورتکد را می‌توان در نوشته، برگه، یا حتی ابزارک‌ها به‌کار برد.
جمع‌بندی
اکنون شما می‌توانید با سفارشی کردن شورتکد دکمه، با توجه به نیازهای سایت و کاربران خود، تجربه بهتری در اختیار بازدیدکننده‌ها بگذارید. پیشنهاد می‌شود برای زیباتر شدن قالب خود از فونت‌های آیکون معتبر مانند FontAwesome یا Bootstrap Icons در کنار دکمه‌ها بهره ببرید. در آینده، می‌توانید شورتکد دکمه را با امکانات بیشتری مانند انیمیشن هنگام کلیک، نمایش پیغام سفارشی یا حتی بارگیری شرطی برای کاربران خاص توسعه دهید.
دیدگاه و پرسش