- Desde
- 8 Jun 2014
- Mensajes
- 281
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.
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.
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:
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:
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.
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:
Nuestra función menu creará un menú y una subpágina:
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.
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 :
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
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
Luego debemos crear la función qué obtendrá el código:
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).
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.
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).
