Domina las imágenes en WordPress

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

WordPress tiene un montón de características para tratar las imágenes. Pero quizá algunas de ellas no son tan conocidas para los principiantes de WordPress. En esta entrada me gustaría comentarte dónde guarda WordPress las imágenes, pero antes, revisemos algunas cosas básicas sobre imágenes con las que seguro ya debes estar familiarizado. Recuerda que si ya te lo sabes, siempre puedes hacer rápidamente scroll hacia abajo.

¿Empezamos?

Lo básico

WordPress incluye un sistema para administrar todos tus archivos multimedia, ya sean imágenes, vídeos, música, documentos, etc. Este sistema te permite subir, gestionar, editar y borrar archivos desde la biblioteca de medios de WordPress.

Seguramente el momento más oportuno para añadir (o subir) archivos multimedia a tu WordPress es cuando estamos editando una entrada. Es entonces cuando necesitamos añadir imágenes, vídeos y demás al contenido. La forma de conseguirlo es terriblemente sencilla. Con el botón Añadir objeto que ves en la siguiente captura podrás abrir un cuadro de diálogo para subir tus archivos e incluirlos en el contenido.

Añadir objeto a una entrada
Añadir objeto a una entrada.

Por otro lado, también puedes primero subir las imágenes a través del menú Medios y luego seleccionarlas cuando las vayas a utilizar usando el anterior botón.

Biblioteca de Medios en WordPress
Biblioteca multimedia en WordPress.

Alinear imágenes

Al insertar una imagen en una entrada tienes la opción de alinearla a la izquierda o derecha del texto.

Screen Shot 2016-04-20 at 11.26.26

Tras hacer esto la imagen te queda a la izquierda, pero el texto que hay a continuación sigue estando bajo la imagen. ¿Cómo puedes hacer para que el texto quede alineado al lado de la imagen?

Accesorio para cochePues muy fácil, selecciona el borde de la imagen y ves haciéndola más pequeña. El texto se irá posicionando a la izquierda (o derecha) del texto, tal y como ves en este párrafo.

O también puedes ir a editar la imagen y cambiar el tamaño de la misma para que se vea de la medida que creas conveniente.

Finalmente, puedes optar por seleccionar el texto que estés escribiendo y hacer que este se alinee a la derecha o izquierda de la imagen, y el efecto será el mismo.

Alinea el texto a la derecha
Alinea el texto a la izquierda de la imagen.

Añadir la leyenda de la imagen

Añadir la leyenda bajo cada imagen es tan sencillo como añadir dicha información en la biblioteca de medios.

Añadir leyenda en una imagen
Añadir leyenda en una imagen

El siguiente paso, por supuesto, es asegurarse de que todas las imágenes que añades a tus entradas estén optimizadas para el SEO.

Un poco más avanzado

Mostrar las imágenes en columnas y filas

Otra de las cuestiones que quizás alguna vez te has preguntado es cómo mostrar todo un conjunto de imágenes en filas y columnas o formando un carrusel. Por defecto, WordPress viene con la opción de crear una galería que te permite mostrar las imágenes ordenadas en columnas y filas.

Para ello, haz clic en el botón Añadir objeto. En la biblioteca multimedia (a la izquierda) selecciona la opción de Crear Galería y luego escoge el conjunto de imágenes de la biblioteca que quieres que formen parte de esa galería.

Crear una nueva galería de imágenes
Crear una nueva galería de imágenes

Una vez seleccionadas las imágenes y creada la galería, puedes editarla, añadir leyendas a las imágenes y cambiar el orden en el que se muestran estas.

Editar una galería
Editar una galería

Pero vayamos ya, a lo que yo quería comentarte en esta entrada

Cómo guarda WordPress las imágenes

Por defecto, WordPress almacena todos los archivos multimedia en el directorio /wp-content/uploads/ de tu servidor, organizados por mes y año en distintas subcarpetas.

Por ejemplo, todos los archivos que subas en abril del 2016 se guardarán en:

/wp-content/uploads/2016/04/

Encontrarás las carpetas conectándote mediante un cliente FTP a tu servidor de hosting.

Carpetas de imágenes de WordPress
Carpetas de archivos multimedia de WordPress.

