El código corto de la galería de WordPress: una visión general completa

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Si no ha tenido la oportunidad de usar WordPress Gallery Shortcode en el pasado, este será un excelente punto de partida para ti. Para otros que lo han utilizado, vamos a cubrir algunas de las características del código abreviado que aún no ha considerado. En este tutorial cubriremos un shortcode específico de WordPress, [gallery] y las diferentes formas de usarlo.

Introducción

WordPress tiene pequeños fragmentos de código, llamados códigos cortos, que se pueden usar 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 shortcode de [galería] específicamente, pero también puedes leer nuestras otras publicaciones de introducción al uso de shortcode en WordPress:

Uso básico

Para comenzar con el código corto de [galería], vaya a la sección de Publicaciones y agregue una Nueva Publicación que llamaremos "Publicación de Galería". En el área del editor, coloque el código corto [gallery] (en cualquiera de las Vistas Visual / HTML). Después de eso presione Publicar / Actualizar.

La página se actualizará y si pasas al editor Visual ahora verás 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 de arrastre 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 Publicacion. Verás la publicación con una grilla de imágenes de galería, con 5 columnas. Si hace clic en una imagen, le llevará a la publicación adjunta de la imagen.

Salida del código corto gallery

Ahora que vemos que el código corto de [galería] está funcionando, avancemos, verifiquemos el código fuente y veamos qué se está generando.


<style type='text/css'>
 #gallery-1 {
      margin: auto;
 }
 #gallery-1 .gallery-item {
      float: left;
      margin-top: 10px;
      text-align: center;
      width: 20%;
 }
 #gallery-1 img {
      border: 2px solid #CFCFCF;
 }
 #gallery-1 .gallery-caption {
      margin-left: 0;
  }
</style>

Lo que ve arriba es la primera parte del código que WordPress genera automáticamente por el codigo corto [gallery]. El CSS se genera automáticamente para cada codigo corto [gallery] 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.


<div id='gallery-1' class='gallery galleryid-1 gallery-columns-5 gallery-size-thumbnail'>
  <dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='https://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-1/' title='Pretty Text'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-1-150x150.jpg" class="attachment-thumbnail" alt="Pretty Text" title="Pretty Text" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Pretty Text
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-2/' title='Berries!'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-2-150x150.jpg" class="attachment-thumbnail" alt="Berries!" title="Berries!" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Berries!
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-3/' title='Quad in River'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-3-150x150.jpg" class="attachment-thumbnail" alt="Quad in River" title="Quad in River" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Quad in River
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-4/' title='wp-tut-4'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-4-150x150.jpg" class="attachment-thumbnail" alt="Store" title="wp-tut-4" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption'>
				Store
				</dd>
		</dl>
			<br style='clear: both;' />
		</div>

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 [gallery]. Las opciones de código abreviado de [gallery] incluyen columns, id, size, link, include, exclude, orderby, order, itemtag, icontag, y captiontag.

columnas

[gallery columns="2"]

Si regresas a la pestaña HTML en el editor de publicaciones, verás que el código corto dice [gallery columns="5"]. Cuando ajustamos la configuración de la columna en la interfaz de la galería, pasó esa configuración al codigo corto. Ahora, en lugar de usar la interfaz gráfica, especifiquemos manualmente las configuraciones a través del código corto. Cambiemos las colums=”5” a colums=”2”. Ahora vaya a Ver publicación: puede 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 da 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.


#gallery-1 .gallery-item {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 50%;
}

El CSS esencialmente ajusta el ancho a 100 / $columns, siendo $columns 3 por defecto o un número que especificamos en el código corto.

ID

[gallery id="4"]

