• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Adaptar un theme WordPress a Gutenberg
Anuncio banner webservi

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
  • Mostrar subcategorías listado entradasMostrar subcategorías de una categoría en listado de entradas
  • Añadir código de Google Analytics sin plugins en WordPressAñadir código de Google Analytics sin plugins en WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en 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 primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Adaptar un theme WordPress a Gutenberg

Qué debes tener en cuenta para modificar código en WordPress

Añadir una nueva ubicación de menú a un theme WordPress

Empaquetar WordPress con install.php

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad