آموزش ایجاد کد کوتاه دکمه در وردپرس - خدمات وردپرس وب نما | خدمات وردپرس وب نما
امکان جستجو پیشرفته به زودی جایگزین میشود

آموزش ایجاد کد کوتاه دکمه در وردپرس

بازگشت

به جایی که از آن میآیید
Want create site? Find Free WordPress Themes and plugins.

shutterstock_124758646-copy-1050x525دوستان عزیز در این آموزش در مورد ساخت کد کوتاه دکمه در وردپرس صحبت میکنیم و روش کار را از ابتدا تا انتها بررسی مینمائیم.دوستان عزیز در این مورد اولین کار برای ساخت شورت کد دکمه در وب سایت وردپرس این است که ابتدا با تابع add_shortcode شورت کد را بسازیم.برای این منظور باید ابتدا فایل function.php قالب وردپرس خود را باز کنید و کد زیر را در محلی مناسب از آن قرار دهید:

functiongreenbutton_shortcode($atts) {
    extract( shortcode_atts( array(
        'link'=> 'http://www.webnma.com',//مقدار پیشفرض
        'color'=> 'green',
        'title'=>'',//مقدار پیشفرض
    ), $atts, 'multilink') );
    return'<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>';
}
add_shortcode('green-button', 'greenbutton_shortcode');
// شورت کد دکمه قرمز
functionredbutton_shortcode($atts) {
    extract( shortcode_atts( array(
        'link'=> 'http://www.webnma.com',//مقدار پیشفرض
        'color'=> 'red',
        'title'=>'',//مقدار پیشفرض
    ), $atts, 'multilink') );
    return'<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>';
}
add_shortcode('red-button', 'redbutton_shortcode');
// شورت کد دکمه آبی
functionbluebutton_shortcode($atts) {
    extract( shortcode_atts( array(
        'link'=> 'http://www.wbnma.com',//مقدار پیشفرض
        'color'=> 'blue',
        'title'=>'',//مقدار پیشفرض
    ), $atts, 'multilink') );
    return'<a class="button-'.$color.'" href='.$link.'>'.$title.'</a>';
}
add_shortcode('blue-button', 'bluebutton_shortcode');
// شورت کد دکمه مشکی
functionblackbutton_shortcode($atts) {
    extract( shortcode_atts( array(
        'link'=> 'http://www.webnma.com', //مقدار پیشفرض
        'color'=> 'black',
        'title'=>'',//مقدار پیشفرض
    ), $atts, 'multilink') );
    returno'<a class="button-'.$clor.'" 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="عنوان مورد نظر"]

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

پس حالا نوبت به استایل دهی به دکمه ها می باشد. کد زیر را داخل فایل 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;
}

دوستان عزیز پس از قرار دادن این استایل باز هم وارد شوید و مشاهده مینمائید که دیگر ازآن لینک ها خبری نیست و استایل خوبی به خود گرفته است.حال باید بپردازیم به موارد مهمی که در این زمینه وجود دارد.اولین نکته این است که شما دوستان باید بدانید که برای فهم و درک کامل این آموزش های هک وردپرس باید به زبان برنامه نویسی وردپرس که همان PHP باشد مسلط باشید و نکته مهم دیگری که وجود دارد این است که حتما از قبل از هر تغییری در فایل های قالب وردپرس خود ابتدا باید حتما از فایل های قالب وردپرس خود نسخه پشتیبان تهیه کنید زیرا در صورت بروز هر مشکل میتوانید ان را با استفاده از همین فایل پشتیبان برطرف نمائید.

ممنونم از همراهی شما دوستان عزیز و همراهان ارجمند
موفق و پیروز باشید

Did you find apk for android? You can find new Free Android Games and apps.

0 دیدگاه ها در "آموزش ایجاد کد کوتاه دکمه در وردپرس"

دیدگاهتان را بنویسید

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

اطلاعیه های سایت...

این چیست؟

تخفیف 30 درصدی محصولات وردپرس به مناسبت ماه مبارک رمضان

کد تخفیف : ramazan97

ورود به فروشگاه