Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

Crea un plugin personalizado de WordPress desde cero

by
Difficulty:AdvancedLength:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Este tutorial describirá la implementación de un plugin de WordPress a partir de cero. El plugin se conectará a una base de datos externa de OSCommerce y mostrará productos aleatorios en tu sitio de WordPress. También implementa una página de configuración para el panel de administración de Wordpress.



1. Introducción

WordPress está ganando cada vez más popularidad día a día, no sólo como una plataforma de blogs, sino también como un sencillo CMS, mejorando y ampliando su funcionalidad básica hasta convertirse en una necesidad diaria para muchos desarrolladores. Afortunadamente, los desarrolladores de WordPress han previsto estas necesidades y han añadido la posibilidad de personalizar la funcionalidad básica mediante la adición de plugins. Básicamente, un plugin de WordPress es un fragmento de código independiente (más o menos) que se puede ejecutar en diferentes secciones y etapas dentro de una página o sitio.

En el tutorial de hoy vamos a hablar de la creación de un plugin de WordPress que extrae y muestra productos de una base de datos externa de la tienda OSCommerce. Comenzaremos describiendo la estructura de archivos de un plugin y donde debe ser incluido en la estructura de WordPress, entonces echaremos un vistazo más de cerca a cómo hacer que nuestro plugin sea visible para WordPress y lo integraremos con acciones ejecutadas por su marco. A continuación, vamos a crear un panel de configuración para nuestro plugin con el fin de permitir que el administrador del sitio pueda personalizarlo según sus necesidades. Una vez hecho esto, implementaremos las propias funciones del front-end que interactuarán con la base de datos de OSCommerce y extraerán los datos necesarios. Por último, modificaremos la plantilla predeterminada para mostrar los datos extraídos en el sidebar. ¿Emocionado? ¡Empecemos!

Final Product

2. Introducción

Aunque sería posible seguir este tutorial simplemente leyéndolo, Recomendaría instalar WordPress de forma local en tu ordenador y seguir el tutorial implementando todos los pasos. Para esto, necesitarás un servidor local que se ejecute en tu máquina, como XAMPP, por ejemplo. Una vez lo tengas en ejecución, descarga e instala WordPress. Encontrarás amplia información sobre el proceso de instalación y la solución de problemas en el sitio de Wordpress. Para este tutorial vamos a utilizar la versión 2.7

Más adelante, tendrás que configurar una tienda de OSCommerce en tu máquina. Puedes descargar la última versión aquí: http://www.oscommerce.com/solutions/downloads


3. Archivos y carpetas

En primer lugar, tendremos que crear nuestros archivos básicos y la estructura de carpetas. WordPress almacena sus plugins en la carpeta wp-content/plugins/. Este también es el lugar donde vamos a añadir nuestros archivos. Normalmente, si tu plugin va a ser muy simple, incluirás todo el código dentro de un solo archivo PHP. En este caso, simplemente guardarás el archivo en la carpeta mencionada anteriormente. Sin embargo, en nuestro caso, vamos a utilizar dos archivos (uno para el archivo principal del plugin y otro para implementar la página de administración) por lo tanto vamos a poner todos nuestros archivos en una carpeta concreta que vamos a denominar oscommerce_importer. Sigue adelante y crea esta carpeta.


4. Crear el archivo del plugin

A continuación, debemos crear el archivo de nuestro plugin principal. Lo llamaremos oscommerce_importer.php. Realmente puedes nombrarlo como quieras, no habrá ninguna diferencia.

Si ahora abres el panel de administración de tu instalación de WordPress y navegas a las secciones Plugins, tu pantalla tendrá un aspecto similar a este:

Admin panel

Como puedes ver, no existe la más mínima señal de nuestro nuevo plugin. Es hora de cambiar esto y decirle a WordPress que nuestro archivo va a implementar un plugin. El proceso para hacerlo es muy simple. Todo lo que tenemos que hacer es añadir una cabecera de información específica del plugin en nuestro recién creado archivo. Esta cabecera estándar tendrá el siguiente aspecto:

