Share
El nativo [galería] El código corto es bueno, pero no genial. En este consejo rápido, lo embelleceremos con jQuery..
los [galería] El código corto no es muy bueno. No puede deshabilitar su CSS predeterminado, no puede agregar o editar las clases de CSS, no puede editar los atributos predeterminados (que en realidad es un problema general de código abreviado) ... Aunque esto no molesta a la mayoría de los desarrolladores de WordPress , los raritos como yo podríamos quejarnos! :)
En este rápido consejo, vamos a deshacernos de las páginas de adjuntos de imágenes y permitiremos a los visitantes de nuestros sitios navegar a través de las imágenes dentro de un cuadro modal de jQuery..
Con menos de 5 KB (gzipped) y una amplia gama de compatibilidad con navegadores (que incluso incluye IE6), Colorbox es mi complemento de jQuery lightbox favorito.
Como puede ver en la página del complemento, tiene muchos ajustes, métodos y enlaces para que pueda personalizarlo de la manera que desee. También tiene 5 temas ordenados basados en CSS.
Descarga el pack y extrae. colorbox.min.js y uno de los 5 temas (el colorbox.css archivo y la carpeta "imágenes") en una carpeta llamada "caja de colores" y cargue esa carpeta en su tema de WordPress. Agregue el siguiente código al final de la colorbox.min.js archivo antes de subir:
Accentsconagua
jQuery (document) .ready (function ($) $ (". gallery-icon a"). colorbox (rel: "gallery");); Sé que esto va a ser un poco raro, pero parece ser la forma más limpia. Vamos a crear el [jgallery] Código corto.
Consejo dentro del Consejo rápido: si planea cambiar todos los códigos cortos de la galería en sus publicaciones después de crear el
[jgallery]código corto, recomiendo usar el complemento Search Regex para buscar / reemplazar[galería]con[jgallery].
Como siempre, comenzaremos con la creación de la función de shortcode base:
function jgallery_sc () // ¿Sin parámetros? ¡Esto es una locura! add_shortcode ('jgallery', 'jgallery_sc'); A continuación, lo haremos encolar Los archivos CSS y JS. No se olvide, jQuery se pondrá en cola automáticamente (si no lo está ya), especificando que el script de Colorbox depende en eso.
function jgallery_sc () // Poner en color colorbox.min.js (y jQuery si no está cargado) wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery ')); // Encolar colorbox.css wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ Colorbox / colorbox.css'); add_shortcode ('jgallery', 'jgallery_sc'); Todo está listo, excepto que necesitamos usar el [galería] código corto dentro de esta función. Usaremos el do_shortcode () funciona y devuelve el [gallery link = "file"] Código corto:
function jgallery_sc () wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery')); wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ colorbox / colorbox.css'); return do_shortcode ('[gallery link = "file"]'); add_shortcode ('jgallery', 'jgallery_sc'); ¡Todo listo! Después de agregar esta función en la funciones.php archivo de su tema, puede comenzar a utilizar el [jgallery] código corto de inmediato. Háganos saber lo que piensa en los comentarios a continuación. ¡Disfrutar! :)
