Aquí se hace referencia a el diseño y aspecto de la web en general; desde la elección y edición del diseño hasta la configuración de menús y widgets para darle un mejor aspecto de diseño. También se tratarán la optimización de las imágenes y vídeos.

Temas

Los temas de WordPress nos permiten cambiar el diseño así como añadir funcionalidades. Veremos los diferentes tipos de tema y donde conseguir temas, tanto gratuitos como de pago.

En wordpress se tiene la facilidad de cambiar de temas o diseños con tan solo un par de clics desde el mismo administrador o añadir nuevos instalándolos via ftp en el servidor.
Si entramos en la opción de menú Apariencia -> subemenú Temas podrá ver los diseños disponibles por defectos o que han sido añadidos a su sitio web. Normalmente en una primera instalación de WP el diseño predeterminado instalado es el "Twenty Fifteen". Si es un wp antiguo incluso puede encontrarse diseños personalizados como por ejemplo en Navidad o para ocasiones o lanzamientos especiales.

El tema que actualmente se muestra en la web a los visistantes está señalizado como "Activo" y aparece el primero en una seri de filas y columnas, el resto de pequeñas miniaturas en imágenes tienen dos botones, uno de Vista Previa y otro para Activar en caso de que quieras cambiarlo en la previsualización solo tiene que darle a guardar y activar, si quiere dejar el que está debe de hacer clic en la x arriba de la pantalla para volver al administrador de temas.

Si eres añadir nuevo tema, haz clic en el botón de dicha acción y verás también columnas de miniaturas, los temas instalados y otros con los botones de Instalar y Vista Previa.

administrar-temas.jpg

En la opción de "Personalizar", en la barra lateral del diseño Twenty tenemos seis opciones, depende del diseño así habrá más o menos opciones

personalizar.jpg

Título y descripción de la web para que se muestre en la cabecera; título principal arriba de todo que los buscadores indexarán.
Colores, como su nombre indica para cambiar el color y fondo de la web
Imagen de cabecera para personalizar a su gusto.
Imagen de fondo; seleccione esta opción si quiere que en su web aparezca una imagen de fondo. Al hacer clic en subir / upload podrá tomarla de su ordenador.
Widget: Puede personalizar sus los widgets instalados dependiendo de los temas también. Aquí hay varias áreas y los puede reorganizar en ellas como mejor guste.
Portada estática. Hace que su web se muestre en la página de inicio como una web de presentación con una página inicial que no cambia, sino que es el usuario el que se mueve a través del menú por los contenidos o puede hacer que en la página de inicio se comporte como un blog mostrando el contenido nuevo siempre en la parte superior de la pantalla.

Añadir tema

Desde la opción Temas podemos buscar otros diseños gratuitos haciendo clic en el botòn "Añadir nuevo", donde podremos hacer filtros por sus características de colores, diseño de pantalla y otras características. Para la instalación actuaremos casi de la misma manera, podremos previsualizarlos a al derecha de su pantalla si hace clic en el botón Vista Previa y se le gusta hacer clic en el botón azul "Instalar".

mastemas2.jpg

Temas gratuitos para descargar: Los pasos acceder a la web de Wordpress Themess encontrar el Tema que nos gusta y se adapta a nuestros contenidos, descargárselo y descomprimirlo en una carpeta, subir la carpeta /wp-content/themes.

Temas de pago. El principal directorio de temas de pago para wordpress es Themeorest donde podrá hacer filtros no solo por sus características sino por el precio, por la versión compatible o no de su web, etc.
La ventaja que tienen los diseños de pago no solo es su profesionalidad y acabado sino que cuentan con manuales y soporte para guiarte en el proceso de instalación y personalización. Suelen incluir también una carpeta con archivos de ejemplo para ejecutar y hacer una instalación ficticia completa para entender mejor el funcionamiento, una vez que el usuario comprende la distribución, podrá borrar el contenido de prueba y añadir el propio.

themefores.jpg

Los temas comprados se pueden instalar por dos medios: vía ftp si los subiremos al directorio de nuestro servidor en /wp-content/themes o comprimidos con el "subir tema"

subir-tema.jpg

Los Widgets

El uso de los widgets nos permiten añadir en determinadas zonas contenidos, enlaces y funcionalidades que una instalación por defecto de WP no tiene.
Un widget es simplemente un bloque de o zona del teme que permite intercambiar contenidos.

