Tutorial: Crear Plugin WordPress Parte 1

Con el siguiente tutorial aprenderemos a crear nuestro primer plugin para WordPress. En este primer capítulo vamos a explicar los primeros pasos para crear un plugin WordPress.  Este plugin funcionará introduciendo un shortcode en una página o una entrada de WordPress y mostrará el texto “hola mundo” en la parte frontal de la web.

Para poder seguirlo tendrás que tener conocimientos básicos en programación y saber utilizar WordPress. No te preocupes, intentaré ser lo más claro y sencillo posible y si tienes alguna duda puedes dejar tu comentario abajo.

Bien comenzamos.

Lo primero es explicar lo que es un plugin. Un plugin son básicamente unos archivos de código que añaden funcionalidades extra a WordPress, actualmente hay más de 50.000 plugins distintos y cada día más. Hay plugins de todo tipo, para crear formularios, convertir tu WordPress en una tienda online, generar informes de visitas, facilitar la traducción de tu web, crear sliders… Los hay con versiones gratuitas y otros de pago. Puedes instalarlos directamente en tu WordPress en el menú Plugins.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

Menú Plugins
Captura del menú tomada mientras redactaba esta entrada

 

Pues nosotros vamos a crear un plugin que al introducir [/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][hola_mundo] en una entrada o página al visualizarla en nuestra web aparezca “hola mundo”.

Vamos a empezar a programar, para ello abrimos un editor de texto y copiamos el siguiente código. Después, lo guardamos como garber.php

Este es el inicio del archivo, las líneas son muy claras, el nombre del programa, el autor y la web del autor. Se pueden introducir mucho más datos pero para empezar es suficiente.

Continuamos editando el archivo y añadimos lo siguiente:

Esta es la función que mostrará en pantalla “Hola Mundo”, ahora falta añadir el shortcode que le dice a WordPress cuándo y dónde hacerlo. Añadimos esta línea justo al cierre de la llave.

 

El primer parámetro ‘hola‘ es lo que escribiremos en la página o entrada encerrado entre corchetes así: [hola]. El segundo parámetro ‘funcion_hola‘ es le nombre de la función que se ejecutará. Ya solo nos queda añadir al final del archivo el cierre para indicar que hemos terminado.

El código completo al final de la entrada.

Ahora solo tenemos que copiar el archivo garber.php en la carpeta plugins de nuestra instalación de WordPress. Para ello nos conectamos por ftp, por el programa que nos ofrezca servicio de hosting o si trabajamos en local utilizamos el gestor de archivos.

La ruta correcta es:

Ruta a plugins
Ruta a plugins

 

Ahora si todo es correcto nos vamos a nuestra instalación de WordPress, al apartado Plugins/Plugins instalados y ahí deberá aparecer nuestro programa.

Nuestro plugin
Nuestro plugin

 

Lo activamos y ya podremos usarlo en una de nuestras páginas, para ello solamente tendremos que poner dónde queramos el siguiente código [hola] y aparecerá Hola mundo.

shortcode en una página
Nuestro shortcode en el editor

 

Lo que muestra el shortcode en nuestra web
Lo que muestra el shortcode en nuestra web

 

Espero que haya sido de utilidad, os dejo el código completo.

¿ganas de más? mira nuestra sección de WordPress

 [/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]