WordPress – Crear BBCODE o shortcode personalizados

Los BBCODES o «shortcode» son esas funciones que tiene WordPress y que se usan con corchetes, que generalmente te indican algunos plugin cuando los instalas, hay ejemplos como 

[B]Hola[/B] => Vuelve el texto en negrita

Hay 3 tipos de BBCODES y estos son según los parámetros y/o opciones que usan

[NOMBRE] => Simples que solo se requiere el nombre del BBCODE y ya, incluso se pueden usar con atributos como en el 3er caso
[NOMBRE ID=1 COLOR=2] => BBCODE con atributos
[NOMBRE id=2]Hola[/NOMBRE]  => Con contenido, cierre y atributo (que pueden ser varios)

Nos vamos a enfocar en el primero:

En tu archivo functions.php de tu tema actual, al final de todo y antes del cierre «?>» si es que tiene pon la siguiente función y luego 

// Crear BBCODE PERSONALIZADO simple
function funcion_escribe_hola_mundo( $atts ){
return "Hola Mundo,";
}
add_shortcode( 'HOLA', 'funcion_escribe_hola_mundo' ); //el primer parámetro será el nombre del BBCO, en este caso HOLA, usa siempre mayúsculas que es sensible

Si ahora en una Entrada/Page o donde sea poner [HOLA], esta será reemplaza por el texto «Hola  mundo,»

[HOLA] => Hola Mundo,

La otra opción es hacerlo pero con atributos, para eso debes pegar el siguiente código:

// Crear BBCODE PERSONALIZADO simple con atributos
function funcion_escribe_hola_mundo_color( $atts ) {
$a = shortcode_atts( array(
'color1' => '#ff0000', //valor por defecto para color1
'color2' => '#0000FF', //valor por defecto para color1
), $atts );
return "<span style='color:{$a['color1']};'>Hola</span> <span style='color:{$a['color2']};'>mundo</span>";
}
add_shortcode( 'HOLA_COLOR', 'funcion_escribe_hola_mundo_color' );

el resultado del código será según en caso: 

[HOLA_COLOR] => Hola mundo //colores por defecto se definió en la función en caso no se de parámetros
[HOLA_COLOR color1="#00FF00" COLOR2="#FFFF00"] => Hola mundo //usa el/los colores que se dió como parámetro

 

Y el último caso ya seria lo mismo pero con contenido personalizado:

// Crear BBCODE PERSONALIZADO con atributos y valor personalizado
function funcion_escribe_algo_en_color( $atts,$content = null ) {
$a = shortcode_atts( array(
'color' => '#ff0000', //valor por defecto para color
), $atts );
return "<span style='color:{$a['color']};'>{$content}</span>";
}
add_shortcode( 'DI_ALGO_COLOR', 'funcion_escribe_algo_en_color' );

el uso/resultado seria:

[DI_ALGO_COLOR]El Código Fuente[/DI_ALGO_COLOR] => El Código Fuente //En rojo que es el color por defecto
[DI_ALGO_COLOR color="#0000FF"]El Código Fuente[/DI_ALGO_COLOR]=> El Código Fuente //en azul que es el color que le indicamos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *