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:
- 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.
- 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:
- criar um modelo de página personalizado no tema Gênesis Sample
- remover o título da página nesse modelo de página personalizado
- adicionar css para remover espaço em branco (estofamento) entre o cabeçalho do site e o conteúdo após a remoção do título da página (opcional)
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' );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:
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.
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.
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.
