Shortcode API – Cum sa iti faci un button

Shortcode API

Shortcode API este un set simplu de funcții pentru crearea de coduri scurte WordPress pentru utilizare în articole și pagini. De exemplu, următorul codscurt (în corpul unui post sau al unei pagini) va adăuga o galerie foto cu imagini atașate postării sau paginii: [galerie]

API permite dezvoltatorilor de pluginuri să creeze tipuri speciale de conținut (de ex., Formulare, generatoare de conținut) pe care utilizatorii le pot atașa la anumite pagini adăugând codul scurt corespunzător în textul paginii.

Codul care ne intereseaza din API este acesta:

function caption_shortcode( $atts, $content = null ) {
	$a = shortcode_atts( array(
		'class' => 'caption',
	), $atts );

	return '<span class="' . esc_attr($a['class']) . '">' . $content . '</span>';
}

Acum urmeaza sa il modificam pentru adaugarea unei clase si css aferent ei. In functions.php al temei se aduga acest cod:

function button_shortcode( $atts, $content = null ) {

	$a = shortcode_atts( array(
		'class' => 'green',
	), $atts );

	return '<button class="' . esc_attr($a['class']) . '">' . $content . '</button>';
}

add_shortcode( 'button', 'button_shortcode' );

Se pot adauga in array cate clase se doreste. Codul scurt (shortcode) pentru afisare in pagina va fi:

[button class="green"] Text buton [/button]

[button class=”green”] Demo Button [/button]

function button_shortcode( $atts, $content = null ) {

	$a = shortcode_atts( array(
		'class' => 'green',
                'href'  =>  '#',
	), $atts );

	return '<button class="' . esc_attr($a['class']) . href="' . esc_attr($a['href']) . '">' . $content . "</button>';
}

add_shortcode( 'button', 'button_shortcode' );

[button class="green" href="http://site.ro"] Button cu link [/button]

[button class=”green” href=”https://www.bucurion.ro”] Button cu link [/button]

Css:

/*= Buton css =*/

button.green {
  margin: 20px 5px;
  padding: 10px;
  color: #111;
  font-size: 15px;
  background: #d2ff52; /* Old browsers */
  background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
  -webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

button.green:hover { 
 box-shadow: 0 0 10px 0 #999;
}

button.green a {
  text-transform: uppercase;
  color: #111;
  background: none;
}
button.green a:hover {
  text-transform: uppercase;
  color: #0099ff;
  text-decoration: none;
}