Como Hacer un ShortCode en WordPress – Ejemplo Practico

Como Hacer un ShortCode en WordPress – Ejemplo Practico

Como Hacer un ShortCode en WordPress – Ejemplo Practico
5 (100%) 2 votos

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

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:

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:

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 )

Hola Mundo con ShortCode

Ahora que mas o menos tenemos algo de teoria vamos a realizar un ejemplo de lo mas basico posible wink 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:

y en nuestro Archivo “Functions.php” agregaremos nuestro shortcode:

y enseguida nuestra funcion:

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

Como Hacer un ShortCode en WordPress - Ejemplo Practico 1 jonathanmelgoza

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..

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

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

PHP

CSS

Como Hacer un ShortCode en WordPress – Ejemplo Practico

Como Hacer un ShortCode en WordPress – Ejemplo Practico
5 (100%) 2 votos

2 Comentarios ¿Qué opinas tú del tema?

  1. Alejandra 2015-02-24
    • Jonathan Melgoza 2015-02-24

Dejar un comentario

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