Tribo do C.I.

Só mais um blog de informática (só que não)

Personalizar página inicial do WordPress

janeiro 10th, 2014

Esse tutorial é fruto de uma frustração, pois ao pesquisar diversas vezes por maneiras de sair do padrão de página inicial do wordpress para ter algo mais personalizado, encontrei informações esparramadas em vários posts, nenhum conteúdo objetivo ou compilado para esse devido fim, portanto resolvi criar esse tutorial, pois talvez possa ajudar outras pessoas.

Se você conhece algum tutorial que ensina esse assunto, por favor cite nos comentários, para que possamos editar esse post com mais links interessantes, dando maior completude na informação a ser passada.

Diferença entre Home e Front Page no WordPress

Quem já desenvolveu ou alterou um tema no wordpress sabe que o arquivo principal é o index.php, e que caso não houver outro arquivo mais específico, na hierarquia, o index.php será executado. Por padrão, o wordpress mostra uma listagem de posts na página inicial, porém existe também a possibilidade de exibir uma página estática, e isso é definido em Configurações > Leitura.

Quando a opção de mostrar posts recentes está marcada, o arquivo procurado pelo wordpress no seu template é o home.php, no entanto, quando a opção de página estática está marcada, o arquivo em questão é o front-page.php. Tendo isso em mente fica mais fácil implementar a página inicial personalizada. Existe uma maneira de verificação fornecida pela API do wordpress: as funções is_home()is_front_page()

Ajustando configuração da página inicial

O primeiro passo da nossa página inicial personalizada então, é setar a configuração no wordpress. No meu caso, eu deixei a opção de página estática marcada. Sendo assim, na pasta do tema, precisamos criar/editar o arquivo front-page.php. Em seguida, definiremos um layout padrão para a página inicial, algo como isso:

Exemplo de Layout

Codificando o front-page.php

O código inicial da nossa página inicial será mais ou menos assim:

<?php get_header(); ?>
	<div id="home-content" class="content-area">
		<div class="banner"></div>
		<div class="boxes">
			<div class="thebox"></div>
			<div class="thebox"></div>
			<div class="thebox"></div>
		</div>
	</div>
<?php get_footer(); ?>

Bom, o slider de banners pode ser muito facilmente configurado através do WP Nivo Slider, portanto não colocarei aqui essa parte, pois o interessante é colocar os 3 widgets logo abaixo.

Adicionando área de widgets

Precisamos adicionar o código que informa ao WordPress as áreas dinâmicas. Edite o arquivo front-page.php, na parte das boxes com o código abaixo

<div class="boxes">
	<div class="thebox first">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('left_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa left_box é uma área dinâmica! Adicione widget no painel do Administrador.</p>  
	    <?php endif; ?>  
	</div>
	<div class="thebox">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('center_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa center_box é uma área dinâmica! Adicione widget no painel do Administrador.</p> 
	    <?php endif; ?>  
	</div>
	<div class="thebox">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('right_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa right_box é uma área dinâmica! Adicione widget no painel do Administrador.</p> 
	    <?php endif; ?>  
	</div>
	<div class="clear"></div>
</div>

Agora a página inicial já está quase pronta, porém precisamos registrar as áreas dinâmicas, como você provavelmente já deve ter feito com a sidebar. Edite o arquivo functions.php adicionando o código abaixo:

if (function_exists('register_sidebar'))
{
    register_sidebar(array(  
        'name' => 'Left Box',  
        'id'   => 'left_box',  
        'description'   => 'Widget area para primeira caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  
    register_sidebar(array(  
        'name' => 'Center Box',  
        'id'   => 'center_box',  
        'description'   => 'Widget area para segunda caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  
    register_sidebar(array(  
        'name' => 'Right Box',  
        'id'   => 'right_box',  
        'description'   => 'Widget area para terceira caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  

}

Pronto, agora você pode adicionar widgets em Aparência > Widgets, como aparece na imagem ilustrativa abaixo:

widgetsEditando os estilos

Como é possível perceber, na parte de baixo da página inicial foi utilizado o plugin Flexible Posts Widget para exibir informações de alguns conteúdos na página inicial. Você pode utilizar de diversas técnicas CSS para estruturar a informação da página inicial, porém segue abaixo um pouco do código que servirá de base inicial para desenvolvimento do seu tema:

.home-content {
    width: 80%;
    margin: 0 auto;
    min-width: 1000px;
}

 .boxes {
 	width: 1000px;
 	min-height: 200px;
 	margin: 50px auto;
 }
 .thebox {
 	float: left;
	width: 300px;
	min-height: 200px;
	background: rgba(255,255,255,0.1);
	margin-left:50px;
}
.thebox.first {
	margin: 0;
}
Sobre Sheldon Led:
Desenvolvedor e palestrante desde 2009. Já trabalhou com sistemas legados e software de gestão, mas hoje atua somente com web. Já participou do desenvolvimento de alguns portais governamentais e sites utilizando a plataforma Joomla e WordPress. Apesar de ser um desenvolvedor full-stack, tem focado seus estudos em tecnologias front-end e busca apoiar e colaborar em projetos envolvendo Software Livre, seja em eventos, material para estudo ou contribuição de código.
  • David Rodrigues

    Interessante o post , sobre o esclarecimento de cada um, mas muito avançada para quem está começando agora no mundo do WordPress e Joomla! Vejo que não dá para ficar sem aprender PHP! Estou três dias tentando exibir os Posts Recentes em uma página estática, mas ainda estou apanhando para o tema! rsrrs

  • http://www.futebolsemlimites.com.br Paulinho

    Post muito bom, mais como citou o David acima, muito avançado para quem esta começando no wordpress, eu estou tentando fazer a algum tempo, mais mais quando vou editar os códigos, não consigo!
    Queria que alguém postasse algo que até nós iniciantes conseguisse fazer!

    Mesmo assim, muito obg pela ajuda!

    Sucesso,
    Paulinho Massa
    http://www.futebolsemlimites.com.br

  • http://.... JORGE DE ANDRADE JUNIOR .

    PERFECT ERA EXATAMENTE O QUE EU ESTAVA PROCURANDO

    MUITO OBRIGADO MESMO

  • http://meufilhousou.com.br Jeane Lucas Avellar Kratochwill

    Muitíssimo obrigada pelo post e pelas horas poupadas.

  • http://www.tecnobrytus.com.br Adarlan

    Nao consigo deixar os posts um do lado do outro….e onde eu insiro os ultimos codigos..editando os estilos ?

  • http://www.spimoveismorumbi.com.br Gilberto Fernandes

    Legal e muito util

  • http://www.lugitecno.com Luca Giacomelli

    Olá Sheldon,
    eu gostaria muito criar uma pagina assim inicial para tirar a confusão do meu site.
    Poderia dar uma olhada?

    http://www.lugitecno.com/computador

    Obrigado

  • https://blogatall.wordpress.com/ rone

    Olá, só é possível fazer isso se pagar o premium no wordpress?
    To querendo muito fazer uma pág. inicial, mas n entendo muito! :'(

  • http://tribodoci.net/ Sheldon Led

    Olá Rone, não sei se o wordpress premium dá suporte a esse tipo de customização. O ideal é você ter o wordpress hospedado em um servidor próprio (e conhecimentos básicos de programação) para que isso funcione.

    Ou, instale um tema que já venha dessa forma =)

  • http://jovemadministrador.com.br Diego ANdreasi

    Sheldon tudo bem?

    Será que você pode me ajudar?

    Gostaria de mudar o link de direcionamento no banner principal do meu blog no wordpress. Atualmente ele está no padrão, ou seja, quando a pessoa clica é levada para a Home. Gostaria de alterar para um outro local…

    Existe a possibilidade?

  • http://tribodoci.net/author/sheldonled Sheldon Led

    Olá Diego,

    É possível sim. Ao inserir a imagem, geralmente existe um botãozinho que indica o link daquela imagem. Dá uma vasculhada aonde você inseriu a imagem

  • Edgar Menezes

    Obrigado estava quebrando a cabeça para por widgets na página inicial do meu tema.

  • Leonardo Carvalho Silva

    perfeito!!!! so que perdi a layout responsivo da index. Abraço

  • Robener Neumann Oliveira

    Olá amigo,voce saberia me dizer como dou uma “APORTUGUESADA” na pagina principal do meu site?ex: de our category para categorias,de post recents para produtos recentes,etc.obrigado

  • Sebastião Relson Reis da Luz

    Vc instalando localizado ele já deixa essas strings, a gente customizou a url pra categoria pra aparecer categorias, e assim por diante.

  • Robener Neumann Oliveira

    Ola Sebastião,nao entendi pois nao sou designer e quem fez o site pra mim esta indisponivel e estou tentando ir melhorando com cuidado para nao fazer besteira.localizado é um plugin?devo instala-lo e ja faz essas traduçoes automaticamente?

  • Sebastião Relson Reis da Luz

    É a versão do wordpress já em português

  • Flavia

    Olá. Parabéns pelo post.
    Na página inicial do meu site já estão disponíveis 3 widgets.
    Porém, quero adicionar mais algumas widgets na página inicial abaixo das já existentes.
    Segui o passo a passo e no Painel está disponível novas áreas de widgets para serem inseridas. Mas, ao inserir, substituem as 3 widgets existentes.
    Não quero substituir!!!!! quero as já existentes e as novas!

    Obs¹: uso o tema Customizr
    Obs²: a opção de mostrar posts recentes está ativa
    Obs³: o arquivo principal é o index.php

  • Cheyenne Carvalho

    mal te conheço e ja te amo… valleeeeeeeeeeeeeeeeeu super ajudou.. casa cmg 😀

  • http://vendermaishinode.com/ Joana

    Realmente muito avançado! Eu estou precisando de algo simples, preciso aprender a habilitar os comentários na página home do meu blog

    http://vendermaishinode.com/

  • Sebastião Relson Reis da Luz

    A gente hoje usa o plugins do disqus, facilita bastante.

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)