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:

jQuery(document).ready( function($) {
    // $('NUESTRO_JQUERY_USANDO_EL_SIGNO_DE_DOLAR_($)_DE_MANERA_TRANKILA');
    $( 'audio' ).audioPlayer();
});


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_2' );
 
function b5f_start_demo_2()
{
    new B5F_Demo_2();
}
 
class B5F_Demo_2
{
    public function __construct()
    {
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
        add_shortcode( 'mi_player', array( $this, 'shortcode' ) );
    }
 
    public function enqueue()
    {
        wp_enqueue_style( 
            'mi-css', 
            plugins_url( '/css/resp-audio-player.css', __FILE__ ) 
        );
        wp_register_script( 
            'mi-js', 
            plugins_url( '/js/inicia-audio.js', __FILE__ ),
            array(),
            '',
            true // En el footer
        );
        wp_enqueue_script( 
            'audio-player', 
            plugins_url( '/js/resp-audio-player.min.js', __FILE__ ), 
            array( 'mi-js', 'jquery' ), // <------ A&Atilde;&plusmn;adiendo nuestro script yjQuery como dependencia
            '',
            true
        );
    }
 
    public function shortcode( $atts, $content )
    {
        $width = isset( $atts['width'] ) ? " style='width:{$atts['width']}'" : '';
        $mp3 = isset( $atts['mp3'] ) ? '<source src="' . $atts['mp3'] .'" />' : '';
        $ogg = isset( $atts['ogg'] ) ? "<source src='{$atts['ogg']}' />" : '';
        $wav = isset( $atts['wav'] ) ? "<source src='{$atts['wav']}' />" : ''; 
        $text = __( 'Texto cuando el navegador no tiene soporte para audio' );
        $html = "
            <div $width>
                <audio controls preload='auto'>
                    $mp3
                    $ogg
                    $wav
                    $text
                </audio>
            </div>";
        return $html;
    }
}

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 .