Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Existe un dicho que dice, una imagen vale más que mil palabras, eso puede ser cierto, pero en la web, una imagen puede hacer nuestro mensaje más fácil de ser captado

Y pueden resaltar nuestro contenido

Wordpress ofrece diversas formas de almacenar, gestionar e incluir imágenes en nuestros artículos

Y también nos ofrece una gran flexibilidad cuando decidimos como deseamos que se muestren las imágenes en nuestro contenido

Tenemos creado aquí un nuevo post, le hemos colocado el contenido de prueba de lorem ipsum para simular nuestro texto

Si tu aún no has creado un post, puedes ir a entradas, añadir nueva y crear un artículo

Ahora deseo colocar una imagen en mi artículo

Voy a hacerlo usando el botón de añadir objeto

La primera cosa que haremos antes de añadir nuestra imagen es colocar el cursor donde deseamos colocar nuestra imagen

Así voy a colocarlo en la parte de arriba ya que es ahí donde deseo que aparezca mi imagen

Y ahora para añadir la imagen voy a dar clic en el botón añadir objeto

Si tu has trabajado con versiones anteriores de wordpress podrás ver que este panel es un poco diferente a versiones anteriores

Eso se debe a que este panel fue modificado desde la versión 3.5 de wordpress, pero aún funciona de forma similar

Podemos arrastrar y soltar las imágenes en esta gran área central, como vemos que lo indica

Soltaremos los archivos en cualquier parte de esta área para subirlos

O podemos dar clic en este botón para examinar nuestra computadora y subir el archivo que deseemos

Voy a usar la opción de arrastrar y soltar archivos

Vamos a entrar en la carpeta de nuestra computadora que contiene la imagen que deseo añadir

Que es esta

Y ahora simplemente la arrastro y la suelto en esta área

Ahora la imagen se ha subido a nuestro wordpress, como podemos ver la tenemos ahora en el gestor de archivos, además se selecciona automáticamente para ser insertada en nuestro artículo

Ahora como podemos ver en la barra derecha podemos añadir un título, leyenda, texto alternativo, descripción y otras opciones

Antes de insertar una imagen en nuestro artículo,

Es muy importante que coloquemos la información correcta para la imagen, aquí en el lado derecho

En primero lugar, debemos asignarle un título

Este es el título de la imagen y también es la forma en la que wordpress identificara nuestra imagen

Así que es buena idea colocar un título que tenga coherencia con la imagen

Como puedes ver, wordpress por defecto usa el nombre del archivo como el título de la imagen, y ese en este caso no es un título coherente con nuestra imagen

Así que voy a cambiarlo con un título más descriptivo

Ahora el título que le hemos colocado aparecerá si un visitante coloca el mouse sobre la imagen

Debajo del título tenemos la leyenda, o como algunos lo conocen el caption de nuestra imagen

La leyenda es un texto que aparecerá en la parte de debajo de la imagen

Es algo opcional así podemos decidir si deseamos colocárselo o no

Algo realmente bueno de la leyenda es que podemos colocar etiquetas html al texto que colocamos en el

Eso significa que podemos colocar etiquetas como strong que añadirán negrita al texto, o incluso links dentro de la leyenda

Añadir un link puede ser muy útil cuando usamos imágenes de otros sitios web y deseamos colocar el crédito de la imagen con un link hacia la web original

O si deseamos mostrar más información sobre la imagen

Todo lo que debemos hacer es colocar el html dentro de la leyenda

Así que vamos a añadir algo de texto y colocarle negrita aquí para que puedas ver de lo que estoy hablando

Todo lo que se encuentra dentro de la etiqueta strong estará en negrita

Pero antes de insertar la imagen debemos colocar el texto alternativo

El texto alternativo no es un requisito técnico de wordpress, pero es requerido por algo llamado web standars,

Lo que significa es que si por alguna razón la imagen no se muestra en nuestro artículo

Puede ser debido a que el usuario tiene una conexión muy lenta y no cargo la imagen, debido a que algo anda mal con el artículo, o cualquier otra causa

En ese caso el texto alternativo se muestra en lugar de la imagen

Eso es importante ya que no todos los visitantes de tu sitio web tienen la habilidad de ver imágenes

Puede ser porque ellos no tienen la capacidad técnica de ver imágenes desde su dispositivo o navegador

Debido a que tengan algún inconveniente ocular

O debido a que el visitante ni siquiera es humano, probablemente sea una computadora como la araña de indexación de google, y google no puede ver imágenes, solo puede ver texto

Entonces el texto alternativo debe ser una descripción de la imagen, y solo aparecerá si no podemos ver la imagen

En descripción podemos colocar un texto descriptivo de la imagen, como veremos posteriormente las imágenes que subimos en wordpress también pueden verse individualmente, es decir que puede verse solo la imagen

Esta descripción aparecería en la página que mostraría la imagen, así que vamos a añadir una descripción también

Ahora que tenemos toda la información de nuestra imagen, debemos decidir como deseamos que aparezca en nuestro artículo

Desde aquí donde dice: Ajustes de la pantalla de adjuntos

Desde aquí podemos ajustar la alineación de nuestra imagen

Podemos decidir si la imagen se enlazara o no, y hacia donde

Y además podemos definir el tamaño de nuestra imagen

Iniciando con la alineación, podemos seleccionar entre izquierda, centrado, derecha o ninguno

Las opciones de izquierda y derecha quiebran el texto y lo hacen flotar al lado de nuestra imagen

De modo que si colocamos la imagen a la izquierda el texto flotara a la derecha y si la colocamos a la derecha el texto flotara a la izquierda

Centrar coloca la imagen en el centro y fuerza al texto para ir ya sea por encima o debajo de la imagen

