bonus new member

https://librolibre.net/

https://lookingforlilith.org/

Cómo crear plantillas de temas de bloques en WordPress 6.0 | trucos CSS

Modelos de bloquestambién llamado a menudo seccionesfueron introducidos en WordPress 5.5 para permitir a los usuarios crear y compartir diseños de bloques predefinidos en directorio con plantillas. El directorio alberga una amplia gama de plantillas seleccionadas diseñadas por la comunidad de WordPress. Estas plantillas están disponibles en un formato simple para copiar y pegar, no requieren conocimientos de codificación y, por lo tanto, ahorran mucho tiempo a los usuarios.

A pesar de muchos artículos sobre modelos, no hay artículos completos y actualizados sobre la creación de plantillas que cubran las funciones mejoradas más recientes. Este artículo tiene como objetivo llenar el vacío con un enfoque en las funciones mejoradas más recientes, como la creación de plantillas sin registro, y ofrece una guía paso a paso actualizada para crearlas y usarlas en temas de bloque para novelas y autores experimentados.

Desde el lanzamiento de WordPress 5.9 y en Veinticinco y dos (TT2) tema por defecto, el uso de modelos de bloques en la difusión de temas de bloques. Yo soy un gran fan de modelos de bloques y los creé y usé en mis temas de bloque.

El nuevo WordPress 6.0 ofertas tres modelos principales incluyen mejoras de autor:

  • Permitir registro de plantilla /patterns carpeta (similar a /parts, /templatesy /styles Registro).
  • Registre plantillas del directorio público con plantillas usando theme.json.
  • Agregue plantillas que se pueden sugerir al usuario al crear una nueva página.

en la introducción Visualización de videos en WordPress 6.0Ann McCathy, enlace de productos de Automattic, destaca algunas características nuevas y mejoradas del modelo (a partir de las 3 p. m.) y analiza los modelos futuros para mejorar los modelos que incluyen modelos como elementos seccionalesproporcionar opciones para seleccionar una plantilla al crear una páginaintegrar la búsqueda en un directorio con plantillas y otros.

suposiciones

El artículo asume que los lectores tienen un conocimiento básico de la interfaz de WordPress Complete Site Editing (FSE) y los temas de bloques. Manual del editor de bloques y Edición completa del sitio. El sitio web proporciona las guías de capacitación más recientes para aprender todas las características del FSE, incluidos los temas y modelos de bloques que se analizan en este artículo.

Sección 1: Desarrollo de enfoques para crear modelos de bloques

El enfoque inicial para crear modelos de bloques requería el uso de una API de modelo de bloques, ya sea como un complemento personalizado o registrado directamente en functions.php archivo de empaquetado de tema de bloque. El WordPress 6.0 lanzado recientemente introdujo varias características nuevas y mejoradas que funcionan con plantillas y temas, incluido el registro de plantillas a través de /patterns carpeta y un modelo modal para crear una página.

Como información general, primero echemos un breve vistazo a cómo ha evolucionado el flujo de trabajo de registro de plantillas desde el uso de la API de plantilla de registro hasta la carga directa sin registro.

Ejemplo de uso 1: veinticinco

Defecto Veintiún temas (TT1) y Tema de bloques TT1 (hermano de TT1) muestra cómo se pueden registrar modelos de bloques en el tema functions.phpEn el tema experimental de TT1 Blocks este single patrón-de-bloque.php archivo que contiene ocho se agregan modelos de bloques a functions.php como include como se muestra aquí.

Modelo de bloque personalizado debe estar registrado usando register_block_pattern función que obtiene dos argumentos - title (nombre de la plantilla) y properties (una matriz que describe las propiedades de la plantilla).

Este es un ejemplo de cómo registrar un modelo de párrafo "Hola Mundo" simple de este Artículo temático:

register_block_pattern(
    'my-plugin/hello-world',
    array(
        'title'   => __( 'Hello World', 'my-plugin' ),
        'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->",
    )
);

Después del registro, register_block_pattern() la función debe ser llamada por un manipulador adjunto a init gancho como se describe aquí.

 function my_plugin_register_my_patterns() {
    register_block_pattern( ... );
  }

  add_action( 'init', 'my_plugin_register_my_patterns' );

Una vez que las plantillas de bloque están registradas, son visibles en el editor de bloques. Puede encontrar documentación más detallada en este Registro de modelo de bloque.

