Twenty Twenty es el nuevo tema predeterminado de WordPress que viene con la última versión de WordPress 5.3. Como su predecesor Twenty Nineteen, Twenty Twenty ha sido diseñado con un enfoque especial en Gutenberg. Sin embargo, hay una gran diferencia entre los dos: Twenty Twenty no se construye desde cero, sino que se diseña a partir de un tema existente de la comunidad de WordPress.
Como nos encanta todo sobre WordPress, echemos un vistazo de cerca al nuevo tema Twenty Twenty, empezando con el archivo function.php , la hoja de estilos y las plantillas.
Incluso si Twenty Twenty está lejos de ser algo estable – en el momento de escribir este artículo – con muchos problemas aún no resueltos, hoy compartiremos con ustedes nuestros primeros pensamientos sobre el nuevo tema predeterminado de WordPress.
Vamos a sumergirnos en el tema de Twenty Twenty WordPress!
Introducción rápida al tema de Twenty Twenty
Twenty Twenty se ha construido sobre Chaplin, un tema gratuito de WordPress de Anders Norén, que también es el responsable del diseño del tema por defecto de WordPress 5.3.
Chaplin está disponible para su descarga en el repositorio de WordPress.org y, según Anders, ha sido construido con el Editor de Bloques en mente:
Chaplin es un tema de WordPress lleno de funciones que te da control total sobre las fuentes HTML y los colores de su sitio. Está construido desde cero con el nuevo Editor de bloques en mente y facilita la creación de diseños atractivos tanto en los posts como en las páginas.
La misma filosofía se encuentra detrás de Twenty Twenty: flexibilidad, claridad y legibilidad son las palabras clave de enfoque para el nuevo tema.
Twenty Twenty viene con un diseño único de columna y tres plantillas de postproducción/página, con el objetivo de proporcionar WordPress ofrece a los administradores y diseñadores la libertad de crear sus diseños personalizados directamente en el Editor de bloques, aprovechando las alineaciones amplias y completas de los elementos de bloque como columnas, imágenes y la función bloque de grupo introducido con Gutenberg 5.5.
Como explica Anders:
Twenty Twenty está diseñado con flexibilidad en su centro. Si desea utilizarlo para una organización o un negocio, puede combinar columnas, grupos y medios con alineaciones amplias y completas para crear diseños dinámicos que muestren sus servicios o productos. Si quiere usarlo para un blog tradicional, la columna de contenido centrado lo hace perfecto para eso también.
Además de eso, Twenty Twenty viene con un nuevo tipo de letra: Inter. Es un familia de fuentes gratuitas y abiertas diseñadas por Rasmus Andersson específicamente para la legibilidad de textos en mayúsculas y minúsculas, especialmente con tamaños de fuente pequeños.
Inter da una personalidad más fuerte a los encabezados grandes, pero obtendrá el máximo provecho cuando lo use con tamaños de texto alternados, como se muestra en la vista previa del tema de la entrada del blog WordPress.org:
Más que un tema completo, Twenty Twenty es un tema que marca un nuevo paso importante hacia la evolución futura de la interfaz de edición de WordPress. Twenty Twenty se basa esencialmente en el Editor de bloques para la edición y disposición del contenido, y en el Personalizador de temas para las personalizaciones de cabecera, pie de página y adicionales.
Dicho esto, es hora de que instalar este tema de WordPress y ejecutarlo.
Cómo Instalar Twenty Twenty
El próximo tema por defecto será el siguiente Plan de lanzamiento de WordPress 5.3. Esto significa que, en el momento de escribir este artículo, Twenty Twenty aún no está disponible para su descarga en el Directorio Temático de WordPress, ni tampoco lo encontrará fusionado en el núcleo de WordPress 5.3 por un tiempo.
De todos modos, puede descargar una versión en curso de Twenty Twenty en GitHub e instalarla en la versión estable actual de WordPress o conseguirla con WordPress 5.3. El repositorio Github será obsoleto una vez que el tema se haya fusionado en de la base de datos. Mientras tanto, es posible que desee guardar las siguientes fechas de la programación de la versión 5.3 de WordPress:
- 23 de septiembre de 2019: Beta 1
- 30 de septiembre de 2019: Beta 2
- 7 de octubre de 2019: Beta 3
- 15 de octubre de 2019: Versión candidata 1
- 22 de octubre de 2019: Versión candidata 2
- 29 de octubre de 2019: Versión candidata 3
- 5 de noviembre de 2019: Release candidate 4 (si es necesario)
- 12 de noviembre de 2019: Fecha límite para la publicación de WordPress 5.3.
Para empezar con Twenty Twenty, siga los pasos que se indican a continuación:
- Obtenga el paquete zip de GitHub.
- Suba el archivo zip a su instalación de desarrollo en el directorio WordPress dashboard o a través de SFTP.
- Vaya a Apariencia → Temas y haga clic en el botón Activar en la imagen de vista previa del tema.
- Vaya a Apariencia → Personalice para configurar Twenty Twenty.
Y eso es todo! Ahora puede empezar a realizar sus pruebas en su o en su sitio web o en su el medio ambiente local.
Ahora que está listo para irse, sigamos adelante y sumerjámonos en el tema Twenty Twenty WordPress.
Características del tema Twenty Twenty
Twenty Twenty no es un tema de WordPress con todas las funciones, sino un tema recortado y mínimo cuyo objetivo es dar a los desarrolladores y administradores de sitios la libertad de crear diseños de contenido personalizados para sus mensajes y páginas. Como Twenty Nineteen, Twenty Twenty ha sido construido para Gutenberg y depende principalmente del ciclo de vida de Gutenberg (más sobre este tema en este video de Matt Mullenweg en WCEU 2019).
El tema soporta una serie de características del tema como ancho de contenido (580), enlaces de alimentación automáticos, miniaturas de publicaciones, etiqueta de título y varios elementos HTML5 (formulario de búsqueda, formulario de comentarios, lista de inicio, galería y pie de foto).
Otras características añaden opciones al Personalizador de temas. Estos incluyen fondos personalizados y logotipo personalizado. Los fragmentos de código que se muestran a continuación muestran estas características habilitadas en el archivo de funciones del tema:
// Custom background color
add_theme_support(
'custom-background',
array(
'default-color' => 'F5EFE0'
)
);// Custom logo
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width' => 320,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
)
);
Twenty Twenty también apoya a algunos de las características específicas de Gutenberg. En primer lugar, el tema admite alineaciones amplias y de ancho completo:
// Add support for full and wide align images.
add_theme_support( 'align-wide' );La paleta de colores del editor está habilitada si el usuario establece un color de acento en el Personalizador (habilitado por defecto):
// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
add_theme_support( 'editor-color-palette', $editor_color_palette );
}
El tema Twenty Twenty viene con cuatro tamaños de fuente de editor disponibles en el Editor de bloques:
// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
array(
'name' => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 16,
'slug' => 'small',
),
array(
'name' => _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 18,
'slug' => 'regular',
),
array(
'name' => _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 24,
'slug' => 'large',
),
array(
'name' => _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 32,
'slug' => 'larger',
),
) );
Y eso es todo. El tema es bastante mínimo también en funcionalidad, pero es fácilmente ampliable con un tema infantil, y lo veremos en un minuto.
¿Cómo personalizar la apariencia de Twenty Twenty?
Twenty Twenty viene libre de cualquier campana y silbatos, pero proporciona una gran flexibilidad cuando se utiliza en conjunto con Gutenberg (o con un buen constructor de páginas).
Personalizando el tema de los Twenty Twenty
La Identidad del Sitio gestiona el título y el eslogan, el logotipo y el icono del sitio. Puede activar/desactivar todos estos elementos en la sección Identidad del Sitio del Personalizador:
La sección Plantilla de portada del Personalizador se encarga de la configuración de personalización de la plantilla de portada. Allí, encontrará:
- Una opción para activar un efecto paralelo en la imagen de fondo (Imagen de fondo fija).
- Seleccionadores de color para establecer el color de fondo y el color de texto personalizados para la superposición de imagen destacada.
-
La sección Menús ofrece cinco ubicaciones de menús. Puede incluir un menú horizontal normal en el encabezado (Menú Horizontal del Escritorio) y/o un menú de navegación conmutable (Menú ampliado del escritorio). El Menú Móvil es un menú específico para dispositivos móviles, y el Menú Pie de Página y el Menú Social se encuentran en el pie de página.
El pie de página maneja las ubicaciones del Menú Pie de Página y del Menú Social junto con dos áreas de widgets. La siguiente imagen muestra el pie de página del tema con todos sus elementos en su lugar:
Por último, la sección CSS adicional le permite incluir sus estilos personalizados.
Plantillas de una sola Publicación/Página
Cuando se trata de diseños de publicación y de páginas, puede elegir entre tres plantillas diferentes. Además de la plantilla predeterminada, Twenty Twenty proporciona una plantilla de portada y una plantilla de ancho completo con la que puede jugar para personalizar el aspecto de su contenido.
El Editor de Bloques en Twenty Twenty
Debido a su enfoque mínimo, la aparición de Twenty Twenty se basa principalmente en el Editor de Bloques. Hacemos nuestras pruebas en Twenty Twenty con la versión 6.4.0 de Gutenberg. Esta versión proporciona un buen número de nuevas características, mejoras y correcciones de errores que mejoraron significativamente la experiencia de edición.
Algunos bloques son útiles, especialmente cuando se construyen sitios web de una sola página. Bloques como Media & Text y Cover han sido mejorados y ahora se ven muy bien cuando se trata de presentar productos y/o profesionales. carteras:
Aún así, como Gutenberg es un proyecto en progreso, puede que quiera echar un vistazo a algunos de los plugins más populares que permiten añadir más bloques al editor.
Aquí hay una lista rápida de plugins que puede valer la pena probar:
El Personalizador de Temas y el Editor de Bloques hacen un gran trabajo cuando se trata de la personalización de la apariencia y el diseño, pero un tema hijo podría darle un mayor control sobre el aspecto de sus páginas.
Cómo Crear un Tema Child (Hijo) para el tema Twenty Twenty
Construir temas hijo para WordPress puede ser divertido y también una buena manera de empezar una carrera como WordPress desarrollador de temas y Twenty Twenty podría ser un gran tema de los padres al construir los temas hijo en WordPress. Así que, ¿por qué no lo intenta? 😉
Si no sabe por dónde empezar con los temas hijo, asegúrese de consultar nuestra guía ampliada sobre Cómo crear un tema hijo en WordPress.
Ahora, construyamos nuestro primer tema hijo para Twenty Twenty!
Cree un nuevo directorio bajo wp-content/themes y nómbrelo con el nombre de twentytwenty-child o lo que quiera.
Busque wp-content/themes/twentytwentytwenty-child y cree un nuevo archivo style.css con el siguiente encabezado:
/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Your Name
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/A continuación, tenemos que incluir la hoja de estilo del tema de los padres. En el mismo directorio, cree el siguiente archivofunctions.php:
<?php
/* enqueue scripts and style from parent theme */
function twentytwenty_styles() {
wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');Ahora vaya a Apariencia → Temas y active su tema hijo. Ahora puede empezar con sus personalizaciones.
Puede cambiar casi cualquier cosa en Twenty Twenty, desde añadir plantillas personalizadas hasta añadir sus estilos personalizados o cambiar los estilos predeterminados del tema.
Aquí le mostraré cómo crear una nueva plantilla personalizada para mensajes y páginas individuales.
Cómo agregar una plantilla de publicación/página personalizada en Twenty Twenty
Hasta ahora, hemos creado un tema hijo para Twenty Twenty y hemos adjuntado los estilos del tema padre a la hoja de estilos del tema hijo. En el siguiente ejemplo, nos desharemos del encabezado y el pie de página, dejando espacio para el cuerpo de la página en un archivo de plantilla de publicación/página.
Paso 1
Copie y pegue los siguientes archivos del tema principal al directorio del tema secundario:
- templates/template-full-width.php
- header.php
- footer.php
Paso 2
Renombre template-full-width.php a template-canvas.php (o lo que quiera). Abra el archivo, elimine el contenido actual y pegue lo siguiente:
<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );Nombre de la plantilla establece el nombre del archivo de plantilla como lo verá en el Editor de bloques, mientras que Tipo de plantilla de correo define los tipos de puestos que soportan este archivo de plantilla. La función get_template_part carga el archivo singular.php del tema padre (no necesitamos una copia de este archivo en el tema hijo).
Vaya al panel de WordPress y cree una nueva entrada. Ahora debería encontrar una plantilla de página adicional en la sección Atributos de publicación.
Paso 3
Y ahora viene la parte divertida. Abra header.php en su editor de texto favorito y envuelva el elemento header dentro de la siguiente declaración if:
<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
<header id="site-header" class="header-footer-group" role="banner">
...
</header><!-- #site-header -->
<?php
// Output the menu modal
get_template_part( 'template-parts/modal-menu' );
}Este código comprueba si la plantilla de página no es templates/template-canvas.php. Si la plantilla de página es templates/template-canvas.php, entonces no incluirá el encabezado del sitio y el menú modal.
Del mismo modo, podemos eliminar el pie de página de una página de un mensaje cuando la plantilla de página activa es nuestro lienzo. Sólo tiene que añadir la misma condición en footer.php como se muestra a continuación:
<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
<footer id="site-footer" role="contentinfo" class="header-footer-group">
...
</footer><!-- #site-footer -->
<?php } ?>
<?php wp_footer(); ?>
</body>
</html>Puede descargar el código de este ejemplo aquí.
Ahora cree un nuevo mensaje o página, seleccione la plantilla de lienzo en los Atributos de Mensaje/Página y compruebe la página en el sitio principal.
Resumen
Twenty Twenty es un tema minimalista de WordPress, con un solo diseño de columnas. La forma en que lo usaremos dependerá en gran medida de la evolución del Editor de bloques. Como dice Anders expresivamente:
«La promesa del Block Editor es dar a los usuarios la libertad de diseñar y estructurar sus sitios como mejor les parezca».
A continuación Twenty Nineteen, el nuevo tema por defecto Twenty Twenty es el segundo de una nueva generación de temas cuyo objetivo es «permitir la construcción de sitios web sin edición manual de código». Los sitios de WordPress que utilizan el tema Twenty Twenty tienen todo tipo de formas y tamaños. Para saber si un tema utiliza Twenty Twenty, comprueba nuestra práctica herramienta de detección de temas de WordPress.
Si cree que Gutenberg todavía no es completamente fiable para sus proyectos, puede añadir los bloques que necesitará con plugins como los que se listan arriba. O, simplemente, puede adoptar un constructor de páginas de terceros.
Hasta ahora: ¡instale el nuevo tema predeterminado de WordPress, juegue con él, y háganos saber lo que piensa aquí en los comentarios!
Un control deslizante para controlar la sobreposición.