Manual word press

39
Introducción a WordPress En este manual aprenderás los conceptos básicos sobre el uso de WordPress como CMS, se sentarán las bases para realizar publicaciones de contenido y administrar correctamente un sitio web en WordPress. Como ya se ha mencionado WordPress es un CMS (Content Management System) o Gestor de Contenido, entonces debemos ver primero lo que son los CMS y los tipos que hay. ¿Qué es un CMS? Un CMS es una herramienta que permite que permite crear y mantener contenidos, eliminando en gran medida la necesidad de disponer de conocimientos técnicos sobre lenguajes de programación. De este modo, nuestro trabajo se centrará en el contenido sin preocuparnos por los aspectos técnicos. Desde el punto de vista técnico, un CMS es básicamente una aplicación web que se encuentra instalada en un servidor web que cuenta con una base de datos donde almacena nuestro trabajo. Ventajas de usar un CMS Permite que nos centremos en la creación y administración de contenidos. Reduce los costes de gestión de la información y las copias de seguridad. Permite publicar contenidos en internet sin disponer de conocimientos de programación, manteniendo una apariencia homogénea. Los CMS suelen gestionar los contenidos respetando los estándares, mejorando el posicionamiento en buscadores. Suelen disponer de gestión de cuentas de usuario e identificación, lo que facilita y promueve el trabajo colaborativo. Los contenidos están correctamente estructurados y son más fáciles de encontrar y administrar. Tipos de CMS Wikis Las wikis se emplean para compartir información que es creada y editada por múltiples personas. Ejemplos: MediaWiki MoinMoin Comunidades

Transcript of Manual word press

Page 1: Manual word press

Introducción a WordPress

En este manual aprenderás los conceptos básicos sobre el uso de WordPress como CMS, se sentarán las bases para realizar publicaciones de contenido y administrar correctamente un sitio web en WordPress.

Como ya se ha mencionado WordPress es un CMS (Content Management System) o Gestor de Contenido, entonces debemos ver primero lo que son los CMS y los tipos que hay.

¿Qué es un CMS?

Un CMS es una herramienta que permite que permite crear y mantener contenidos, eliminando en gran medida la necesidad de disponer de conocimientos técnicos sobre lenguajes de programación. De este modo, nuestro trabajo se centrará en el contenido sin preocuparnos por los aspectos técnicos.

Desde el punto de vista técnico, un CMS es básicamente una aplicación web que se encuentra instalada en un servidor web que cuenta con una base de datos donde almacena nuestro trabajo.

Ventajas de usar un CMS

Permite que nos centremos en la creación y administración de contenidos.

Reduce los costes de gestión de la información y las copias de seguridad.

Permite publicar contenidos en internet sin disponer de conocimientos de programación, manteniendo una apariencia homogénea.

Los CMS suelen gestionar los contenidos respetando los estándares, mejorando el posicionamiento en buscadores.

Suelen disponer de gestión de cuentas de usuario e identificación, lo que facilita y promueve el trabajo colaborativo.

Los contenidos están correctamente estructurados y son más fáciles de encontrar y administrar.

Tipos de CMS

Wikis

Las wikis se emplean para compartir información que es creada y editada por múltiples personas. Ejemplos:

MediaWiki

MoinMoin

Comunidades

Page 2: Manual word press

Son CMS cuyo propósito es crear comunidades de usuarios online, ya sean foros o redes sociales. Ejemplos:

phpBB

Elgg

Comercio electrónico

Loc CMS de comercio electrónico se emplean para crear y gestionar tiendas online. Ejempos:

Prestashop

Magento

Formación

Los CMS de formación se emplean para ofrecer servicios de formación online, permiten proporcionar recursos educativos y la comunicación entre alumnos y profesores. Ejemplos:

Moodle

Chamilo

De popósito general

Este tipo de CMS permiten gestionar todo tipo de contenido, con ellos se pueden crear blogs, sitios corporativos, sitios de noticias, tiendas online, etc. Son los más usados y gran parte de los sitios de Internet los usan. Entre ellos destaca WordPress, el más usado hoy en día. Ejemplos:

WordPress

Drupal

Joomla

¿Qué es WordPress?

Con lo visto hasta ahora, podemos definir WordPress como un CMS de propósito general inicialmente creado para blogs pero que hoy en día se ha impuesto como la principal herramienta para crear sitios de todo tipo. Está publicado bajo la licencia GPL, por lo que su uso es gratuito.

Ventajas de WordPress

WordPress cuenta con algunas características que le han llevado a ser el CMS mas usado en la actualidad y que nos facilitan el desarrollo y gestión de sitios web:

Separación del contenido y el diseño

Un escritorio de administración sencillo e intuitivo.

Buena estructuración y organización de los contenidos.

Múltiples usuarios.

Comentarios con herramientas de gestión.

Page 3: Manual word press

Escritorio de WordPress

En este apartado aprenderemos a trabajar con el escritorio de WordPress, donde podremos gestionar el contenido y administrar nuestro sitio web.

Para acceder al escritorio de WordPress debemos iniciar sesión con nuestra cuenta de usuario. Para ello debemos entrar en la página de administración añadiendo /wp-admin la URL de nuestro sitio web, sería:

nombredemiweb/wp-admin

Nos aparecerá entonces una pantalla en la que introducimos nuestro usuario y contraseña.

Pantalla de inicio de sesión de WordPress

Una vez que hemos iniciado sesión, accedemos directamente al escritorio de WordPress. El escritorio nos ofrece un conjunto de herramientas que nos permiten desde gestionar el contenido hasta modificar por completo la apariencia de nuestra web.

En el escritorio podemos distinguir tres zonas:

Barra de herramientas superior

Menú principal en el lateral izquierdo

Área de edición

Page 4: Manual word press

zonas del escritorio de WordPress

Barra de herramientas superior del escritorio de WordPress

En la parte izquierda de esta barra tenemos varias opciones:

Acceder a información sobre WordPress, llevando el ratón sobre la W.

Intercambiar entre el escritorio y la web, llevando el ratón sobre la casa.

Ver los comentarios, pulsando sobre el icono de bocadillo.

Acceso rápido a crear contenido o añadir usuarios, llevando el ratón sobre Nuevo. El contenido que podemos agregar son entradas, páginas

y elementos multimedia como fotos o vídeos. Veremos esto con detalle más adelante.

Acceso rápido a generar contenido en WordPress

Opción de intercambiar a sitio web en el escritorio de WordPress

En la parte derecha de la barra de herramientas tenemos las opciones de usuario (nuestro usuario), aquí podemos cerrar sesión, ver nuestro perfil o editarlo.

Page 5: Manual word press

Opciones de usuario en la barra del escritorio

de WordPress

Menú principal del escritorio de WordPress

En el menú principal encontramos todos los elementos que nos permitirán crear y gestionar los contenidos, además de definir la apariencia de nuestra web. Aquí nos encontramos las siguientes opciones:

Entradas

En este apartado podemos crear entradas y gestionarlas. Las entradas pueden entenderse como artículos de un blog o un sitio de noticias.

Medios

Desde aquí gestionamos la galería multimedia, donde podemos trabajar con imágenes o vídeos.

Páginas

En este apartado podemos crear páginas y gestionarlas. Las páginas contienen el contenido estático de nuestro sitio web.

Comentarios

En Comentarios podemos ver los comentarios realizados en nuestro sitio, moderarlos o eliminarlos.

Apariencia

En el apartado de Apariencia podemos definir el aspecto que tiene nuestro sitio web.

Plugins

Desde aquí podemos añadir plugins, desactivarlos o eliminarlos. Los plugins añaden funcionalidades extra a nuestro sitio.

Page 6: Manual word press

Usuarios

Desde esta pantalla podemos gestionar los usuarios de nuestro sitio.

Herramientas

Desde quí podemos realizar ajustes en las herramientas disponibles. Cuando se instalan plugins, las opciones de los mismos suelen ir en este apartado.

Ajustes

Desde aquí podemos realizar los ajustes generales de nuestro sitio.

Para más información detallada, también podéis consultar WordPress Codex

Ya hemos visto los elementos que componen el escritorio de WordPress. Si bien solo hemos rasgado la superficie, a lo largo del tutorial iremos analizando todo con detalle.

Organización del Contenido en WordPress

WordPress cuenta con una estructura que separa de forma clara el diseño del contenido. Esta es quizás la mayor ventaja que ofrece WordPress y ha propiciado un gran crecimiento en el número de personas que lo emplean.

Gracias a la separación de diseño y contenido en WordPress, personas sin conocimientos en los lenguajes que se emplean en la web como HTML, CSS o Javascript, no sólo pueden trabajar con WordPress, sino que además consiguen hacerlo con gran facilidad en cuanto cogen un

poco de práctica.

Y los diseñadores también se ven favorecidos por esta separación de contenidos y diseño, ya que pueden centrarse en su trabajo sin tener que estar constantemente preocupándose del contenido.

En este capítulo vamos a comprender como está organizado el contenido. Principalmente debemos analizar dos elementos: entradas y páginas, es importante comprender la diferencia estre estos dos conceptos para lograr comprender la organización del contenido en WordPress.

Entradas

Las entradas se emplean para el contenido que tiene un contexto temporal, es decir, información que no se mantiene indefinidamente en el

tiempo. Por ejemplo, podemos considerar entradas a las noticias publicadas por un sitio, o una oferta temporal. Por esto se suele describir a las entradas como contenido dinámico.

Páginas

Las páginas se emplean para el contenido que es intemporal, es decir, que se mantiene a lo largo del tiempo sin fecha de caducidad. Por

ejemplo, el sitio web de una empresa podría tener páginas como contacto, servicios o la empresa. Por esto se suele describir a las páginas como contenido estático.

Page 7: Manual word press

Tanto las entradas como las páginas pueden incorporar textos, enlaces, tablas, imágenes, etc.

Otros elementos del contenido en WordPress

Existen otros términos de gran importancia para la organización del contenido en WordPress con los que trabajaremos:

Categorías

Las categorías sirven para organizar las entradas. Una entrada pertenece a una o varias categorías. Si ponemos el ejemplo de un periódico online, unas categorías podrían ser local, sucesos y deportes.

Elementos multimedia

Tanto las entradas como las páginas pueden incorporar elementos multimedia como imágenes o vídeos. Cuando se inserta este contenido, pasa a formar parte de la Biblioteca Multimedia, de forma que también podemos gestionar este tipo de contenido.

Entradas

Ya hemos visto que las entradas se emplean para el contanido dinámico. Ahora vamos a aprender a trabajar con ellas.

Ver la lista de las entradas

Para ver una lista con todas las entradas debemos ir en el menú del escritorio de WordPress a: Entradas -> Todas las entradas.

Page 8: Manual word press

En esta pantalla podemos ver de forma resumida todas las entradas que tenemos, con información de cada una: el título, autor, las categorías a las que pertenece, sus etiquetas, el número de comentarios y la fecha de publicación.

Lista de entradas

Si llevamos el ratón sobre cualquiera de las entradas de esta lista nos aparecerán varias opciones para editar, ver o eliminar cada entrada.

Opciones en la lista de entradas

Crear una entrada

Para crear una nueva entrada debemos ir en el menú del escritorio de WordPress a: Entradas -> Añadir nueva.

Page 10: Manual word press

Esto nos lleva a la pantalla de edición de la entrada.

En esta pantalla asignamos un título y redactamos el texto de nuestra entrada para después pulsar Publicar.

Ya tenemos nuestra entrada publicada y podemos verla en nuestro sitio web, fácil ¿verdad?. Después de publicar podemos observar varias cosas:

Mensaje informativo de WordPress

WordPress nos muestra un mensaje en la parte superior en la que nos informa de que la entrada ha sido publicada y nos muestra un enlace para ver la entrada en nuestro sitio web. Si nos fijamos en la parte izquierda de este mensaje aparece un borde verde, lo cual indica que se ha realizado correctamente.

Page 11: Manual word press

Si hubiera habido algún problema, este borde sería rojo y en el mensaje informaría de cual ha sido el problema. Estos mensajes son habituales cuando trabajamos en cualquier parte del escritorio de WordPress para informarnos.

Enlace permanente de la entrada

El enlace permanente es la URL en la que se encuentra la entrada que acabamos de publicar. En este caso, el patrón seguido para generar esta URL es el título de la entrada con las palabras separadas por guiones. Este patrón no siempre es el mismo, ya que se puede especificar en los ajustes que veremos en otro capítulo de este manual.

También podemos editar este enlace permanente para esta entrada en particular pulsando en el botón Editar.

El botón Obtener enlace corto nos proporciona una URL de menor longitud para nuestra entrada que puede servirnos para compartir el enlace en lugares con limitaciones de longitud de caracteres, por ejemplo en Twitter.

Este enlace corto no sustituye al enlace original, ambos dirigen a la entrada.

Page 12: Manual word press

Pre visualizar una entrada

Si deseamos ver el aspecto que tendría la entrada en nuestro sitio web antes de publicarla, podemos usar la pre visualización, haciendo click en el botón Vista previa de los cambios, en el grupo de opciones Publicar.

Editar una entrada

Una vez que ya tenemos una entrada creada, podemos editarla en cualquier momento. Para ello vamos de nuevo a Entradas -> Todas las entradas, llevamos el puntero sobre una de las entradas y pulsamos editar.

Esto nos lleva a la pantalla de edición de entradas, donde realizamos los cambios que deseamos, una vez que hemos realizado los cambios pulsamos el botón Actualizar, si se ha realizado correctamente WordPRess nos mostrará un mensaje informativo, también podemos hacer click en Vista previa de los cambios para ver la entrada.

Estados de una entrada

Page 13: Manual word press

En WordPress las entradas pueden tener un estado de los siguientes:

Borrador

Pendiente de revisión

Publicado

El estado lo podemos modificar en cualquier momento cuando editamos una entrada, esta posibilidad la encontramos en el grupo de opciones Publicar, además de otras opciones como la visibilidad, la fecha de publicación y las revisiones.

Borrador

Page 14: Manual word press

Cuando estamos creando una entrada, tenemos la posibilidad de publicarla o de guardarla como borrador. Cuando se guarda como borrador, la entrada queda almacenada en nuestro sistema WordPress pero no aparece en la web, pero si podemos previsualizarla. Este estado es muy útil cuando se está elaborando contenido pero no se quiere publicar porque está inclompleto, y una vez que se finaliza publicar la entrada.

Pendiente de revisión

Este estado es muy similar a borrador ya que tampoco estará visible en el sitio. La diferencia es que quedará marcada para que otro usuario la revise.

Publicada

Cuando una entrada está publicada ya es visible en nuestra web. La fecha y hora de publicación se define cuando se pulsa el botón Publicar, también es posible editar esta fecha y hora.

Visibilidad de una entrada

Siguiendo en el grupo de opciones Publicar, también podemos establecer el tipo de visibilidad que tiene nuestra entrada.

Pública

Cualquier visitante de nuestra web puede ver la entrada una vez publicada.

Privada

Únicamente los usuarios autenticados que sean Administrador o Editor en el sitio web podrán ver la entrada.

Protegida