Propiedades del modelo de bloques

Además de lo obligatorio title y content propiedades, en manual del editor de bloques enumera lo siguiente opcionalmente propiedades del modelo:

  • title (obligatorio): Título legible para la plantilla.
  • content (obligatorio): bloquee el marcado HTML para la plantilla.
  • description (opcionalmente): texto visualmente oculto que se usa para describir la plantilla en la herramienta de inserción. La descripción es opcional, pero muy recomendable cuando el título no describe completamente lo que hace el modelo. La descripción ayudará a los usuarios a encontrar el modelo durante la búsqueda.
  • categories (opcionalmente): Una matriz de categorías de plantillas registradas que se utilizan para agrupar modelos de bloques. Los modelos de bloques se pueden mostrar en muchas categorías. Una categoría debe registrarse por separado para ser utilizada aquí.
  • keywords (después elección): una serie de alias o palabras clave que ayudan a los usuarios a encontrar el modelo durante la búsqueda.
  • viewportWidth (opcionalmente): un número entero que indica el ancho previsto de la plantilla para permitir una vista a escala de la plantilla en la herramienta de inserción.
  • blockTypes (opcionalmente): una matriz de tipos de bloques con los que se pretende utilizar la plantilla. Cada valor debe ser un bloque declarado name.
  • inserter (opcionalmente): De forma predeterminada, todas las plantillas se mostrarán en la herramienta de inserción. Para ocultar una plantilla para que solo se pueda insertar mediante programación, configure inserter a false.

A continuación se muestra un ejemplo de fragmentos de código del complemento de plantilla de citas tomado de Blog de WordPress.

/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
    'my-plugin/my-quote-pattern',
     array(
      'title'       => __( 'Quote with Avatar', 'my-plugin' ),
      'categories'  => array( 'text' ),
      'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
      'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
      )
);

Usar plantillas en un archivo de plantilla

Una vez que se crean las plantillas, se pueden usar en un archivo de plantilla de tema con las siguientes marcas de bloque:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Ejemplo de este repositorio de GitHub indica el uso de "footer-with-background"patrón de arado con"tt2gopher”Prefijo en el tema del bloque TT2 Gopher.

Artículo Recomendado:  Soporte para múltiples marcos en Monorepo

Los primeros usuarios de los temas de bloques y el complemento de Gutenberg también aprovecharon los modelos en los temas clásicos. Defecto Veinte Veinte y mis temas favoritos de Eksell (un sitio de demostración aquí) son buenos ejemplos que muestran cómo se pueden agregar modelos a temas clásicos.

Ejemplo de uso 2: veintidós veintidós

Si un tema incluye solo unas pocas plantillas, el desarrollo y el mantenimiento son bastante manejables. Sin embargo, si un tema de bloque incluye muchas plantillas, como en el tema TT2, entonces pattern.php el archivo se vuelve muy grande y difícil de leer. El tema predeterminado es TT2, que está empaquetado más de 60 modelosmuestra un flujo de trabajo de registro de plantilla refactorizado estructura que es más fácil de leer y mantener.

Tomando ejemplos del tema de TT2, analicemos brevemente cómo funciona este flujo de trabajo simplificado.

2.1: Registro de categorías de modelos

Para fines de demostración, creé un tema TT2 para niños y lo configuré en mi sitio de prueba local con un poco de contenido ficticio. Después de TT2 me registré footer-with-background y agregado a la siguiente lista de categorías de plantillas en su block-patterns.php expediente.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() {
	$block_pattern_categories = array(
		'footer'   => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ),
		'header'   => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ),
		'pages'    => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ),
                // ...
	);

	/**
	 * Filters the theme block pattern categories.
	 */
	$block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories );

	foreach ( $block_pattern_categories as $name => $properties ) {
		if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
			register_block_pattern_category( $name, $properties );
		}
	}

	$block_patterns = array(
		'footer-default',
		'footer-dark',
		'footer-with-background',
		//...
		'header-default',
		'header-large-dark',
		'header-small-dark',
		'hidden-404',
		'hidden-bird',
		//...
	);

	/**
	 * Filters the theme block patterns.
	 */
	$block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns );

	foreach ( $block_patterns as $block_pattern ) {
		$pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' );

		register_block_pattern(
			'twentytwentytwo/' . $block_pattern,
			require $pattern_file
		);
	}
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