Y WordPress también añade información sobre las imágenes que has cargado en la biblioteca multimedia directamente en la base de datos. Ésta la encuentras en la tabla wp_posts. Todas las filas que tengan el valor attachment en la columna type son referencias a archivos multimedia de tu biblioteca.

Información sobre imágenes en la Base de Datos
Información sobre imágenes en la base de datos, en la tabla wp_posts.

Adicionalmente, WordPress también guarda información en la tabla wp_postmeta cuando insertas imágenes en entradas u otros custom post types.

En particular, cuando establezcas la imagen destacada WordPress guarda esta información como una entrada en la tabla wp_postmeta con el valor thumbnail_id en la columna meta_key.

Tabla wp_postmeta de WordPress
Tabla wp_postmeta de WordPress.

Por lo tanto, si borras un archivo del servidor utilizando un cliente FTP, o a través del explorador de archivos de tu proveedor de hosting, las imágenes se borrarán del servidor pero no de la base de datos de WordPress. Y por lo tanto, esas imágenes continuarán apareciendo en la página o entrada dónde las habías insertado pero mostrando enlaces rotos.

Por otro lado, si borras las referencias de tus imágenes o demás archivos multimedia en la base de datos, estos desaparecerán de la biblioteca multimedia en WordPress aunque todavía los tengas guardados en el servidor.

Cambiar cómo guarda WordPress los archivos subidos en la biblioteca

Por defecto, WordPress no te permite cambiar el lugar donde se guardan los archivos que se suben a tu instalación. La única cosa que puedes hacer es desactivar que los archivos subidos se organicen en carpetas basadas en mes y año. Y esto lo puedes hacer en la opción Ajustes » Media desde el escritorio de WordPress.

Ajustes Multimedia en WordPress
Ajustes Multimedia en WordPress

Si desactivas la casilla «Organizar mis archivos subidos en carpetas basadas en mes y año» y guardas los cambios, entonces WordPress empezará a guardar los archivos subidos directamente en la carpeta /wp_content/uploads/.

Si eres un usuario más avanzado de WordPress (no te lo recomendaría si eres principiante), puedes modificar dónde guardar las imágenes por defecto, modificando el archivo wp-config.php.

Así, si por ejemplo querías que las guardara en wp-content/archivos deberías introducir la siguiente línea en wp-config.php:

define ('UPLOADS', 'wp-content/'.'archivos');

Organizar tus imágenes en WordPress

WordPress no te permite utilizar carpetas personalizadas cuando subes imágenes y, por lo tanto, no te permite organizarlas como tu quieras.

¿Qué alternativa tienes? Pues una opción es la de agrupar las imágenes o cualquier otro archivo multimedia en álbumes. Sólo necesitas instalarte alguno de los plugins de galerías que encontrarás en el directorio de WordPress, como por ejemplo GalleryEnvira Gallery (de pago) que te permiten realizar esto.

Finalmente me gustaría recordarte que si buscas imágenes para incluir en tu entrada, te puede interesar la lectura de 65 webs donde conseguir imágenes gratis.

Imagen destacada: Sunrising in St. Andrews por Núria Adell

