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

سلام خدمت شما عزیزان.

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

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

حتما بخونید : تمام توابع افزونه EDD برای طراحی قالب وردپرس

خب دوستا عزیز برای این کار ابتدا کد زیر رو در فایل functions.php قرار بدید :

/* Shortcode to display an action button. */
add_shortcode( 'action-button', 'action_button_shortcode' );
function action_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'subtitle' => 'Subtitle',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="action-button ' . $color . '-button"><a href="' . $url . '">' . $title . '<span class="subtitle">' . $subtitle . '</span>' . '</a></span>';
}

و حالا میتوانید از شورتکد استفاده کنید، برای استفاده از شورتکد باید کد زیر رو در هر جای مطلبتون میخواید استفاده کنید :

[action-button color="blue" title="Download Now" subtitle="Version 1.0.1 – Mac OSX" url="#"]

اگر میخواهید دکمه شما استایل زیبایی داشته باشد کد زیر رو هم درون فایل style.css قرار دهید :

.action-button a:link, .action-button a:visited {
       border-radius: 5px;
       display: inline-block;
       font: 700 16px Arial, Sans-Serif;
       margin: 0 10px 20px 0;
       -moz-border-radius: 5px;
       padding: 14px 18px;
       text-align: center;
       text-decoration: none;
       text-shadow: 0 1px 1px rgba(0,0,0,0.3);
       text-transform: uppercase;
       -webkit-border-radius: 5px;
}

.action-button .subtitle {
       display: block;
       font: 400 11px Arial, Sans-Serif;
       margin: 5px 0 0;
}

.blue-button a:link, .blue-button a:visited {
       background-color: #5E9CB9;
       background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95));
       color: #FFF;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95');
       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')";
}

.blue-button a:hover {
       background-color: #68A9C8;
       background-image: -moz-linear-gradient(top, #68A9C8, #598EA8);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8));
       color: #FFF;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8');
       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')";
}

موفق باشید.

آموزش وردپرس کد وردپرس
آموزش و پروژه رایگان برنامه نویسی

دیدگاه خود را بیان کنید