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

Como inserir o Logo em um template WordPress

Deixe um comentário! Cancelar resposta