Home » Genesis framework » Cómo crear una plantilla de página sin el título de la página en el tema Genesis Sample

Cómo crear una plantilla de página sin el título de la página en el tema Genesis Sample

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:

  1. 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.
  2. 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:

Cómo crear una plantilla de página personalizada en el tema Genesis Sample

Best WordPress hosting 2024

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í:

how to change page template in wordpress and genesis themes

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.

genesis remove title from page

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.

remove whitespace between header and page content in genesis sample theme

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.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK