¿Tienes un theme que te gustaría que aproveche la funcionalidad de Gutenberg?, en este artículo veremos cómo realizar esto de manera simple haciendo modificaciones en los archivos style.css y functions.php del Child-theme.
Generalidades
Usaremos el theme Twenty Seventeen de base, que en la versión 2.0 no tiene aún soporte completo con Gutenberg, haremos los cambios para usar Gutenberg en las páginas.
Ancho Completo
Algunas funciones de Gutenberg usan el ancho completo de una página, el Theme Twenty Seventeen no ofrece la posibilidad de mostrar contenido en el ancho completo. Para lograrlo puedes usar la funcionalidad de Plantillas de Página en WordPress
El siguiente código esta basado en el archivo page.php del theme Twenty Seventeen, lo único que ha variado es la clase wrap que ahora será wrap-full y para la cual crearás estilos CSS.
<?php
/*
Template Name: Page full
*/
get_header(); ?>
<div class="wrap-full">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/page/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php
get_footer();
Adicional a este código usa el siguiente código CSS que puedes colocar en el archivo style.css del child-theme
.wrap-full #primary{
max-width: 100%!important;
}
.wrap-full .entry-content,
.wrap-full .entry-header{
width:100%!important;
float:none!important;
}
.wrap-full .entry-header{
max-width: 798px;
}
.wrap-full .entry-content > *{
max-width: 798px;
margin:auto;
}
.wrap-full .entry-content > span,
.wrap-full .entry-content > strong{
display: block;
}
@media(max-width: 768px){
.wrap-full .entry-content > *,
.wrap-full .entry-header > *{
padding:20px;
}
}
Luego de hacer esto si seleccionas alguna página de tu sitio podrás seleccionar la plantilla de página y se verá en el ancho completo.
Incluir opciones de Gutenberg en el theme
Una vez tengas el ancho completo de una página entonces es hora de incluir las opciones adicionales de Gutenberg en tu theme.
– Soporte para Ancho Amplio y Ancho completo de los bloques
El siguiente código agrega opciones adicionales de ancho amplio y ancho completo para algunos bloques como: imagen, cover imagen y galería.
add_theme_support( 'align-wide' );
Con este código aparecerán opciones adicionales tal como se muestra en la siguiente imagen:
El código de soporte para ancho ampliado y ancho completo crea dos clases llamadas: alignwide y alignfull respectivamente, por lo que adicionalmente tendremos que agregar código CSS que use estas clases
.wrap-full .entry-content .alignwide{
max-width: 980px;
padding:0;
}
.wrap-full .entry-content .alignfull{
max-width: 100%;
padding:0;
}
– Soporte para Paletas de Color personalizadas
Puedes limitar la paleta de colores para algunos elementos, puedes usar el siguiente código de definición de colores.
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'strong magenta', 'dominiotema' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => __( 'light grayish magenta', 'dominiotema' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => __( 'very light gray', 'dominiotema' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => __( 'very dark gray', 'dominiotema' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
) );
La sección de paleta de colores quedaría tal como se muestra en la siguiente imagen.
También puedes quitar la opción de seleccionar cualquier otro color con el siguiente código:
add_theme_support( 'disable-custom-colors' );
Al final la paleta de colores quedaría como:
Lógicamente tendrías que igualmente añadir código CSS que use las clases que se han generado al seleccionar algún color de la paleta de colores, por ejemplo para el color con slug strong-magenta, el código CSS quedaría:
.wrap-full .has-strong-magenta-background-color {
background-color: #a156b4;
}
.wrap-full .has-strong-magenta-color {
color: #a156b4;
}
– Soporte para Tamaño de Fuente
Puedes definir tamaños de textos específicos para tu contenido, usando el siguiente código definimos los tamaños small, normal, large y huge.
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'Small', 'dominiotema' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'Normal', 'dominiotema' ),
'size' => 16,
'slug' => 'normal'
),
array(
'name' => __( 'Large', 'dominiotema' ),
'size' => 36,
'slug' => 'large'
),
array(
'name' => __( 'Huge', 'dominiotema' ),
'size' => 50,
'slug' => 'huge'
)
) );
Al final obtendremos los tamaños de fuente tal como se muestra en la siguiente imagen:
También es posible restringir que se pueda definir un tamaño cualquiera
add_theme_support('disable-custom-font-sizes');
Tras deshabilitar el tamaño de texto personalizado desaparecerá la caja de tamaño de texto.
También será necesario agregar el código CSS usando las clases generadas para el tamaño de texto, por ejemplo para el tamaño large:
.wrap-full .has-large-font-size{
font-size:36px;
}
Código final PHP
Todo el código anterior puedes colocarlo en el hook after_setup_theme, por lo tanto el código quedaría de la siguiente forma:
Código final CSS
Al final el código CSS adicional basado en las modificaciones del código PHP será:
Conclusión
Tal como hemos visto, agregando código CSS y PHP puedes hacer que tu theme sea compatible con Gutenberg y de esta manera hacer más sencillo el trabajo de escribir contenido por tus usuarios.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…