La entrada estará protegida por una contraseña que deberán introducir los visitantes que deseen verla.

Page 15: Manual word press

Eliminar entradas, la papelera de WordPress

En WordPress podemos eliminar las entradas que deseemos y se enviarán a la papelera de WordPress. Esta papelera funciona de forma similar a la papelera de Windows.

Las entradas que se encuentran en la papelera ya no estarán visibles en nuestra web. Una vez que una entrada se envía a la papelera, es posible recuperarla o eliminarla definitivamente.

Para enviar una entrada a la papelera es posible hacerlo desde la pantalla de Editar Entrada o la de Todas las entradas.

Para ver las entradas de la papelera debemos ir a Entradas -> Todas las entradas, y en la lista superior seleccionar papelera. Desde aquí podemos restaurar las entradas, o eliminarlas permanentemente.

Categorías

Las categorías sirven para organizar o agrupar las entradas que siguen una misma temática. Una entrada pertenece a una o varias categorías. A

una categoría pertenecen cero o más entradas.

Todas las entradas deben pertenecer al menos a una categoría, por ello cuando no asignamos ninguna categoría a una entrada, por defecto se le asigna la categoría Uncategorized (Sin categoría).

Las categorías tienen una organización jerárquica, de forma que podemos tener categorías dentro de otras categorías. Por ejemplo, un sitio de noticias puede tener como categorías superiores deportes, nacional e internacional. Como subcategorías de deportes pueden estar fútbol, baloncesto y tenis. Como subcategorías de nacional pueden estar Madrid, Barcelona y Zaragoza. Como subcategorías de internacional pueden estar Europa, América del Norte y América del Sur.

Page 16: Manual word press

Añadir categorías

Para añadir categorías debemos ir en el menú principal del escritorio de WordPress a Entradas -> Categorías. En esta pantalla tenemos a la

izquierda la opción de añadir una nueva categoría.

Para ello debemos rellenar el formulario que contiene nombre, slug, superior y descripción, para después hacer click en Añadir nueva categoría.

Nombre: Es el título de la categoría, es el único parámetro obligatorio

Page 17: Manual word press

Slug: Se emplea para la URL de la categoría, si al crear una nueva categoría se deja en blanco se pondrá automáticamente a partir del nombre.

Superior: Se elige cual es la categoría superior a la que estamos creando, sirve para generar las jerarquías mencinadas.

Descipción: Una descripción de lo que es la categoría, normalmente no se usa, de modo que puede dejarse en blanco.

Ver lista de categorías

En la misma pantalla a la derecha vemos una lista de las categorías actuales, incluída la que acabamos de añadir. Las que tienen antepuesto un guión son las subcategorías de otras categorías. En cantidad vemos el número de entradas que pertenecen a esas categorías.

Editar una categoría

Para editar una categoría debemos llevar el puntero del ratón sobre una categoría y pulsar Editar. Nos lleva a una pantalla de edición con los

mismos campos que al crearla.

Page 18: Manual word press

Eliminar una categoría

Para eliminar una categoría llevamos el puntero del ratón sobre la lista de categorías y pulsamos Borrar, tras pulsar nos muestra un mensaje de confirmación y pulsamos aceptar.

Las categorías borradas no se van a la papelera, sino que se eliminan permanentemente. Si hay entradas que pertenecen a una categoría que se elimina, dejarán de pertenecer a esa categoría.

Asignar una entrada a una categoría

Podemos asignar categorías a las entradas cuando creamos entradas o cuando editamos entradas. Las opciones de asignar categorías se encuentran en el grupo de opciones Categorías.

Para asignar categorías marcamos las que deseamos asignar y después actualizamos la entrada.

Etiquetas

Las etiquetas son palabras clave que nos permiten describir un contenido, en WordPress tenemos la posibilidad de asignarlas únicamente a las

entradas.

Se emplean para describir el contenido de una entrada usando una serie de palabras clave. Son de gran importancia para el posicionamiento en buscadores.

Al contrario que las categorías, no tienen una estructura jerárquica. Esto significa que no hay subetiquetas de otras etiquetas.

No debemos confundirlas con las categorías. Las categorías se emplean para organizar las entradas por su temática, mientras que las etiquetas se emplean para “marcar” o describir un contenido usando palabras clave.

Page 19: Manual word press

Podemos pensar por ejemplo en un sitio de noticias publica una entrada sobre la gran actuación de Pau Gasol en la victoria de Chicago Bulls en un partido de baloncesto. Esta entrada podría pertenecer a las categorías deportes y baloncesto. Las etiquetas que podría tener son Pau Gasol, baloncesto, Chicago Bulls.

Añadir una etiqueta a una entrada

Podemos añadir etiquetas a una entrada cuando estamos editándo la entrada o cuando la estamos creando. Para ello debemos ir al grupo de opciones Etiquetas, introducimos las que consideremos necesario y hacemos click en Añadir.

Podemos añadir tantas como queramos o eliminar las que ya tenemos. Tememos la opción de ir añadiendo de una en una o añadir varias a la

vez separadas por comas.

Ver todas las etiquetas empleadas

WordPress nos ofrece una pantalla donde podemos administrar todas las etiquetas que estamos usando en nuestras entradas, indicando el número de veces que se repite cada una. Esta pantalla está en Entradas -> Etiquetas.

Desde esta pantalla se pueden añadir, editar o eliminar etiquetas, de la misma forma que hacíamos con las categorías. Si bien en este caso no resulta de gran utilidad, ya que resulta más sencillo trabajar con las etiquetas desde las pantallas de editar entradas o añadir entradas.

Page 20: Manual word press

Páginas en WordPress

Como vimos al analizar la estructura de los contenidos en WordPress, las páginas se emplean para el contenido estático, es decir, el contenido que se mantiene a lo largo del tiempo sin fecha de caducidad.

Si pensamos en un sitio web de una empresa, apartados como Quiénes somos, Contacta con nosotros o servicios que ofrecemos serían páginas en una web hecha con WordPress.

Las páginas pueden tener un orden jerárquico, es decir, tener páginas que son subpáginas de otras. Esto facilita la organización de nuestra sitio cuando tenemos una cantidad de páginas. Siguiendo con el ejemplo de un sitio web empresarial, podríamos tener subpáginas de servicios que ofrecemos, una para cada tipo de servicio que ofrece una empresa.

WordPress proporciona herramientas para trabajar con las mismas páginas de forma similar a como trabajamos con las entradas. En el caso de las páginas no tenemos categorías ni etiquetas.

Ver la lista de las páginas

Para ver una lista con todas las entradas debemos ir en el menú del escritorio de WordPress a: Páginas -> Todas las páginas.

En esta pantalla WordPress nos muestra una lista con todas las páginas que tenemos en nuestro sitio y las opciones disponibles, al igual que cuando trabajábamos con las entradas.

Crear una página

Para crear una página debemos ir a Páginas -> Añadir nueva. Llegamos a una pantalla similar a la que nos encontrábamos al trabajar con

entradas, la principal diferencia son algunos grupos de opciones que nos encontramos en el lado derecho.

Page 21: Manual word press

Las opciones de publicación, estado y visibilidad son las mismas que para las entradas.

Editar una página

Para editar una página debemos ir de nuevo a Páginas -> Todas las páginas. Llevamos el puntero del ratón sobre una página y se muestra la opción de editar.

Una vez realizados los cambios pulsamos Actualizar y comprobamos el mensaje de confirmación que nos devuelve WordPress.

Eliminar una página

Para eliminar una página debemos ir de nuevo a Páginas -> Todas las páginas. Llevamos el puntero del ratón sobre una página y se muestra

la opción de Papelera. Cuando se elimina una página, pasa a la papelera de WordPress al igual que ocurría con las entradas. De modo que podemos restaurar las páginas borradas o eliminarlas permanentemente.

Page 22: Manual word press

Jerarquía de las páginas

Como hemos visto, las páginas pueden tener un orden jerárquico, vamos a ver como definir una jerarquía de páginas. Para ello debemos encontrarnos en la pantalla de Añadir o Editar una página. En el lado derecho encontramos el grupo de opciones Atributos que nos ofrece la opción Superior.

Cuando seleccionamos una página como Superior, estamos asignando la página que editamos como una subpágina de la que hemos seleccionado. Una vez seleccionada pulsamos Actualizar y se aplicarán los cambios.

Por ejemplo, una web de una empresa de cristales, puede tener una página servicios que ofrecemos, otra página llamada cristales para ventanas y otros cristales ultrarresistentes. Para añadir cristales para ventanas como subpágina de servicios que ofrecemos, tendría que editar la página cristales para ventanas y asignarle como superior servicios que ofrecemos. Lo mismo tendría que hacer para la página cristales

ultrarresistentes.

Apariencia de una página: Plantillas

Las páginas en WordPress pueden tener una apariencia diferente unas de otras, para definir la apariencia se emplean las plantillas.

Las plantillas son unos ficheros php que definen la estructura y el estilo en que se muestran las páginas a las que se le ha aplicado la plantilla. Las plantillas disponibles para aplicar a una página dependen del tema que estemos usando en WordPress, algunos temas tienen una sola plantilla y otros tienen muchas entre las que poder elegir.

Aplicar una plantilla a una página

Podemos aplicar una plantilla a una página cuando editamos o añadimos una nueva página. Para ello debemos ir al grupo de opciones Atributos

de página y seleccionar una plantilla de la lista Plantillas.

Page 23: Manual word press

Si esta opción no nos aparece es debido a que nuestro tema tiene definida una única plantilla, por lo que todas las páginas de nuestro sitio tendrán la misma presentación.

El editor de WordPress

Hasta ahora hemos estado trabajando con entradas y páginas sin parar a analizar la herramienta más importante que comparten ambas: el Editor de WordPress.

El editor de WordPress no solo nos permite redactar nuestro texto como hemos visto hasta ahora, también nos permite aplicar formato al texto, insertar contenido multimedia, listas, enlaces, etc.

Hay que diferenciar dos maneras de trabajar con el editor de WordPress: modo visual y modo texto. Para intercambiar entre un modo y otro se utilizan las pestañas que se encuentran sobre el editor a la derecha.

Page 24: Manual word press

Modo visual

La principal característica de trabajar con el modo visual es que lo que se ve en el editor es lo que se obtendrá como resultado final, es decir, como se visualizará en la web una vez esté publicado. Cuando estamos en este modo tenemos múltiples herramientas que nos permiten trabajar de forma similar a cuando empleamos un editor de texto como Word, aunque obviamente con menos opciones.

La principal ventaja de este modo es que no es necesario conocer HTML ni CSS para dar formato a nuestro contenido, además de realizar más rápido el trabajo que usando el modo texto.

En este ejemplo se ha realizado una entrada cuya visualización en el editor visual es la siguiente.

Este es el resultado visto en la web:

Modo texto

Cuando trabajamos con el modo texto es necesario expresarse empleando HTML y CSS. En esta vista editamos el código tal y como será enviado al navegador para que sea interpretado. Ambos lenguajes son muy sencillos, HTML se compone de un conjunto de etiquetas que definen la estructura, y CSS se encarga de los estilos como por ejemplo los colores o el tamaño de la letra.

Page 25: Manual word press

Siguiendo con el ejemplo de antes, mostrando la traducción que tiene el contenido de la entrada en el modo texto.

Es posible que muchos piensen que no es necesario trabajar en el modo texto ya que es más laborioso, sin embargo en ocasiones debemos trabajar con él para realizar tareas muy concretas que no podemos hacer en el modo visual, por ejemplo insertando un vídeo de Youtube.

Barra de herramientas del editor visual

La barra de herramientas es similar a las de cualquier editor de texto con el que hallamos trabajado. Si llevamos el ratón sobre cada opción nos

mostrará qué es cada elemento.

Entre estos elementos hay algunos habituales en cualquier editor y otros que merece la pena analizar:

Insertar/editar enlace

Los enlaces son los elementos que más han favorecido el crecimiento de Internet, permitiendo ir de una página web a otra. Cuando añadimos un enlace hay que distinguir dos parámetros: la URL y el texto del enlace. La URL es la dirección web a la que estamos dirigiendo, el texto del enlace es lo que se aparece cuando vemos un enlace.

Por ejemplo vamos a añadir un enlace a Youtube, que esté dirigido a su sitio web y que tenga como texto de enlace Youtube. Para ello pulsamos en Insertar/editar enlace, introducimos los siguientes valores y pulsamos Añadir enlace.

Page 26: Manual word press

También tenemos la opción de que cuando se pulse en el enlace, la web de destino se abra en una nueva ventana/pestaña.

En ocasiones deseamos introducir un enlace que está dirigido a una entrada o una página de nuestro propio sitio web, para lo cual WordPress nos proporciona una opción muy útil que nos ahorrará tener que estar buscando cual es la URL. Esta opción aparece cuando estamos insertando/editando un enlace, abajo donde pone O enlaza a contenido ya existente.

Page 27: Manual word press

Tamaño del texto

Cuando seleccionamos título 1, título 2, etc. no solo estamos asignando un tamaño a nuestro texto y posiblemente un color y una tipografía dependiendo del tema, sino que también le estamos dando un significado semántico al texto que estamos estableciendo como título. esto de

significado semántico podemos entenderlo como un nivel de importancia o relevancia en una página o una entrada. Por ejemplo un texto como título 2 debe ser más importante que todos los demás excepto el título 1, comúnmente el título 1 no se usa porque ya está definido con el título de la entrada o la página.

Escritura sin distracción

Esta opción que se encuentra disponible debajo de las pestañas visual/texto nos permite visualizar el editor de WordPress sin los menús del escritorio ni los grupos de opciones para concentrarnos mejor en la redacción del contenido.

Insertar contenido multimedia

WordPress nos permite insertar contenido multimedia en nuestras entradas y páginas. Para insertar estos contenidos pulsamos Añadir objeto.

Tras pulsar nos parece un cuadro superpuesto para trabajar con contenido multimedia: Insertar multimedia.

Page 28: Manual word press

Este cuadro cuenta con dos pestañas: Subir archivos y Biblioteca multimedia.

En la pestaña Subir archivos podemos seleccionar los archivos que queremos cargar de nuestro ordenador. Una vez que los archivos se han cargado, automáticamente pasan a formar parte de la Biblioteca multimedia, por lo que nos ha cambiado de pestaña. Seleccionamos los archivos

que deseamos y pulsamos Insertar en la entrada.

Además de la propia imagen, podríamos haber definido otros parámetros como Título, Leyenda, Texto alternativo y Descripción. Todos estos parámetros los veremos en el capítulo de la Biblioteca multimedia.

Insertar objetos externos

Los objetos externos son elementos que podemos insertar en nuestra web, pero que se encuentran en otra web externa.

Hay varios tipos de objetos externos que habréis visto en múltiples webs:

Page 29: Manual word press

Vídeos de Youtube o Vimeo

Mapas de Google Maps o Open Street Map

Diapositivas de SlideShare

Estos servicios habitualmente nos proporcionan un código que podemos insertar en nuestra web para visualizar un contenido, para insertar este

código es necesario trabajar en el modo texto.

Caso práctico: Insertar un vídeo de Youtube

Para insertar un vídeo de youtube debemos ir la página de youtube donde está el video deseado. debajo del vídeo de youtube aparece la opción Compartir, una vez que pulsamos nos aparecen tres pestañas, entre las cuales hay que seleccionar la que pone Insertar.

Este código debemos copiarlo y pegarlo en nuestra entrada o página trabajando en el modo texto.

Una vez que hemos hecho podemos cambiar al modo visual para ver como se ve.

Page 30: Manual word press

Como vemos, el editor visual no puede mostrarnos el vídeo, pero sí puede indicarnos que es un vídeo (el icono del centro) y las dimensiones que tiene para poder seguir trabajando si queremos incorporar texto o algún elemento más.

Si le damos a vista previa veremos como quedaría el vídeo en nuestra web antes de publicar.

Biblioteca Multimedia

Hasta ahora hemos visto cómo insertar contenido multimedia en entradas o páginas empleando el editor de WordPress. También hemos comentado que cuando insertamos este tipo de contenido, pasa a formar parte de la Biblioteca Multimedia. Ahora vamos a adentrarnos en las caracteríticas y funcionalidades que nos ofrece la Biblioteca Multimedia de WordPress.

La Biblioteca Multimedia mantiene organizados los elementos multimedia que utilizamos en nuestro sitio web (principalmente imágenes), evitando que tengamos archivos duplicados, ya que podemos insertar los mismos elementos multimedia cuántas veces queramos en entradas y páginas sin subir de nuevo estos elementos.

Además nos facilita la tarea de gestionar los elementos multimedia que utilizamos en nuestra web con WordPress, permitiendo añadir nuevos elementos que podríamos emplear en el futuro en nuestra web, eliminar elementos que ya no utilizamos, realizar modificaciones como el tamaño de la imágen, el título, etc.

Acceder y trabajar con la biblioteca multimedia

Para acceder a la biblioteca multimedia de WordPress debemos ir en el menú del Escritorio de WordPress a Medios->Biblioteca.

Una vez que hemos accedido, podemos observar una lista con todos los elementos multimedia que tenemos en nuestro sitio actualmente.

Page 31: Manual word press

En esta pantalla estamos viendo todos los elementos multimedia que tenemos en nuestro sitio web, en el ejemplo mostrado sólo hay fotografías, pero también podría haber vídeos, PFDs, etc.

Por defecto, en la Biblioteca Multimedia se muestran todos los medios como miniaturas, esta es la vista de grid, podemos cambiar a la vista

de lista para visualizar más información de cada medio.

Una vez que hemos cambiado la vista, veremos una lista de todos los medios en la que se muestra más información de cada elemento:

El título del elemento multimedia en la columna Archivo, en azul

El nombre del fichero del elemento multimedia en la columna Archivo, en gris

El autor (el usuario de WordPress que ha subido el elemento multimedia)

En la columna Subido a se muestra una lista de las entradas y páginas en las que se ha insertado el elemento multimedia. Si no se está

utilizando este elemento se muestra (Sin adjuntar)

Comentarios del elemento multimedia

Fecha de subida del elemento

Page 32: Manual word press

Si llevamos el puntero del ratón sobre alguno de los elementos multimedia de la lista, se mostrarán las opciones que tenemos sobre cada uno de ellos: Editar, Borrar permanentemente y Ver.

Añadir elementos a la Bliblioteca Multimedia

Para añadir elementos a la Biblioteca Multimedia debemos ir en el menú de WordPress a Medios -> Añadir nuevo. En esta pantalla WordPress nos ofrece la opción de seleccionar archivos pulsando el botón Selecciona archivos o arrastrando directamente los archivos desde nuestro ordenador.

En ambos casos, se pueden subir varios archivos a la vez. En la siguiente imagen de ejemplo de muestra como permite seleccionar varios archivos desde Windows tras haber pulsado el botón Selecciona archivos.

Page 33: Manual word press

Tras haber seleccionado o arrastrado los archivos, comenzará la carga de los mismos. Es importante no abandonar la página hasta que no se haya completado el proceso o se perderá el progreso en los archivos que no hayan terminado de cargar.

Es importante tener en cuenta que existe un tamaño máximo de archivo que no debemos superar, en ese caso WordPress nos mostrará un error. Este tamaño máximo es una configuración del servidor en la que no podemos influir configurando WordPress.

Editar elementos de la Bliblioteca Multimedia

Para editar un elemento multimedia, debemos pulsar la opción Editar cuando estamos viendo la lista de elementos de la Biblioteca Multimedia.

Este enlace nos lleva a la pantalla Editar Medios.

Page 34: Manual word press

En esta pantalla podemos editar las siguientes opciones:

Título: Es muy recomendable que establezcamos un título para el medio, y que éste sea descriptivo, es de gran importancia para el posicionamiento en los buscadores de internet.

Leyenda: Opcionalmente se define este texto cuando queremos que se muestre un texto debajo de la imagen (una nota al pie de la

imagen).

Texto alternativo: Es importante definir este texto que se mostrará al visitante de la web en aquellos casos en los que no se haya podido cargar la imagen. También es importante para la accesibilidad de nuestro sitio web, ya que una persona ciega que emplea un navegador que lee el contenido, podrá saber de qué trata la imagen a partir de este texto.

