Objetivos

En este capítulo, aprenderemos a sacar el máximo partido a los temas. Comprenderemos los dos tipos de temas, los buscaremos, los instalaremos y los personalizaremos. A continuación, activaremos y personalizaremos dos tipos de temas predeterminados de WordPress, los temas Twenty Twenty-One y Twenty Twenty-Three.

Utilizar los temas

Como vimos en el capítulo Descubrir WordPress, los temas determinan la apariencia de sus sitios de WordPress. Por ello, es esencial elegir el tema adecuado desde el comienzo del proyecto, en el momento de la concepción del sitio.

Los temas tienen orígenes diversos y, por lo tanto, calidades igualmente diversas. Algunos pueden ser desarrollados por diseñadores independientes y ofrecidos gratuitamente en numerosos mercados en línea; otros son desarrollados por agencias especializadas y están disponibles mediante compra. Algunos clientes corporativos desean un diseño único para su sitio y recurren entonces a un desarrollador de temas o a una agencia.

En todos estos casos, hay que prestar mucha atención a la viabilidad del proyecto y asegurarse de que el tema se actualice regularmente conforme avancen las versiones de WordPress.

Debe saber también que existen temas que instalan plugins adicionales para completar su propia instalación. Estos plugins, que se instalan junto con ciertos temas, permiten obtener una apariencia atractiva y profesional. Se trata de una tendencia muy fuerte en los últimos años.

Por último, en los últimos años han surgido los llamados «constructores de temas». Estos temas le permiten crear a usted mismo toda la estructura de visualización de sus contenidos. Es una manera muy flexible y eficiente de construir...

Los dos tipos de temas

La revolución Gutenberg de WordPress comenzó con la llegada de la versión 5. A partir de esta versión, la edición de contenidos, entradas y páginas se realiza mediante los bloques de Gutenberg. Cada bloque está dedicado a insertar un tipo específico de contenido: hay bloques para párrafos, para encabezados, para imágenes, para portadas… Ya conoce bien este principio.

WordPress sigue esta misma lógica con los temas. Por eso, actualmente nos encontramos en una fase de transición. Tenemos los llamados temas «clásicos», que se crean y personalizan como siempre, en la pantalla de personalización «clásica». Pero desde hace algunas versiones, WordPress permite componer y personalizar los temas con bloques de Gutenberg, muy similares a los que se usan para los contenidos editoriales. Encontrará bloques idénticos, como los de Título, Párrafo, Imagen… y también bloques diseñados específicamente para los temas. Este nuevo editor se llama Editor completo del sitio en español, y Full Site Editing en inglés, a menudo abreviado como FSE. Es el término que vamos a utilizar en este libro.

Así que, a medio o largo plazo, los temas «clásicos» tenderán a desaparecer y solo estarán disponibles los temas optimizados...

Elegir un tema del sitio web oficial

1. Buscar un tema

Para buscar un tema, puede ir al sitio web oficial de WordPress, a la sección de temas: https://wordpress.org/themes/

En la barra de navegación principal, tiene la opción de filtrar los temas:

Popular: los temas más populares.
Latest: últimos temas publicados.
Commercial: temas de pago.
Community: temas creados por diseñadores independientes.
Block themes: temas que utilizan bloques de Gutenberg, por lo que están optimizados para el FSE.

También puede buscar un tema según los criterios disponibles en las listas desplegables Layout, Features y Subjects:

Haga clic en la opción que le interese:

A continuación, haga clic en el Apply (X), donde X es el número de criterios seleccionados.

A continuación, WordPress muestra el resultado, que incluye todos los temas que cumplen con sus criterios. En este ejemplo, hemos solicitado temas con tres columnas y que usen bloques:

2. Elegir un tema

Para elegir un tema, muestre sus detalles haciendo clic en su nombre o en su vista previa.

Puede ver los detalles técnicos del tema elegido en la pantalla. He aquí un extracto:

A la derecha, el botón Preview permite obtener una vista previa del tema:

Tenga en cuenta que el tema no está configurado, por lo que la pantalla puede ser un poco «decepcionante».

En la parte superior izquierda, haga clic en el botón Back para cerrar esta vista previa.

A la derecha, tiene varios parámetros técnicos interesantes:

Version indica la versión del tema.
Last updated indica la fecha de la última actualización....

Elegir un tema desde la administración

1. Buscar un tema

Acabamos de ver cómo elegir un tema del sitio oficial de WordPress. Pero es posible hacer lo mismo desde la interfaz de administración del sitio.

En el menú Apariencia, elija Temas.

Haga clic en el botón Añadir nuevo tema.

Puede encontrar las categorías que hemos visto en el sitio web oficial de temas de WordPress: Populares, Recientes, Temas de bloques y Favoritos.

También encontrará el botón de búsqueda por criterios Filtrar por características. Funciona de forma similar a lo que habíamos visto en la web oficial de temas de WordPress.

Además, dispone de un campo de búsqueda por palabras clave libres: Buscar temas. He aquí un ejemplo de una búsqueda con las palabras clave «green magazine». Para optimizar la búsqueda, le recomendamos que utilice palabras en inglés.

De nuevo, para cada tema encontrado, al pasar el cursor por encima, se mostrarán los botones Detalles y vista previa, Instalar y Vista previa.

Si quiere instalar un tema, haga clic en el botón Instalar.

WordPress le informa de que el tema está instalado:

Para ver la lista de temas, elija Apariencia, Temas.

Puede ver que el tema Flectine está instalado, y que además se ha instalado su tema padre, Flixita:

En los detalles del tema Flectine, se dice...

La configuración de la página de inicio

1. Temas de tipo blog

Debido a su origen como «motor de blog», con el tema predeterminado Twenty Twenty-Five, así como con Twenty-Four, Twenty-Three… WordPress muestra las últimas entradas creadas en la página de inicio. Puede especificar cuántos artículos deben mostrarse en la página de inicio.

En el menú Ajustes, elija Lectura.

En el área Ajustes de lectura, en la opción Tu página de inicio muestra, la opción Tus últimas entradas está activada de forma predeterminada.

Es en el campo Número máximo de entradas a mostrar en el sitio, debe indicar cuántas entradas deben mostrarse en la página de inicio.

Una vez definido este parámetro, haga clic en el botón Guardar cambios en la parte inferior de la pantalla.

2. Temas de tipo sitio de información

Es importante saber que algunos temas no utilizan la visualización «tradicional» de tipo blog, sino que ofrecen una visualización de tipo «sitio clásico», más bien informativo, como hacen la mayoría de las empresas.

En este caso, para que el tema funcione correctamente, es posible que deba indicar qué página, en el sentido de WordPress, debe mostrarse como página de inicio de su sitio.

Si el tema que ha elegido funciona de esta...

El tema clásico Twenty Twenty-One

1. Activar y personalizar el tema

La última versión de WordPress ya no viene con el clásico tema Twenty Twenty-One. Este es el último tema clásico que WordPress ofreció de forma predeterminada. Este tema utilizará, por lo tanto, la interfaz de personalización clásica para este tipo de temas.

En este apartado veremos cómo personalizar un tema clásico basándonos en el Twenty Twenty-One. Para ello, lo primero que debe hacer es descargarlo utilizando uno de los métodos que hemos visto previamente.

Una vez descargado, deberá activar este tema.

Pase el cursor sobre el tema Twenty Twenty-One y haga clic en el botón Activar.

WordPress indica que el tema Twenty Twenty-One está activado:

Tenga en cuenta que, cuando activa un tema clásico, el menú Apariencia cambia sus elementos, incluyendo especialmente Personalizar, Widgets, Menús, etc.:

Toda la personalización de los temas clásicos se realiza ahora de forma centralizada desde el menú Apariencia - Personalizar.

También puede acceder a él pasando el cursor sobre el tema Twenty Twenty-One y haciendo clic en el botón Personalizar.

En la columna lateral izquierda, en el panel Tema activo, siempre se puede ver el nombre del tema activo, Twenty Twenty-One en este ejemplo. Puede cambiar el tema haciendo clic en el botón Cambiar.

A la izquierda se muestran los paneles correspondientes a las diferentes categorías de personalización.

Preste atención: es importante tener en cuenta que cada tema clásico puede ofrecer sus propios paneles de personalización, aunque elementos como Identidad del sitio, Menús o Widgets suelen estar presentes en la mayoría de ellos. Por tanto, no siempre tendrá las mismas opciones de un tema a otro.

Finalmente, en la parte inferior de la columna lateral izquierda, hay tres botones que permiten previsualizar el sitio en Reponsive Web Design:

El primer botón simula la visualización en la pantalla de un ordenador:

El segundo, muestra el sitio como se vería en una tableta:

El último botón muestra el sitio como si se mostrase en un teléfono inteligente:

Además, en la parte inferior izquierda, el botón Ocultar controles permite contraer esta columna lateral...

El tema Twenty Twenty-Three optimizado para el FSE

1. Activar el tema

La última versión de WordPress viene con diversos temas optimizados para el editor de temas, el FSE. Uno de ellos es el tema Twenty Twenty-Three, que es el que vamos a tomar como ejemplo para esta sección.

En primer lugar, tiene que activar este tema.

En el menú Apariencia, elija Temas.

Al pasar el cursor sobre el tema Twenty Twenty-Three, haga clic en el botón Activar.

WordPress informa de que el tema está activado; puede comprobarlo con la presencia de la etiqueta: Activo: Twenty Twenty-Three, en la banda inferior del tema.

2. Los archivos que constituyen los temas optimizados para el FSE

Los temas clásicos y los temas optimizados para el FSE difieren en muchos aspectos. Se trata de dos sistemas de construcción de temas totalmente diferentes.

Los temas optimizados para el FSE permiten acceder directamente a todos los archivos que los componen. Es importante entender que cada diseñador es libre de usar estos archivos constitutivos como considere oportuno. Por eso, no existe un único método uniforme para personalizar estos temas.

Tenga en cuenta desde ahora mismo que cada tema puede tener sus propios archivos constituyentes y que puede personalizarlos de acuerdo con los deseos del diseñador.

3. Comprender la arquitectura de los temas optimizados para el FSE

Ahora, vamos a abordar la arquitectura de los temas optimizados para el FSE.

Tenga en cuenta que estos temas se componen de una plantilla de página y de partes de plantilla.

En principio, cada diseñador puede crear una plantilla de página específica para un tipo concreto de visualización. Por lo tanto, puede tener una plantilla para la página de inicio, otra para las entradas que se muestran en páginas individuales, otra para las páginas. También puede tener una plantilla de página para mostrar la lista de entradas publicadas por un autor, durante un mes, según una categoría o etiqueta.

Por supuesto, muchos temas tendrán plantillas de página comunes. Pero cada diseñador puede nombrar estas plantillas de página como desee.

Como ya sabe, hay zonas de visualización que son comunes a muchas páginas del tema, como la cabecera o el pie de página. Estas zonas comunes se llaman partes de plantilla. Esto significa...