Practica y crea tu propio plugin de WordPress


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Para poner en práctica todo lo explicado a lo largo de nuestra reciente  serie sobre la creación de plugins para WordPress, en este artículo vamos a crear un plugin que sea capaz de agregar un texto personalizado en el pie de página, para lo que modificaremos las opciones de configuración del sitio, las definiremos mediante el admin y, finalmente, cambiaremos la visualización de nuestra página creada con este gestor de contenidos.

Antes de seguir comenzando en esta práctica, te recomendamos consultar los artículos anteriores, en los que profundizábamos en cada punto: Introducción a la creación de plugins; Los hooks de WordPress, un recurso imprescindible para desarrollar un plugin; y Cómo generar opciones para nuestro plugin en el admin.

Creamos nuestro plugin

En la carpeta wp-content/plugins creamos el subdirectorio configura-pie-plugin, o como desees llamar a tu nuevo plugin.

Luego en esa carpeta crearemos dos archivos:

●     index.php, que será el archivo raíz del plugin.

●     formulario-pie.php, donde más adelante colocaremos el formulario para la configuración del texto del pie.

En el archivo index.php colocamos el comentario con los metadatos del plugin, que podría ser algo como esto:

<?php
/*
Plugin Name: Configura el pie de tu blog
Description: Crea un menú de configuración de un texto para mostrar en el pie del blog
Author: Arsys Internet
Author URI: https://www.arsys.es/
*/

El menú en el admin

Siguiendo los pasos del artículo anterior, en el que explicamos cómo crear menús para el admin, vamos a crear nuestro menú de configuración del pie de página. Este código lo colocaremos en el index.php.

add_action("admin_menu", "plugin_menu_pie");
function plugin_menu_pie() {
  add_menu_page('Configuración del pie', 'Configuración del pie', 'manage_options', 'menu_config_pie', 'crear_menu_pie');
}

Dado el código anterior, cuando se haga clic sobre este nuevo menú, se invocará la función crear_menu_pie() para mostrar la página de configuración del texto del pie de página de nuestro blog. Enseguida vemos el código de esa función, aunque antes tenemos que explicar cómo acceder y modificar las opciones generales de WordPress.

Opciones de WordPress

WordPress mantiene una tabla de la base de datos llamada wp_options, donde aloja diferentes opciones de configuración que se podrán utilizar para modificar el modo con el que WordPress se comporta.

Gracias al API de funciones de WordPress podemos acceder a estas variables, para recuperar o modificar sus valores. Incluso podemos crear nuestras propias variables con datos personalizados.

Vamos a conocer dos funciones principales para acceder y modificar estas opciones:

●     get_option(): Recibe como parámetro la cadena con el nombre de opción cuyo valor se desea recuperar. Devuelve dicho valor, o false en caso que no se pudiera recuperar.

●     update_option(): Se le envía dos parámetros, el nombre de una opción de configuración y el valor que se le pretenda asignar. Si la opción estaba creada, WordPress la modifica. Si la opción no existía previamente, WordPress la crea. Devuelve un boleano indicando el éxito o fracaso del resultado de la operación.

La página de administración del plugin

Ahora, crearemos la página de administración del pluign por medio de un formulario con el que cargaremos y seleccinamos los datos. Es la parte más interesante, en la que crearemos el formulario y recogeremos el valor para administrar la configuración del pie. Como  WordPress es PHP, aquí podemos aplicar todo nuestro conocimiento en este lenguaje.

La función que se encargará de crear la salida para nuestro formulario de configuración del pie se llama crear_menu_pie(). En ella, básicamente tenemos que hacer dos cosas: mostrar un formulario y, en caso que se reciban datos del formulario, almacenarlos en la opción de configuración del pie.

Mostrar el formulario

La parte de mostrar un formulario la haremos en un include, para separar nuestro código del formulario, a fin de mantener más sencillo y mantenible el código. El primer aspecto que podría tener nuestra funcion crear_menu_pie(), con el include podría ser este:

function crear_menu_pie() {
  include('formulario-pie.php');
}

Esta función tendremos que colocarla en el index.php del plugin.

Ahora podemos ver el código de nuestro formulario, que colocaremos en el archivo formulario-pie.php que habíamos creado anteriormente.

