fbpx

Como ativar o suporte para logo no WordPress - Evertec Digital | Blog

Como ativar o suporte para logo no WordPress

Iremos mostrar aqui, como ativar o suporte para adição de logo no Wordpress, com personalização das classes nativas utilizada nesse recurso.

Compartilhe esse conteúdo!

Se você está criando um site gerenciado pelo WordPress, um recurso nativo que tornará o seu site mais profissional é a habilitação do recurso de adição de logo. Esse recurso é exibido nas opções de personalização do site, no seguinte caminho:

Menu –> Aparências -> Personalizar -> Identidade do Site

Uma vez ativado, caso seu cliente ou mesmo você deseje fazer a substituição da logomarca, poderá fazê-lo sem a necessidade de acessar o diretório do seu site.

Para ativar esse recurso, adicione o bloco de código abaixo no final do arquivo functions.php do seu tema:

function ed_custom_logo() {
    add_theme_support('custom-logo'); // gerenciamento de logo
}

add_action('after_setup_theme', 'ed_custom_logo'); // carrega parametros de suporte do tema

Com isso, o suporte a gerenciamento de logo do seu projeto, já estará ativado e sendo exibido no meu do seu painel WordPress.

Para exibir a logo carregada em seu tema WordPress, adicione o bloco de código abaixo, no header do seu projeto:

 <?php
    if (has_custom_logo()):
       the_custom_logo();
    endif;
?>

Ele fará a validação, verificando se existem uma imagem para logomarca salva, adicionando-a da seguinte forma em seu tema:

<a href="[URL_DO_SITE]" class="custom-logo-link" rel="home">
   <img width="564" height="128" src="[URL_DA_IMAGE]" class="custom-logo" alt="[TITULO_DINAMICO_DA_PAGINA_ATUAL]" title="[TITULO_DINAMICO_DA_PAGINA_ATUAL]" />
</a>

Observe que ele adicionou o link com a classe “custom-logo-link” e a imagem com a classe “custom-logo“. Se você estiver utilizando algum framework front-end como o Bootstrap, talvez você queira substituir as classes nativas do WordPress, pelas classes padrões do Bootrap. Você pode adicionar um filtro em seu arquivo functions.php do seu tema que irá substituir tais classes. Para tal, utilize o bloco de código abaixo:

//Muda a classe da logo para padrão bootstrap
function ed_custom_logo_output($html) {
    $html = str_replace('custom-logo-link', 'navbar-brand', $html);
    $html = str_replace('custom-logo', 'img-fluid', $html);
    return $html;
}

add_filter('get_custom_logo', 'ed_custom_logo_output', 10);

Ficou com alguma duvida ou quer sugerir alguma modificação? Deixe nos comentários.

 

 


Compartilhe esse conteúdo!

Conteúdos Relacionados

Veja alguns conteúdos que também podem lhe interessar.

Mais Populares

Veja os nossos conteúdos mais acessados.