jQuery, de serie, en WordPress

¿Tenéis instalado en vuestro blog WordPress algún plugin tipo lightbox para visualizar las imágenes más grandes sin cambiar de página?…

Desde AyudaWordpress nos explican que desde las actuales versiones de wordpress, viene instalado jQuery y Thickbox, que son los encargados de mostrar el efecto similar a lightbox. Un ejemplo sencillo es cuando seleccionamos el icono de «Subir/Insertar» una imagen desde nuestro editor de wordpress, se nos oscurece la pantalla y muestra en primer plano la ventana de carga de archivos.
Pues bien, podemos utilizar jQuery y Thickbox para nuestras imágenes.

Es bastante sencillo, primero de todo nos tenemos que ir a las Opciones de Objetos en nuestro panel de administración, para editar el tamaño de las miniaturas y el tamaño grande de las imágenes.

Thickbox001

Ahora editaremos el «header.php» de nuestro theme y añadimos las siguientes lineas.

[php]
<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>
<?php wp_enqueue_style(‘thickbox’); ?>
<?php wp_enqueue_script(‘jquery’); ?>
<?php wp_enqueue_script(‘thickbox’); ?>
<?php wp_head(); ?>
[/php]

Ahora ya tenemos hechas las llamadas al código jQuery y Thickbox y es hora de subir las imagenes y aplicarle la clase Thickbox.
1. Subimos la imagen como normalmente hacemos.
2. En las opciones de insertar la imagen, seleccionamos que la inserte como miniatura y nos aseguramos que tenga la «URL de enlace» de la imagen subida al servidor.

Thickbox002
3. En la linea del código del enlace la imagen añadimos la clase Thickbox

[php]
<a class="thickbox" href="https://www.macgrafic.com/wp-content/uploads/archivos/Thickbox001.jpg">
<img src="https://www.macgrafic.com/wp-content/uploads/archivos/Thickbox001-178×99.jpg" />
</a>
[/php]

Cuando insertemos una imagen y le asignemos la clase «thickbox» ya tendremos el efecto definido.

2 comentarios

  • el ejemplo no funciona ‘¿?¿

    • A

      Gurusam no funciona porque no lo tengo activado. Al cambiar el diseño de Macgrafic tuve que hacer cambios.
      Saludo y gracias por el aviso !

Deja tu comentario