<h1>Configuración del pie</h1>
<form method="post">
  <p>
    Texto para footer: <input type="text" name="textopie" value="<?php echo ($valor_option = get_option('valor_footer'))? $valor_option : ''; ?>">
  </p>
  <p>
    <input type="submit" value="Guardar">
  </p>
</form>

Como puedes comprobar, es un formulario de toda la vida, creado con HTML bastante elemental. La parte que puede resultar un poco más interesante desde el punto de vista de WordPress es en la que definimos el value del formulario.

Este value se creará en función de una hipotética configuración actual del pie. Para saber si habíamos configurado un dato anteriormente en el pie usamos la función get_option(). pasando como parámetro el valor de la configuración que queremos traernos.

get_option('valor_footer')

Además, tal como se ha escrito el código PHP, si no se dispone de ningún valor de configuración anterior, se escribe simplemente la cadena vacía.

Recibir el valor del formulario

El valor del formulario, una vez enviado, viajará por post a la misma página del admin de WordPress donde estamos trabajando. Para recibirlo, usarás el array superglobal $_POST de PHP, como hacemos habitualmente en este lenguaje.

El código será algo como esto:

if($_POST && $_POST['textopie']) {
  $texto = $_POST['textopie'];
  if(update_option('valor_footer', $texto)) {
    echo '<p>El valor ha sido almacenado</p>';
  } else {
    echo '<p>No se pudo configurar el texto del pie</p>';
  }
}

Una vez recibido el texto, a través de $_POST[‘textopie’], se hace la modificación de la variable de configuración, usando la mencionada función update_option().

Este código lo colocarás en la misma función que se encarga de generar el output para el menú creado por el plugin. Quedaría más o menos así.

function crear_menu_pie() {
  if($_POST && $_POST['textopie']) {
    $texto = $_POST['textopie'];
    if(update_option('valor_footer', $texto)) {
      echo '<p>El valor ha sido almacenado</p>';
    } else {
      echo '<p>No se pudo configurar el texto del pie</p>';
    }
  }
  include('formulario-pie.php');
}

Con estos pasos realizados, y una vez activado el plugin que acabamos de crear, se podrá encontrar el formulario para administración del pie de la página, que tendría este aspecto.

 

Configurar el pie en el sitio web

La última parte que nos queda por hacer es conseguir que el valor de esta variable de configuración aparezca escrito en el pie de la página. Para esto, tendremos que usar un nuevo hook de WordPress que nos permite ejecutar código en el momento de escribirse el pie de la página.

Recuerda que los hooks se activan con la función add_action(), indicando el nombre del hook y la función que queremos ejecutar.

add_action('wp_footer', 'agregar_en_footer');

La función que mostrará el texto en el pie simplemente tiene que acceder a la variable de configuración, si es que existe, y colocar el valor en la página, generando salida con “echo” o cualquier otra función de PHP para ese efecto.

function agregar_en_footer() {
  if($texto_pie = get_option('valor_footer')) {
    echo "<p>{$texto_pie}</p>";
  }
}

La configuración del hook para el footer, así como su función callback es un código que deberías poner en el index.php.

El único problema de esto es que el hook wp_footer es dependiente de la plantilla. Quiere decir que, para que se pueda enganchar ese hook, necesitamos que en el template se especifique el lugar donde está el pie. Obviamente, la mayoría de los templates que puedas usar ya tienen integrado el enganche para este hook, pero si somos nosotros los que hemos creado la plantilla, tendremos que colocarlo para que funcione.

Así que, en el template, tenemos que asegurarnos que se encuentre esta línea de código, en el lugar donde esté el pie de página.

<?php wp_footer(); ?>

Con eso es todo! ahora deberíamos poder ver nuestro texto configurado en el pie de la página.N obstante, insistimos, para que funcione tienes que asegurarte que el template donde lo uses tenga la invocación a wp_footer(), de modo que el hook de modificación del pie sepa donde actuar.

Este plugin completo lo puedes descargar en este archivo zip para poder examinar su código completo de manera un poco más sencilla. Te recomendamos también consultar los artículos anteriores, en los que profundizábamos en cada punto: Introducción a la creación de plugins; Los hooks de WordPress, un recurso imprescindible para desarrollar un plugin; y Cómo generar opciones para nuestro plugin en el admin.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+