widgets.jpg

Hay dos maneras de modificar la localización de los widgets: Entre Apariencia -> Widgets o Apariencia -> Personalizar - Widgets.
En la primera opción verá los widgets disponibles en la parte izquierda del área de trabajo y los lugares del diseño donde ponerlos en la zona derecha, para ello haga clic en la barra del titulo del widget y arrástrelo a la zona deseada.
Podrá también ver una zona de widgets inactivos para poner aquellos que alguna vez configuramos y mostramos en la web pero que temporalmente no queremos que se vean.

Si es el administrador de la web podrá instalar una gran variedad de widgets a través de plugins y diseños que podrán dar gran vistosidad y funcionalidad, pero sería conveniente hacer pruebas en instalaciones de prueba ya que la instalación de estos widgets algunas veces puede interferir en el diseño y si son webs activas pueden confundir a tus visitantes.

De todas formas dijimos antes que dependemos muchas veces de la limitación de los espacios, por ejemplo una única barra lateral en nuestro diseño para añadir widget, y ¿Si quiséramos tener distintas barras laterales para distintas páginas con distinos widgets? Se puede cambiar algunas cosas, con los plugins que más adelante veremos.

Menús

Los menús permiten organizar la navegación por nuestra web de forma fácil.
Dentro de la opción de Apariencia de la barra lateral del administrador accedemos al administrador de menus con dos pestañas "Editar menú" y "Gestionar lugares"; ésta última opción también se puede gestionar desde la opción Apariencia -> Personalizar para indicar que menú se puede mostrar en las opciones que el diseño tenga.

Para crear un menú nuevo haga clic el enlace que hay seguido de "crea un nuevo menu" introduzca un nombre para diferenciarlo de otros creados, por ejemplo "Menú Principal" y asegúrese de que abajo de la página en "Opciones de Menu" la opción de -Ubicación del tema- está marcada como "Assigne Menú". En el diseño Twenty Fifteen podemos seleccionar dos localizaciones. en otros como el ejemplo solo una zona de menús llamado "Menú primario" (marcado).

menu.jpg

Añadir elemenos al menú.

Si nos fijamos en la parte izquierda de la zona de trabajo veremos una caja con tres pestañas para enlazar las pàginas más recientes, todas, o buscar entre las publicadas; si queremos añadir alguna más al menú hacemos clic para seleccionarlas y pulsando el botón "Añadir al menú" aparecerá en la zona derecha en "Estructura de menú". No olvida hacer clic en el botón Guardar menú para ver los cambios en la web pública.

Crear submenús

Cuando plateamos una estructura de menú, la organizamos según la temática y para que sea también un árbol fácil por el que navegar; para que se vea de una manera ordenada solo tenemos que hacer clic en la cabecera de cada uno de los enlaces añadidos y desplazarlo sin soltar hasta debajo de la opción padre del menú principal

Para eliminar páginas de una estructura de menú haga clic en el icono que apunta hacia abajo y se expande más opciones, busque el enlace eliminar y se borrará. Vuelva a hacer clic en Guadar menú.
Una opción interesante cuando desplegamos las opciones de un enlace es que podemos editar la "Etiqueta de Navegación" para mostrar el texto que queramos en el enlace.

Medios

Con esta opción de menú podremos añadir imágenes y documentos a las páginas y entradas. Se puede hacer directamente mediante la opción del menú del administrador Medios - Biblioteca. Allí se puede ver los archivos subidos durante la instalación y otros nuevos que hayamos añadido posteriormente. Tenemos dos formas de añadirlos:
Arrastrando el archivo desde la carpeta de su ordenador que lo contenga y soltándolo en el espacio central o simplemente haciendo clic sobre al botón seleccionar archivo y buscar en nuestro ordenador la imagen que queremos añadir.

medios.jpg

Es importante señalar que se puede subir una o más imágenes pero muchos servidores no admiten archivos superiores entre 2MB y 8MB en tamaño, por lo tanto es conveniente tratarlas para que sean menos pesadas. Existen herramientas profesionales como Photoshop o gratuitas como Gimp para modificar las imágenes, pero también hay herramientas básicas en windows como Image Resizer Windows para esta tarea, o incluso online como https://pixlr.com/editor/

pixlr.jpg