Bastante simple, ¿no crees? Puedes, por supuesto, cambiar el contenido de esta cabecera a tu gusto, pero asegúrate de mantener todas las líneas, de lo contrario WordPress no reconocerá correctamente tu plugin.

Si actualizas la página de plugins de tu panel de administración, ahora verás que nuestro plugin aparece listado junto al resto.

Admin panel with deactivated plugin

¿Ves cómo se extrae toda la información relevante como el nombre, la descripción, el autor, la URL de la cabecera de información? Por eso es siempre es importante completar correctamente esta información. Vamos a activar nuestro plugin haciendo clic en el botón Activar a la derecha de la entrada del plugin.


5. Trabajar con ganchos de acción

Nuestro plugin ahora se muestra en el panel de administración para que WordPress sea consciente de su existencia. Sin embargo, al no contener nada a excepción de la cabecera de información. no hace nada todavía. Vamos a cambiar esto ahora.

Wordpress ofrece una excelente forma de incluir el código de tu plugin en diferentes lugares en toda la plantilla, ya sea en ubicaciones físicas dentro de una página o posiciones lógicas dentro del proceso de creación de una página que va a ser mostrada. En primer lugar, vamos a echar un vistazo más de cerca a la segunda categoría, las posiciones lógicas, más conocidos como ganchos de acción.

Ganchos de acción

Puedes ver los ganchos de acción como funciones de devolución de llamada. Siempre que WordPress esté ejecutando una determinada operación, como, por ejemplo, mostrando el pie de página, permitirá que tus plugins ejecuten su propio código el cual debe ejecutarse en ese exacto momento.

Para una mejor comprensión, vamos a considerar un plugin genérico llamado my_plugin que implementa una función llamada mp_footer() que tiene que ejecutarse cada vez que se muestra el pie de página. Le diremos a WordPress que invoque esta función cuando tenga que mostrar el pie de página mediante una función especial llamada add_action():

La función add_action() toma el nombre del gancho de acción como su primer parámetro y el nombre de la función que se debe ejecutar, como un segundo parámetro. Esta llamada de función se añadirá al archivo principal de tu plugin (el que contiene la cabecera de información), por lo general, justo bajo el código de función que debe ser ejecutado (mp_footer() en nuestro ejemplo). Encontrarás el listado completo de ganchos de acción disponibles en el Codex de Wordpress.

Usaremos ganchos de acción en el siguiente capítulo, donde construiremos la página de administración de nuestro plugin.


6. Crear la página de administración del plugin

Empezaremos la implementación del módulo definiendo sus parámetros configurables y haciendo que sean accesibles para el administrador del sitio. Veamos cuáles serían estos fragmentos de configuración:

  • Configuración de la base de datos
    • servidor de la base de datos
    • nombre de la base de datos
    • usuario de la base de datos
    • contraseña de la base de datos
  • Configuración de la tienda
    • URL de la tienda
    • carpeta para las imágenes de producto

En primer lugar, necesitamos el servidor, el nombre, el usuario y la contraseña de la base de datos para poder conectarnos a ella y extraer los datos necesarios. En segundo lugar, necesitamos algunos datos generales sobre la tienda como su URL y la carpeta donde se almacenan las imágenes de producto. Necesitamos esta información para poder construir los enlaces porque las rutas contenidas en la base de datos son todas relativas a la carpeta de imágenes de producto anteriormente mencionada.

Ahora que sabemos lo que queremos incluir en el panel de configuración, es el momento de implementarlo. Comenzaremos creando un nuevo elemento de menú para acceder a la página y lo colocaremos dentro del menú Ajustes. ¿Recuerdas nuestra conversación sobre los ganchos de acción en el capítulo anterior? Es hora de usar esta función.

Si te desplazas por la lista de ganchos de acción, verás que WordPress también proporciona uno que es invocado cuando se ha generado la estructura básica de menú (admin_menu) por lo tanto, este sería el lugar óptimo para llamar y crear nuestro propio elemento de menú.