Descripción: Opcionalmente podemos especificar una descripción más detallada del elemento. Esta descripción se mostrará en la página

de adjuntos.

Ver elementos de la Bliblioteca Multimedia: Páginas de

adjuntos

En las páginas de adjuntos se pueden ver cada uno de los elementos multimedia que tenemos en nuestro sitio, existiendo una página de adjuntos para cada uno que tengamos en la Biblioteca Multimedia de WordPress.

Page 35: Manual word press

Estas páginas de adjuntos se generan automáticamente para cada elemento multimedia que subimos y tienen un enlace permanente que nos asegura que siempre tendremos ese contenido accesible siguiendo un enlace.

Estas páginas las podemos ver siguiendo el botón Ver la página de adjuntos en la pantalla Editar Medios o pulsando el enlace ver de alguno

de los elementos en la lista de la Biblioteca Multimedia.

Este es una ejemplo de página de adjuntos:

Page 36: Manual word press

Eliminar elementos de la Biblioteca Multimedia

Para eliminar una elemento de la Biblioteca Multimedia, debemos seleccionar la opción Borrar permanentemente en el elemento que queramos eliminar de la lista de la Biblioteca Multimedia.

Hay que tener en cuenta que al hacerlo, el elemento no se irá a una papelera, sino que se eliminará completamente y también su página de adjuntos.

Insertar elementos de la Biblioteca Multimedia

En el capítulo del Editor de WordPress ya vimos como insertar medios en entradas o páginas, subiendo directamente los elementos multimedia desde nuestro ordenador. También vimos que cuando insertamos elementos multimedia que no teníamos en la Biblioteca Multimedia, estos pasan a formar parte de la misma.

Ahora vamos a ver como insertar medios que ya están en la Biblioteca Multimedia. Para ello debemos estar en la pantalla de edición de una entrada o una página, y pulsar en el botón Añadir objeto.

Una vez que hemos pulsado, nos aparece la ventana de añadir medios, seleccionamos la pestaña Biblioteca Multimedia.

Page 37: Manual word press

Seleccionamos el elemento que queremos insertar y en la parte derecha nos aparecen varias opciones. Lo primero que vemos son las opciones que hemos analizado (Título, Leyenda, etc.), estas opciones tendrán el valor que les hayamos dado previamente (si no hemos completado estas opciones podemos hacerlo aquí).

Debajo de estas opciones nos aparecen otras agrupadas como Ajustes de visualización de Adjuntos. Estas son Alineación, Enlazado a y Tamaño.

Alineación: Es la alineación que tendrá la imagen con respecto al texto, por ejemplo, si alineamos la imagen a la izquierda entonces el texto quedaría en la parte derecha de la imagen (podría quedar debajo si el tamaño elegido es grande).

Enlazado a: Aquí definimos si la imagen va a funcionar su vez como un enlace o no, y en caso de enlazar, cual será el destino del enlace. Si seleccionamos a Archivo multimedia, al pulsar en la imagen, nos llevará a la imagen tal cual. Si seleccionamos a Página de adjuntos nos llevará a la página de adjuntos que hemos visto, y si seleccionamos Ninguna, la imagen no tendrá ningún enlace.

Tamaño: Aquí podemos seleccionar el tamaño de la imagen que insertamos en la

entrada o página. En este punto es necesario explicar el

funcionamiento de WordPress con las imágenes.

Cuando añadimos una imagen a la Biblioteca Multimedia, además de la imagen original se almacenan hasta tres versiones extra de la misma imagen, dependiendo del tamaño de la imagen original. Estas versiones tienen una anchura de 660 px, 300 px y 150 px de ancho, aunque este comportamiento se puede modificar si necesitamos más tamaños.

Page 38: Manual word press

Si no estamos familiarizados con el mundo de la web, cabe la pregunta ¿Y para qué tantas versiones de la misma imágen? Pues básicamente para no tener simpre que cargar la imágen de tamaño grande (más pesada) cuando en una entrada o página queremos que se muestre la imagen de un menor tamaño, de esta forma la web cargará más rápido.

Editar imágenes

La mayor parte de lo que hemos visto en este capítulo se aplica a cualquier elemento multimedia, sean imágenes, vídeos, PDFs, etc. Ahora vamos a ver algunas opciones que WordPress nos ofrece únicamente aplicables a imágenes, que son los elementos multimedia más empleados en sitios web.

Si volvemos a la pantalla de Editar Medios para una imagen, observaremos que debajo de la imagen aparece una botón: Editar imagen.

Si pulsamos el botón, se mostrará una pantalla con opciones extra para imágenes:

Esta pantalla nos ofrece opciones como escalar la imagen, recortarla, voltear horizontal y verticalmente, además de rotarla.

Es importante fijarnos en las Opciones de miniatura, las opciones que nos ofrece es aplicar los cambios (rotación, volteado, etc.) a todos los tamaños de la imagen, a solo la miniatura (la más pequeña, por defecto 150 px de ancho), o a todas excepto a la miniatura.

Page 39: Manual word press

Gracias