Conviertiendo plugins jQuery en Shortcodes

  • 17/10/2013

Hay una biblioteca fantastica de plugins jQuery: Unheap. Y, como no, es no mas verlos y pensar “Lo quiero en mi sitio WP!”.

En verdad, con Shortcodes es muy simples y ya lo veremos.

Lo primero es crear un plugin, empezar nuestras acciones en un punto correcto, y añadir nuestro código de cada día que encontramos a montones por la red:

<?php
/**
 * Plugin Name: Shortcodes de jQuery Plugins - Parte 1
 */
 
add_action( 'plugins_loaded', 'b5f_start_demo_1' );
 
function b5f_start_demo_1()
{
  new B5F_Demo_1();
}
 
class B5F_Demo_1
{
  public function __construct()
  {
    add_action( 'admin_head', array( $this, 'alert' ) );
  }
  public function alert()
  {
    ?>
    <script>alert('Hola, mundo!');</script>
    <?php
  }
}

Entonces, tenemos la cabecera básica de un plugin, una única acción inicial en plugins_loaded (nuestro punto correcto y seguro), y de ahí instanciamos nuestra Class, y dentro de ella somos dueños y señoras de lo que ahí ocurre. En su constructor disparamos todo el resto que necesitamos, y ahora mismo es solo una demostración de que el plugin funciona: en cualquier página administrativa nos saltará un cartel de alerta en JavaScript.


Ahora, elegir un plugin en UnHeap. Probemos con Responsive Audio Player:

Tutorial shortcodes parte1 responsive audio player

Su configuración HTML/CSS/JS es la siguiente:
Tutorial shortcodes parte1 - setup

Lo que tenemos que hacer es recrear la estructura de HTML y cargar los archivos JS de forma correcta.
Es sumamente importante que carguemos la librería jQuery que viene incorporada con WordPress. Nunca se debe cargar una librería propia o de algún CDN, a no ser que sepamos exactamente lo que estamos haciendo. La mayoría de bugs de jQuery son porque un theme o plugin lo esta cargando de manera equivocada. Eso por un lado, y por otro debemos encapsular todo nuestras acciones personalizadas dentro del modo noConflict de WP:

<?php
/**
 * Plugin Name: Shortcodes de jQuery Plugins - Parte 1
 */
 
add_action( 'plugins_loaded', 'b5f_start_demo_1' );
 
function b5f_start_demo_1()
{
  new B5F_Demo_1();
}
 
class B5F_Demo_1
{
  public function __construct()
  {
    add_action( 'admin_head', array( $this, 'alert' ) );
  }
  public function alert()
  {
    ?>
    <script>alert('Hola, mundo!');</script>
    <?php
  }
}


El shortcode que usaremos en las entradas o páginas es:

[mi_player ogg="http://ejemplo.com/audio/archivo.ogg" mp3="http://ejemplo.com/audio/archivo.mp3"]

Para ponerlo a funcionar, registramos los estilos y scripts en wp_enqueue_scripts (sirve para los dos, aunque se llame enqueue_scripts). Los archivos CSS y JS ya están en las carpetas /nuestro-plugin/js y /nuestro-plugin/css.

Y añadimos nuestro shortcode con add_shortcode. Personalmente, tengo pereza de extraer los atributos del shortcode, y me refiero directamente a ellos con $atts['mi-atributo'].

Esta línea,
$mp3 = isset( $atts['mp3'] ) ? '<source src="' . $atts['mp3'] .'" />' : '';
significa lo siguiente: sí ha sido asignado un atributo “mp3” (isset), la variable contendrá tal código (?), o si no (:) sera vacía.

El plugin ahora mismo es:

<?php
/**
 * Plugin Name: Shortcodes de jQuery Plugins - Parte 1
 */
 
add_action( 'plugins_loaded', 'b5f_start_demo_1' );
 
function b5f_start_demo_1()
{
  new B5F_Demo_1();
}
 
class B5F_Demo_1
{
  public function __construct()
  {
    add_action( 'admin_head', array( $this, 'alert' ) );
  }
  public function alert()
  {
    ?>
    <script>alert('Hola, mundo!');</script>
    <?php
  }
}

Y resulta en esto:
Tutorial shortcodes parte1 - shortcode render


En este enlace podéis descargar unos ejemplos de archivos WAV, MP3 y OGG.

Y aquí un archivo zip con el plugin completo.

Leave a reply

This entry was posted in Plugins, Tutorial, WordPress on .