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

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

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

ساخت کد کوتاه دکمه در وردپرسReviewed by سعید حبیبی on Nov 26Rating: 5.0

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

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

ابتدا باید تابع add_shortcode را ایجاد کنیم در حال حاضر فایل function.php قالب وردپرس خود را به حالت ویرایش در آورید و قطعه کد زیر را به آن اضافه کنید.برای دسترسی به این فایل می توانید از مسیر هاست و یا از پیشخوان وردپرس » نمایش » ویرایشگر اقدام کنید.


function greenbutton_shortcode($atts) {
extract( shortcode_atts( array(
'link' => 'http://www.uptheme.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.uptheme.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.uptheme.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.uptheme.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="عنوان مورد نظر"]

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


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;
}

خب شما از استایل بالا استفاده کنید و آن را در داخل stily.css خود اضافه و دوباره نتیجه کار را ببینید که لینکها از استایل داده شده بهرمند شده و به خود زیبایی بخشیده.

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

 

 

منبع: uptheme  مرجع: آموزش وردپرس

باکس دانلود

  • کاربران گرامی از ارسال دیدگاه جهت پشتیبانی محصولات ویژه ( خریداری شده) خود داری کنید برای این امر از قسمت پشتیبانی اقدام کنید.

هنوز هیچ دیدگاهی وجود ندارد

تمامی محصولات آپ تم از همین حالا به مدت محدود با 35 درصد تخفیف ارائه می شود. کد تخفیف: uptheme35 ( به مدت محدود ) به همراه پشتیبانی و ارائه آپدیت های بعدی به صورت رایگان
نوروز 96 برشما مبارک » در این ایام تا 15 فروردین ماه تمامی محصولات آپ تم با %60 تخفیف ارائه می شود. کد تخفیف: noroze96 جزئیات بیشتر ...