En el vasto mundo de internet y el desarrollo web, son muchas las tecnologías, herramientas, frameworks o lenguajes de desarrollo que batallan día a día por llegar a la cima. De todas estas, no hay duda alguna de que es WordPress quien hoy por hoy ha logrado abarcar gran parte del ecosistema web, ya les contábamos antes que con más de 75 millones de usuarios alrededor del mundo, WordPress se ha convertido en el sistema gestor de contenido (CMS por sus siglas en inglés) más popular de la actualidad.
Si aún no has creado tu primer sitio con WordPress, aquí te explicamos cómo.
Ya sea que desees emplear plantillas pre-desarrolladas o crear tus propios temas, seguramente te haz visto en la necesidad de desarrollar tus propias funcionalidades para tus proyectos con WordPress. Si es eso lo que te trajo hasta aquí, te encantará saber que en Gradiweb somos expertos en implementación de todo tipo de funcionalidades, plantillas e incluso desarrollamos nuestros propios plugins para WordPress, así que a continuación te compartimos los tips que consideramos más importantes a la hora de desarrollar con wordpress.
Define tu Objetivo
Este primer paso, aunque parezca sencillo, es el paso más importante de todos al momento de desarrollar tus propios códigos con WordPress y puede variar dependiendo de cada caso.
Ya sea que decidas ajustar cosas en un tema o que decidas hacerlo para un plugin, normalmente se reduce a dos opciones:
- 1 Editar plantillas o plugins ya existentes
- 2 Crear plantillas o plugins desde cero
La decisión dependerá de qué tan personalizados serán tus códigos y si de realmente estás desarrollando algo completamente nuevo o diferente a lo que ya existe en los repositorios de plantillas o plugins.
¿Nuestra recomendación?
- Si tus conocimientos en desarrollo con WordPress no son muy avanzados y sólo deseas hacer pequeños cambios, seguramente será mejor aprovechar cosas ya existentes y así ir ganando experiencia. Aprovecha al máximo la tecnología existente y dale tu propio toque, siempre apuntando a mantener la calidad del producto final.
- Si ya te cansaste de buscar en todos los rincones de internet, y aún así no consigues una solución a tu problema y quieres desarrollar tus propias funcionalidades desde cero, pues bienvenido sea, pero siempre es importante que entiendas y respetes la forma de trabajar de WordPress, sólo así podrás aprovechar las grandes funcionalidades de este CMS sin afectar su rendimiento.
Como en Gradiweb sabemos que todo tiene su momento y que las cosas deben hacerse bien y paso a paso, en este artículo nos basaremos en la primera opción, de forma tal que puedas familiarizarte con el desarrollo de códigos con WordPress antes de enfrentarte a la tarea de desarrollar desde cero tus propios temas o plugins.
Tips Generales
Sea cual sea el caso, debes conocer antes algunos de los principios básicos de desarrollo con WordPress (y bueno, sí, aprovechamos de recordar algunos otros del desarrollo en general).
Usa códigos claros y consistentes:
Vamos, que a nadie le gusta encontrarse con piezas de código desordenadas o sin ningún tipo de estructura, y el caso de WordPress no es diferente. Espaciado correcto, identación adecuada, nombres comprensibles y comentarios siempre que sea posible te ayudarán no sólo a ti, sino a cualquier otro desarrollador que deba realizar cualquier ajuste sobre el código en el futuro.
Para nada es lo mismo esto:
add_filter('body_class', 'append_language_class');
function append_language_class($classes){ $classes[] = 'lang-'.ICL_LANGUAGE_CODE; return $classes; }
Que esto:
/*
/* add_filter:
/* Permite filtrar las funciones nativas de wordpress e incluir funcionalidades personalizadas
*/
add_filter('body_class', gradi_add_language_class);
/* gradi_add_language_class:
/* Agrega una clase adicional al con el codigo del idioma actual
/* Autor: Crini
*/
function gradi_add_language_class($classes){
$classes[] = 'lang-'.ICL_LANGUAGE_CODE;
return $classes;
}
Verifica si WordPress ya tiene una función para lo que deseas hacer:
Aunque no lo creas, WordPress tiene un montón de funcionalidades existentes en su core. No por nada es elegido por muchos como su CMS de confianza. Para conocer todas estas funcionalidades y cómo emplearlas, nada mejor que visitar el Code Reference oficial de WordPress: https://developer.wordpress.org/reference/
Evita las colisiones de nombres en tus funciones PHP o clases CSS:
Tomando en cuenta que estamos hablando de desarrollar funcionalidades para una herramienta existente, puede darse el caso en el cual los nombres que emplees puedan ya existir en el tema o plugin sobre el que trabajes, o incluso en el mismo core de wordpress. Para evitar problemas, incluye siempre antes de tus funciones o clases, un breve prefijo que haga referencia a tu tema, plugin u organización.
Ejemplo: mejor usar gradi_add_language_class que simplemente add_language_class, ya que es un nombre muy genérico y podría existir en algún tema o plugin.
En su defecto, y si existe la posibilidad de que el tema o plugin que estamos desarrollando puede recibir nuevas modificaciones en el futuro, para prevenir cualquier posible fallo de colisión, podemos utilizar la función nativa function_exists de PHP:
if ( ! function_exists( 'gradi_add_language_class' ) ) {
/* gradi_add_language_class:
/* Agrega una clase adicional al con el codigo del idioma actual
/* Autor: Crini
*/
function gradi_add_language_class($classes){
$classes[] = 'lang-'.ICL_LANGUAGE_CODE;
return $classes;
}
}
Conoce la estructura de los temas y plugins de WordPress:
WordPress tiene una forma particular de trabajar, y por ende, posee una estructura de archivos personalizada que debe respetarse a la hora de desarrollar un tema o plugin. Por ejemplo, la estructura definida en el archivo post.php siempre será utilizado para mostrar los artículos de nuestro blog, mientras que el archivo page.php hará lo propio por las páginas estáticas del sitio. Asimismo, en el caso de los plugins, siempre es recomendable que el nombre del archivo PHP principal del plugin, sea llamado con el mismo nombre del directorio. Ejemplo: gradi-plugin/gradi-plugin.php
Para conocer más de la estructura de plantillas de WordPress:
https://developer.wordpress.org/themes/basics/template-hierarchy/
Para conocer más de la estructura de plugins de WordPress:
https://developer.wordpress.org/plugins/intro/
Tips al Modificar Plantillas o Plugins:
¿Quieres Modificar una Plantilla? Crea un Child Theme
Una de las agradables posibilidades que ofrece WordPress a la hora de extender sus funcionalidades, es crear dependencias entre el tema original y la personalización que tú deseas hacer.
Esto permite que si el desarrollador del tema publica nuevas versiones del tema y decides actualizarlo, todos los cambios que hayas realizado se mantendrán intactos, pero seguirás teniendo acceso a las mejoras o nuevas funcionalidades de la versión más reciente del tema principal.
Para crear un child theme sólo basta con crear una nueva carpeta que contenga al menos un archivo style.css con la información del nuevo tema y una llamada especial a la hoja de estilos del tema original:
/*
Theme Name: Nombre del Nuevo Tema
Theme URI: http://direccion.web/de-mi-tema/
Description: Descripción del tema desarrollado
Author: Luis “Crini” Garcia
Author URI: https://www.gradiweb.com
Template: directorio-del-tema-padre
Version: 1.0.0
License: Nombre de la licencia sobre la cual se publica el tema
License URI: http://enlace.web/a/la/licencia
Tags: etiquetas, para, identificar, nuestro, tema
Text Domain: nombre-para-traducciones
*/
@import url("../direccion-del-tema-padre/style.css");
Con eso bastaría para crear nuestro nuevo tema y aprovechar todo el tema original.
Ahora, existen dos tipos de cambios que pueden hacerse con un child theme, cambios de estilo (CSS) y cambios de funcionalidades (PHP).
- Estilos CSS: WordPress cargará de manera simultánea la hoja de estilos del tema padre y la hoja de estilos de tu nuevo tema. Así, si deseas cambiar estilos del tema original sólo debes agregar el selector CSS acorde al elemento que deseas ajustar y sus propiedades. Con eso será suficiente.
- Funcionalidades PHP: en este caso WordPress funciona un poco distinto y nos dota de dos posibilidades:
- Si sólo se quieren cambiar ciertas funciones del tema:
Se podrá crear un nuevo archivo functions.php e incluir en él únicamente las funciones del tema padre que desees cambiar e incluyendo tus nuevas funcionalidades. Para ello, es importante que el desarrollador del tema padre haya utilizado las buenas prácticas de desarrollo con WordPress e incluido la directiva!function_exists()pues WordPress cargará el functions.php de nuestro child-theme antes que el del tema padre.
Observación: es importante que nunca se incluya la declaración (?>) de cierre PHP en el archivo functions.php del child-theme. - Si se quiere cambiar la estructura del tema:
Será necesario copiar todo el archivo que se desea cambiar desde el directorio del tema padre hacia el directorio de nuestro nuevo tema. Una vez copiado el archivo, se pueden hacer los cambios correspondientes. Toma en cuenta que de esta manera, WordPress omitirá el archivo original del tema padre, así que si has copiado, por ejemplo, el archivo single.php del tema padre a tu child-theme, es este el archivo que será utilizado.
- Si sólo se quieren cambiar ciertas funciones del tema:
¿Quieres modificar un Plugin? Utiliza Hooks o Clona el Plugin
Empleando Hooks
En su forma más sencilla, los hooks son una manera en la cual una pieza de código de WordPress puede interactuar o modificar otra. Ya sea para ajustar funcionalidades de Plugins o del mismo core de WordPress, es en hooks en lo que deberías pensar.
Existen básicamente dos tipos de hooks, actions (acciones) o filters (filtros).
Las acciones permiten realizar operaciones en puntos específicos y normalmente desencadenan un cambio a partir de la información de nuestra base de datos (backend).
Ejemplo:
/**
* gradi_notificacion_email: Envia un email a Luis cuando se publica un nuevo post.
*
* @param int $post_id Post ID.
* @return int Post ID.
*/
function gradi_notificacion_email( $post_id ) {
$correo = 'luis@gradiweb.com';
wp_mail( $correo, "Hey! Tenemos nuevo artículo", 'Puedes verlo en: https://www.gradiweb.com/blog' );
return $post_id;
}
add_action( 'publish_post', gradi_notificacion_email );
Por otra parte, los filtros permiten manipular los datos empleados en una función particular y cambiar la forma en la que se muestran al usuario (frontend).
Ejemplo:
add_filter('body_class', gradi_add_language_class);
/* gradi_add_language_class:
/* Agrega una clase adicional al con el código del idioma actual
/* Autor: Crini
*/
function gradi_add_language_class($classes){
$classes[] = 'lang-'.ICL_LANGUAGE_CODE;
return $classes;
}
Para poder utilizar filters o actions sobre cualquier plugin o función es necesario que el desarrollador del mismo haya habilitado esta opción según sea el caso y haya asignado un nombre único al filtro o acción por medio de las siguientes funciones:
do_action('nombre_de_la_accion);
apply_filters(‘nombre_del_filtro’, $variable_a_filtrar);
De no ser el caso, no tendremos mejor opción que clonar el plugin.
Clonar un Plugin
Si bien la idealidad es que en WordPress todos los desarrolladores de plugins habiliten la posibilidad de usar filtros o acciones sobre sus funciones, no siempre es el caso. En ese sentido, una opción viable es clonar un plugin y convertirlo en un plugin propio con nuevas funcionalidades o ajustes.
Esta es una práctica frecuente en el desarrollo con licencias libres. Recordemos que WordPress en sí, así como la mayoría de los plugins desarrollados para este CMS poseen una licencia GPL, la cual permite libremente usar, estudiar, copiar y modificar el código.
Sin embargo, la única desventaja que provee es que se pierde la posibilidad de contar con actualizaciones futuras y soporte por parte del desarrollador del tema. Aunque tomando en cuenta que estarás haciendo del plugin un desarrollo propio, esto no es mayor problema.
Si bien existen muchos tipos de plugins, algunos con estructuras más complejas que otros, en la gran mayoría de los casos, para clonar un plugin sólo debes seguir estos simples pasos:
- Selecciona un nuevo nombre para tu plugin que refleje su funcionalidad
Ejemplo: Gradiweb Magic Tabs - Crea una nueva carpeta con el nombre de tu plugin estructurado
Ejemplo: gradiweb-magic-tabs - Copia todo el contenido del plugin original a la carpeta que acabas de crear
- Modifica el nombre del archivo principal del plugin
Ejemplo: Cambia post-tabs.php por gradiweb-magic-tabs.php - Verifica que no existan rutas absolutas a los nombres de los directorios modificados dentro de los archivos del plugin. En caso tal de que existan, modíficalos para que se adapten al nuevo nombre que has seleccionado
- Modifica los datos del plugin ubicados al inicio del archivo principal
Ejemplo:
/*
Plugin Name: Magic Tabs por Gradiweb
Description: Plugin que permite mostrar los posts y comentarios más
populares y recientes en un Widget
Author: Gradiweb
Version: 1.0
Plugin URI: https://www.gradiweb.com/
Author URI: https://www.gradiweb.com/
Donate link: https://www.gradiweb.com/
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gradiweb-magic-tabs
Domain Path: /languages
*/
Una vez que hayas hecho esto, ya podrás ver tu nuevo plugin en el gestor de plugins de WordPress y sólo bastará con activarlo y agregar todos los cambios que desees.
Para cerrar
Como ves, el mundo de desarrollo con WordPress abre un sinfín de posibilidades a aquellos que deseen emplearlo como su CMS de confianza en sus proyectos de desarrollo web.
Para nosotros siempre ha resultado de ayuda a la hora de ofrecer soluciones que se adapten perfectamente a las necesidades de nuestros clientes, ya sea que se trate de pequeños emprendimientos que nos contactan para darle esa funcionalidad especial a su sitio web con WordPress, o para grandes empresas que prefieren confiar en nosotros para concebir todo su sitio web desde los wireframes iniciales hasta que finalmente logran verlo en vivo, con funcionalidades especiales que sólo pueden alcanzar con un tema y plugins desarrollados desde cero por nosotros.
Sea cual sea el caso, Gradiweb está aquí para ayudarte, así que pronto nos adentraremos cada vez más en el mundo del desarrollo con WordPress y te explicaremos cómo hacer tu propio tema o plugin desde el inicio.
Mantente al tanto de
las novedades
Mantente al tanto de las novedades
