Con WordPress 4.7 se han introducido varios cambios significativos, pero sin dudas el más importante en esta ocasión es aquel que forma parte de la tercera y última actualización primaria de cada año: el tema predeterminado.

En esta versión, WordPress ha dado un giro contundente y se ha alejado de lo que nos venía ofreciendo hasta ahora: temas simples y orientados básicamente a blogs, que era en definitiva para lo cual se había creado en sus orígenes.

Es claro que desde hace años WordPress dejó de ser solo un CMS para blogs, y se convirtió en una de las plataformas de webs autoadministrables más robustas y populares que se precien. Es por esto que el tema que preludia el 2017 es bastante diferente de sus antecesores y está claramente orientado a todo tipo de sitios corporativos o incluso portfolios. Una de las novedades más salientes es la Cabecera multimedia, que puede albergar tanto una imagen como un vídeo en pantalla completa. Al mismo tiempo, saca provecho de las mejoras  que WordPress 4.7 presenta en el Personalizador para configurar cada elemento del sitio y ver los cambios en tiempo real.

En la entrada de hoy vamos a aprender a armar una web con Twenty Seventeen, para más adelante poder compartir algunos trucos que nos permitirán cambiar la apariencia o personalizar aún más el flamante tema predeterminado de WordPress.

Todas las personalizaciones de apariencia se llevan a cabo desde los paneles del Personalizador. También podremos sacar provecho de los nuevos iconos de atajos, que nos darán acceso directo a las áreas editables. Simplemente tenemos que hacer clic en el icono Atajo de edición y el panel del Personalizador abrirá de inmediato las opciones para ese elemento.

Vamos a repasar uno por uno cada panel:

Identidad del sitio

Logo – Aquí podemos añadir un logo (que aparecerá en el margen izquierdo del título y la descripción) con un clic en el botón Elegir logo. Podemos buscar la imagen en la Biblioteca o subir una nueva. Se recomienda usar un PNG transparente.

Título del sitio – Aquí escribiremos el título, que se mostrará en la parte superior de la ventana del navegador, junto al favicon, si lo hubiere, y en la cabecera sobre la imagen de fondo.

Descripción corta – Aquí escribiremos una descripción o slogan, que también se mostrará en la ventana del navegador junto al título del sitio y en la cabecera debajo del título y sobre la imagen/vídeo de fondo. Esta descripción es opcional.

Muestra el título y descripción del sitio – Desmarcaremos esta casilla solo si no queremos que se vea el título y la descripción en la cabecera, sobre la imagen/vídeo de fondo.

Icono del sitio – Aquí podremos asignar un favicon (también opcional, pero recomendable).

Twenty Seventeen - Identidad del sitio

Colores

Paleta de colores – Aquí tenemos tres opciones para elegir el esquema de color de nuestro sitio. Claro, que es la predeterminada; Oscuro, que asigna un fondo gris y letras blancas, y Personalizado. Es importante destacar que esta última opción es para cambiar el color de ciertos elementos de texto de la página, como los enlaces y los efectos de los menús al posar el puntero, pero no el color de fondo.

Twenty Seventeen - Colores

Color de texto de la cabecera – Aquí podemos elegir un color para el título y la descripción del sitio que se muestran en la cabecera, sobre la imagen (o vídeo) de fondo.

Twenty Seventeen - Colores

Cabecera multimedia

Vídeo de cabecera – Aquí podemos elegir usar un vídeo de fondo.

Puede ser un archivo en formato MP4 subido a la Biblioteca:

Twenty Seventeen - Vídeo MP4

O bien un vídeo subido a YouTube, cuya URL pegaremos en el campo correspondiente:

Twenty Seventeen - Vídeo YouTube

Imagen de cabecera – Aquí podemos establecer una imagen fija de fondo, cuyo tamaño recomendado para que se visualice correctamente es de 2000×1200 píxeles. Se sugiere también subir una imagen aunque se use un vídeo de fondo, para que se muestre como alternativa al cargar.

Twenty Seventeen - Imagen de cabecera

Menús

Ubicaciones de menús – Twenty Seventeen incluye dos ubicaciones: Menú superior y Menú de enlaces sociales.

Twenty Seventeen - Ubicaciones de menús

Los menús se crean de la misma manera que para cualquier otro tema de WordPress, desde Apariencia > Menús o desde el Personalizador.

Nosotros vamos a asignar uno previamente creado, que llamamos Principal, con los enlaces a nuestras páginas internas.

Twenty Seventeen - Menú superior

Veremos cómo ha aparecido el menú en la vista previa. Ahora queremos configurar los enlaces a las redes sociales, que se muestran en el pie de página, por lo cual crearemos un menú nuevo, que llamaremos Redes sociales (puede llevar cualquier nombre).

Aquí será necesario crear Enlaces personalizados, que configuraremos de acuerdo con el siguiente ejemplo:

Twenty Seventeen - Menú de redes sociales

Hemos colocado la dirección completa del perfil de la red social en el campo URL y el nombre de la red social en el campo Etiqueta de navegación.

Como opcional, activamos la casilla Abrir enlace en una pestaña nueva. Recordemos que esta opción no está visible de manera predeterminada, sino que hay que activarla desde las Opciones de pantalla.

WordPress - Opciones de pantalla - Destino del enlace

No es necesario hacer nada más, ya que Twenty Seventeen reconoce el nombre de la red social y le aplica el icono correspondiente.

Twenty Seventeen - Menu de enlaces sociales

Y así se verán una vez añadidos (el orden se podrá cambiar arrastrando los elementos del menú):

Twenty Seventeen - Enlaces de redes sociales

Widgets

En esta sección podremos asignar widgets a las áreas que incluye Twenty Seventeen. La primera es la barra lateral, que es la que se muestra en las entradas:

Twenty Seventeen - Widgets de barra lateral

La segunda, se coloca en la parte izquierda del pie de página:

Twenty Seventeen - Widgets del pie de página 1

La tercera, se coloca del lado derecho del pie de página:

Twenty Seventeen - Widgets del pie de página 2

Portada estática

Página frontal muestra – Aquí podemos seleccionar qué tipo de portada mostrará nuestro sitio: si las últimas entradas del blog o una página estática. Obviamente marcaremos Una página estática, ya que queremos mostrar la portada como página y no como blog.

Twenty Seventeen - Seleccionar tipo de portada

Portada – Aquí vamos a seleccionar una página creada previamente que se mostrará en el inicio, inmediatamente a continuación del menú principal. También tenemos la posibilidad de crear una página nueva, haciendo clic en el enlace + Añadir nueva página.

Página de entradas – Aquí seleccionaremos la página que contendrá las últimas entradas del blog. Para eso basta crear una página en blanco con el título Blog (o cualquier otro nombre que se prefiera) y luego seleccionarla en este menú.

Nosotros creamos una página simple con el título Construimos sitios, cuyo contenido es una breve lista de características. También creamos una página con el título Blog, que dejamos vacía. Seleccionamos ambas en su correspondiente ubicación:

Twenty Seventeen - Portada

Veremos que el contenido de nuestra página Construimos sitios se muestra de la siguiente manera:

Twenty Seventeen - Página de portada

Opciones del tema

Este es el panel donde podremos darle un poco más de atractivo a la portada, al incluir contenidos con imágenes en pantalla completa.

Twenty Seventeen - Opciones del tema

Diseño de página – Aquí podemos elegir entre una o dos columnas. El diseño predeterminado es de dos columnas, que mostrará el título de la página en el lado izquierdo y el contenido en el lado derecho (como se ve en las capturas de este tutorial).

Contenido de la sección X de la página principal – Aquí tenemos la opción de incluir hasta cuatro secciones dentro de la portada, que serán páginas previamente creadas. Al añadir una imagen destacada en la página, se mostrará como fondo fijo en pantalla completa, antes del contenido. Tener en cuenta que la imagen debe tener aproximadamente el mismo tamaño recomendado de la imagen de cabecera para que no se deforme o pierda calidad. Las secciones que se dejen vacías, no se mostrarán.

Nosotros hemos creado tres páginas para mostrar en la portada: Sitios web WordPress, Más servicios WordPress y Últimos trabajos.

Twenty Seventeen - Portada Página 1

La página Sitios web WordPress tiene unas imágenes añadidas desde la biblioteca, con alineación a la izquierda, más una breve descripción para cada una. La imagen destacada tiene un tamaño de 2592 × 1456 píxeles.

Twenty Seventeen - Portada Página 2

La página Más servicios WordPress no tiene imagen destacada, pero tiene una etiqueta more, que le indicará a Twenty Seventeen que no debe mostrar el contenido completo, sino añadir un enlace Continuar leyendo para abrir la página entera en cuestión.

Por último, la página Últimos trabajos tampoco tiene imagen destacada, y añadimos un enlace personalizado (creado dentro del editor visual) hacia otra página.

Twenty Seventeen - Portada Página 3

El área 4 la dejaremos sin usar, para no tener una portada tan larga. El resultado será el siguiente:

Twenty Seventeen - Portada Final

Eso sería todo. Como se puede apreciar, es mucho más de lo que esperaríamos de cualquier tema predeterminado anterior, y al menos un buen punto de partida para aquellos novatos que no quieran complicarse configurando miles de opciones, pero tampoco quieran resignar calidad y atractivo.

Caribdis.Net

Caribdis.Net

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una Vizsla loca.
Caribdis.Net

Últimas entradas por Caribdis.Net (ver todas)