• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Adaptar un theme WordPress a Gutenberg

Adaptar un theme WordPress a Gutenberg

Adaptar un theme WordPress a Gutenberg

[ 30 enero 2019 ] [ Actualizado: 11 junio 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

css funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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

Una forma más simple de agregar ancho ampliado y ancho completo a un theme lo puedes encontrar en el artículo: Ancho Ampliado y Ancho Completo en Gutenberg

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;
	}
}
Tal como ves el código CSS anterior esta basado en la clase wrap-full que esta definida en el archivo de plantilla de página.

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.

Seleccion de plantilla de página

 

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:

Activación de soporte amplio y completo de bloques

 
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.

Restricción de paleta para mostrar sólo algunos colores

 
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:

Quitar selector de colore de paleta de colores

 
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:

Tamaños de texto personalizados

 
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.

Deshabilitar tamaño de texto personalizado

 
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:

Puedes agregar este código al final de tu archivo functions.php de tu child-theme

 

Código final CSS

Al final el código CSS adicional basado en las modificaciones del código PHP será:

El código CSS usa wrap-full, sin embargo puedes cambiar esta clase contenedora de acuerdo a tus necesidades. Puedes agregar este código al final de tu archivo style.css de tu child-theme

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Ancho Ampliado y Ancho Completo en GutenbergAncho Ampliado y Ancho Completo en Gutenberg
  • Widget sidebar al inicio en móvilesMostrar widget lateral al inicio en móviles
  • Formulario de contacto con Ajax en WordPressFormulario de contacto con Ajax en WordPress
  • Cambiando la estructura de menú de WordPressCambiando la estructura de menú de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Subir archivos en WordPress usando Ajax

Leer datos desde una API externa en WordPress

Agregar Google Fonts en WordPress sin usar plugins

Metadata de imágenes en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados