Guía de la Shortcode API de WordPress: 1 Introducción

En esta ocasión vamos a ver de cabo a rabo la Shortcode API de WordPress que, como veremos, es una herramienta imprescindible cuando estamos programando en WordPress.

¿Qué es la Shortcode API?

Bien, como menciona la documentación oficial de WordPress.org, la Shortcode API es un conjunto de sencillas funciones que nos permiten crear nuestros propios Shortcodes para incluirlos en algunas ubicaciones de nuestro WordPress y de esta manera facilitarnos la vida con ciertas tareas que sin disponer de el Shortcode en cuestión, nos llevaría mucho más tiempo y nos provocaría mas de un quebradero de cabeza.

A lo largo de los artículos dedicados a la Shortcode API iremos viendo y avanzando sobre este tema.

¿Qué es un Shortcode?

Claro, he comentado qué es la Shortcode API pero no he comentado qué es un Shortcode.

Pues bien, un Shortcode lo podríamos definir como un «código» a través del cual llamamos a una función que tenemos previamente implementada y la cual realizará una o varias operaciones aunque también podemos utilizarla para hacer sustituciones. Esta última utilidad es la más utilizada en estos momento o por lo menos eso creo yo.

Un ejemplo para entenderlo mejor

El típico ejemplo de lo más sencillo es crear un Shortcode para sustituir en el lugar en el que ponemos el Shortcode por otro contenido.

Por ejemplo, imaginad que tenemos costumbre de poner el texto «Google» muchas veces en casi todos los artículos o entradas que creamos, y creamos muchas. Es un ejemplo, ok?

Pero no sólo eso. Imaginad que sobre el texto Google siempre ponéis el enlace a la web de Google España. Entonces, cada vez que ponéis el texto Google tenéis que seleccionarlo, pulsar sobre el botón de «Insetar / editar enlace» del editor de texto de WordPress y poner el texto que hará de enlace «http://www.google.es» y ya que estamos, hacer check para que se abra en otra pestaña del navegador.

Vale, si lo tenemos que hacer 5 veces en un mes pues casi que no nos importa pero si tenemos que hacerlo 10 veces todos los días… Esto ya es ago tedioso y hay que intentar siempre que sea posible automatizar las tareas para ahorrar tiempo.

Para el caso que estamos comentando, podemos crear un Shortcode para que cada vez que escribamos ese código en el editor de entradas de WordPress, o sustituya por lo que finalmente queremos, que no es otra cosa que el texto Google que contenta un enlace a «http://www.google.es».

Entonces, nosotros sólo tendríamos que escribir el código [google] en nuestra entrada y el lo sustituiría por Google.

Interesante y útil, ¿verdad?

Hemos visto un ejemplo muy sencillo pero ya veremos que podemos hacer verdaderas virguerías con los Shortcodes. Ya veréis…

Tipos de Shortcodes

Como ya habréis adivinado o intuido y si no lo habéis hecho, os lo digo yo: Hay varios tipos de Shortcodes. Cada uno de estos tipos tiene sus propias características y añaden funcionalidades y características que nos vienen muy bien para realizar tareas avanzadas.

Hay tres tipos de Shortcodes ( o cuatro, según se mire):

Sencillo y sin parámetros ni contenido.

Este tipo es el que hemos comentado hace un momento:  

[codigo]

Y como también hemos comentado, este tipo de Shortcode lo escribimos tal cual y WordPress se encarga de sustituirlo por lo que hayamos programado en la función correspondiente.

Con parámetros.

Estos del estilo: [codigo parametro=»valor»]

En este caso se utiliza el parámetro que se pasará a la función del Shortcode y realizará algo teniendo en cuenta el parámetro en cuestión.

Como ejemplo podemos seguir con el anterior y darle una vuelta para que cuando pongamos [enlace url=»google»] nos lo intercambie por Google. Parece igual que el anterior, ¿verdad? Pues no, porque este nos permitiría tomar el parámetro y en la función hacer una cosa u otra o más bien mostrar una cosa u otra en función de ese parámetro.

Por ejemplo, si en lugar de «google» le indicamos «facebook» o «bing», que haga lo correspondiente dependiendo del valor del parámetro que le indiquemos. Por consiguiente habrá que implementar estas opciones en la función del Shortcode.

Para entenderlo mejor, a continuación indico tres posibles opciones de este Shortcode :

[codigo url=»google»]   –>    Google

[codigo url=»facebook»]  –>  Facebook

[codigo url=»bing»]  –>  Bing

Como vemos en los ejemplos anteriores, dependidiendo del parámetro que indiquemos, mostrará una cosa u otra.

En este ejemplo hemos usado un parámetro pero es posible utilizar más de uno.

Haré algún ejemplo en otro artículo de esta serie para que veamos cómo se hace, cómo crear el código necesario para implementarlo.

Con contenido.

Este tipo de Shortcode se implementa de la siguiente forma:

[codigo]Contenido dentro del shortcode[/codigo]

Observamos que es como el primer tipo que hemos comentado antes pero extendemos su funcionalidad introduciendo contenido entre

[codigo] y [/codigo]

.

De forma similar al tipo de Shortcode anterior, en este caso también podremos utilizar el contenido que se indique entre la apertura y cierre del Shortcode.

Podríamos pasarlo a la función que  implementemos en el código del Shortcode y hacer algo con este contenido pero también podríamos hacer que, simplemente sea texto y lo formateemos a nuestro gusto. Por ejemplo, que se le aplique: negrita, un tamaño de fuente de 22, cambiarle el tipo de fuente y/o cualquier cosa que se nos ocurra.

Y ahora vamos a comentar el último tipo de Shortcode.

Con parámetros y con contenido.

[codigo parametro=»valor»]contenido[/codigo]

Si hemos prestado atención a los anteriores tipos, nos daremos cuenta que este tipo es una mezcla del segundo y del tercero, ¿verdad?

Utilizará uno o varios parámetros y también contenido.

No me voy a extender más con este tipo porque habla por si mismo y haré algún ejemplo sobre este y los demás en otros artículos de esta serie, más adelante.

Espero que os haya gustado este artículo sobre la Shortcode API de WordPress y que me comentéis lo que queráis, dudas, comentarios, etc…

Si duda, la utilización de los Shortcodes es imprescindible en programación WordPress y debemos aprender a manejarlos con soltura. Me refiero a lo que se refiere a su programación.

En el próximo artículo de esta serie veremos las diferentes opciones que tenemos para crear un Shortcode y alguna que otra cosa más.

Saludos y hasta el próximo artículo.

Programad todo lo que podáis!!

Plugins WordPress: Crear menú y submenú en la administración

Una de las primera cosas que debemos saber cuando creamos plugins para WordPress, es crear un menú en el panel de administración donde se recojan las diferentes opciones de nuestro plugin o que simplemente se muestre información relevante sobre el mismo.

En este primer tutorial sobre esto, voy a hacer algo sencillo para que todos los que estáis empezando con el desarrollo de Plugins en WordPress os sea más sencillo comprenderlo.

Bueno, y ya puestos, una captura para saber a lo que me refiero cuando digo un menú de administración:

Wordpress crear plugin menu administracion

Antes de nada, comento que el plugin que voy a crear lo voy a llamar «OAF Crear Admin Menu«. Creo que es bastante aclaratorio, ¿verdad?

Ahora creamos la carpeta «oaf-create-admin-menu» y dentro de esta carpeta creamos el fichero «oaf-create-admin-menu.php«.

Bien, ahora rellenamos los campos de descripción del plugin:

<?php
/*
Plugin Name: OAF Create Admin Menu
Plugin URI: https://oscarabadfolgueira.com/plugins-wordpress-crear-menu-y-submenu-en-la-administracion
Description: This plugin creates an admin menu and a submenu
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://oscarabadfolgueira.com
License: GPLv2
License URL: http://www.gnu.org/licenses/gpl-2.0.html
*/
?>

Perfecto, ahora vamos a lo que nos interesa.

La función que nos interesa en este caso es:

add_menu_page()

Pero así sin más no nos ofrece mucho, ¿verdad?

Aquí tienes en enlace al Codex para la función add_menu_page().

Vemos la función con los parámetros:

add_menu_page ( page_title, menu_title, capability, menu_slug, function, icon_url, position)

Veamos qué son los parámetros de esta función:

page_title: Es el texto para el título de la página HTML. Lo que va entre las etiquetas <title> y </title>

menu_title: El texto que se utilizará como nombre del menú en el panel de administración. Vamos, el texto que vemos…

capability: Indicamos el nivel de usuario necesario par ver este menú.

menu_slug: El slug, sin más.

function: La función que mostrará el contenido en la página de opciones o ajustes del menú.

icon_url: Si disponemos de un icono personalizado, podemos indicar la ruta. Si no es así, podemos indicar un dashicon.

position: La posición que ocuparé nuestro nuevo menú en el panel de administración. Aquí indicaremos un valor numérico.

Ahora, antes de escribir código, voy a indicar algunas aclaraciones:

capability: En este enlace dispones de todas las que puedes utilizar.

Dashicons: En este enlace tienes todos los dashicons.

Capability: Aquí también tienes información al respecto.

Ahora si:

add_action( 'admin_menu', 'oaf_create_admin_menu');
function oaf_create_admin_menu() {
 add_menu_page ( 'OAF Plugin', 'OAF Plugin', 'manage_options', 'oaf_create_admin_menu_plugin', 'oaf_create_admin_menu_function', 'dashicons-megaphone' );
}
function oaf_create_admin_menu_function() {
}

¿Qué hemos hecho?

Si os fijáis en las opciones que he puesto anteriormente, os quedará claro. Lo único que igual es lo referente a ‘manage_options’ que es una capability de tal forma que sólo los administradores puedan ver este menú y el ‘dashicons-megaphone que es un icon de un megáfono.

Si te fijas, verás que he creado la función oaf_create_admin_menu_function(){} sin nada. Esto lo hago porque sino, nos podría dar un error ya que estamos invocando a una función que no existe.

Guardamos el fichero que hemos creado y subimos el plugin a nuestro WordPress. Bien sea directamente por FTP o mediante un Zip a través de la sección de plugins de nuestra instalación de WordPress.

Yo ya lo he subido para que podáis ver como va quedando:

oaf plugin menu admin

Interesante, ¿verdad?

Ya veis el nombre del menú y el icono del megáfono de la izquierda.

Esto no hace nada, por supuesto. Por lo menos por el momento… Bueno sí, si que hace algo. Si pulsamos sobre el enlace del menú, se abrirá una página en la que no muestra nada. Si no añadimos la función que estamos llamando, no dará un error. La función en cuestión será la que «pinta» o muestra el contenido de la pagina de opciones de este menú. Pero esto ya lo veremos en otro tutorial.

Lo que si vamos a hacer antes de terminar este tutorial es crear un sub-menú. Ya sabrás que en algunos plugins es habitual que dispongan de varias opciones como por ejemplo: «opciones» y «configuración».

Pues bien, vamos a crear esos dos sub-menús.

La función en este caso es:

add_submenu_page()

Casi era de esperar…

Y la función con los parámetros permitidos:

add_submenu_page( parent, page_title, menu_title, capability, menu_slug, [function])

Ya vemos que es similar a la función add_menu_page() pero en este caso debemos indicarle el «padre», es decir, el menú del que desciende.

Para el ejemplo voy a crear dos sub-menús: «opciones» y «configuración». bueno, ya que nos tenemos que acostumbrar a escribir los plugins en Inglés, vamos a optar por «Options» y «Settings». En otro tutorial ya explicará como internacionalizar los plugins.

De la misma manera que antes, creo un par de funciones vacías para que no nos dé error al llamar a funciones que no existen:

function oaf_create_admin_menu() {
	add_menu_page ( 'OAF Plugin', 'OAF Plugin', 'manage_options', 'oaf_create_admin_menu_plugin', 'oaf_create_admin_menu_function', 'dashicons-megaphone' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Options', 'Options', 'manage_options', 'oaf_options_submenu1', 'oaf_options_function' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Settings', 'Settings', 'manage_options', 'oaf_options_submenu2', 'oaf_settings_function');
}
function oaf_create_admin_menu_function() {
}
function oaf_options_function() {
}
function oaf_settings_function() {
}

Si nos fijamos, vemos que la función es similar  a la de «add_menu_page» pero en este caso debemos indicarle el «padre» que es: «oaf_create_admin_menu_plugin».

Con esto que acabamos de hacer deberías obtener algo parecido a lo siguiente:

oaf-plugin-menu-admin-02

Y esto:

oaf-plugin-menu-admin-03

Como veis, hemos creado un menú en la zona de administración de nuestro WordPress. Estoy seguro que a muchos de vosotros que es la primera vez que creáis un plugin para WordPress, esto os hará mucho ilusión.

Para terminar, pongo el código completo del plugin:

<?php
/*
Plugin Name: OAF Create Admin Menu
Plugin URI: https://oscarabadfolgueira.com/plugins-wordpress-crear-menu-y-submenu-en-la-administracion
Description: This plugin creates an admin menu and a submenu
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://oscarabadfolgueira.com
License: GPLv2
License URL: http://www.gnu.org/licenses/gpl-2.0.html
*/
add_action( 'admin_menu', 'oaf_create_admin_menu');
function oaf_create_admin_menu() {
	add_menu_page ( 'OAF Plugin', 'OAF Plugin', 'manage_options', 'oaf_create_admin_menu_plugin', 'oaf_create_admin_menu_function', 'dashicons-megaphone' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Options', 'Options', 'manage_options', 'oaf_options_submenu1', 'oaf_options_function' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Settings', 'Settings', 'manage_options', 'oaf_options_submenu2', 'oaf_settings_function');
}
function oaf_create_admin_menu_function() {
}
function oaf_options_function() {
}
function oaf_settings_function() {
}
?>

Pues como ya podréis imaginar, esto no es nada, todavía no hemos empezado ni siquiera a ver la punta del iceberg de todo lo que podemos hacer programando para WordPress.

En posteriores tutoriales seguiremos viendo cosas básicas sobre la creación de plugins para WordPress y poco a poco os introduciré en este maravilloso mundo de la programación.

Dejo el código del plugin en Github por si queréis descargarlo y echarle un vistazo más en detalle pero ya veis que no tiene nada, es de lo más sencillo y además, no hace nada!

Saludos y hasta la próxima.

Resetear base de datos de WordPress

Resetear base de datos de WordPress

Si estás visitando este blog quiere decir que te interesa el desarrollo en WordPress, ya sea de plugins, themes o realizar alguna mejora o modificación a tu instalación de wordpress. Vamos, que ya sabes de lo que estoy hablando…

Bien, creo que una herramienta muy útil para los desarrolladores de WordPress, de cualquier tipo, es la opción de poder «resetear» una instalación de wordpress a su estado inicial.  Por lo menos la base de datos que es lo que realmente importa, ¿verdad?

Qué tedioso es tener que realizar una instalación nueva de WordPress cada vez que hacemos una prueba y sale mal. Es una pérdida de tiempo que no nos podemos permitir y el siguiente plugin nos ayuda un poco en esta labor reseteando la base de datos a su estado inicial.

Eso si, debes tener en cuenta que no elimina ficheros, ¿vale? Sólo la base de datos.

Yo ya lo uso desde hace tiempo y la verdad es que me es muy útil.

Pruébalo y me cuentas tus impresiones.

El plugin del que hablo es: «WordPress Database Reset«.

Como apunte comentar que podemos decirle al plugin si queremos resetear toda la base de datos o sólo ciertas tablas de la misma.

Venga, hasta la próxima!

Actualizar WordPress a una versión en desarrollo

Ya sabemos que es buena idea tener nuestras webs en WordPress actualizadas a la última versión «estable«. Esto no hay que discutirlo, ¿verdad?

Pues bien, también sabemos que, aunque la última versión estable sea por ejemplo la 4.3.1 (en este caso), existen versiones en desarrollo como la 4.3.2 beta, etc…

Podríamos actualizar a una versión en desarrollo para hacer pruebas, testear la versión y enviar reportes a WordPress para que los tengan en consideración. Para esto podemos utilizar el plugin «WordPress Beta Tester«. El uso de este plugin es muy sencillo y no me voy a detener a explicarlo porque el objetivo de este post es otro.

Objetivo del post

El objetivo del post no es otro que aprender a actualizar una instalación de WordPress a una versión que todavía no está disponible a través del plugin que he comentado anteriormente.

Para que nos hagamos una mejor idea, en el caso que me ocupa, mientras escribo este post, voy a actualizar esta instalación de wordpress a la versión «4.4 RC1«. Recuerdo que la versión estable ahora mismo es la «4.3.1«.

Para hacer esta actualización vamos a seguir una serie de pasos que explico a continuación.

Antes de actualizar

Como ya sabréis de sobra, antes de actualizar la versión de WordPress deberíamos realizar respaldos tanto de los ficheros como de la base de datos. Ya sabéis, es posible que ocurra alguna desgracia a la hora de realizar la actualización.

Existen varios plugins de copia de seguridad muy buenos para hacer esto. Yo os dejo el enlace de uno que me gusta mucho: UpdraftPlus – Backup and restauration. Como ya digo, este plugin es muy bueno en la versión free pero la versión de pago es mucho mejor. Bueno, cada uno que lo haga con el que mejor se apañe.

Ya, pero esto sería muy fácil por lo que lo que en este caso yo voy a hacerlo a mano, a la vieja usanza. Hago una copia de todos los ficheros de la instalación de wordpress en mi ordenador así como una copia de la base de datos. La copia de la base de datos también la hago a la vieja usanza, bueno, a través de PhpMyAdmin. es muy sencillo osea que no lo explico. Ah, bueno, los ficheros los bajo directamente con un cliente de FTP como Filezilla.

Como ya he comentado, yo lo voy a ir haciendo a medida que escribo el post. En este punto ya tengo una copia de los ficheros y de la base de datos en mi ordenador. Prosigamos….

Eliminar archivos de la instalación actual de WordPress

Vamos a eliminar varios ficheros de la instalación de WordPress. Esto lo podemos pasar por alto pero yo prefiero ir a lo seguro porque es posible que a la hora de sobreescribir alguno de los ficheros, no lo haga correctamente y se nos quede algún fichero pendiente.

Antes de nada. No eliminamos el fichero wp-config.php y la carpeta wp-content.

También debemos tener en cuenta que si hemos realizado alguna modificación en alguna plantilla del core de wordpress, deberemos posteriormente subir el fichero css o el que corresponda dependiendo de las modificaciones que hayamos hecho.

Bien, yo ya he borrado los ficheros excepto los que he comentado antes y ahora lo que hago es subir todo el contenido de la versión 4.4 RC1 a través de ftp al servidor.

Hecho.

Último paso

Ahora, cuando volvemos al panel de administración de nuestro WordPress, nos mostrará el siguiente mensaje indicando que es necesaria una actualización de la base de datos de WordPress. Sin más preguntas, pulsamos sobre el botón.

actualizar wordpress a versión en desarrollo 4.4 rc 1

Tras esto nos mostrará el mensaje de que todo ha ido bien:

actualizar wordpress a versión en desarrollo 4.4 rc 1

Pulsamos en continuar y si todo ha ido bien como dice el mensaje anterior, accedemos al panel de administración de nuestro WordPress y podremos ver en la parte inferior derecha el siguiente texto.

actualizar wordpress a versión en desarrollo 4.4 rc 1

Bueno, en cada caso la versión correspondiente.

Espero que a vosotros también os haya ido todo correctamente.

Ahora ya podemos probar las nuevas características y funcionalidades de la nueva versión en desarrollo.

Cómo crear un plugin para WordPress

Cómo crear un plugin para WordPress

Sin duda una de las cosas más interesantes de WordPress, o por lo menos lo es para mi, es la opción de poder crear Plugins propios que añadan o modifiquen la funcionalidad de WordPress a nuestro gusto.

Seguro que te ha pasado más de una vez que has buscado un plugin que haga exactamente lo que quieres pero no se ajusta totalmente a vuestras necesidades, ¿verdad? Para estos casos viene bien conocer el funcionamiento del desarrollo de plugins porque podríamos hacer ligeras modificaciones para que se ajuste a nuestras necesidades.

Esto ya es menos probable pero es posible. Me refiero a que has buscado un plugin que haga algo en concreto y no lo has  encontrado ni siquiera nada parecido. Pues bien, en estos casos es en los que sería buena idea crear un nuevo plugin para esto que no encontramos.

Este será el primero de varios tutoriales dedicados al desarrollo de plugins para Wodpress y como no podía ser de otra manera, he pensado que lo mejor es empezar por el principio e ir poco a poco.

Si estás aquí doy por sentado que tienes algunos conocimientos sobre esto, somo por ejemplo qué es un plugin. Además, supongo que tendrás algunos conocimientos sobre php, html y css. No se requieren muchos conocimiento pero algo básico si que te lo aconsejo.

En este primer tutorial sobre desarrollo de plugins wordpress voy a comentar la estructura y lo necesario para crear plugins.

1-. Estructura de directorios.

Los plugins, como ya sabrás, están ubicados en el directorio /wp-content/plugins de la instalación de WordPress.

Es posible crear un plugin que sea sólo un fichero pero lo más recomendado es crear un directorio o carpeta para cada uno. Este directorio tendrá por nombre el del plugin.

Debemos tener en cuenta que el nombre del plugin que vamos a crear debe ser descriptivo, es decir indique lo que hace el plugin. Además, debe ser exclusivo y coincidir con ningún otro del repositorio de WordPress. En el caso que nos ocupa no hace falta porque es sólo un ejemplo.

Dentro de este directorio que podríamos llamar para este ejemplo: «mi-primer-plugin«, debe tener dentro un fichero con el mismo nombre que la carpeta y con extensión .php.

  • /wp-content
    • /plugins
      • /mi-primer-plugin
        • mi-primer-plugin.php

En la estructura anterior sólo hemos indicado lo necesario e imprescindible para crear un plugin pero a continuación pongo algo más extendido y que seguramente será lo más normal a partir de ahora:

  • /mi-primer-plugin
    • mi-primer-plugin.php
    • uninstall.php
    • /js  (directorio para archivos javascript)
    • /css  (directorio para archivos css)
    • /includes  (directorio para archivos php adicionales)
    • /images  (directorio para imágenes)

Bien, una vez comentado lo anterior, vamos a editar el fichero «mi-primer-plugin.php» para que por lo menos aparezca en las sección de plugins del panel de administración de WordPress.

Como decía, editamos el fichero «mi-primer-plugin» y de momento incluiremos lo siguiente:

<?php
/* 
Plugin Name: Mi primer plugin 
Plugin URI: https://oscarabadfolgueira.com
Description: Plugin de ejemplo para saber cómo crear un plugin
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://oscarabadfolgueira.com
License: GPLv2+
*/

Creo que es bastante visual pero aún así te comento que:

<?php  –> Abrimos para incluir código php.

/*  …   */   –> Comentamos toda la cabecera de información de plugin.

Plugin Name:   -> Nombre del plugin.

Plugin URI:  –> Dirección web del plugin.

Description:   –>  Descripción de lo que hace el plugin.

Version:   –>  Versión del plugin.

Author:  –>  Autor del plugin. Tú mismo.

Author URI:   –>   Web del autor.

License:  –>  Tipo de licencia.

Pues bien, con esto ya tendríamos nuestro plugin creado. Ya, que todavía no hace nada, ya lo se, pero es simplemente para que veas que con sólo lo que acabamos de hacer, lo guardamos, lo subimos a nuestro WordPress en el lugar que le corresponde y ya podremos ver algo parecido en la sección de Plugins del Backend de WordPress:

Como crear un plugin para WordPress

Interesante cuanto menos, ¿verdad? Pues esto es sólo el principio.

Ahora lo podemos activar:

Como crear un plugin para WordPress

Si, ya se que no hace nada pero es para que veamos, sin mas…

Para terminar este post de introducción a la creación de plugins para WordPress solo comentar que también está bien visto incluir el texto de la licencia o un enlace a la misma.

Bueno a partir de ahora iré publicando tutoriales más interesantes y, por supuesto, que hagan algo.

Hasta la próxima!

Ir al contenido