آموزش درست کردن دکمه کد کوتاه در وردپرس
سلام و عرض ادب و احترام خدمت شما دوستان عزیز و همراهان ارجمند وردپرسی
در ادامه آموزش های کد ها و هک های وردپرس در این قسمت همراه شما دوستان عزیز هستیم با آموزشی دیگر از وب سایت وردپرس که باز هم کدی را بررسی کرده و در مورد کد نویسی وردپرس موارد بیشتری را یاد میگیرم.پس تا انتها با من همراه باشید دوستان عزیز
دوستان عزیز در این آموزش در مورد ساخت کد کوتاه دکمه در وردپرس صحبت میکنیم و روش کار را از ابتدا تا انتها بررسی مینمائیم.دوستان عزیز در این مورد اولین کار برای ساخت شورت کد دکمه در وب سایت وردپرس این است که ابتدا با تابع add_shortcode شورت کد را بسازیم.برای این منظور باید ابتدا فایل function.php قالب وردپرس خود را باز کنید و کد زیر را در محلی مناسب از آن قرار دهید:
function greenbutton_shortcode($atts) {
extract( shortcode_atts( array(
'link' => 'http://www.bigtheme.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.bigtheme.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.bigtheme.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.bigtheme.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 لینک هستید اما چرا؟ آیا مشکلی وجود داشته است و یا دارد؟ خیر دلیل نداشتن هیچ حالتی نبودن استایل مورد نظر است پس ابتدا یک استایل باید به آن بدهیم که استایل مورد نظر من به صورت زیر است:
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 باشد مسلط باشید و نکته مهم دیگری که وجود دارد این است که حتما از قبل از هر تغییری در فایل های قالب وردپرس خود ابتدا باید حتما از فایل های قالب وردپرس خود نسخه پشتیبان تهیه کنید زیرا در صورت بروز هر مشکل میتوانید ان را با استفاده از همین فایل پشتیبان برطرف نمائید.
ممنونم از همراهی شما دوستان عزیز و همراهان ارجمند
موفق و پیروز باشید