Como mudar o logotipo de texto no tema WP Premium para uma imagem e torná-la clicável?

Se este artigo lhe ajudar, por favor, considere em retribuir também. Obrigado.

Para quem usa o tema gratuito WP Premium desenvolvido por R.Bhavesh, aqui vai uma dica de como mudar o logotipo em forma de texto por imagem e torná-la clicável.

Na pasta wp-content/themes/wp_premium (ou free_wp_premium) existe um arquivo chamado header.php. Abra o arquivo header.php no seu editor de PHP de sua preferência e se não houve nenhuma alteração em seu código ainda, provavelmente na linha 26 você encontrará o código original abaixo:

26
27
28
<div id="header-in">
       <p class="title"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
       <p class="description"><?php bloginfo('description'); ?></p>

Agora substitua todo o código mostrado acima por este código mostrado abaixo, mas ainda necessitará mudanças:

26
27
28
29
<div id="header-in">
       <p class="title"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
       <p class="description"><?php bloginfo('description'); ?></p>
       <a href="http://yoursite.com/address_to_send_when_clicking_on_logo.php"><img src="http://yoursite.com/wp-content/themes/wp_premium/images/yourlogotype.gif" alt="text to shown at tiptool when mousing over the logo" /></a></div>

Na linha 29 substitua o que está entre aspas em href= pelo endereço com http:// que você deseja que o visitante seja enviado ao clicar em seu logotipo. Ainda nesta linha, substitua o que está entre aspas em src= pelo endereço com http:// para indicar onde está a imagem de seu logotipo em seu servidor. Continuando na mesma linha, substitua o que está entre aspas em alt= pelo texto que desejar mostrar quando o visitante para o mouse sobre seu logotipo (caixa de dica – tiptool).

Salve o arquivo header.php mudado e o logo.gif criado e os envie para seu servidor.

O tamanho do gif para seu logotipo pode ocupar 627px x 95px, não que seja obrigatório este tamanho. Ah, não esqueça que a imagem vai usar as linhas inferiores e superiores para acompanhar o tema, então utilize o arquivo original headerbg_red.gif, caso esteja usando o tema vermelho (red) para referência destas linhas.

Agora necessitamos esconder o título e a descrição anterior que estavam em formato de texto, mas vamos deixar o código para permitir que sites de busca o reconheçam. Agora na mesma pasta que trabalhamos com o header.php, agora vamos editar o arquivo style.css. Abra o arquivo style.php no seu editor de PHP de sua preferência e se não houve nenhuma alteração em seu código ainda, provavelmente os códigos estarão nas linhas 361, 365 e 373 e adicione logo após a abertura das chaves, o comando display:none como mostrado abaixo. Não esqueça de adicionar ponto e vírgula e um espaço:

361
362
363
364
365
366
367
368
369
370
371
372
373
#header-in .title { display:none; margin:0px; padding:15px 10px 5px 10px; width:590px; float:left; }
 
 
 
#header-in .title a { display:none; text-decoration:none; font-family:tahoma; font-size:33px; font-weight:normal; margin:0px; padding:0px; }
 
 
 
 
 
 
 
#header-in .description { display:none; clear:both; font-family:Arial, Helvetica, Sans-Serif; font-size:12px; font-weight:bold; margin:0px; padding:0px 10px 4px 15px; width:850px; }

Pronto, agora basta salvar o arquivo style.css e está feito.

Boa sorte na alteração.

Se algo aqui no iLucato foi útil para você, considere em retribuir das seguintes formas:1 - Contribua aqui com o montante que achar justo pela ajuda recebida e me empolgue a criar novos videos e artigos; 2 - Compre Equipamentos e Acessórios para Fotografia e outros com Lucato ML no MercadoLivre. São mais de 12 anos no MercadoLivre e 100% de reputação positiva. Obrigado antecipadamente.


Arquivdo sob: Temas

Tags:



Minhas imagens mais recentes no Dreamstime.







RSSComentários (2)

Deixe um comentário | Trackback URL

  1. -Mors-Aggregator- BRAZIL Mozilla Firefox Windows says:

    Lucato, a solução que você apresentou aqui parece rápida e fácil; NO ENTANTO, não é recomendável.
    Substituir o texto de título de um blog por uma imagem o torna invisível em mecanismos de busca, como o Google, uma vez que o título, geralmente definido por uma tag de cabeçalho, como ou , às quais geralmente estão atribuídos metadados – principal fonte de informação dos mecanismos de busca sobre as páginas que eles incorporam – é o primeiro item que os sites de busca procuram para reconhecer uma página.

    Existe uma forma de tornar o título em texto invisível e, desta forma, sobrepor uma imagem, mantendo o texto no código e assim permitindo que sites de busca o reconheçam. É muito simples: basta encontrar, na folha de estilos CSS, a parte onde está localizado o título do blog. Aí é só inserir, no final da classe ou do id, o seguinte comando:

    display:none

    • Oi Mors. Realmente se o usuário não utilizar nenhum plug-in SEO isto pode ocorrer. Muito obrigado por alertar me. Já fiz a aleração necessária no artigo acima adicionando sua dica para alterar a folha de estilo e manter o código do título e descrição no arquivo php. Muito obligado pela participação.
      Um grande abraço e bom fim de semana.

Deixe um comentário

me avise ao postarem uma resposta.