Como inserir o Logo em um template WordPress
Publicado em 1 de outubro de 2019
Possibilitar customizações por parte do usuário é essencial, a maioria das pessoas que irão utilizar o seu template não sabem programação e quanto mais mastigado melhor. Fazer dessa forma, além de pensar no próximo, você não será chamado toda hora por algo que o próprio cliente poderia ter feito de forma fácil.
O WordPress possui alguns recursos nativos para criarmos algumas personalizações, mas devemos adicionar suporte ao tema lá no arquivo functions.php do seu tema. Segue alguns exemplos:
//Fução de administração do tema
function wpgeral_config(){
// Registrar nossos menus
register_nav_menus(
array(
'my_main_menu' => 'Main Menu'
)
);
//Adicionando suporte ao tema
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support( 'custom-logo', array(
'height' => auto,
'width' => auto,
'flex-height' => true,
'flex-width' => true,
) );
}
add_action ('after_setup_theme', 'wpgeral_config', 0);No exemplo acima, inseri o custom-logo junto com o registro do menu, ambos são chamados no hook after_setup_theme.
O print abaixo mostra o local onde a mágica irá funcionar:
No Personalizar, dentro de Aparência no painel administrativo do WordPress, depois clique em Identidade do site.
Para o logo aparecer no site, insira o seguinte código no seu header:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<section class="menu-area">
<div class="container-fluid">
<div id="top" class="row align-items-center">
<div class="col-md-5" align="center">
<?php
if ( has_custom_logo() ) : ?>
<div class="site-logo"><?php the_custom_logo(); ?></div>
<?php
else:
$blog_info = get_bloginfo( 'name' );
if ( ! empty( $blog_info ) ) :
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif;
endif;
endif;?>
</div>
<div class="col-md-7" align="center">
<nav class="menu">
<?php
wp_nav_menu(
array(
'theme_location' => 'my_main_menu'
)
);
?>
</nav>
</div>
</div>
</div>
</section>
</header>Inseri mais códigos que o necessário para o melhor entendimento, qualquer dúvida é só deixar nos comentários. 😉
Categoria: WordPress