La opción Ninguno coloca la imagen en la misma línea del texto, pero esto rara vez funciona, así que es preferible usar siempre Izquierda, Centrar o Derecha.

En este caso voy a colocar la imagen a la izquierda del texto.

La opción enlazado a te permite añadir un enlace a la imagen

Podemos asignar el enlace hacia el archivo, lo que enviar al visitante al link de la imagen, del archivo original de la imagen

Podemos enlazarlo hacia la página de adjuntos que es donde se muestra el archivo, pero en la página que wordpress crea para él, es ahí donde aparece la descripción que añadimos anteriormente

O podemos colocar una url personalizada y hacer que nos lleve hacia donde nosotros deseemos

Si no deseamos enlazar la imagen, simplemente seleccionaríamos la opción de ninguna

En nuestro caso vamos a enlazar la imagen a la pagina de adjuntos

Y finalmente vamos a seleccionar el tamaño en el que deseamos mostrar nuestra imagen

Tenemos esta opción debido a que cuando subimos una imagen, lo que Wordpress hace es crear varias versiones de la misma imagen en diferentes tamaños

Como podemos observar la imagen original es de 800 por 400 pixeles

Luego tenemos la versión mediana de 300 por 150 pixeles y finalmente la miniatura de 150 por 150 pixeles

Tu puedes seleccionar cual versión deseas mostrar, de modo que si la imagen es muy grande o pesada podemos seleccionar una versión que no lo sea

En nuestro caso vamos a seleccionar la versión mediana

Ahora para insertar mi imagen dentro de mi artículo, simplemente daré clic sobre el botón de insertar en la entrada

Podemos ver que nuestra imagen aparece en el lado izquierdo y nuestro texto flotando al lado derecho de ella

También podemos observar la leyenda o capitón de la imagen, y que tiene el texto en negrita donde lo colocamos

Para poder pre visualizar lo que hemos hecho, voy a guardar como borrador y dar clic en pre visualizar

Y ahora podemos observar como luce nuestra imagen dentro de nuestro artículo, vemos que tenemos la imagen y también la leyenda

Cuando damos clic en la imagen, nos envía hacia la página que Wordpress creo para esta imagen

Desde aquí podemos verla en tamaño completo y además podemos visualizar la descripción que le añadimos anteriormente

Y si regresamos a nuestro artículo, podemos ver como la imagen se encuentra en la izquierda y nuestro texto a su derecha

Pero ¿Qué pasa si deseamos modificar nuestra imagen?

Podemos regresar a nuestra área de administración, y al dar clic sobre la imagen, podremos ver estas dos opciones

Podemos eliminar la imagen o editarla desde este botón

Si vamos a la edición de la imagen, vamos a poder hacer muchos cambios

Por ejemplo podemos modificar la leyenda, o si no deseamos mostrarla, simplemente la borramos

También podemos cambiar la alineación y nos muestra esta vista previa

De modo que podemos ver cómo quedaría la imagen en cada una de las alineaciones,

Podemos modificar el título, el texto alternativo, he incluso la url de la imagen

Cuando hemos terminado la edición, simplemente damos clic en actualizar

Y como puedes ver la leyenda de la imagen ha desaparecido, tal y como lo hicimos en la edición de la imagen

Y ahora vamos a hacer algo interesante

Supongamos que deseamos cambiar de posición la imagen y ahora en lugar de colocarla al inicio de nuestro texto deseamos colocarla en el inicio del siguiente párrafo

Todo lo que tenemos que hacer para mover la imagen es dar clic sobre ella, arrastrarla y soltarla en la nueva posición que en este caso sería al inicio del siguiente párrafo

Y como podemos ver la imagen tiene aún todas sus características, simplemente la hemos movido de lugar

Solo existe un pequeño inconveniente con esto, y es que si tenemos la leyenda activada en la imagen, no podremos hacer este movimiento

Eso es debido a como Wordpress añade la leyenda en la imagen

Así que si tenemos una leyenda en nuestra imagen y deseamos moverla como lo acabamos de hacer

Deberemos primero borrar la leyenda, mover la imagen y luego colocar la leyenda nuevamente

Existe algo más que deseo comentarte sobre el gestor de archivos de Wordpress

Probablemente notaste que cuando lo abrimos para subir una imagen, nos muestra también todas las otras imágenes y archivos dentro de el

Esas otras imágenes son las que hemos subido  Wordpress

Y debido a ello podemos seleccionar una de esas imágenes también para añadir a nuestro artículo

Todo lo que debo hacer es seleccionar la imagen y podemos ver que se muestra seleccionada, además podemos observar la información de la misma

y para añadirla simplemente doy clic al botón para insertarla

y se insertara en mi articulo

Como puedes ver añadir imágenes a tus artículos en Wordpress es un proceso relativamente simple

y como todo en Wordpress es realmente flexible, desde la adición de nuevos archivos hasta su edición

Solo recuerda siempre dar un texto alternativo a todas tus imágenes

2 Comments on “Añadiendo imagenes”

  1. Daniel_Bolanos

    Hola Jose!

    Me sale este error al tratar de subir imagenes:
    “No se pudo crear el directorio wp-content/uploads/2016/06. Asegúrate de que el servidor tiene permisos de escritura para el directorio superior.”

    1. Lievanosan

      Es posible que los permisos chmod de los directorios en tu WordPress se encuentren mal configurados, si tienes una cuenta con nosotros, esto no debería pasar y si te pasa puedes enviarnos un ticket de soporte y con gusto los solucionaremos para ti.
      Pero también puedes ingresar a tus archivos desde el filemanager o por medio de FTP para verificar que los permisos de tus directorios sean los correctos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image