Share
prettyPhoto es un plugin para lightbox creado por Stéphane Caron. Hoy aprenderemos cómo enviar el complemento con sus temas de WordPress.
Dar una opción de lightbox incorporada en lugar de hacer que los usuarios descarguen un complemento tiene muchos beneficios para los autores de temas. Para mí es poder crear un tema para la caja de luz que se ajuste a mis temas de WordPress También es una buena característica para tener disponible para los usuarios de tu tema, por supuesto, también debes darles una opción para deshabilitar la funcionalidad. Dicho esto vamos a ello.
Dirígete a los márgenes para-errors.com y descarga el complemento. Una vez que lo tengamos, vamos a crear una nueva estructura de directorios para que el complemento nos facilite las cosas..
Primero vamos a eliminar algunas cosas que no necesitamos. En la carpeta de imágenes, elimine todo, aparte de la carpeta prettyPhoto y su contenido. En la carpeta raíz, elimine el archivo xhr_response.html y index.html. Ahora mueva jquery.prettyPhoto.js de la carpeta js a la carpeta del complemento raíz y elimine la carpeta js.
Finalmente, cambie el nombre de la carpeta a prettyPhoto y suba la carpeta al directorio de su tema, probablemente ya tenga un directorio js o scripts, así que cárguelo, para este tutorial, supongamos que está en su-tema / js
Antes de cargar los archivos de complementos en nuestro tema, necesitamos cargar jQuery. Vamos a usar la versión alojada en Google de jQuery usando el método compartido en Digging to Wordpress, así que vamos a agregar el fragmento de código a nuestras funciones..
Accentsconagua
if (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); function register_scripts () wp_deregister_script ('jquery'); wp_register_script ('jquery', "http". ($ _SERVER ['SERVER_PORT'] == 443? "s": ""). ": //ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js ", false, null); wp_enqueue_script ('jquery'); wp_register_script ('prettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / jquery.prettyPhoto.js")); wp_enqueue_script ('prettyPhoto_script'); wp_register_script ('customprettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / customprettyPhoto.js")); wp_enqueue_script ('customprettyPhoto_script'); Es posible que desee considerar las ventajas y desventajas de usar un CDN para servir a jQuery. WordPress se envía con una copia de jQuery pero el uso de la versión alojada de Google puede beneficiar el rendimiento de su sitio. Si usted es un autor de temas, me quedaría con el uso de la versión enviada. Echa un vistazo a la discusión en otro tutorial para ayudarte a tomar una decisión..
Notará que hemos agregado otro archivo llamado customprettyPhoto.js. Aquí es donde haremos que el complemento sea agradable con nuestras imágenes de publicación y lo inicializaremos. Así que vamos a crear ese archivo y ponerlo en su directorio prettyPhoto. Ok, vamos a inicializar prettyPhoto.
Necesitamos agregar una línea de jQuery para agregar la clase de PrettyPhoto requerida prettyPhoto a las etiquetas de anclaje que rodean nuestras imágenes de post. Ya que estamos hablando de jQuery, utilicemos esto para lograr esto. Agregue lo siguiente justo después de $ (document) .ready (function () donde nos aseguramos de que la página esté cargada.
$ ('. entry-content a'). has ('img'). addClass ('prettyPhoto'); Reemplace .entry-content con cualquier nombre de clase o ID con el que haya envuelto el contenido de su publicación y debería haber agregado exitosamente la clase a todos los enlaces que envuelven sus imágenes de publicación. Si viste la documentación de prettyPhoto, verás que dice usar un atributo rel, pero en cambio, hemos usado una clase. Al hacerlo, evita errores de validación en nuestro HTML porque los atributos rel solo pueden tener ciertos valores permitidos de acuerdo con la especificación HTML5.
A continuación queremos habilitar la opción de descripción de prettyPhoto. Tenemos que superar un pequeño obstáculo que es que prettyPhoto quiere que agreguemos atributos de título a nuestras etiquetas de anclaje que se usarán para las descripciones, pero WordPress agrega títulos a las etiquetas de imagen. Para resolver esto, escribiremos un par de líneas de jQuery que tomarán la etiqueta del título de la imagen y estableceremos el mismo título en la etiqueta de anclaje que envuelve la imagen..
$ ('. entry-content a img'). click (function () var desc = $ (this) .attr ('title'); $ ('. entry-content a'). has ('img') .attr ('título', desc);); Aquí activamos una función cuando el usuario hace clic en una imagen de publicación. Tomamos la etiqueta del título de la imagen y la adjuntamos al ancla. Este paso hace que sea mucho más fácil para los usuarios de su tema agregar descripciones. Si desea deshabilitar por completo la funcionalidad, solo asegúrese de configurar cada título de ancla para que esté vacío, si falta por completo, ya que no hay un título vacío, prettyPhoto solo mostrará "no definido".
Necesitamos agregar el CSS para prettyPhoto al tema. Vuelva a su archivo functions.php y agregue la siguiente línea en la parte superior:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). '/ js / prettyPhoto / css / prettyPhoto.css'); Ya que mantuvimos las imágenes y CSS en sus carpetas originales y en relación a las demás como eran originalmente, no tenemos que preocuparnos por las imágenes rotas.
Veamos cómo agregar títulos y títulos que usará nuestra prettyPhoto. Mirando la imagen de arriba, podemos ver la relación entre la etiqueta alt de la imagen de publicación y la etiqueta de título del enlace que podemos establecer al agregar una imagen a una publicación o página..
Y eso es todo, hemos añadido con éxito prettyPhoto a nuestro tema. Asegúrese de leer la documentación del complemento para más usos y opciones. PrettyPhoto puede manejar más que solo imágenes, funciona con videos, ajax y más. También se envía con un puñado de temas que pueden adaptarse a su tema fuera de la caja o al menos darle un buen punto de partida..