En este ejemplo de código, cada modelo enumerado en $block_patterns = array() es llamado por foreach() función que requireen patterns directorio con el nombre de plantilla especificado en la matriz, que agregaremos en el siguiente paso.

2.2: Agregar un archivo de plantilla a /inc/patterns carpeta

Entonces necesitamos tener todos los archivos de plantilla enumerados en $block_patterns = array()Aquí hay un ejemplo de uno de los archivos de plantilla. footer-with-background.php:

/**
 * Dark footer wtih title and citation
 */
return array(
	'title'      => __( 'Footer with background', 'twentytwentytwo' ),
	'categories' => array( 'footer' ),
	'blockTypes' => array( 'core/template-part/footer' ),
  'content'    => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} -->
      <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} -->
      <p class="has-text-align-center">' .
      sprintf(
        /* Translators: WordPress link. */
        esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
        '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.'
      ) . '</p>
      <!-- /wp:paragraph --></div>
          <!-- /wp:group -->',
);

Vamos a referirnos al modelo en footer.html parte de la plantilla:

<!-- wp:template-part {"slug":"footer"} /-->

Esto es similar a agregar partes para un encabezado o pie de página a un archivo de plantilla.

Los modelos se pueden agregar de manera similar a parts/footer.html plantilla modificándola para hacer referencia a slug del archivo de plantilla de tema (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Ahora, si visitamos la herramienta Insertar plantilla del Editor de bloques, Footer with background debe estar disponible para nuestro uso:

Captura de pantalla de la plantilla de pie de página con fondo.

La siguiente captura de pantalla muestra el pie de página recién creado con un patrón de fondo en la parte delantera.

Captura de pantalla del pie de página como se muestra en el sitio.

Ahora que las plantillas se han convertido en una parte integral del tema de bloques, se incluyen muchos modelos en el paquete de temas de bloques: me gusta Cuadrado, Guardería, Meyland, zoólogo, geólogo - siguiendo el flujo de trabajo discutido anteriormente. Aquí hay un ejemplo del tema Quadrat /inc/patterns carpeta con un registro de bloques archivo y lista de archivos con una fuente de contenido y un título de plantilla obligatorio dentro de return array() función.

Sección 2: Creación y carga de plantillas sin registro

Tenga en cuenta que esta función requiere la instalación de WordPress 6.0 o el complemento Gutenberg 13.0 o posterior en su sitio.

Este nueva característica de WordPress 6.0 permite el registro de plantillas a través de archivos y carpetas estándar - /patternsque lleva convenciones similares a /parts, /templatesy /styles.

El proceso como también se describe en esta taberna WP artículo incluye los siguientes tres pasos:

  • crear una carpeta de plantilla en la raíz del tema
  • agregue un encabezado de plantilla de estilo complemento
  • contenido fuente de la plantilla

A continuación se muestra un etiquetado de encabezado de plantilla típico tomado del artículo:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Solo como se describe en la sección anterior Title y Slug los campos son obligatorios y otros campos son opcionales.

Artículo Recomendado:  Netlify tiene funciones programadas trucos CSS

Usando ejemplos de temas publicados recientemente, reestructuré el registro de una plantilla este TT2 Gopher Bloques tema de demostración preparado para un artículo anterior sobre trucos de CSS.

En los siguientes pasos, exploremos cómo un footer-with-background.php modelo registrado con PHP y se usa en un footer.html la plantilla ha sido rediseñada.

2.1: Creando un /patterns carpeta en la base del tema

El primer paso es crear un /patterns carpeta en la raíz del tema TT2 Gopher y mueva footer-with-background.php archivo de plantilla para /patterns carpeta y refactorización.

2.2: Agregar datos de plantilla al encabezado del archivo

Luego cree los siguientes campos de registro para el encabezado de la plantilla.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

El archivo de plantilla tiene un campo de título superior escrito como comentarios de PHP, seguido de bloquear contenido escrito en formato HTML.

2.3: Agregar contenido de plantilla al archivo

Para la sección de contenido, copiemos los fragmentos de código dentro comillas simples (p.ej. '...') de la sección de contenido de footer-with-background y reemplazar <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} -->
    <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p>
    <!-- /wp:paragraph --></div>
<!-- /wp:group -->

El fragmento de código completo de patterns/footer-with-background.php se puede ver el archivo aquí en GitHub.

Por favor, tenga en cuenta que /inc/patterns y block-patterns.php son extrasno se requiere en WordPress 6.0 y se incluye solo con fines de demostración.

2.4: Consulte las plantillas en la plantilla

Agregue lo anterior refactorizado footer-with-background.php modelo para footer.html la plantilla es exactamente igual a la descrita en la sección anterior (Sección 1, 2.2).

Ahora, si miramos el pie de página del sitio en un editor de bloques o la parte frontal de nuestro sitio en un navegador, se muestra la sección de pie de página.

Categorías y tipos de plantillas Registro (opcional)

Para categorizar modelos de bloques, las categorías y tipos de plantillas deben estar registradas en el tema functions.php expediente.

Veamos un ejemplo de registro de categorías de modelo de bloque del tema TT2 Gopher.

Después del registro, las plantillas se muestran en la herramienta de inserción de plantillas junto con las principales plantillas predeterminadas. Para agregar etiquetas específicas de categoría a la herramienta de inserción de plantillas, debemos cambiar los fragmentos anteriores agregando un espacio de nombres de temas:

/**
* Registers block categories, and type.
*/

function tt2gopher_register_block_pattern_categories() {

$block_pattern_categories = array(
  'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ),
  'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ),
  'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ),
  // ...
);

/**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories );

foreach ( $block_pattern_categories as $name => $properties ) {
  if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
    register_block_pattern_category( $name, $properties );
  }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

EN footer-with-background el modelo es visible en las plantillas insertadas con su vista previa (si se selecciona):

Captura de pantalla que muestra la categoría de plantilla que se muestra en la herramienta de inserción de plantillas (panel izquierdo) y la plantilla de pie de página predeterminada correspondiente que se muestra en el editor (panel derecho).

Este proceso simplifica enormemente la creación y visualización de modelos de bloques en temas de bloques. Está disponible en WordPress 6.0 sin usar el complemento de Gutenberg.

Ejemplos de temas sin registro registro

Los primeros usuarios ya comenzaron a usar esta característica en sus temas de bloque. Algunos ejemplos de temas que están disponibles en directorio con temasque los modelos de carga sin registro se enumeran a continuación:

Sección 3: Crear y usar plantillas de código bajo

EN directorio oficial con plantillas contiene diseños creativos importados por la comunidad que se pueden copiar y personalizar para crear contenido ¡Usar plantillas con un editor de bloques nunca ha sido tan fácil!

Todas las plantillas del directorio en constante crecimiento también se pueden agregar a temas bloqueados simplemente "copiando y pegando" o incluyéndolos en theme.json archivo haciendo referencia a su directorio modelo de aradoLuego revisaré brevemente la facilidad con la que se puede lograr esto con una codificación muy limitada.

Agregue y personalice plantillas desde el directorio de plantillas

3.1: Copiar una plantilla de un directorio a una página

Aquí, uso este modelo de pie de página de FirstWebGeek del directorio de plantillas. Copie la plantilla seleccionando el botón "Copiar plantilla" y péguela directamente en una página nueva.

3.2: Realice la personalización deseadas

Solo hice algunos cambios en el color de la fuente y el fondo de los botones. Luego copié todo el código de editor de código al portapapeles.

Captura de pantalla que muestra un modelo modificado (panel izquierdo) y el código correspondiente en el editor de código (panel derecho)

Si no está familiarizado con el uso del editor de código, vaya a las opciones (con tres puntos, arriba a la derecha), haga clic en el botón Editor de código y copie todo el código desde aquí.

3.3: Crear un nuevo archivo en la carpeta /patrones

Primero, vamos a crear uno nuevo /patterns/footer-pattern-test.php archivo y agregue la sección de encabezado de pestaña requerida. Luego pegue el código completo (paso 3, arriba). La plantilla está categorizada en el área de pie de página (filas: 5), podemos ver las nuevas incorporaciones en la herramienta de inserción de plantillas.

<?php
 /**
 * Title: Footer pattern from patterns library
 * Slug: tt2gopher/footer-pattern-test
 * Categories: tt2gopher-footer
 * Viewport Width: 1280
 * Block Types: core/template-part/footer
 * Inserter: yes
 */
?>

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">[email protected]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Ver la nueva plantilla en el dispositivo de inserción

Para ver los recién agregados Footer pattern from patterns library plantilla, vaya a cualquier publicación o página y seleccione el icono de inserción (signo más azul, arriba a la izquierda) y luego seleccione las categorías "TT2 Gopher - Pie de página". La plantilla recién agregada se muestra en el panel izquierdo, junto con otros modelos de pie de página y su visualización a la derecha (si se selecciona):

Artículo Recomendado:  borde-imagen-fuente | Trucos CSS - Trucos CSS
Captura de pantalla que muestra nuevos modelo de pie de página (panel izquierdo) y su descripción general (panel derecho).

Registre plantillas directamente en theme.json expediente

En WordPress 6.0 es posible registrar cualquier plantilla deseada desde el directorio de plantillas theme.json archivo con la siguiente sintaxis Notas del desarrollador 6.0"El campo de plantilla es una matriz de [pattern slugs] del directorio de plantillas. Los modelos pueden derivarse de [URL] en la vista de plantilla única en el directorio de plantillas ".

{
    "version": 2,
    "patterns": ["short-text", "patterns-slug"]
}

Este video corto con características de WordPress 6.0 muestra cómo registrar modelos en /patterns (a las 3:53) y registre las plantillas deseadas por el director de plantillas en una theme.json archivo (a las 3:13).

La plantilla registrada está disponible en el cuadro de búsqueda de inserción de plantilla, que luego está disponible para su uso como una biblioteca de plantillas repletas de temas.

{
  "version": 2,
  "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

En este ejemplo, el modelo de arado footer-section-design-with-3-column-description-social-media-contact-and-newsletter de un ejemplo anterior está registrado a través de theme.json.

Modelo a modelo para crear una página.

Como parte de "construcción de patrones”Iniciativas, WordPress 6.0 ofrece una opción de modelo modal autores de temas para agregar modelos de diseño de página a un tema de bloque, lo que permite a los usuarios del sitio elegir modelos de diseño de página (por ejemplo, página de información, página de contacto, página de equipo, etc.), mientras crean una página. El siguiente es un ejemplo tomado de nota del desarrollador:

register_block_pattern(
    'my-plugin/about-page',
    array(
        'title'      => __( 'About page', 'my-plugin' ),
        'blockTypes' => array( 'core/post-content' ),
        'content'    => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
        <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p>
        <!-- /wp:paragraph -->',
    )
);

Esta característica está actualmente limitado al tipo de publicación de página solo, no para "Tipo de publicación de publicaciones", todavía.

EN modelo modal para crear una página también se puede desactivar por completo eliminando el tipo de bloque después del contenido de todas las plantillas. Ejemplo de código de muestra está disponible aquí.

Puede seguir y participar en la discusión de GitHub desde los enlaces enumerados en la sección Recursos a continuación.

Use un directorio con plantillas para construir una página

Las plantillas de directorio también se pueden usar para crear la publicación o el diseño de página deseados, de forma similar a los creadores de páginas. GutenbergHub el equipo ha creado aplicación experimental para crear páginas en línea utilizando plantillas directamente desde el directorio (vídeo introductorio). Los códigos de la aplicación se pueden copiar y pegar en un sitio, lo que simplifica enormemente la construcción de un proceso de diseño de página complejo sin codificación.

EN este video cortoJamie Marsland demuestra (a la 1:30) cómo se puede usar la aplicación para crear un diseño de página completo, similar a un creador de páginas, usando las secciones deseadas de la página del directorio.

resumiendo

Las plantillas permiten a los usuarios recrear su diseño de contenido de uso frecuente (por ejemplo, página de inicio, llamada, etc.) en cada página y reducen las barreras para presentar el contenido en estilos que antes no eran posibles sin conocimientos de codificación. complementos y temas directorios, lo nuevo modelos el directorio ofrece a los usuarios opciones para usar una amplia gama de plantillas de su elección del directorio de plantillas y para escribir y mostrar contenido con estilo.

En realidad, los modelos de bloques lo cambiarán todo y ciertamente este es un cambia el juego característica en el paisaje del tema de WordPress. Cuando todo el potencial de construcción de patrones si el esfuerzo está disponible, cambiará la forma en que diseñamos temas de bloques y crearemos contenido hermoso incluso con poco conocimiento de código. Para muchos diseñadores creativos, el directorio de plantillas también puede proporcionar una forma adecuada de presentar sus propias creatividad.

Recursos

WordPress 6.0

Creación de plantillas

Mejora del modelo (GitHub)

Artículos de blog

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir