Tutorial: Cómo crear un plugin en Wordpress. Funciones, shortcodes, etc.

xmatias

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
273
Hola betas :encouragement:, he visto que muchos de ustedes utilizan Wordpress como gestor de contenidos para sus webs o blogs. Wordpress como CMS incluye muchas funcionalidades que nos facilitan la vida a la hora de crear nuestros sitios, sin embargo cuando queremos ir más allá de esas funciones y crear funciones más específicas y funcionales, es cuando necesitamos un plugin o complemento.

Un complemento es una aplicación que se relaciona con otra para aportarle una función nueva y generalmente muy específica. Esta aplicación adicional es ejecutada por la aplicación principal e interactúan por medio de la API.

-http://es.wikipedia.org/wiki/Complemento_(inform%C3%A1tica)
Debemos entender que para plugins hay miles de posibilidades, en Wordpress podemos usarlos como shortcodes, widgets, usando funcionalidades internas (creación de tablas, drop de tablas, etc), como complemento de administración, etc, etc. Para este ejemplo mezclaré los shortcode, las funcionalidades internas y la administración.

Antes que nada si no sabes nada sobre php te recomiendo salirte del tutorial y ponerte a leer sobre este lenguaje, al menos la parte de funciones, consultas, y lo más básico.

LA IDEA: para este tutorial crearé un plugin que me permita guardar códigos html en una base de datos y luego imprimirlos en nuestros post como shortcode. Si no me entienden aquí les dejo un vídeo de como funciona el plugin.

[YOUTUBE]dIvm7gJsb7Y[/YOUTUBE]

El tutorial estará dividido en 6 objetivos.



Lo primero es ir sobre nuestra carpeta 'plugins' ubicada dentro de 'wp-contents' y crear una carpeta con el nombre de nuestro proyecto, en este caso he llamado a mi proyecto 'codigorapido', luego creamos un archivo php dentro de la carpeta con el mismo nombre, es decir, codigorapido.php.

Ahora empezaremos con la estructura de nuestro proyecto, lo primero es definir los datos de la siguiente manera:

PHP:
<?php
/*
Plugin Name: Código Rápido
Plugin URI: http://www.forobeta.com
Description: Un plugin para insertar código rápido
Version: 1.0
Author: xmatias
Author URI: http://www.forobeta.com
*/
No creo que sea necesario explicar cada campo.

Con esto ya nos debería aparecer el plugin en nuestro panel de administración.







Como nuestro objetivo es insertar código en una base de datos, debemos tener una base de datos, por lo que haremos que Wordpress ejecute una función que cree la tabla al activar el plugin. Esto lo hacemos de la siguiente manera:

PHP:
register_activation_hook(__FILE__, 'instalar');
Con esto le indicamos que al activar el plugin se ejecutará la función instalar. Ahora definimos la función instalar como una función normal en php.

PHP:
function instalar(){
	//Llamamos a la clase wpdb para trabajar con las base de datos de WP.
	global $wpdb;
	//Le damos un nombre a la tabla
	$tabla = $wpdb->prefix."codigos";
	//Si la tabla no existe se crea, si no, no se hace nada
	if ($wpdb->get_var("SHOW TABLES LIKE '$tabla'")==$tabla) {
		# La tabla existe, no se hará nada.
	}else{
		# La tabla no existe, se creará.
		$sql="";
		$sql.="CREATE TABLE `".$tabla."` (";
		$sql.="`id` int(11) NOT NULL auto_increment,";
		$sql.="`nombre` varchar(200) NOT NULL,";
		$sql.="`codigo` text NOT NULL,";
		$sql.="PRIMARY KEY  (`id`)";
		$sql.=") ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;";
		$wpdb->query($sql);
	}
}
En este código hacemos uso de la clase wpdb de Wordpress para realizar las consultas y darle un nombre a la tabla, luego, si la tabla existe no se hace nada y si no, se crea.

La base de datos cuenta de tres campos: un id entero autoincrementable , un varchar de 200 caracteres para el nombre y un text para el código.




Lo siguiente será crear la páginas en nuestro panel de administración. Para esto añadimos una acción (add_action) del tipo admin_menu que llamará la función menu de la siguiente manera:

PHP:
add_action("admin_menu", "menu");
Nuestra función menu creará un menú y una subpágina:

PHP:
function menu() {
	//Creamos el menu de administración y llamamos a las funciones correspondientes
    global $_registered_pages;
	add_menu_page('Listado de códigos', 'Código Rápido', 'administrator', 'codigos', 'mostrar_codigos', '', 1);
	add_submenu_page('codigos', 'Nuevo Código', 'Nuevo Código', 'administrator', 'nuevo-codigo', 'menu_addCode');
}
Podemos observar que la función add_menu_page (click para ver detalles y parámetros) llama a la función mostrar_codigos, que es la que nos mostrará los códigos. Y la función add_submenu_page (click para ver detalles y parámetros) llama a la función menu_addCode para crear los códigos y también para editarlos (lo explicaremos más adelante.)

Con esto nuestro menú de administración se devería ver así:






Ahora crearemos la página para insertar un nuevo código, como anteriormente llamamos a la función menu_Addcode, esta será la que mostrará el formulario para crear el código.

PHP:
function menu_Addcode(){
	//Creando código...
	if(empty($_POST)) {
		$msg = "<p>Ingrese el nombre y el código deseado :)</p>";
	}else{
		$msg = add_codigo($_POST['nombre'],$_POST['codigo']);
	}
	//Formulario para añadir
	echo '<h1>Añadir código</h1>';
	echo $msg;
	echo '<form method="post">';
	echo '<b>Nombre:</b></br><input type="text" name="nombre"/>';
	echo '<br>';
	echo '<b>Código:</b></br><textarea name="codigo"></textarea>';
	echo '<br>';
	echo '<input type="submit" value="Crear"/>';
	echo '</form>';
}
Empezaré por el formulario, como podemos ver se imprime la variable 'msg' que será la que nos informará si se insertó el código o si hubo un error o si falta un campo por completar (se verá mas adelante). Tenemos un input con el nombre y un textarea con el código (importante el nombre de los campos) y un botón para procesar esto.

Vemos que en la primera parte del código hay una condición (if) que indica que si no hay datos en el método post el mensaje que se mostrará es 'Ingrese el nombre y el código deseado :)', si hay datos, es decir, si hemos pulsado sobre el botón el mensaje va a ser lo que nos retorne la función add_codigo en la cual mandaremos los datos.

Ahora veamos la estructura de la función add_codigo :


PHP:
function add_codigo($nombre, $codigo){
	//Verificamos si el nombre y el código no están vacíos.
	if (!$nombre)
		return '<p>El nombre no puede estar en blanco.</p>';
	if (!$codigo)
		return '<p>El código no puede estar en blanco.</p>';
	
	global $wpdb;

	//Definimos la tabla, hacemos un 'escape' en el codigo por seguridad.
	$tabla = $wpdb->prefix."codigos";
	$codigo = $wpdb->escape($codigo);

	//Ejecutamos la consulta
	$sql="INSERT INTO `".$tabla."` (`nombre`, `codigo`) VALUES ('$nombre', '$codigo')";
	$insertar = $wpdb->query($sql);

	//Si hay un error, devolverá un error, si no, mostrará un mensaje de OK.
	if ($insertar==FALSE) {
		return '<p>Error al insertar el código.</p>';
	}else{
		return '<p>Código insertado.</p>';
	}
}
Lo primero que podemos observar en esta función son dos condiciones en las que si el nombre o el código se encuentran en blanco devolverá un mensaje de error. Luego si los datos pasan estas dos condiciones hacemos un 'escape' en el código por seguridad y ejecutamos la consulta, si todo salió bien nos mandará un mensaje de OK y si no, devolverá un mensaje de ERROR.

Con esto ya deberíamos tener algo como esto:






Ahora vamos con la función para mostrar los codigos en la página principal del ménú que creamos llamando a la función mostrar_codigos

PHP:
function mostrar_codigos(){
	global $wpdb;
	$tabla = $wpdb->prefix."codigos";
	$sql = "SELECT id, nombre FROM ".$tabla;
	$consulta = $wpdb->get_results($sql);
	
	echo '<h1>Listado de códigos</h1>';
	echo '<table width="600px">';
	echo '<tr>';
	echo '	<td><b>ID</b></td>';
	echo '	<td><b>Nombre</b></td>';
	echo '	<td><b>Shortcode</b></td>';
	echo '	<td><b>Editar</b></td>';
	echo '</tr>';

	foreach ($consulta as $c) {
		echo '<tr>';
		echo '<td>'.$c->id.'</td>';
		echo '<td>'.$c->nombre.'</td>';
		echo '<td><input type="text" value="[codigo id='.$c->id.']"/></td>';
		echo '<td>Editar</td>';
		echo '</tr>';
	}

	echo '</table>';
}
En esta función obtubimos todos los códigos que se encuentran en nuestra base de datos y lo almacenamos en la varialbe consulta, luego hacemos un foreach para recorrer el array e imprimir los datos en una tabla. Obtubimos el id y el nombre y creamos un apartado donde pusimos nuestro futuro shortcode con la id. Con esto ya deberíamos tener algo así:





Por último simplemente nos queda crear el shortcode que nos imprimirá el código, añadimos el shortcode codigo a wordpress y llamamos a la función obt_codigo

PHP:
add_shortcode( 'codigo', 'obt_codigo' );
Luego debemos crear la función qué obtendrá el código:

PHP:
function obt_codigo($atts = array()){
	//Extraemos el id
	extract(shortcode_atts(array(
                'id'	=> '',
            ), $atts));
    //Cargar wpdb y nombrar la tabla
	global $wpdb;
	$tabla = $wpdb->prefix."codigos";
	//Hacer la cosulta
	$sql = "SELECT codigo FROM ".$tabla." WHERE id = '".$id."'";
	$obtener = $wpdb->get_results($sql);
	//Imprimir el resultado
	echo $obtener[0]->codigo;
}
Esta función simplemente obtiene el valor id= de nuestro shortcode, hará una consulta a la base de datos e imprimirá el resultado.




No hay mucho que aclarar, simplemente recomiendo familiarizarse con el uso de funciones y las consultas usando $wpdb ya que nos será muy útil a la hora de obtener datos desde la db de Wordpress de una manera rápida y segura. Como reto les dejo las opciones de editar o eliminar códigos creados, en un futuro próximo agregaré las versiones desarrolladas.

-codigorapido.php archivo completo (incluye función para editar).

 

Mistico

Baneado
Gamma
Verificación en dos pasos desactivada
Desde
29 Dic 2012
Mensajes
432
Muy buen tutorial y muy bien explicado, te llevas mi me agrada :p8:
 

flash

Beta
Verificación en dos pasos desactivada
Desde
25 Ene 2013
Mensajes
108
Justo lo que buscaba.
Muchas gracias! [emoji5]️
 

iNeedYou

1
Ro
SEO
Verificación en dos pasos desactivada
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
27 Sep 2010
Mensajes
14.317
Mi más sincera enhorabuena. Más de uno debería aprender de ti en cuanto a estructura y claridad se refiere. ¡Saludos!
 

xmatias

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
273

carlosjulian

Épsilon
SEO
Verificación en dos pasos desactivada
Desde
20 Mar 2014
Mensajes
993
Excelente aporte amigo, algo de programación y cosas que me gustan realizar. Saludos
 

CotizaoMusic

Épsilon
Social Media
Verificación en dos pasos desactivada
Desde
15 Mar 2014
Mensajes
899
Muy buen tutorial y bien explicado, lo probare ¡Saludos!
 

NoLimits

Épsilon
SEO
Verificación en dos pasos desactivada
Desde
16 Dic 2010
Mensajes
774
Gracias por el tutorial, muy bien explicado :encouragement:
 

unorthodoxt

Beta
SEO
Verificación en dos pasos desactivada
Desde
16 Abr 2014
Mensajes
101
Excelente tutorial te dejo un me agrada
 

xmatias

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
273
Excelente aporte amigo, algo de programación y cosas que me gustan realizar. Saludos
Muchas gracias.
Muy buen tutorial y bien explicado, lo probare ¡Saludos!
Gracias por el tutorial, muy bien explicado :encouragement:
Excelente tutorial te dejo un me agrada
Gracias a todos :encouragement:
 

Alphax

Kappa
Social Media
Verificación en dos pasos desactivada
Desde
15 Dic 2013
Mensajes
2.666
Muy bueno.
 

georgebena

Kappa
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
20 Dic 2013
Mensajes
2.558
Muy buen tutorial!!
 

tribano

Alfa
Verificación en dos pasos desactivada
Desde
6 Jul 2014
Mensajes
15
Gracias, es muy bueno y esta muy explicado ;)
 

blogers

Baneado
Pi
SEO
Verificación en dos pasos desactivada
Desde
22 Ago 2010
Mensajes
6.628
Lo he probado y si funciona jejeje buen tuto
 

MoParG

Beta
Verificación en dos pasos desactivada
Desde
10 Feb 2013
Mensajes
83
Muy bueno, gracias por el tuto :encouragement:
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba