Saltar al contenido
Codifíca.me | Desarrollo web | Programación

Crear plugins para WordPress

16 agosto, 2012

En este artículo vamos a crear nuestro primer plugin para WordPress, los pasos a seguir para crear un plugin son bastantes sencillos, la dificultad reside en las características de lo que quieras desarrollar.

Primer plugin para WordPress

Suponemos que sabes que en WordPress, los plugins se guardan en la capeta plugins dentro del directorio wp-content de tu instalación wordpress (DOMINIO/wp-content/plugins/TU_PLUGIN). Para esto, tendrás que crear un fichero php e incluirlo en la dirección interior (TU_PLUGIN.php). Aunque es recomendable que metas todos los ficheros de un mismo plugin dentro de una carpeta con el nombre de tu plugin solo por cuestiones de organización. En este primer plugin para WordPress solo vamos a necesitar crear un fichero .php y subirlo a este directorio.

Primer paso, datos de tu plugin

Creamos un fichero php al que llamaremos NOMBRE_PLUGIN.php, en el que pondremos el nombre del plugin, la página web del plugin, una descripción, la versión del plugin, el autor, y la página web del autor.

Quedaría algo así:

1
2
3
4
5
6
7
8
9
<?php  
 /*
 Plugin Name: Primer plugin
 Plugin URI: https://www.codifica.me
 Description: Muestra un Popup en el que te pide que compartas la web.  
 Version: 1.0
 Author: Miguel B
 Author URI: https://www.codifica.me
 */

Esta imagen muestra cómo se vería el plugin en tu WordPress:

Como crear plugin widget para wordpress

Segundo paso, menu del plugin

Después añadiriamos a la barra lateral del menu del administrador una fila con el nombre del plugin que hemos creado:

1
2
3
4
5
add_action("admin_menu","menu_primer_plugin");
 
function  menu_primer_plugin (){
add_menu_page("Primer plugin", "Título Primer plugin", 10, "primer_plugin", "pagina_primer_plugin");
}

Esta imagen muestra cómo se vería el plugin en tu WordPress:

Como crear plugin para wordpress

Tercer paso, página del plugin

Esta es la página que mostrará las propiedades del plugin dentro del panel de administración, la configuración, los creditos, la cuenta de paypal a la que quieres que te hagan el ingreso :), etc.

Si haces click en la celda correspondiente a tu plugin en el menú de administrador nos llevará a esta página:

1
2
3
4
5
6
7
 
function pagina_primer_plugin(){    
echo "<div class='wrap'>
<h2>Hola  - Esta es la página del plugin </h2>
Puedes poner el código que quieras que wordpress muestre, imagenes, formularios, etc.
</div>";
}

Cuerto paso, acción del plugin

Esta es la acción que realizará el plugin, en este caso vamos a hacer que cada vez que WordPress lea el contenido de un artículo “the_content” ejecute nuestra función alerta, la función alerta como veréis más abajo muestra una alerta con un “Hola Mundo”, si , me he dejado llevar por la originalidad….

1
2
 
add_action("the_content", "alerta");

Quinto paso, función del plugin

Esta es la función alerta que mostrará nuestro ‘Hola Mundo’ en un alert:

El código sería algo así:

1
2
3
4
5
6
7
8
9
10
function alerta($content){
  $muestra    =    '  
<script>
alert("Hola Mundo");
</script>';
 
  $content    =    $muestra . $content;
  return $content;
}
?>

Y con todo esto tendrás tu primer plugin de WordPress finalizado, basta con que lo metas dentro de un zip y lo instales en tu WordPress desde el menu de administración -> plugins -> añadir nuevo plugin -> subir…

Este es el código completo por si quieres probarlo:

Código del plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php  
 /* 
 Plugin Name: Primer plugin 
 Plugin URI: https://www.codifica.me 
 Description: Muestra un Popup en el que te pide que compartas la web.  
 Version: 1.0 
 Author: Miguel B 
 Author URI: https://www.codifica.me 
 */  
 
add_action("admin_menu","menu_primer_plugin");
 
function  menu_primer_plugin (){
add_menu_page("Primer plugin", "Título Primer plugin", 10, "primer_plugin", "pagina_primer_plugin");
}
 
function pagina_primer_plugin(){	
echo "<div class='wrap'> 
<h2>Hola  - Esta es la página del plugin </h2>
Puedes poner el código que quieras que wordpress muestre, imagenes, formularios, etc.
</div>";
} 
 
add_action("the_content", "alerta");
 
function alerta($content){
  $muestra	=	'  
<script>
alert("Hola Mundo");
</script>';
 
  $content	=	$muestra . $content;
  return $content;
}
?>