Video: Cómo insertar una galería de imágenes en Wordpress 2018 2024
Puede usar la ventana Insertar medios de WordPress para insertar una galería de fotos completa en sus publicaciones. Cargue todas las imágenes y luego, en lugar de hacer clic en el botón Insertar en el mensaje, haga clic en el enlace Crear galería en el lado izquierdo de la ventana Insertar medio. La ventana Crear galería se abre y muestra todas las imágenes que ha cargado en su sitio.
Siga estos pasos para insertar una galería de fotos en una publicación de blog:
-
En la ventana Crear galería, seleccione las imágenes que desea usar en su galería.
Haga clic en cada imagen una vez para seleccionarla y usarla en la galería. Una imagen seleccionada muestra una pequeña marca de verificación en su esquina superior derecha.
-
Haz clic en el botón Crear nueva galería.
Se abre la página Editar galería.
-
(Opcional) Agregue un título para cada imagen haciendo clic en el área Subtítulo de esta imagen y escribiendo un título o una breve descripción de la imagen.
-
(Opcional) Establezca el orden en que las imágenes aparecen en la galería utilizando la opción de arrastrar y soltar de la página Editar galería.
Haga clic y luego arrastre y suelte las imágenes para cambiar el orden.
-
(Opcional) Especifique las siguientes opciones en la sección Configuración de la galería en el lado derecho de la página Editar galería:
-
Enlace a: Archivo multimedia o página de archivo adjunto.
-
Aleatorio Orden: Seleccione para aleatorizar el orden en que se muestran las imágenes en la galería.
-
Columnas de la galería: Seleccione la cantidad de columnas de imágenes que desea que aparezcan en su galería.
-
-
Haz clic en el botón Insertar galería.
WordPress inserta en su publicación un trozo de código corto que se ve así:
-
(Opcional) Cambie el orden de aparición de las imágenes en la galería, así como el marcado (etiquetas HTML o selectores de CSS).
Utilice el código abreviado de la galería de WordPress para cambiar los diferentes aspectos de la visualización de la galería en su publicación:
-
captiontag : Cambie el marcado que rodea el título de la imagen alterando el código corto de la galería. Por ejemplo, coloca etiquetas alrededor de la leyenda de la imagen. (La etiqueta se considera un elemento de nivel de bloque y crea un contenedor separado para el contenido.)
Si desea que la galería aparezca en una línea propia, el código coloca etiquetas alrededor de la leyenda de la imagen. El marcado predeterminado para la opción de etiqueta de título es dd.
-
icontag : Define el marcado HTML alrededor de cada imagen en miniatura individual en su galería. Cambie el marcado en la etiqueta de icono (icono de miniatura) de la imagen modificando el código breve de la galería a algo así como, que coloca etiquetas alrededor de cada icono de miniatura.El marcado predeterminado para icontag es dt.
-
itemtag : Define el marcado HTML alrededor de cada elemento en su galería. Cambie el marcado alrededor de la etiqueta del elemento (cada elemento) en la galería mediante la alteración del shortcode de la galería a algo así como, que coloca etiquetas alrededor de cada elemento en la galería. El marcado predeterminado para la etiqueta de elemento es dl.
-
orden por : Define el orden en que las imágenes se muestran dentro de su galería. Cambie el orden utilizado para mostrar las miniaturas en la galería mediante la alteración del shortcode de la galería a algo así como, que muestra las miniaturas en orden de menú ascendente. Otro parámetro que puede usar es ID_order ASC, que muestra las miniaturas en orden ascendente según sus ID.
-
Código corto de galería | Resultados |
---|---|
Una galería de cuatro columnas que contiene imágenes de tamaño mediano | |
Una galería de diez columnas que contiene imágenes en miniatura extraídas de
la publicación del blog la ID 215 |
|
Una galería de tres columnas (predeterminada) en la que cada imagen está
rodeada de etiquetas y la leyenda de la imagen está rodeada por etiquetas |
-
Defina el estilo de las etiquetas en su hoja de estilo CSS.
Las etiquetas crean un elemento en línea. Un elemento contenido dentro de una etiqueta permanece en la misma línea que el elemento anterior; no hay un salto de línea. Necesita un poco de conocimiento de CSS para alterar las etiquetas. Haga clic en la pestaña Diseño en su Tablero de WordPress, y luego haga clic en la pestaña secundaria del Editor de temas para editar la hoja de estilos de su tema.
Aquí hay un ejemplo de lo que puede agregar a la hoja de estilo (style. Css) para su tema actual:
span. gallery-icon img {padding: 3px; fondo: blanco; borde: 1px negro sólido; margin: 0 5px;}
Al colocar este bit de CSS en la hoja de estilo (style. css) del tema activo, automáticamente se coloca un borde negro de 1 píxel alrededor de cada miniatura, con 3 píxeles de relleno y un fondo blanco. Los márgenes izquierdo y derecho tienen 5 píxeles de ancho, creando un buen espacio entre las imágenes de la galería.
-
Haga clic en el botón Actualizar archivo para guardar los cambios en su plantilla de hoja de estilo (estilo, css).
La figura muestra una publicación con una galería de fotos, utilizando los pasos anteriores y el ejemplo de CSS en el tema predeterminado de WordPress: Twenty Twelve.
Matt Mullenweg, cofundador de la plataforma WordPress, creó una galería de fotos muy extensa mediante el uso de las opciones de galería integradas en WordPress. Mira esta fabulosa galería de fotos.