Curso de criação de blogs com WordPress – Aula 06

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Olá, sejam bem vindos á mais uma aula do curso de criação de blogs com WordPress. Nesta aula iniciamos o processo de personalização do nosso blog, mais precisamente pelo topo do mesmo no qual iremos inserir uma logomarca e um formulário de pesquisa.

Iremos também mudar a forma como é inserida a imagem de fundo do cabeçalho, para que a mesma continue sendo dinâmica e podendo ser alterada pelo painel de controle do blog, mas seja usada como fundo e não mais como imagem principal do topo.

Agora é hora de criar uma logomarca para seu blog se você ainda não tem uma, criar um fundo para o topo e estilizar de acordo com suas necessidades. A estilização é um processo que leva tempo e que com certeza não se termina de um dia para outro, portanto, após assistir esta aula você terá a estrutura do topo do blog pronta, mas aconselho você a raciocinar um pouco sobre a aparência que o mesmo vai ter e iniciar o processo de criação dos gráficos que serão usados (imagens, ícones, etc).

Vamos trabalhar durante o curso com o próprio tema padrão do WordPress e iremos personalizar ele conforme nosso gosto, porém ao final do curso podemos escolher um outro tema para trabalhar e personalizar, conforme as opiniões que formos recebendo com o passar das aulas.

Esta aula ficou um pouco demorada e cansativa, portanto pegue um café ou suco e boa aula. Depois de estudar, não esqueça de praticar e deixar seu comentário contando o que você achou desta aula.

Site de referência das funções: http://codex.wordpress.org

<!-- faz menu principal em dropdow e com nvel 2 -->
<div class="menu">
 <ul>
 <li><a href="<?php echo get_option('home');?>">Home</a></li>
 <?php wp_list_categories('hide_empty=0&title_li=&depth=2'); ?>
 <?php wp_list_pages('title_li=') ?>
 </ul>
</div> <!-- menu -->

<!-- form de busca para o header -->
<div id="header_search">
 <form role="search" method="get" id="searchform" action="<?php echo get_option('home');?>" >
 <input type="text" value="Fazer uma busca" name="s" id="s" onfocus="if(this.value=='Fazer uma busca')this.value=''" onblur="if(this.value=='')this.value='Fazer uma busca'" />
 <input type="submit" id="searchsubmit" value="OK" />
 </form>
</div><!--header search-->

<!-- coloca um logo no topo -->
<div id="header_logo">
 <a href="<?php echo get_option('home');?>"><img src="<?php bloginfo('template_directory');?>/images/logo.png" alt="" border="0" /></a>
</div><!--header logo-->

Mais posts desta série

Este post faz parte de uma série, confira tudo que já foi publicado sobre o mesmo assunto.

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 31 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Élison Ocampos comentou em

    Cara, suas aulas são ótimas, mais eu pesquisando achei vídeo aulas no youtube que mostram maneiras de fazer esse menu dropdown de um jeito bem mais simples, sem precisar tirar e colocar novos códigos. Será que você não deveria atualizar algumas vídeo aulas mais antigas?

    Responder
  • Mayquel comentou em

    Ricardo tudo bem?
    quando edito o meu tema e ativo ele, aparece que o tema está quebrado e pede para eu voltar o tema padrão.
    Posso ter problemas no futuro por causa disso ou basta fazer a cópia do tema original já com o menu instalado.

    Responder
  • janioflira comentou em

    Boa tarde Ricardo. Estou imensamente grato por haver descoberto seu site. Não tenho nenhum conhecimento de construção de sites/blogs e estou aprendendo muito com as aulas que encontrei aqui. Parabéns por esta iniciativa! Em relação a esta aula estou com um problema que não consigo resolver. Já refiz o passo a passo pelo menos quatro vezes e o resultado é o mesmo: não consigo transformar a imagem do cabeçalho em fundo. Todos os passos estão idênticos aos seus mas no final continua a aparecer o salvar como. Não sei se por conta disso, mas também não consigo mover e localizar adequadamente o logo e o campo de busca. O logo fica sempre no canto superior esquerdo e a busca no canto inferior esquerdo abaixo da imagem e não sobre ela. O que poderia ser? Estou com a versão mais recente do WordPress. Desde já agradeço por sua ajuda.

    Responder
    • Note que são aulas bem antigas e que caso você não esteja usando a mesma versão do WP poderá ter que adaptar alguns procedimentos por sua conta para acompanhar o conteúdo.

      Responder
  • Mayquel comentou em

    Ricardo, um problema aqui :
    Quando vou estilizar o menu, o tema modificado não aparece, aí quando tento ativá-lo aparece a seguinte frase :
    Ah Trapaceando ne?
    kk
    onde errei?
    Obrigado

    Responder
  • Magdiel da Silva comentou em

    Olá Ricardo,
    o logo e a busca não estão indo para o lugar certo,
    ficam alinhados à esquerda,
    já verifiquei no CSS pra ver se as divs estão corretas,
    porém não identifiquei o erro e não consigo solucioná-lo.

    pode me ajuda por favor?
    obrigado.
    fica com Deus
    abraços...

    Responder
    • Sugiro que apague seus códigos e refaça o mesmo, isso geralmente resolve pois não é fácil encontrar o erro que muitas vezes passa despercebido aos nossos olhos.

      Responder
  • Valdir Coxev comentou em

    Ricardo estou tendo uma problema aqui coloque no me header assim:
    Exemplo::

    e aqui em baixo assim

    $(function() {
    exemplo
    });

    mas quando eu atualizo e vou ver meu codigo fonte da pagina fica assim
    primeiro vem

    $(function() {
    exemplo
    });

    e despois

    e não consigo fazer executar este script aqui

    $(function() {
    exemplo
    });

    por chama ele primeiro que jquery, queria saber porque esta com esse problema, deste ja muito obrigado.

    Responder
  • Carlos Soares comentou em

    Muito boas as vídeo aulas...aprendi o que sei por aqui e já estou terminando meu primeiro blog...Com suas orientações, acredito que vai bombar...rsrsrs...
    Se me permite uma nota: não foi preciso criar a div topo para localizar o logo...bastou colocar #header img com margin de 20px...
    Valeu....continuem assim...
    Abraços.
    Carlos

    Responder
  • Gustavo Luiz da Silva comentou em

    Olá meu blog já esta hospedado
    eu posso ir fazendo as alterações direto dos arquivos
    de hospedagem?

    Responder
  • Rosi comentou em

    Olá Ricardo. Descobrimos as suas vídeo aulas há pocos dias. Foi um "achado". Ficamos muito felizes, meu esposo e eu, pela orientação precisa e didática que você dá nessas aulas. Mas estamos com um "grande problema" e de Gaúcho pra gaúcho... espero que você nos ajude. rsrssrssrrs......
    Temos um site que está no ar há alguns meses... Um amigo nosso gerenciava o mesmo. Não tinhamos acesso nem noção de como editar a página. Inclusive a hospedagem, era com ele tb. No entanto, tivemos vários problemas. Entre eles, o site ficar fora do ar por vários dias... Um transtorno só! Resolvemos então, nós mesmos administrarmos o nosso site. Contratamos um local para hospedá-lo, e estamos trabalhando nele há várias semanas. Descobrimos as suas vídeo aulas e baixamos os programas do wordPress e do servidor. Conforme você orienta. A questão é: Como fazer para trabalhar no nosso site, que já existe, com esses programas que baixamos? Como se faz essa "migração", sem perder os acessos, comentários e tudo o mais? É possível fazer essa transição? Colocar o nosso site dentro desses programas e administrá-lo por eles? Ou teremos que fazer tuuuuuudoooooo de novo?
    Deus abençoe a sua vida..e meu esposo lhe manda, como dizem lá no Sul, um "Quebra-costelas" de gaúcho. rsrsrssrsr.....

    Responder
    • No seu caso como você já tem o site funcionando você poderá fazer tudo no próprio site ao invés de fazer no servidor local. Ou então pode criar um site local para testes e depois que tudo estiver de acordo, implementar no servidor online.
      Aconselho criar uma cópia do site do servidor online para os programas locais para fazer os testes e aprender antes de começar mexer no projeto pronto. Na aula 11 é mostrado como fazer a migração de site local para o servidor web, neste caso seria o contrário (do servidor online para o local), mas o procedimento é o mesmo do apresentado na aula 11.
      Boa sorte e obrigado.

      Responder
  • Gustavo Luiz da Silva comentou em

    Olá estou acompanhando seu curso
    que é muito bom por sinal ta me ensinando muita coisa
    mas gostaria de saber se você pode disponibilizar o serial
    do Dreamweaver.
    Abraço t+

    Responder
    • Não, pois isso não é "assunto do curso", se quiser serial de softwares piratas sugiro que pesquise em um site de downloads deste tipo de software pois não oferecemos aqui.

      Responder
  • Luiz Vieira comentou em

    Ricardo muito bem explicado esta de parabéns pelo site e o conhecimento passado ,voce podia mais adiante fazer um curso criando um site completo com wordpress do zero começando com fireworks ,tableless, etc fica ai a dica , vleu e parabens garoro.

    Responder
  • Cara, suas aulas são ótimas, estou estudando wordpress e suas aulas me ajudaram e ajudam muito, continue assim, compartilhando seus conhecimentos.

    Abraço e sucesso !

    Responder
  • Luis Gustavo comentou em

    Olá Ricardo,

    Primeiramente gostaria de parabenizá-lo pelo curso.. está muito bom!
    O meu problema é o seguinte.. não tenho a formatação do CSS. Você está utilizando o padrão do template ou fez alterações? Caso eu adicione o CSS em meu template provavelmente terei problemas ?

    Responder
  • Carlos comentou em

    Ola Ricardo Bernardi eu estou estudando o seu curso de wordpress este é o meu primeiro contato com este cms estou gostando do curso.Gostaria de perguntar se em alguma das aula vc mostra como modificar a area administrativa por exmplo tirando algus menus.Eu estou desenvolvendo um blog para um cliente e gostaria de modificar o menu da area administrativa para ele nao fazer modificaoes de temas e outras. Ha se em nenhuma aula tiver estas dicas fica ai uma sugestao blz. Para bens pelo seu blog.

    Responder
    • Olá Carlos, em nenhuma aula será tratado deste assunto, este curso tem caráter iniciante e por isso alguma tarefas não serão abordadas. Obrigado pelo comentário.

      Responder
  • pedro henrique teixeira cosme comentou em

    Bom dia,
    Bem comecei agora a criar meus blogs, não entendo muito por isso estou tirando minhas dúvidas, gostaria de saber se eu pegar esse código e colar no word para depois colar no dreamweaver pode atrapalhar algum funcionamento das ações no blog?
    pq o meu atrapalhou não apareceu o menu drop dawn, aquela lista preta não apareceu só os links sem divisórias, você pode me ajudar?

    Você está de parabéns suas aulas são bem estruturadas e explicativas até eu mesmo que comecei agora já tenho um pouco de conhecimento devido suas aulas, desde já muito obrigado.

    Atenciosamente

    Pedro henrique

    Responder
    • Você deve estar com algum problema de formatação no seu CSS, verifique a codificação de sua folha de estilos ou então o posicionamento dos elementos, pois no meu caso não fiz alterações no CSS pois o tema já tinha isto pronto.
      Verifique também se seu tema já tem esta estilização pronta para o menu e nunca, jamais use o Word para guardar código fonte, use sempre Bloco de Notas ou Notepad++.

      Responder
  • @Marcos Silveira: obrigado por comentar, e continue acompanhando.

    @Luis Paulo: muito obrigado, quando me referi a ser cansativa, achei por causa do tempo pois as aulas estão ficando muito extensas, que bom que está gostando do curso.

    @Larissa de Paula: muito obrigado, espero que goste do curso e continue acompanhando.

    Responder
  • Larissa de Paula comentou em

    Que legal essa iniciativa, é muito dificil encontrar aulas de wordpress na internet, vai ser muito util vlw!

    Responder
  • Luis Paulo comentou em

    Ricardo, a aula não tem nada de cansativa. Pelo contrário, é ótima e tira muitas dúvidas. Parabéns!

    Responder

Deixe seu comentário