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

بسیار خب شروع می کنیم.

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

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

به سراغ فایل functions.php پوسته خود رفته و کد زیر را داخل آن قرار دهید

// شورت کد دکمه سبز
function greenbutton_shortcode($atts) {
	extract( shortcode_atts( array(
        'link' => 'http://www.wpschool.ir',//مقدار پیشفرض
		'color' => 'green',
		'title' =>'',//مقدار پیشفرض
    ), $atts, 'multilink' ) );
    return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>';
}
add_shortcode('green-button', 'greenbutton_shortcode');

// شورت کد دکمه قرمز
function redbutton_shortcode($atts) {
	extract( shortcode_atts( array(
        'link' => 'http://www.wpschool.ir',//مقدار پیشفرض
		'color' => 'red',
		'title' =>'',//مقدار پیشفرض
    ), $atts, 'multilink' ) );
    return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>';
}
add_shortcode('red-button', 'redbutton_shortcode');

// شورت کد دکمه آبی
function bluebutton_shortcode($atts) {
	extract( shortcode_atts( array(
        'link' => 'http://www.wpschool.ir',//مقدار پیشفرض
		'color' => 'blue',
		'title' =>'',//مقدار پیشفرض
    ), $atts, 'multilink' ) );
    return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>';
}
add_shortcode('blue-button', 'bluebutton_shortcode');

// شورت کد دکمه مشکی
function blackbutton_shortcode($atts) {
	extract( shortcode_atts( array(
        'link' => 'http://www.wpschool.ir', //مقدار پیشفرض
		'color' => 'black',
		'title'=>'',//مقدار پیشفرض
    ), $atts, 'multilink' ) );
    return '<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>';
}
add_shortcode('black-button', 'blackbutton_shortcode');

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

[green-button link="#" title="عنوان مورد نظر"]

[red-button link="#" title="عنوان مورد نظر"]

[blue-button link="#" title="عنوان مورد نظر"]

[black-button link="#" title="عنوان مورد نظر"]

برگه را ذخیره کرده و پیشنمایش را ببینید، می بینید که خبری از دکمه نیست و تنها 4 لینک وجود دارد. خب طبیعی است چرا که هنوز استایل مورد نظر را بهشون ندادیم

پس حالا نوبت به استایل دهی به دکمه ها می باشد. کد زیر را داخل فایل style.css خود قرار دهید:

a.button-black {
padding: 10px 40px;
background: #000;
border-radius: 5px;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}

a.button-green {
padding: 10px 40px;
background: #54c56d;
border-radius: 5px;
color: #000;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}

a.button-red {
padding: 10px 40px;
background: #cb0005;
border-radius: 5px;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
a.button-blue {
padding: 10px 40px;
background: #3fc2da;
border-radius: 5px;
color: #000;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}

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

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

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

موفق باشید

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

  • Alireza
    - ۱ تیر , ۱۳۹۳

    ممنون آموزش خیلی خوبی بود .

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

  • مهدی ربیعی
    - ۲۱ اسفند , ۱۳۹۳

    سلام
    ممنون از آموزش خوبتون
    دیدم تو قالب های خارجی که پا رو از اینم فراتر گذاشتم
    و وقتی شما روی دکمه ای کلیک میکنید
    پنجره ای باز میشه و اطلاعات رو اونجا ازتون میگیره و خودش شورت کد مربوطه با تنظیمات رو درج میکنه
    اون به چه شکلی هست ؟

    • الناز بیک زاده
      - ۲۵ اسفند , ۱۳۹۳

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

  • حمید
    - ۱۲ مهر , ۱۳۹۴

    پیشنهاد میکنم به این سایت هم یه سر بزنید
    http://cssreel.com/Website/icono

  • امیر محمد
    - ۲۸ خرداد , ۱۳۹۵

    متاسفانه وقتی عنوان طولانی برای شورت کات قرار میدم نمایش داده نمیشه !
    چه کنم ؟!

    • الناز
      - ۲۸ خرداد , ۱۳۹۵

      سلام دوست عزیز. منظورتون از عنوان طولانی چیه؟ لطفا کد رو واسم بفرستید

  • امین
    - ۲۶ فروردین , ۱۳۹۹

    سلام میشه برای یک شورت کد مثل فرم یک دکمه قرار بدیم؟

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --