Como Hacer un ShortCode en Wordpress - Ejemplo Practico

En este Articulo-Tutorial veremos que es un shortcode? un clasico hola mundo con shortcode y por ultimo realizaremos un ejemplo un poco mas complicado de shortcode en el que programaremos una funcion para que nuestros lectores puedan twittear frases de nuestro contenido :yum: Veremos lo basico de este temilla para que te animes a comenzar a crear tus propios shortcodes para tu sitio en wordpress, mira que los shortcodes te ayudaran a optimizar tiempo, mucho tiempo.. y esfuerzo en tus rutinas al momento de crear tus entradas, vamos ya al contenido :relaxed:

Requerimientos

API ShortCode WordPress

Que es un ShortCode?

Para ver #comohacerunshortcode primero tenemos que ver lo que es, un ShortCode es una pequeña pieza de codigo que sirve de enlace a un fragmento de codigo mucho mayor para cumplir una determinada accion dentro de WordPress. Un ShortCode luce asi:


[shortcode]

y los puedes agregar en paginas o entradas en WordPress para llamar a una funcion que quieres que se realize en el mismo lugar donde colocaste tu shortcode.

La otra parte de los ShortCodes es la funcion en si, esta se escribe generalmente dentro de nuestro archivo de Funciones en nuestro Tema en WordPress «Functions.php» en PHP ( Generalmente casi todos los temas tienen este Archivo :yum: ).

Dentro de este Archivo agregamos nuestro shortcode a WordPress mediante la siguiente Funcion:


add_shortcode('shortcode_nombre','shortcode_funcion');

Donde:
add_shortcode: -> Nombre de la funcion que agrega nuestro shortcode a WordPress ( No cambiar )
shortcode_nombre: -> Nombre con el que llamaremos nuestra funcion ( A tu Eleccion )
shortcode_funcion: -> Nombre de la Funcion donde estara el Codigo de tu ShortCode ( A tu Eleccion )

Ahora solo falta escribir nuestra funcion en la que se programa la tarea a realizar, esta funcion se llamara como tu eligas. Podra recibir 3 parametros: atributos, contenido y etiqueta, ademas esta funcion regresa un valor que sera el resultado de nuestro shortcode.

Parametros:
Atributos -> Nuestro ShortCode podra tener atributos como por ejemplo: [shortcode id=»1″ color=»blanco»]Contenido -> Nuestro ShortCode podra «encerrar» contenido por ejemplo: [shortcode] Texto [/shortcode]Etiqueta -> utilizada para CallBacks ( no hablaremos de esta aun :yum: )


function shortcode_funcion($atributos,$contenido){
   //CODIGO 
   return "";
}

Hola Mundo con ShortCode

Ahora que mas o menos tenemos algo de teoria vamos a realizar un ejemplo de lo mas basico posible 😉 lo que haremos sera que utilizaremos un shortcode para mostrar un mensaje de despedida de nuestro Post :yum:

Utilizaremos en nuestra Entrada nuestro Shortcode, en este caso sera:


[despedida]

y en nuestro Archivo «Functions.php» agregaremos nuestro shortcode:


add_shortcode('despedida','despedida_func');

y enseguida nuestra funcion:


function despedida_func(){
	return "Esto Fue Todo en este Post, Recuerda compartirlo en Facebook, Twitter y Google+.";
}

Ahora al ver la entrada publicada o ver una vista previa observaremos que en el lugar del shortcode aparece nuestro mensaje de despedida.

Algunas Preguntas..

Como se ponen las opciones dentro del shortcode?
de la forma [shortcode opcion1=»valor1″ opcion2=»valor2″]

Como se obtienen las opciones dentro de la funcion?
Mediante extract asi..


function shortcode_func($parametros){
	extract( shortcode_atts( array(	'opcion1' => 'valorPorDefecto1', 'opcion2' => 'ValorPorDefecto2',
	), $parametros) );
        $opcion1 = ...

Como obtener el texto encerrado por [shortcode] texto [/shortcode]?
Se almacena en la segunda variable de parametro en la funcion, en este caso $contenido.


function shortcode_func($parametros,$contenido){
	extract( shortcode_atts( array(	'opcion1' => 'valorPorDefecto1', 'opcion2' => 'ValorPorDefecto2',
	), $parametros) );
        return $contenido;	//< - AQUI

Shortcode para twittear frases desde el Blog

Ahora que ya podemos hacer algo sencillo vamos a intentar hacer algo mas dificil :yum: lo que haremos sera crear un shortcode para que nuestros lectores puedan twittear frases que tengamos en nuestros Posts, esto lo vi en un blog llamado cvgs.net en el cual explican como hacerlo, asi que al final nuestro resultado sera algo asi..

[twittear_frase]Ahora tus Lectores pueden Twittear las Frases de tus Articulos![/twittear_frase]

( click en la imagen de twitter )

Te Gusta?? :smiley:

ShortCode


[twittear_frase_]Frase[/twittear_frase_]

PHP


add_shortcode('twittear_frase_','twittear_frase_func');

function twittear_frase_func($parametros,$contenido){
	extract( shortcode_atts( array(
		'via' => 'JonathanMelBLOG',				
                'title' => 'Twittear Frase',
	), $parametros) );		
	if($contenido != null){		
		$texto = strip_tags($contenido);	
		$url = get_permalink($post->ID);
		$longitud = 140 - (strlen($via) + 22 + 9);
		$url = urlencode(get_permalink($post->ID));	
		$texto = substr($texto,0,$longitud);		
		$frase = """.$texto.""";				
		return "".$contenido." - ";	
	}	
	return "";
}

CSS


/*Twittear Frase*/
#twittear_frase_icon{
	content:url('images/twitter_logo.png');
}
.twittear_frase{
	text-decoration:underline;
}