Si no ha tenido la oportunidad de usar WordPress Gallery Shortcode en el pasado, este será un excelente punto de partida para usted. Para otros que lo han utilizado, vamos a cubrir algunas características del código abreviado que aún no ha considerado. En este tutorial cubriremos un shortcode específico de WordPress, [galería] y las diferentes formas de usarlo.
Introducción
WordPress tiene pequeños fragmentos de código, llamados códigos cortos, que se puede utilizar en Publicaciones, Páginas y Tipos de Publicaciones. WordPress tiene muchos códigos cortos, que se pueden agregar al uso de la API de código corto, que se trata aquí. Estos códigos cortos, ubicados en el área del editor de contenido o colocados en un archivo de tema, están conectados a funciones que se ejecutan cuando se carga el contenido o la publicación. Los códigos cortos de WordPress son flexibles y, a menudo, le permiten especificar opciones que personalizan la forma en que funciona el código corto.
Hoy vamos a revisar el código abreviado de [galería] específicamente, pero también puede leer nuestras otras publicaciones de introducción al uso del código abreviado en WordPress:
Comenzando con los códigos cortos de WordPress
Consejo rápido: Uso de códigos cortos en el desarrollo de temas
Sugerencia rápida: Mejora de códigos cortos con la función has_shortcode ()
Uso de códigos cortos para acelerar la publicación con servicios populares
Uso básico
Para comenzar con el código corto de [galería], vaya a la sección Publicaciones y agregue una Nueva publicación que llamaremos "Publicación de la Galería". En el área del editor, coloque el código corto [galería] (en cualquiera de las Vistas Visual / HTML). Después de eso presione Publicar / Actualizar.
La página se actualizará y si se desliza hacia el editor Visual, ahora verá un cuadro discontinuo con un icono de foto en el centro. Si hace clic en el cuadro, en la esquina superior izquierda verá otro icono de imagen. Haga clic en ese icono y aparecerá una ventana de diálogo. Esta ventana de diálogo le permitirá cargar y adjuntar imágenes a la publicación. Continúe y arrastre y suelte sus imágenes en la región desplegable o presione Seleccionar archivos y elija las fotos que desea cargar..
Después de cargar las imágenes, deseará pulsar "Guardar todos los cambios". Eso te llevará a la pestaña "Galería" en esa misma ventana de diálogo. Verá miniaturas de todas las imágenes que acaba de cargar, así como algunas configuraciones. Mira a tu alrededor, cambia algunas configuraciones para ver las diferentes opciones. Ahora ajuste las columnas de la Galería a 5 y luego presione "Actualizar configuración de la galería".
Ahora adelante y presione Ver Publicar. Verás la publicación con una grilla de imágenes de galería, con 5 columnas. Si haces clic en una imagen, te llevará a la publicación adjunta de la imagen..
Salida de código corto de la galería
Ahora que vemos que el código abreviado de [galería] está funcionando, avancemos y comprobemos el código fuente y veamos qué se está generando..
Lo que ve arriba es la primera parte del código que WordPress genera automáticamente por el shortcode de [galería]. El CSS se genera automáticamente para cada shortcode de [galería] que se usa. Hay elementos y clases predeterminados para cada galería y cada elemento que envuelve una imagen. Si tuvieras una segunda galería en la página, saldría # gallery-2 ...
A continuación se muestra el resto del código, el HTML generado por la galería. Puedes ver que la galería está envuelta en un div y cada imagen y título están envueltos en elementos también.
Texto bonito
Bayas!
Quad en rio
Almacenar
Opciones de código corto
Ahora que hemos probado el uso básico del código abreviado de la galería, echemos un vistazo a las diferentes opciones para personalizar la salida de [galería]. Las opciones de shortcode [galería] incluyen columnas, carné de identidad, tamaño, enlazar, incluir, excluir, orden por, orden, itemtag, icontag, y etiqueta de título.
columnas
[columnas columnas = "2"]
Si regresas a la pestaña HTML en el editor de publicaciones, verás que el código corto dice [galería columnas = "5"]. Cuando ajustamos la configuración de la columna en la interfaz de la galería, pasó esa configuración al shortcode. Ahora, en lugar de utilizar la interfaz gráfica, especifiquemos manualmente la configuración a través del código corto. Cambiemos las columnas = "5" a columnas = "2". Ahora ve Ver publicación: puedes ver que hay una cuadrícula de las imágenes de la galería, y en lugar de 5 imágenes por columna, hay 2. Veamos la fuente nuevamente en la "Publicación de la Galería" y veamos qué resultados de WordPress. Justo antes de la galería en la fuente, podemos ver el CSS. ¿Nota la diferencia con la salida del CSS anterior? Este CSS es generado automáticamente por el shortcode [gallery]. Si cambia las columnas, notará cómo cambia el CSS..
El CSS esencialmente ajusta el ancho a 100 / $ columnas, $ columnas siendo 3 por defecto o un número que especificamos en el código corto .
carné de identidad
[galería]
De forma predeterminada, el código abreviado de la galería extrae la galería asociada con la ID de publicación actual. Sin embargo, si especifica ID, puede extraer imágenes de otra publicación. Para probar esto le permite agregar una nueva publicación y llamarlo Otra página. Continúa, sube algunas fotos diferentes a la página Otra y presiona Publicar. Luego, en la dirección URL del navegador, busque post =.
Recuerde ese número y luego vuelva a la publicación de código corto de la galería y luego agregue el código de la galería [galería] (use el número de identificación de la otra publicación en lugar de 99). Actualiza la publicación de código corto de la Galería y luego ve Ver publicación. Observe que ahora hay dos galerías, una con imágenes de la publicación "Gallery Shortcode" y las otras imágenes son de la "Otra página". También puede ajustar las opciones en el código corto, cambiando columnas, orden, etc..
tamaño
[tamaño de la galería = "grande"]
El tamaño predeterminado para las imágenes de la galería es miniatura. Otras opciones incluyen "miniatura", "mediano", "grande" y "completo". "miniatura", "mediano", "los tamaños grandes se especifican en Configuración de WordPress> Medios. El tamaño completo es simplemente el tamaño completo de la imagen. Si cambiamos el ajuste a tamaño =" grande ", WordPress emitirá la imagen y recortará / escálelo a las dimensiones asociadas. El tamaño "grande" predeterminado para WordPress es Anchura máxima 1024 y Altura máxima 1024, por lo que las imágenes se escalarán y se recortarán para que se ajusten a ese tamaño. querer.)
* Nota al margen, sus imágenes serán sesgadas si son mucho más grandes que el tamaño especificado.
orden por
[gallery orderby = "menu_order"]
De forma predeterminada, las imágenes están ordenadas por 'menu_order' (que recomiendo encarecidamente que deje) otras opciones incluyen 'ID', 'título', orden por título. , 'fecha': se cargó la imagen ordenada por fecha, 'modificada' - se actualizó o cambió la imagen ordenada por la última fecha y 'RAND' - ordenó los artículos al azar.
orden
[orden de la galería = "ASC"]
Después de configurar 'orderby' puede configurar 'ASC' o 'DESC' (no usar si 'orderby' no está configurado o set está configurado como 'menu_order'). Por ejemplo, si desea que las imágenes se enumeren alfabéticamente al revés (Z-A) por título de imagen, asegúrese de que orderby = "title" y luego también especifique order = "DESC" (el valor predeterminado es ASC). [gallery orderby = "title" order = "DESC"]
enlazar
[gallery link = "file"]
Por defecto, las imágenes de la galería de cada enlace a la página adjunta de cada imagen. Entonces, en otras palabras, cada imagen va esencialmente a una sola publicación, con la imagen. Si desea vincular a la fuente de la imagen (my-image-name.jpg) puede pasar [gallery link = "file"].
incluir
[gallery include = "23,39,45"]
A veces es posible que desee incluir solo imágenes muy específicas. Puedes hacerlo usando la opción de inclusión, [gallery include = "23,39,45"] (23,39,45 son un ejemplo, use identificaciones que coincidan con sus imágenes) Usted pasa la identificación de cada imagen que desea asociar. Para encontrar la ID de las imágenes, vaya a Medios> Biblioteca y luego haga clic en cada una de las imágenes que desee.
En la barra de URL del navegador, busque wp-admin / media.php? Attachment_id = y luego anote y use ese número en el código abreviado de la galería siguiendo el formato que se muestra arriba.
excluir
[gallery exclude = "21,32,43"]
Esta opción es casi exactamente lo que suena. Si sigues las instrucciones para incluir, Encuentra la identificación de las imágenes que NO HACER Quiero en la galería. Después de encontrar las imágenes que no desea incluir (solo busque las imágenes que no desea adjuntar a la publicación) [gallery exclude = "21,32,43"]. Tenga en cuenta que si utiliza incluir y excluir, se romperá Internet. Está bien, no realmente, ¡pero no funcionará! Ignorará la exclusión y usará solo la inclusión.
Estas opciones pueden cambiar los elementos HTML que WordPress genera con el código corto de la galería. Las etiquetas de opción predeterminadas son las siguientes: dl ", icontag =" dt ", captiontag =" dd ". En esencia, el código corto de galería predeterminado para estas opciones es [gallery itemtag = "dl" icontag = "dt" captiontag = "dd"]. Digamos que queríamos cambiar las etiquetas HTML, podríamos pasar fácilmente el elemento que preferiríamos usar, por lo que podríamos usar algo como [gallery itemtag = "section" icontag = "div" captiontag = "figure"]. Pruebe esas opciones y podrá ver la diferencia en la salida..
Texto bonito
Bayas!
Quad en rio
Almacenar
Theming the Gallery
Si está creando o personalizando un tema, hay algunas clases primarias que debe tener en cuenta. Estas son clases que la galería genera en el HTML, cada vez que se utiliza un shortcode [gallery].
Envoltura de la galería
La "envoltura de la galería" envuelve cada instancia del shortcode [galería]. Eso significa que si usa el shortcode [galería] tres veces, este ajuste existirá en el código fuente tres veces. Cada vez que se utiliza la [galería] en una publicación, se incrementa el ID de salida.
.galería - Envuelve cada galería incluida en un post
.galleryid - $ id - incrementos, si es segundo [galería] entonces el $ id sería 2
.galería-columnas - $ columnas - Cambios dependiendo de la opción de columna.
.galería-columnas - $ tamaño - cambia según la opción de tamaño
Otros elementos
.artículo de la galería - envuelve cada imagen de la galería y el título
.icono de la galería - dentro de .artículo de la galería, envuelve ancla a imagen (archivo o enlace) e imagen
.galería-título - dentro de .artículo de la galería, envuelve el texto del título de la imagen
Mejorando nuestra galería CSS
Ahora que entendemos los conceptos básicos del código abreviado de [galería], las diferentes opciones y el CSS / clases disponible, veamos cómo podemos mejorar el CSS que ya está allí. (Para esta sección y la siguiente, suponemos que comprende los conceptos básicos de CSS). En el tema TwentyEleven, la galería predeterminada se parece a la galería de las capturas de pantalla de las secciones anteriores.
WordPress ya genera el CSS básico para el diseño, pero podemos agregar un poco más de estilo para darle un toque especial a la galería. En el tema con el que estamos trabajando (para TwentyEleven /wp-content/themes/twentyeleven/style.css u otros temas /wp-content/themes/*themename/style.css) abra el style.css en un editor agregue esto Código al final de la hoja de estilo..
Al conocer las clases del elemento, podemos dirigirnos a partes específicas de la galería. Con este estilo podemos enfocar cada una de las imágenes y darles un aspecto Polaroid'ish
Anulando Galería CSS
En algunos casos, es posible que desee anular el CSS existente para el shortcode [galería]. Ya que conocemos los elementos y el CSS, la [galería] muestra, si quisiéramos, podríamos anular el CSS fácilmente; podríamos hacerlo utilizando la especificidad de CSS Dado que solo hay una capa de especificidad y la única identificación que se especifica es # galería-1 (1 para la primera galería, y la numeración continúa para cada galería en la publicación) usted podría anular el CSS simplemente encontrando una identificación de padre (para TwentyEleven #content works) y luego también especifique .galería, ya que es una clase adjunta a cada galería.
#content .gallery / * Este estilo anularía el estilo predeterminado de # gallery-1 * / margin: 0px; pantalla: ninguna;
Obviamente, lo anterior es un ejemplo básico de anular el CSS, pero obtienes lo esencial!
Conclusión
El código abreviado integrado [galería] para WordPress es bastante útil con todo tipo de opciones para configurar una galería personalizada. No es perfecto, como vimos en una pantalla anterior, pero funciona muy bien. Manténgase sintonizado y en las próximas semanas aprenda cómo actualizar el shortcode de la galería con las opciones de lightbox y control deslizante!
Share
Accentsconagua