Tutorial de WordPress: Cómo crear un plugin de página impresionante Flip

Artículo escrito por:
  • Inbound Marketing
  • Actualizado: sep 15, 2014

Nota: Ya no admitimos este complemento WP, ya que el autor no nos escribe por ahora.

A partir de hoy, cada semana presentaremos un impresionante tutorial de codificación, que te enseñará cómo hacer cosas personalizadas utilizando WordPress, desde básico hasta avanzado. Hoy crearemos un complemento (para que aprendas los pasos básicos sobre esto) para generar una galería de "vuelta de página", utilizando JS.

Apuesto a que has visto uno de esos en tus primeros días en la red, pero en su mayoría se hicieron con flash, que ahora está bastante obsoleto (todavía tiene su valor, pero ya no es la mejor opción para este tipo de cosas).

La funcionalidad básica será crear una nueva. tipo de galería Basado en unas pocas imágenes y sus tamaños, a través de shortcode.

¡Comencemos entonces!

Zip e Instalar

La mejor manera de verlo en acción es instalarlo usted mismo. Usted puede descargarlo aquí. Instale y active el complemento, entonces todo lo que necesita hacer es agregar el shortcode en una página, como esto:

[flip_book ids = "78 79 78 79 79 78 78 79 79" width = "78" height = "300" display = "double"]

Vista previa rápida

Y este es el tipo de resultado que obtendrás:

Efecto Flipbook

Pero, ¿qué tipo de magia negra ocurre allí? Bueno, en realidad es bastante simple. Aprendamos cómo crear algo como esto.

El encabezado

En primer lugar, deberá crear una nueva carpeta y un nuevo archivo .php. En este punto, sería increíble si tiene un entorno de prueba, por lo que puede romper y probar cosas.

El archivo y la carpeta deben tener un nombre simple y único, por lo que evitará conflictos con los complementos existentes. Entonces el contenido básico de nuestro archivo es algo como esto:

/ * Nombre del complemento: FlipBook Gallery Descripción: Crear un shortcode para galerías de flipbook. Versión: 1.0 Autor: Web Revenue Blog Licencia: GPL2 * /

Bastante simple, ¿eh? Una vez que cree este archivo, verá su complemento en la lista bajo WP admin> Complementos, y podrá activarlo (pero si solo tiene este contenido en su archivo, no cambiará mucho su sitio).

Llamando guiones

Ahora necesitamos incluir algunos activos externos importantes aquí. Los archivos externos requeridos para la funcionalidad básica son:

  • jQuery (1.9 +)
  • Turn.js script
  • Gire el estilo básico

Si simplemente agrega el script y las etiquetas de estilo, tendrá algunos problemas. Por ejemplo, la doble llamada jQuery probablemente romperá su sitio. Además, WordPress no “sabrá” que ha creado esos elementos, por lo que si un complemento diferente llama a turn.js de nuevo o si tiene un estilo diferente, romperá su sitio.

Es por eso que siempre debemos usar las funciones wp_enqueue_script y wp_enqueue_style. Aquí está el uso básico:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), array ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

Estamos llamando a elementos externos en 3 de diferentes maneras, aquí están:

  • Llamar a un elemento existente: jQuery: no necesitamos pasar muchos parámetros si sabemos con seguridad que WordPress ya ha cargado este script, solo le estamos diciendo "Dude, este script DEBE estar aquí; de lo contrario, nuestro código no trabajo"
  • Creación de una nueva secuencia de comandos: deberá pasar algunos atributos como el nombre, la ubicación del archivo, los elementos necesarios (en este caso, requiere jQuery), la versión, y si se carga en el pie de página o en el encabezado (false = header, true = footer)
  • Creación de un nuevo estilo: prácticamente lo mismo que el anterior, con una pequeña diferencia en el último atributo, que indica qué tipo de medio de este estilo es para

Una de las cosas importantes que debe considerar cuando llama a scripts externos es si hay más código que dependerá de este complemento. Eso es básicamente lo que define si su archivo será llamado en el encabezado o pie de página.

En nuestro caso, tenemos algunos scripts adicionales para configurar la galería solo cuando se crea su HTML, y eso se agregará en el cuerpo. Esta es la razón por la que DEBEMOS agregar este script en la cabecera, de lo contrario, cuando nuestro código se llame "turno", la función aún no está ahí.

Después de este buen código, debemos decirle a WordPress que los cargue como scripts, la acción "wp_enqueue_scripts" hará esto:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

El shortcode

Comencemos con la acción para crear el shortcode. Es bastante simple, solo necesita agregar el disparador de shortcode y la función que se ejecutará:

add_shortcode ("flip_book", "create_flip_book");

Ahora necesitamos crear nuestra función y obtener nuestros atributos. Pero algunos de los atributos pueden ser opcionales, lo que significa que tendremos que crear valores predeterminados para ellos. Podríamos crear una gran cantidad de pruebas si el atributo está vacío, pero este es uno de los casos en que la operación ternaria es mejor que la llamada normal.

Las operaciones ternarias son una especie de declaraciones if directamente en el valor de la variable. Si sigue esta estructura:

$ variable = (CONDICIÓN)? "VALOR SI LA CONDICIÓN ES VERDADERA": "VALOR SI LA CONDICIÓN ES FALSA";

Puedes verlos en acción en la primera parte de nuestra función:

function create_flip_book ($ attr) {// Preparación de los ID a procesar $ array ['ids'] = explode ("", $ attr ['ids']); // modo de visualización $ array ['display'] = vacío ($ attr ['display'])? "single": $ attr ['display']; // valor estándar // ancho $ array ['ancho'] = vacío ($ attr ['ancho'])? 400: $ attr ['width']; // altura $ array ['altura'] = vacío ($ attr ['altura'])? 300: $ attr ['altura'];
    // HTML y el resto del código va aquí}

Luego, necesitaremos crear el HTML y la llamada básica para nuestras imágenes. Otro punto importante aquí es ajustar el tamaño si estamos usando el estilo de revista (debe ser 2x el ancho ya que tendremos imágenes 2 en lugar de una):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS y Black Magic?> <Div id = "flipbook"> <? Php para ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'full'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids']); ?> </span> <? php}?> </div> <? php}?> </div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ? php echo $ array ['width'];?>, altura: <? php echo $ array ['height'];?>, autoCenter: true, display: '<? php echo $ array [' display ']; ?> ', // Aceleración de una o dos páginas: verdadero, gradientes:! jQuery.isTouch,}); </script>

¿Qué piensas?

Ahora puede modificar y modificar esto como desee, agregando más opciones (consulte sus ejemplos asombrosos para obtener más inspiración), ajustando lo que no funciona para usted o combinando esto con otros complementos.

¿Tienes algún concepto de WordPress que quieras aprender un poco más? Tal vez algo que quieres aprender a hacer? ¡Avísenos a través de comentarios y estaremos encantados de incluir esto en una publicación futura!

Acerca de Rochester Oliveira

Soy un diseñador web y empresario de Itajubá (MG), Brasil. Me encanta escribir sobre temas oscuros y hacer cosas interesantes.