Home » Genesis framework » Como criar modelo de página sem título de página em Gênesis Sample de tema

Como criar modelo de página sem título de página em Gênesis Sample de tema

Se você estiver construindo um site usando o tema Gênesis Sample, ou qualquer outro tema baseado em Gênesis, você pode precisar criar uma página que não terá o título da página no topo da mesma. Especialmente se a página começar com imagens ou outro conteúdo visual.

Em teoria, você poderia remover o título da página no tema Gênesis Sample de duas maneiras:

  1. Uma maneira – descubra o ID da página da página que você precisa e depois esconda o título usando CSS. Ele faria o trabalho, mas ainda carregaria o título em segundo plano, e então precisaria carregar algum CSS adicional. Fazível, mas não ótimo.
  2. Melhor solução – crie um modelo de página personalizado que não terá título de página de forma alguma. Eliminar o elemento é muito mais eficiente do que escondê-lo.

Desta vez vou mostrar uma solução simples como criar um modelo de página personalizado no tema Genesis Sample, e como configurá-lo para as páginas que você deseja no WordPress admin. Aqui está nosso plano:

Como criar um modelo de página personalizado no tema Gênesis Exemplo

Por padrão, o tema Genesis Sample tem um modelo de página personalizado. É chamado Landing, e está localizado na pasta /page-templates.

O modelo de página de aterrissagem se livra do cabeçalho, rodapé, menu e outras partes do layout padrão do Gênesis, e deixa apenas o mínimo – conteúdo da página. Aqui, como se parece o modelo:

<?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 criar um novo modelo de página vamos duplicar o arquivo landing.php, e vamos colocá-lo no mesmo diretório, apenas com um nome diferente. Por exemplo – sem_title.php.

O modelo de página de aterrissagem remove muitas partes do modelo que precisamos. Tiramos tudo o que não é necessário de sua cópia, e deixamos apenas a parte necessária. Aqui está o que vai sobrar então:

<?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();

Isso é tudo o que precisamos:

  • informações básicas sobre o modelo
  • nome do modelo. Eu usei Outro, mas você pode usar algo mais descritivo, como Página sem título.
  • Chamada de Gênesis.

Agora temos o modelo de página mais básico possível para o tema Gênesis Sample, ou qualquer outro tema baseado em Gênesis.

Como criar modelo de página sem título no tema Gênesis Sample

Como já temos um modelo básico de página, a metade do trabalho já está feita. Vamos precisar de duas coisas para fazer agora.

Primeiro – precisamos realmente remover toda a marcação do cabeçalho da página e todos os outros elementos que possam estar localizados no cabeçalho de entrada. Para sermos precisos, precisamos adicionar este código ao modelo que construímos anteriormente:

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' );

Best WordPress hosting 2024

Estamos removendo a marcação html do cabeçalho de entrada, título do post, informações adicionais do post (data, autor, etc.), imagem em destaque (se houver), e pão ralado (se eles forem mostrados no cabeçalho de entrada).

Segundo – precisamos adicionar classe corporal ao nosso novo modelo no caso de precisarmos adicionar um estilo específico para páginas usando este modelo. Portanto, podemos usar 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 adicionando uma classe adicional sem legenda-página. Precisaremos dele apenas em um momento, mas antes disso, olhar para o modelo final da página sem o título da 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();

Basicamente trabalho feito – se você salvar este modelo no diretório genesis child theme’s /page-templates, você será capaz de selecionar o modelo de página sem título no WordPress admin. Assim:

how to change page template in wordpress and genesis themes

Assim que mudarmos o modelo de página e salvarmos as mudanças, o título da página não será mais visível na página.

genesis remove title from page

Como remover espaços em branco entre o cabeçalho e o conteúdo da página em Gênesis

Agora, após removermos o título da página no tema Gênesis Sample, você pode notar que há uma grande lacuna entre o cabeçalho e o conteúdo da página. Cada post e página tem esta lacuna por padrão, e é necessária na maioria dos casos. Mas se você removeu o título da página e agora você quer começar o conteúdo da página com imagens, você provavelmente quer se livrar desta lacuna também.

Para remover espaços em branco entre o cabeçalho da página e o conteúdo no Genesis abra o Customizer no painel de administração do WordPress, pressione a aba CSS adicional à esquerda e digite este código css:

.without-title-page .site-inner {
	padding-top: 0px;
}

Você provavelmente notou que estamos usando aquela classe adicional .without-page-title que adicionamos no modelo de página antes. Desta forma, poderemos definir o css apenas para um modelo específico.

remove whitespace between header and page content in genesis sample theme

De agora em diante, todas as páginas que usam o modelo de página sem título não terão espaço entre o cabeçalho e o conteúdo da página.

Fathom analytics