En este tutorial vamos a recordar los pasos dados en la práctica durante el módulo de Administración de sitios web con WordPress del curso Generation Spain en el EOI.

Requerimientos

Partiendo de una instalación nueva de WordPress en nuestro servidor nos planteamos la necesidad ahora de mejorar la apariencia de nuestro sitio WordPress empleando una plantilla que permita configuraciones adicionales para nuestro sitio.

Escogemos en la galería de temas de WordPress uno que satisfaga nuestras necesidades gráficas y de funcionalidad. Básicamente necesitamos que la plantilla permita configuraciones algo más sofisticadas sobre todo en lo que respecta a nuestra portada.

El hecho de escoger una plantilla de la galería de temas de WordPress nos facilita información sobre esa plantilla. Para estar ahí listada debe cumplir las guías maestras (guidelines) de WordPress en lo que respecta a lo que una plantilla de WordPress debe hacer.

Hay en el mercado temas sofisticados que sirven a propósitos más concretos y que no aparecen listados en esta galería. Su funcionamiento no está garantizado por WordPress y pueden dar más problemas en eventuales actualizaciones futuras de WordPress por lo que se recomienda evitarlas hasta que se tenga más soltura a la hora de resolver los problemas que puedan dar.

Tema Rise WP para WordPress

Este tema nos permite configurar una portada del tipo Agencia o portfolio. Es un formato bastante genérico con un bloque inicial llamado «hero» y que consta de una imagen de fondo, un título y subtítulo y un botón para nuestra CTA (llamada a la acción).

Lo emplearemos por la relativa facilidad de configuración y por el resultado bastante agradable. Además veremos que según cada uno escoja un logo y una imagen de fondo conseguiremos diferenciar suficientemente nuestros sitios webs.

Paso a paso de configuración de la plantilla

Las plantillas suelen incorporar muchas funcionalidades adicionales a WordPress. Es precisamente gracias a esas funcionalidades que podemos configurar la apariencia de nuestro sitio con más flexibilidad.

Además incluyen plantillas adicionales, como la plantilla de inicio que comentamos en el punto anterior.

Paso 1: Descargar el tema

Al estar dentro de la galería de temas podemos directamente escoger la plantilla desde Apariencia>Temas>Añadir Nuevo, empleando el buscador para encontrarlo.

Adicionalmente podríamos descargarlo a nuestro ordenador, descomprimirlo y subirlo a través de un cliente FTP como WinSCP o CyberDuck en Mac. Los datos de conexión son los de vuestro alojamiento web, en vuestro caso fueron facilitados en el curso.

Una vez descargado lo activamos.

Al activarlo aun no ha cambiado casi nada nuestro sitio web. Pasamos de una plantilla muy sosa como twentywenty de WordPress a una portada en la que siguen apareciendo solo nuestros posts.

Continuamos instalando cosas

Paso 2: Descargar el plugin desde la página de modernthemes

El desarrollador de la plantilla ha desarrollado un plugin para incorporar funcionalidades adicionales para que podamos configurar la plantilla en todo su esplendor.

Descargamos el plugin aquí.

Básicamente este plugin sirve para generar unos nuevos Widgets en la galería de Widgets de nuestro wordpress.

Estos widgets podremos arrastrarlos a las nuevas zonas creadas por la plantilla para la portada.

Por ahora continuamos configurando la portada, volveremos al widget en el paso 4.

Paso 3: Configuraciones de Portada

Para configurar la portada primero tenemos que crear una página para que sea nuestra portada.

Por defecto WordPress muestra un listado de últimas entradas y es esto lo primero que queríamos librarnos para que nuestro sitio web se diferencie un poco más de un blog convencional.

Al crear la página le asignamos un nombre, éste no se verá en ningún lado pero debe servirnos para identificar la página internamente.

Debemos asignarle la plantilla Home Page. Para ello nos fijamos en el menú a la derecha de la página. Encontramos una opción «Atributos de Página». Seleccionamos dentro la plantilla Home Page y guardamos.

Paso 4: Asignación de la portada

Ahora solo nos queda entrar en el menú de personalización de apariencia de WordPress.

Al acceder a Apariencia >Personalizar se despliega un menú nuevo en el que podremos configurar todo lo necesario de nuestra plantilla.

Primero deberemos asignarle nuestra nueva página a nuestra portada para lo que vamos a Ajustes de la página de Inicio. Seleccionamos la opción «Una página estática». Al hacerlo se despliegan las opciones de entre las que escogeremos nuestra Portada. guardamos y salimos

Paso Se han creado dos bloques nuevos al instalar y activar la plantilla. El primero es Home Hero Section.

Paso 5: Carga de logo

En el mismo menú de Personalización tenemos la opción Identidad del sitio.

Se puede en esta opción cargar el logo y el icono. Subimos una imagen que cuadre con la pantilla.

Para logos cuadrados un tamaño adecuado puede ser entre 50 y 100 píxeles. Para logos apaisados seguramente cuadre de 80 a 150 píxeles.

Deberemos jugar con los tamaños hasta que quede del tamaño adecuado. El menú de la derecha puede cambiarse de tamaño también en este mismo menú en la opción Navigation.

Ambos elementos; logo y menú, deben quedar en armonía.

Paso 5: Configuración de Bloque Hero

En la opción Home Hero Section podremos introducir los diferentes elementos de este bloque principal de nuestro sitio

  1. Imagen de fondo: El principal reto es encontrar una imagen de gran tamaño (resolución al menos de 1280x720px) que sirva bien para ilustrar el contenido de nuestra web.
  2. Seleccionaremos una frase para darle sentido a nuestro sitio y podemos poner un texto debajo que explique en mayor detalle a qué nos dedicamos o qué queremos que hagan al clicar en el CTA.
  3. El CTA podemos personalizar el enlace y el texto del mismo.

Aunque se pueden escoger los colores de las fuentes es muy probable que la imagen de fondo escogida dé problemas de visualización que luego tendremos que corregir manualmente en el CSS de formas que esta plantilla no permite (como asignar una sombra al texto para que contraste correctamente).

Jugando con las posibilidades de configuración debemos llegar a un resultado que nos convenza. A veces esto nos lleva tiempo y nos hace replantearnos la imagen de fondo o el formato de los elementos que van delante.

Paso 5: Bloque contenidos destacados

Para el bloque de contenidos destacados debemos ir al menú del Escritorio de WordPress.

En la opción Widgets vemos que hay cuatro nuevos espacios para arrastrar widgets. En cada bloque «Home widget Area» podemos desplazar bloques. Cada bloque tendrá un color de fondo diferente. El primero será blanco, el siguiente un gris muy claro, y así sucesivamente.

Arrastrando MT Home Posts tendremos entradas destacadas debajo del elemento Hero.

Configuramos el número de posts, el título del bloque y cambiamos a español el See All.

Con eso nuestra portada estará lista con respecto a lo que pretendíamos hacer.

Paso 4: Configuraciones adicionales de la plantilla

Personalizar las fuentes

Las fuentes de la plantilla pueden ser alteradas. En el menú de Personalización de Apariencia se despliegan las diferentes fuentes para títulos y cuerpo del sitio web.

Podemos escoger entre la mayor parte de las fuentes de la galería de google Fonts.

Una vez más debemos jugar con las diferentes opciones. Una buena práctica de diseño suele implicar combinar una tipografía Sans-Serif con una Serif, pero las combinaciones de tipografías permiten grandes posibilidades creativas así que podemos probar hasta que encontremos tipografías que potencien el espíritu de nuestro sitio web.

Cambios de colores

Si queremos cambiar el color de algún elemento concreto del sitio web deberemos hacerlo manualmente en la hoja de estilos.

Para ello podemos hacerlo en el propio documento style.css dentro de la carpeta del tema en wp-content/themes. Ésto puede hacerse vía el Editor de Temas de WordPress o mediante un cliente FTP en el que bajemos/subamos el archivo con sus modificaciones. Es más recomendable lo segundo por que nos permite hacer backup y control de versiones.

Para encontrar en la hoja de estilos el elemento a cambiar es conveniente emplear el inspector de elementos del navegador, que nos dirá dónde está en la hoja de estilos el bloque de código CSS que debemos modificar.

Esta labor puede ser frustrante sobre todo por que muchas veces los cambios no se muestran en el navegador por el cacheado de archivos estáticos de nuestro navegador. Deberemos intentar forzar la visualización de los cambios recargando nuestra página en una nueva pestaña de incógnito.

A veces es difícil acertar con el elemento en el que hay que cambiar el valor de un atributo por que las capas de HTML tienen estilos en cascada y puede ser que nosotros digamos que algo es negro y otro atributo en otra capa dice que es blanco.

Cuando dos atributos tienen conflicto debemos asignarle el atributo !important detrás del atributo CSS que queremos que se respete a toda costa.

La depuración de estilos CSS suele ser complicada y ser fuente de estrés y frustración para los usuarios principiantes, pero esta fase es un peaje que hay que pasar para poder aprender el CSS y HTML mínimo para poder sobrevivir en un sitio web con wordpress con requerimientos específicos como el nuestro.

Cambio del botón de portada

Otra cosa que hicimos en las sesiones presenciales fue personalizar el botón de la portada.

Esto nos permitía diferenciarnos aun más de otros sitios hechos con RiseWP.

Para ello acudíamos a un generador de botones CSS online. Hay varios en internet. Adicionalmente podríamos comprar un botón CSS en algún marketplace de snippets de HTML/CSS o diseñarlo nosotros mismos cuando tengamos conocimientos un poco más avanzados.

El generador de botones CSS nos daba un código para pegar en nuestra hoja de estilos. Luego solo nos quedaba cambiar el nombre de la clase del botón para que cogiese estos estilos. Para ello debíamos entrar en el editor de temas (o descargar el archivo vía FTP y editarlo en local). Debemos encontrar la plantilla de portada dentro del tema.

En nuestro caso es la plantilla template-page-home.php dentro de la carpeta del tema. Abriéndolo podemos ejecutar una búsqueda para ir directamente al elemento que queremos cambiar. Lo buscamos por class=»button» por que es lo que queremos cambiar. Al encontrarlo lo cambiamos por class=»myButton» por que en nuestro caso el generador de botones nos dio el código con ese nombre de clase. Podemos cambiarle el nombre en esta clase y hacerlo en el propio código CSS para darle nombres más descriptivos, sobre todo con vistas a usar botones de este generador con otros estilos en otras partes de nuestro sitio.

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.