Convertir un plugin de jQuery en uno de WordPress

wordpress-plugins

Mirando la página de Pousta, noté que había una barra progresiva que va cambiando a medida que juego con el scroll al bajar o subir la página. Me puse a buscar algunas alternativas a ver si había algún plugin de WordPress que hacía eso. Algunos hacen bien su pega, pero sólo se muestran en los posts y páginas pero no en la página principal. Fue ahí cuando le pregunté a los chiquillos de Pousta y me contestaron esto:

Todo bien hasta que noté que era un plugin de jQuery y no de WordPress. Así que me puse a averiguar cómo integrarlo en el blog y fue así como llegué a este tutorial en inglés. También encontré este otro con algunas mejoras, y ahora lo comparto con ustedes usando las bondades de la API de WordPress. Como es de código abierto, da mucha facultad para hacer cosas como temas y plugins. Ya he hecho temas de WordPress antes pero nunca un plugin, así que esto es lo más básico que pueden encontrar.

También quiero aclarar que no le puse un panel de configuración porque hacer un plugin desde cero no es muy trivial (aunque tampoco muy complicado), así que sólo hice algo lo más minimalista posible. Aun así, está bien documentado, aunque mejor vean el tutorial original en inglés.

Así que sin más preámbulos, pongamos manos a la obra, ya que hace mucho tiempo que no escribía un tutorial. Así que… ¡Empecemos!

Primero debemos crear el directorio del plugin. No debe llevar espacios, y si el nombre es de más de una palabra, deben separar cada una mediante un guión bajo. Por cierto, para este tutorial, el plugin en cuestión que usé es Scrolline.js. Por ende, el nombre del directorio es, simplemente, scrolline.

Dentro del mismo directorio, creé otro llamado sources. Ahí vamos a poner el (los) script(s) que vayamos a necesitar. Primero descargué el original dentro de dicho directorio, el cual no deben modificar por ningún motivo. Como vamos a pasarle parámetros al plugin, creamos otro script, digamos, uno llamado scrolline.custom.js (el nombre no debiera importar, pero ojalá sea más o menos en ese formato). Su contenido es el siguiente:

Como detalle importante a señalar, WordPress usa jQuery en modo noCompat, por lo que no reconoce el signo peso ($) como jQuery, sino que deben usar la palabra misma (jQuery), razón por la cual, lo definí en el código mostrado recién como una función anónima.

Los parámetros que le pasé a scrolline están señalados según la documentación del plugin original.

Volvamos al directorio raíz y creamos nuestro archivo en PHP que debe llamarse asi tipo plugin.php. En este caso, scrolline.php. Su contenido es el siguiente:

Lo que está en comentarios debe ir así ya que WordPress lo reconoce como los metadatos del plugin. También usé las funciones de la API para registrar y activar los scripts. Son wp_register_script, wp_enqueue_script y add_action. En sus respectivas páginas pueden encontrar más información sobre cómo usarlas, pero básicamente la idea es importar los scripts en js desde ahí para ser usados en el blog. También aplica para hojas de estilos en CSS, pero como no tenía ninguna, no las usé. También invoqué a plugins_url para indicar las direcciones de los scripts en JavaScript, por ser una función relativamente más nueva y usa rutas relativas. Nótese que array crea un arreglo para concatenar los scripts en caso de tener más de uno.

Teniendo todo eso listo, ya está creado el plugin de jQuery convertido en uno de WordPress. Ya es cosa de instalarlo como normalmente se haría como con cualquier plugin (yo subí el directorio completo donde corresponde). Por supuesto, hay que activarlo para que funcione.

Para que se hagan una idea, más o menos quedó así el árbol de directorios:

Acá dejaré el zip para que lo descarguen, lo vean y se guíen.

Cabe aclarar que, como lo dejé lo más minimalista posible, no tiene un apartado de opciones para configurarlo desde el panel de WordPress, sino que deben editar el custom.js manualmente y subir los cambios con cada edición. Espero más adelante mejorar este plugin para que sea más manejable.

Espero que esto les haya sido de muchísima utilidad como lo fue para mí.

Ahora pueden ver la barrita en el footer del blog. ¡Disfrútenla!

Jorgicio

2 comentarios en “Convertir un plugin de jQuery en uno de WordPress

Responder a jorgicio Cancelar respuesta

Su dirección de correo no se hará público. Los campos requeridos están marcados *