14 comentarios en «Domina las imágenes en WordPress»

  1. Muy buena, ahoria estoy moviendo datos de una bd de wordpress a otra pero las imagenes no me cargan, voy a probar con la explicación que tiene..

  2. Gracias por el post. He llegado a él buscando info para un problemilla que tengo con las galerías…

    Es horrible: tengo que actualizar todo la web (la versión de WP y los plugins) y en mi primer intento se perdió toda la información de las galerías. Es decir, las imágenes quedaban huérfanas, no agrupadas en galerías que su mismo plugin actualizado (BWS Gallery) reconociera.

    Así que no sé cómo exportar o guardar la información relativa a qué imágenes tienen que ir con qué otras imágenes, para que no se fastidie todo de nuevo al actualizar 🙁

    No sé si me he explicado bien o si esto tiene solución… porque me temo que tendré que volver a subir todas las imágenes mediante el plugin ya actualizado. Ays.

    Gracias de antemano por si tuvieras alguna idea de cómo puedo solucionar esto.

    Un saludo.

    1. Hola Jota, muchas gracias por leernos.

      Respecto a tu pregunta, si miras el foro de soporte del plugin que comentas (https://wordpress.org/support/plugin/gallery-plugin/), verás que no eres el único que te has encontrado con este problema o parecido. Te recomiendo que mires las distintas soluciones que proponen los propios desarrolladores del plugin o que contactes directamente con ellos (https://support.bestwebsoft.com/hc/en-us/requests/new). Seguro que te ayudarán.

      Suerte y un saludo.

  3. Buenas noches quería preguntarles si es posible poner una imagen al inicio de un Articulo, antes del h2, en wp y si esta acción no afecta al SEO de mi pagina y si fuera que si es posible ¿con que etiqueta la pondría h1, h2, h3, párrafo?

    1. Buenos días, Jorge. Las imágenes que suelen acompañar el título de una entrada se llaman «imágenes destacadas» y son una funcionalidad que debe soportar tu tema de WordPress (por cierto, raro es el tema que hoy en día no las soporte). Cuando edites una entrada, busca una caja llamada «Imágenes destacadas» y pon la imagen que quieras; así aparecerá. La ubicación exacta de la imagen también depende del tema… aunque pueda parecerte raro, eso en realidad es algo bueno ya que, cuando cambies de tema, la imagen destacada se adaptará a los requisitos y diseño del tema nuevo.

  4. Hola, buenas, me gustaría saber como puedo conocer el número de imágenes que ya he subido en wordpress.
    Se van optimizando y me aparecen unos números desorbitados para lo que creo que llevo subido.
    Muchas gracias de antemano.

    1. Hola Ana,
      El número en Medios, indica el número de imágenes que tienes cargadas. De entrada, lo único que se me ocurre es que tengas instalado un plugin o tu propio tema que al subir una imagen meta varias versiones de la misma de diferentes tamaños y ese sea el motivo de que veas un número mucho mayor.
      Un saludo,
      Ruth

  5. Buenos días,
    agradecerle el post, muy bien explicado y detallado para aquellos que empezamos en wordpress.
    Quería preguntar si es posible establecer un link en cada una de las imagenes que suba ; en mi caso quiero poner tres imagenes que al pinchar sobre ellas me lleven a otra página.

    Gracias y un saludo.

    1. ¡Hola y gracias por leernos!
      Lo que preguntas es muy sencillo y tienes dos opciones: una es el mismo momento de subir la imagen en la Biblioteca de Medios, ya tienes la opción en AJUSTES DE VISUALIZACIÓN DE ADJUNTOS de indicarle la URL de la página a donde quieres que te lleve. La otra opción, si no has hecho lo anterior, una vez insertada la imagen en tu entrada, posicionarte encima de ella en el editor y hacer click en el botón link y añadir la URL de la página.
      Un saludo,
      Ruth

  6. Hola, una duda, si quisiera cambiar una parte del titulo de todas mis imagenes por la base de datos, alguna idea?

    1. Hola Enrique. Tus imágenes en la base de datos se guardan en la tabla wp_posts con el post_type ‘attachment’. Búscalas filtrando por esa columna y cámbiales el post_title como quieras.

  7. Hola, está muy interesante el post. Tengo una pregunta muy puntual y es que no he econtrado nada en blogs y YouTube, grupos de Facebook y el foro de Reddit.

    Quiero saber cómo hacer para insertar imágenes que sólo se vean en desktop o móvil.

    Me explico, quiero insertar una imagen diseñada horizontalmente para escritorio y con diseño vertical para móvil naturalmente.

    ¿Sabes cómo lo puedo hacer?

    En la siguiente página encontrarás el ejemplo de lo que quiero hacer: https://morelliscoffee.com/products/grind
    (la parte donde están los cuadros con flechas).

    1. Hola, Robinson. Sin duda, es una buena pregunta.

      Hasta donde yo sé, la página que se sirve en móvil y en escritorio es, en principio, la misma. Lo que puedes hacer, lógicamente, es esconder o mostrar partes de la web usando media queries en tus estilos CSS o servir diferentes imágenes usando la propiedad src-set de las etiquetas img. Y ya si quieres hacer cosas más complicadas, siempre puedes tirar de JavaScript.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.