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

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

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

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

function greenbutton_shortcode($atts) {
extract( shortcode_atts( array(
'link' => 'https://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' => 'https://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' => 'https://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' => 'https://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  مرجع: آموزش وردپرس