O WordPress 4.5 já está aí, e consigo surge uma série de novas funcionalidades que irão facilitar a vida de seus usuários. Dentre estas, uma chama a atenção. Geralmente presente em temas premium, a possibilidade de inserir logos passa a ser um item nativo do WordPress 4.5. Agora já não é mais necessário desenvolver uma funcionalidade ou instalar um plugin para esta ação. Acompanhe abaixo como será realizada esta nova implementação e também as suas funcionalidades.
How To
O primeiro passo é adicionarmos o suporte ao nosso site WordPress, para isto, basta adicionar em seu functions.php o seguinte código:
function theme_prefix_setup() {
add_theme_support( ‘custom-logo’ );
}
add_action( ‘after_setup_theme’, ‘theme_prefix_setup’ );
Afim de se ter uma maior flexibilidade na implementação das logos, a nova funcionalidade aceita 5 parâmetros, adicionados em argumentos de array.
height – altura da logo em pixels.
width – largura da logo em pixels.
flex-height – altura flexível.
flex-width – largura flexível.
header-text – classe de elementos a serem substituídos pelas logos.
Confira uma implementação contendo os parâmetros mencionados:
function theme_prefix_setup() {
add_theme_support( ‘custom-logo’, array(
‘height’ => 300,
‘width’ => 300,
‘flex-height’ => false,
‘flex-width’ => true,
‘header-text’ => array( ‘site-title’, ‘site-description’ ),
) );
}
add_action( ‘after_setup_theme’, ‘theme_prefix_setup’ );
Após a implementação, uma nova classe ‘wp-custom-logo’ surgirá no <body>, esta poderá servir para futuras estilizações.
Let’s use the Logos!
Para gerenciarmos a exibição da logo personalizada no front-end, 3 novos template tags foram criados:
get_custom_logo();
Retorna as marcações das logos personalizadas.
the_custom_logo();
Exibe as marcações das logos personalizadas.
has_custom_logo();
Verifica se as logos personalizadas foram setados ou não (boolean true/false).
Important!
Afim de se evitar conflitos com versões antigas do WordPress, uma boa prática é primeiro verificarmos primeiro se a função existe em nosso WordPress. Para isso basta utilizar a seguinte verificação:
if ( function_exists( ‘the_custom_logo’ ) ) {
the_custom_logo();
}