Ahora que hemos identificado la acción que vamos a usar, todo lo que necesitamos es definir nuestra propia función la cual será invocada cuando este gancho de acción sea ejecutado. Llamaremos a nuestra función oscimp_admin_actions() en la que oscimp_ representa el importador de oscommerce y se utiliza para crear un nombre de función posiblemente único que no entre en conflicto con ninguna otra función del nucleo de WordPress o cualquiera de sus plugins. Veamos qué aspecto tendrá el código:

Como puedes ver, estamos creando nuestra función oscimp_admin_actions() y después la asociamos al gancho de acción admin_menu utilizando la función add_action(). El siguiente paso sería añadir código a nuestra función oscimp_admin_actions() para crear verdaderamente el nuevo elemento de menú.

Al igual que con la mayoría de las cosas de WordPress, añadir un nuevo elemento de menú también es muy fácil. Todo se reduce a invocar a una única función. Nos gustaría añadir nuestro nuevo elemento de menú al menú Ajustes por lo que, en este caso, la función que necesitamos es add_options_page(). Añadiremos el código dentro de la función oscimp_admin_actions().

Si actualizas la página de administración, verás que ya aparece el nuevo elemento de menú en Ajustes.

New menu item

Cada menú existente tiene su propia función que se utilizará para añadir elementos de submenú. Por ejemplo, si queremos añadir nuestro elemento de submenú al menú Herramientas en lugar de hacerlo en Ajustes, usaríamos la función add_management_page() en lugar de add_options_page(). Puedes encontrar más detalles sobre las opciones disponibles en la sección Añadir menús de administración del Codex de WordPress.

Si volvemos a la línea de código recién añadida, probablemente observarás el último parámetro. Esto es en realidad un nombre de función que será invocada cuando se haga clic en el elemento de menú recién añadido y se utilizará para construir la página de administración de nuestro plugin. A continuación, añadiremos esta nueva función. Sin embargo, antes de proceder debemos detenernos por un momento y pensar en lo que implementaremos en esta página.

Ya definimos los parámetros que queremos que sean configurables (servidor, nombre, usuario, etc. de la base de datos) por lo que éstos tendrán que ser incluidos en un formulario de manera que el usuario pueda enviar los datos a la base de datos. Una vez definido el formulario, necesitaremos un poco de código que extraiga los datos enviados del formulario y los guarde en la base de datos. Por último, pero no menos importante, necesitamos código para extraer los datos existentes de la base de datos (si los hay) y prerrellenar el formulario con estos valores. Como puedes ver, hay bastantes cosas por hacer, podría ser una buena idea separar esta funcionalidad a su propio archivo. Vamos a nombrar el archivo oscommerce_import_admin.php. Ahora, avanza y crea un archivo vacío con el nombre que acabamos de mencionar.

Como ya se ha comentado, tendremos que crear la función que mostrará la página de configuración de nuestro plugin (llamamos a esta función oscimp_admin()). El código dentro de esta función se incluirá desde nuestro archivo PHP recién creado, oscommerce_import_admin.php

Si ahora haces clic en el enlace bajo el menú Ajustes, serás dirigido a una página vacía. Esto se debe a que nuestro archivo oscommerce_import_admin.php sigue estando vacío.

Empty plugin configuration page

A continuación, vamos a crear nuestro formulario. Para ello usaremos el siguiente código:

Explicación del código

Si estás familiarizado con HTML y PHP, el anterior código tendrá algún sentido, pero, aún así, vamos a revisar brevemente las líneas de código.

  • Comenzamos creando un div con la clase wrap. Esta es una clase estándar de Wordpress que hará que nuestra página se visualice como cualquier otra página del área de administración.
  • El formulario usará el método POST para devolver los datos a sí mismo. Esto significa que los datos del formulario serán recibidos por la misma página por lo que podemos añadir el código de actualización de la base de datos al mismo archivo.
  • A continuación, hay un campo oculto que se usará para determinar si la actual página se muestra después de que el usuario haya presionado el botón Opciones de actualización o no. Cuando la página reciba los datos del formulario, el valor de este campo se establecerá en Y.
  • Las siguientes líneas crearán los campos de entrada de formulario para la configuración de la base de datos y el almacenamiento. Como puedes fácilmente ver, los parámetros de valor se establecen en base al contenido de las variables PHP. Hablaremos de esto pronto.
  • Ahora, si actualizas la página de administración, verás nuestro recién creado formulario. Sin embargo, al presionar el botón Opciones de actualización no tendrá lugar ningún efecto que no sea la actualización de la página y los campos de formulario están vacíos.
Plugin configuration page with form

Gestionar los datos

Una vez que el formulario esté listo para usar, nos encargaremos del propio control de los datos del formulario, actualizando la base de datos y recuperando los valores de opción existentes en ella. Para ello, primero tendremos que decidir si la página actual se muestra después de que el usuario haya presionado el botón Opciones de actualización o no. Lo haremos analizando el valor del campo oculto del formulario, oscimp_hidden. El siguiente código se añadirá al principio de nuestro archivo oscommerce_import_admin.php, antes del código para mostrar el formulario:

A continuación, manejaremos los datos del formulario y actualizaremos en consecuencia las opciones del plugin en la base de datos. Para ello utilizaremos la función update_option(). El primer parámetro de esta función es el nombre de la opción que se demandará más adelante para identificar de forma única esta opción y su valor. El segundo parámetro es el valor que va a ser asignado.

El código anterior es casi casi auto-explicativo, pero ten en cuenta que aquí estamos utilizando las variables PHP que hemos mencionado anteriormente al construir el formulario. Estas variables se actualizarán con los actuales valores de los datos del formulario y se mostrarán en el propio formulario. ¡Vamos, échale un vistazo! Actualiza la página de configuración e introduce la configuración de la base de datos de OSCommerce, así como los parámetros de tu tienda y luego presiona Opciones de actualización.

Si todo se implementó como se ha descrito anteriormente, verás un mensaje de Opciones guardadas con éxito y los campos de formulario contendrán los datos que acabas de introducir.

Plugin configuration page with success message

Por último, pero no menos importante, tendremos que precumplimentar el formulario con los datos de la base de datos cuando el usuario abra la página de configuración. Para ello, utilizaremos la función get_option() que recupera la opción especificada de la base de datos.

Puedes probar el código anterior simplemente navegando a otra página dentro del área de administración y reajustar después esta página haciendo clic en el elemento de submenú OSCommerce Product Display del menú Ajustes. Si todo va bien, verás el formulario con todos los campos previamente cumplimentados con los datos que has introducido.

Plugin configuration page with pre-populated form

Con este último fragmento de código, hemos terminado de implementar la página de configuración del plugin, así que revisemos lo hecho en este capítulo:

  • definimos qué parámetros deben ser configurados por el administrador del sitio
  • añadimos un gancho de acción para cuando se muestre el menú en el panel de administración que nos ayudará a añadir un nuevo elemento de submenú para nuestro plugin
  • hemos añadido un nuevo elemento de submenú al menú Ajustes que enlazará a la página de configuración de nuestro plugin
  • hemos definido una función que construirá la página de configuración del plugin y separará tu código en un segundo archivo PHP
  • hemos creado el formulario que contiene las entradas del usuario para cada uno de los fragmentos de datos configurables
  • hemos construido la función de actualización de la base de datos
  • hemos creado una función que cumplimentará previamente el formulario con los valores de opción almacenados en la base de datos

7. Crear la función de usuario

Bueno, todo salió bastante bien hasta ahora, pero nuestro plugin aún no cumple su función práctica porque no hemos implementado la parte que realmente nos permitirá mostrar los productos en el front-end.

Para permitir que nuestros usuarios muestren los productos en el front-end, tendremos que declarar una función que puede ser invocada desde el código PHP de la plantilla y que devolverá el código HTML que se insertará en la plantilla. Vamos a nombrar esta función oscimp_getproducts() y aceptaremos el número de productos que se mostrarán como un parámetro de función. La función en sí se implementará en el archivo principal de nuestro plugin, oscommerce_import.php

Como puedes ver, estamos asignando un valor predeterminado a nuestro parámetro de función, permitiendo así a nuestros usuarios llamar a la función con y sin un parámetro. Si se llama a la función con un parámetro, como oscimp_getproducts(3), mostrará tres productos. Si se llama a la función sin un parámetro, como oscimp_getproducts(), sólo mostrará un producto.

Lo primero en nuestra función sería establecer una conexión a la base de datos de OSCommerce. Gracias a la página de configuración de nuestro plugin, ahora tenemos toda la información que necesitamos: servidor, nombre, usuario y contraseña de la base de datos. Usaremos la clase wpdb integrada para crear un nuevo objeto de base de datos.

Una vez hecho esto, declaramos una variable que contendrá el código HTML y comenzaremos a consultar la base de datos de OSCommerce para cada uno de los productos especificados. El código siguiente simplemente implementa este bucle de consulta y aún se puede mejorar más mediante la comprobación de duplicados, por ejemplo, pero este no es el objeto de este tutorial, así que, vamos a mantener la simplicidad en aras de una mejor comprensión.

Una vez hecho esto, todo lo que tenemos que hacer es insertar la llamada a la función oscimp_getproducts() en la plantilla. Vamos a mostrar tres productos en la parte inferior de la barra lateral por lo que, vamos a modificar el archivo sidebar.php de nuestra plantilla, insertando el siguiente código justo debajo del elemento de lista que contiene los meta enlaces:

Si ahora actualizas tu página de front-end, verás los tres productos aleatorios que se muestran en la parte inferior del sidebar.

Frontpage with random products

Con este último fragmento de código, hemos terminado de implementar la también la función del front-end.


8. Conclusión

Ahora hemos implementado un plugin de WordPress desde cero. Vamos a resumir lo que hemos hecho:

  • hemos definido la forma en la que almacenamos nuestros archivos de plugin
  • definimos la cabecera de información con el fin de que nuestro plugin sea visible para WordPress
  • hablamos de los ganchos de acción y la forma en que se utilizan
  • definimos qué parámetros deben ser configurados por el administrador del sitio
  • añadimos un gancho de acción para cuando el menú se muestra en el panel de administración para ayudarnos a añadir un nuevo elemento de submenú para nuestro plugin
  • hemos añadido un nuevo elemento de submenú al menú Ajustes que se vinculará a la página de configuración de nuestro plugin
  • hemos definido una función que construirá la página de configuración del plugin y hemos separado su código en un segundo archivo PHP
  • hemos creado el formulario que contiene las entradas del usuario para cada uno de los fragmentos de datos configurables
  • hemos construido la función de actualización de la base de datos
  • hemos creado una función que cumplimentará previamente el formulario con los valores de opción almacenados en la base de datos
  • hemos construido nuestra función de usuario para su uso en la plantilla
  • nos conectamos a la base de datos de OSCommerce
  • consultamos la base de datos de OSCommerce extrayendo el ID del producto, su imagen y su nombre
  • hemos creado el código HTML para mostrar los datos extraídos
  • hemos incluido la función de usuario en el sidebar de la plantilla

Espero que este tutorial te haya dado toda la información que necesitas para crear un plugin de WordPress desde el principio. Por favor, no dudes en publicar tus comentarios a continuación.

¡Gracias por leer! :)

  • Suscríbete al feed de RSS de TUTS+ para obtener más tutoriales y artículos sobre desarrollo web a diario.

Recursos adicionales

Si eres nuevo en el desarrollo de plugins de WordPress, entonces también puedes estar interesado en plugins de WordPress en el desarrollo de servicios de Envato Studio donde también tenemos una amplia variedad de recursos para WordPress.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.