Si estás creando un sitio web con el tema Genesis Sample, o cualquier otro tema basado en el framework Genesis, puede que necesites crear una página que no tenga el título en la parte superior. Especialmente si la página comienza con imágenes u otro contenido visual.
En teoría se podría eliminar el título de la página en Génesis tema de la muestra de dos maneras:
- Una manera – averiguar la página ID de la página que necesita, y luego ocultar el título usando CSS. Esto haría el trabajo, pero todavía cargaría el título en el fondo, y entonces necesitaría cargar algún CSS adicional. Se puede hacer, pero no es genial.
- Mejor solución – crear una plantilla de página personalizada que no tendrá título de la página en absoluto. Eliminar el elemento es mucho más eficiente que ocultarlo.
Esta vez te voy a mostrar una solución sencilla de cómo crear una plantilla de página personalizada en el tema Genesis Sample, y cómo configurarlo para las páginas que desee en el admin de WordPress. Aquí está nuestro plan:
- crear una plantilla de página personalizada en el tema Genesis Sample
- eliminar el título de la página en esa plantilla de página personalizada
- añadir css para eliminar el espacio en blanco (relleno) entre el encabezado del sitio y el contenido después de eliminar el título de la página (opcional)
Cómo crear una plantilla de página personalizada en el tema Genesis Sample
Por defecto el tema Genesis Sample tiene una plantilla de página personalizada. Se llama Landing, y se encuentra en la carpeta /page-templates.
La plantilla de página Landing se deshace de la cabecera, pie de página, menú y otras partes del diseño por defecto de Génesis, y deja sólo lo mínimo – el contenido de la página. Aquí se muestra el aspecto de la plantilla:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Landing
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_landing_body_class' );
/**
* Adds landing page body class.
*
* @since 1.0.0
*
* @param array $classes Original body classes.
* @return array Modified body classes.
*/
function genesis_sample_landing_body_class( $classes ) {
$classes[] = 'landing-page';
return $classes;
}
// Removes Skip Links.
remove_action( 'genesis_before_header', 'genesis_skip_links', 5 );
add_action( 'wp_enqueue_scripts', 'genesis_sample_dequeue_skip_links' );
/**
* Dequeues Skip Links Script.
*
* @since 1.0.0
*/
function genesis_sample_dequeue_skip_links() {
wp_dequeue_script( 'skip-links' );
}
// Removes site header elements.
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
// Removes navigation.
remove_theme_support( 'genesis-menus' );
// Removes site footer elements.
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
// Runs the Genesis loop.
genesis();Para crear una nueva plantilla de página vamos a duplicar el archivo landing.php, y lo pondremos en el mismo directorio, sólo con un nombre diferente. Por ejemplo – sin_title.php.
La plantilla de la página de aterrizaje elimina muchas partes de la plantilla que necesitamos. Vamos a quitar todo lo que no es necesario de su copia, y dejaremos sólo la parte necesaria. Aquí lo que va a quedar entonces:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
// Runs the Genesis loop.
genesis();Eso es todo lo que necesitamos:
- información básica sobre la plantilla
- nombre de la plantilla. He utilizado Otros, pero usted podría utilizar algo más descriptivo, como Página sin título.
- Llamada de Génesis.
Ahora tenemos la plantilla de página más básica posible para el tema Genesis Sample, o cualquier otro tema basado en Genesis.
Cómo crear una plantilla de página sin título en el tema Genesis Sample
Como ya tenemos una plantilla de página básica, la mitad del trabajo ya está hecho. Ahora necesitamos hacer dos cosas.
En primer lugar – tenemos que eliminar todo el marcado de cabecera de página y todos los demás elementos que puedan estar situados en la cabecera de entrada. Para ser precisos necesitamos añadir este código a la plantilla que construimos previamente:
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );Estamos eliminando el marcado html de la cabecera de la entrada, el título de la entrada, la información adicional de la entrada (fecha, autor, etc.), la imagen destacada (si hay alguna) y las migas de pan (si se muestran en la cabecera de la entrada).
Segundo – necesitamos añadir la clase body a nuestra nueva plantilla en caso de que necesitemos añadir un estilo específico para las páginas que utilicen esta plantilla. Así que podemos utilizar este código:
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}Estamos añadiendo clase adicional sin-título-página. Lo necesitaremos en un momento pero antes de eso mira la plantilla de página final sin título de página:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
genesis();Si guarda esta plantilla en el directorio /page-templates del tema hijo genesis, podrá seleccionar la plantilla de página sin título en el administrador de WordPress. Así:
Una vez que cambiamos la plantilla de página y guardamos los cambios, el título de la página ya no será visible en la página.
Cómo eliminar los espacios en blanco entre el encabezado y el contenido de la página en Génesis
Ahora, después de eliminar el título de la página en el tema de muestra de Génesis, puede notar que hay un espacio bastante grande entre el encabezado de la página y el contenido. Cada post y página tiene este espacio por defecto, y es necesario en la mayoría de los casos. Pero si ha eliminado el título de la página y ahora desea iniciar el contenido de la página con imágenes, es probable que desee deshacerse de esta brecha también.
Para eliminar el espacio en blanco entre el encabezado de la página y el contenido en Génesis, abra el Personalizador en el panel de administración de WordPress, pulse la pestaña CSS adicional a la izquierda e introduzca este código CSS:
.without-title-page .site-inner {
padding-top: 0px;
}Probablemente te hayas dado cuenta de que estamos usando la clase adicional .without-page-title que añadimos antes en la plantilla de página. De esta manera seremos capaces de establecer css sólo para una plantilla específica.
A partir de ahora todas las páginas que utilicen la plantilla de página sin título no tendrán espacio entre la cabecera y el contenido de la página.