De forma predeterminada, el código abreviado de la galería extrae la galería asociada con el 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 regrese a la publicación del Código abreviado de la galería y luego agregue el código abreviado de la galería [gallery id="99"] (use la identificación del número 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 del post "Gallery Shortcode" y las otras imágenes son de la "Otra página". También puede ajustar las opciones en el código corto, cambiar columnas, ordenar, etc.

tamaño

[gallery size="large"]

El tamaño predeterminado para las imágenes de la galería es miniatura. Otras opciones incluyen "thumbnail" (miniatura), "medium" (mediano), "large" (grande) y "full" (completo). "thumbnail", "medium", "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 size="large", WordPress emitirá la imagen y recortará / escálara 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 adaptarse a ese tamaño. (nota, las imágenes se pueden recortar en WordPress de la manera que lo desee.)

*Nota al margen, sus imágenes serán sesgadas si son mucho más grandes que el tamaño especificado.

orderby (ordenar 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', ordena por título. , 'fecha': se cargó la imagen en orden por fecha, 'modificada' - la imagen ordenada por la última fecha que se actualizó o cambió y 'RAND' - ordena los artículos al azar.

order (orden)

[gallery order="ASC"]

Después de configurar 'orderby' puede establecer '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"]

link

[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 en [gallery link="file"].

include

[gallery include="23,39,45"]

A veces es posible que desee incluir solo imágenes muy específicas. Puede hacerlo usando la opción de inclusión, [gallery include="23,39,45"] (23,39,45 son un ejemplo, use las ID que coincidan con sus imágenes). Pasa la ID de cada imagen que quiere asociada. 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 escriba y use ese número en el código de acceso de la galería siguiendo el formato que se muestra arriba.

exclude

[gallery exclude="21,32,43"]

Esta opción es casi exactamente lo que suena. Si sigue las instrucciones para incluir, encuentre las ID de las imágenes que NO quiere 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.

itemtag, icontag, captiontag

[gallery itemtag="section" icontag="div" captiontag="figure"]

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: En esencia, el código abreviado de la galería predeterminado para estas opciones es [gallery itemtag="dl" icontag="dt" captiontag="dd"]. Supongamos que queremos 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"]. Intenta esas opciones y puedes ver la diferencia en la salida.


<div id='gallery-1' class='gallery galleryid-1 gallery-columns-2 gallery-size-thumbnail'><section class='gallery-item'>
		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-1/' title='Pretty Text'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-1-150x150.jpg" class="attachment-thumbnail" alt="Pretty Text" title="Pretty Text" /></a>

		</div>
			<figure class='wp-caption-text gallery-caption'>
			Pretty Text
			</figure></section><section class='gallery-item'>
		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-2/' title='Berries!'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-2-150x150.jpg" class="attachment-thumbnail" alt="Berries!" title="Berries!" /></a>
		</div>
			<figure class='wp-caption-text gallery-caption'>
			Berries!
			</figure></section><br style="clear: both" /><section class='gallery-item'>

		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-3/' title='Quad in River'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-3-150x150.jpg" class="attachment-thumbnail" alt="Quad in River" title="Quad in River" /></a>
		</div>
			<figure class='wp-caption-text gallery-caption'>
			Quad in River
			</figure></section><section class='gallery-item'>
		<div class='gallery-icon'>
			<a href='http://localhost/wp-tuts/2011/12/10/hello-world/wp-tut-4/' title='wp-tut-4'><img width="150" height="150" src="http://localhost/wp-tuts/wp-content/uploads/2011/12/wp-tut-4-150x150.jpg" class="attachment-thumbnail" alt="Store" title="wp-tut-4" /></a>
		</div>

			<figure class='wp-caption-text gallery-caption'>
			Store
			</figure></section><br style="clear: both" />
		<br style='clear: both;' />
	</div>

Estilizando con Temas la galeria

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 codigo corto [gallery].

Envoltura de la galería

La "envoltura de la galería" envuelve cada instancia del codigo corto [gallery]. Eso significa que si usa [gallery] 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.

<div class="gallery galleryid-1 gallery-columns-3 gallery-size-large" id="gallery-1"><div>

.gallery - envuelve cada galería incluida en una publicación
.galleryid-{$id} - incrementos, si es segundo [gallery] entonces {$id} sería 2
.gallery-columns-{$columns} - cambia dependiendo de la opción de columna
.gallery-columns-{$size} - cambia la opción de tamaño dependiendo

Otros elementos

.gallery-item - envuelve cada imagen de la galería y el título
.gallery-icon - dentro de .gallery-item, envuelve el ancla a la imagen (archivo o enlace) y la imagen
.gallery-caption - dentro de .gallery-item, 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/*nombre-del-tema*/style.css) abra el style.css en un editor agregue esto Código al final de la hoja de estilo.


.gallery .gallery-item{
	position:relative;
}

.gallery .gallery-caption{
	position:absolute;
	bottom:4px;
	text-align:center;
	width:100%;
}

.gallery .gallery-icon img{
	border-radius:2px;
	background:#eee;
	box-shadow:0px 0px 3px #333;
	padding:5px 5px 40px 5px;
	border:solid 1px #000;
}

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]. Dado que conocemos los elementos y el CSS, la [galería] genera, si quisiéramos, podríamos anular el CSS fácilmente; podríamos hacerlo utilizando la especificidad de CSS. Ya que solo hay una capa de especificidad y la única identificación que se especifica es #gallery-1 (1 para la primera galería, y la numeración continúa para cada galería en la publicación), se puede reemplazar el CSS simplemente al encontrar una identificación principal (para TwentyEleven #content funciona) y luego también especifique .gallery, ya que es una clase adjunta a cada galería.


#content .gallery {
	/* This style would override the default #gallery-1 styling */
	margin:0px;
	display:none;
}

Obviamente, lo anterior es un ejemplo básico de anular el CSS, ¡pero entiendes el ejemplo!

Conclusión

El código abreviado integrado [gallery] 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 código de acceso de la galería con las opciones lightbox y control deslizante!