Missing [Code]

Siguiendo la línea del tutorial hoy les voy a mostrar cómo crear su propio plugin de Slide de imágenes con jquery.

Primero que nada, vamos a comenzar de “0”, creamos una carpeta en el wp-content/plugins con el nombre “miplugin”, dentro creamos 2 carpetas mas: “js” e “images”. De modo que nos quede el árbol de la siguiente manera:

Wp-content

Plugins

miplugin

js

images

Dentro de “miplugin” creamos un archivo php para nuestro plugin llamado “miplugin.php” y colocamos en la carpeta “js” el archivo “simplegallery.js” y las siguientes imágenes:

Con todo esto ya comenzamos con el código y la explicación va en los comentario:

<?php

/*
Plugin Name: Mi Plugin de Slide
Plugin URI: http://www.claudiomarrero.com.ar
Description: Este es un ejemplo de cómo crear un plugin para slide de fotografías
Author: Claudio Adrian Marrero – Ultima Milla S. A.
Version: 1.3
Author URI: http://www.claudiomarrero.com.ar/
*/

//Definimos la ubicación de nuestros archivos js

define(‘JS’,get_bloginfo(‘url’).’/wp-content/plugins/miplugin/js/’);

//Definimos la ubicación de nuestras imágenes para el slide

define(‘IMAGES’,get_bloginfo(‘url’).’/wp-content/plugins/miplugin/images’);

// cargando jquery de google en wordpress

function miplugin_jquery() {

if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’,
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ’1.3.2′);
wp_enqueue_script(‘jquery’);

}
}
add_action(‘init’, ‘miplugin_jquery’);

//Cargamos a la función wp_head(); el archivo simplegallery.js

function miplugin_simpleGalery(){
echo ‘<script  type=”text/javascript” src=”‘.JS.’simplegallery.js” />’;
}
add_action(‘wp_head’, ‘miplugin_simpleGalery’);

//Buscando las imágenes para el slide
function miplugin_imagenes(){
//En vez de buscar un directorio, puedes cargar las imágenes en un array
$dir_imagenes = ‘wp-content/plugins/miplugin/images’; //Ubicación absoluta       $dir_imagenes_relativas = “/wp-content/plugins/miplugin/images”; // Ubicación relativa
$comienza_solo = “true”; //Si deseas que comience en forma automática
$pausa = 2500; //Tiempo de espera
$transicion = 500; //Transicion entre imagen e imagen.
$maximo_ancho = false;
$maximo_alto = false;
if($ver_imagen = opendir($dir_imagenes)){
while (false !== ($imagen = readdir($ver_imagen))) {
if ($imagen != “.” && $imagen != “..”) {
$array_imagenes .= ‘["'.$dir_imagenes_relativas.'/'.$imagen.'","",""],’;

list($ancho, $alto) = getimagesize(“$dir_imagenes/$imagen”);

if($ancho > $maximo_ancho){$maximo_ancho = $ancho;}

if($alto > $maximo_alto){$maximo_alto = $alto;}

}

}

closedir($ver_imagen);

}

$array_imagenes = substr($array_imagenes,0,-1);

echo ‘<script>
var mygallery = new simpleGallery({
wrapperid: “miplugin_slide”,
dimensions: ['.$maximo_ancho.','.$maximo_alto.'],
imagearray: ['.$array_imagenes.'],
autoplay: ‘.$comienza_solo.’,
persist: false,
pause: ‘.$pausa.’,
fadeduration: ‘.$transicion.’,
oninit:function(){
},
onslide:function(curslide, i){
}
})
</script>

>’;
}
add_action(‘wp_head’, ‘miplugin_imagenes’);

//Function que muestra en el theme de wordpress el slide;
function miplugin_slide(){
echo ‘<div id=”miplugin_slide”></div>’;
}

?>

Bueno con todo esto ya tienes para hacer el plugin que quieras, en la cuarta entrega, vamos a ver como hacer para cargar las imagenes directamente desde el panel de administracion, para que tu plugin sea totalmente administrable.

Si quieres puedes descargar el plugin completo desde aqui

Saludos