فهرست مطالب

کد دکمه های زیبا برای وردپرس

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

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

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

ابتدا باید تابع 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  مرجع: آموزش وردپرس

5/5 - (1 امتیاز)
اشتراک
اطلاع از
guest
0 نظرات
بازخورد درون خطی
مشاهده همه نظرات
0
نظر خود را به اشتراک بگذاریدx

میتوانید در پلتفرم های زیر با ما ارتباط بر قرار کنید

0938-968-1487

در شبکه های زیر به شماره بالا پیام دهید

ما همیشه در اینجا آنلاین هستیم

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

نکته : بهتر است برای پشتیبانی محصولات از طریق تیکت اقدام کنید مگر در مواقع ضروری.

نکته : تماس تصویری فقط در پیام رسان های داخلی امکان پذیر است.

عضو شوید و همه محصولات را رایگان دانلود کنید!!!