Como criar templates wordpress – Criação da sidebar

Depois de algum tempo, venho com a aula 6 do curso de criação de templates wordpress. Essa demora aconteceu por alguns ajustes que estamos fazendo no site e também em alguns outros aspectos como o e-mail marketing, sempre visando tornar o blog cada vez mais profissional. Neste artigo iremos criar nossa sidebar e também realizar alguns ajustes na página principal para que a mesma exiba nossa sidebar.

Se ainda não se escreveu no curso, se inscreva agora mesmo para não perder nenhuma atualização.

A sidebar é um clássico em blogs e também é usada em sites. Ela é usada para exibir links importantes, banners e muitas outras coisas. A verdade é que todo blog que se prese possui uma sidebar, hoje iremos aprender como criá-la e também como exibir a mesma na página principal.

Arquivo sidebar.php

Dentro de seu editor de texto, crie um arquivo chamado sidebar.php e salve-o dentro da pasta do template.

<div id="secondary" class="widget-area col-md-4" role="complementary" itemscope="" itemtype="http://schema.org/WPSideBar">
    <?php dynamic_sidebar( 'main-sidebar' ); ?>
</div><!-- #secondary -->

Não existe muito mistério quanto a criação do arquivo sidebar.php. Basicamente, o que faz a “magia” acontecer é o dynamic_sidebar, como ele você indica qual sidebar você quer carregar (sim, você pode ter várias) e ele exibirá todos os widgets que a mesma possui. Acaso, você seja um pouco apressado certamente correu para ver o que aconteceu. Calma ainda falta dois passos para que nossa sidebar seja exibida.

Arquivo functions.php

O arquivo functions.php pode ser usado de inúmeras maneiras. Geralmente colocamos as principais funções do template neste arquivo, porque as funções utilizadas no mesmo podem ser enxergadas de todo o template, sem a necessidade de realizar qualquer importação ou coisa do gênero. Para iniciar nosso functions.php vamos incluir o código necessário para criar uma sidebar.

Crie o arquivo functions.php em seu editor de texto e salve-o na pasta do template.

<?php
register_sidebar(
        array(
            'name' => ('Sidebar'),
            'id' => 'main-sidebar',
            'description' => ( 'Sidebar'),
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget' => '</aside>',
            'before_title' => '<h3 class="widgettitle widget-title">',
            'after_title' => '</h3>',
        )
    );
?>

Esse é o código para registro de uma sidebar. Podemos verificar alguns aspectos bem interessantes:

  1. id: é o identificador da sidebar, é com este id que iremos referenciar a sidebar em qualquer parte do template;
  2. name: É o nome apresentado pelo wordpress na opção Widgets;
  3. before_widget: Código html apresentado antes de qualquer widget;
  4. after_widget: Código html apresentado depois de qualquer widget;
  5. before_title: Código html apresentado antes de qualquer título de widget;
  6. after_title: Código html apresentado depois de qualquer título de widget;

Por fim iremos realizar a mudança em nosso template do index.php para que o mesmo apresente a sidebar:

<?php get_header(); ?>
<div id="primary" class="col-md-8">
    <section id="content" role="main">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
               <h1> <?php the_title(); ?></h1>
                <?php the_content(); ?>
            <?php endwhile; ?>

        <?php else : ?>

        <?php endif; ?>
    </section><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>

Fizemos duas mudanças, a primeira foi a inclusão da classe col-md-8, para que a div principal tenha 8 colunas (o dobro da sidebar que possui 4) e também a inclusão do get_sidebar, que realiza a chamada da sidebar em todos os templates de páginas.

Comente, o curso é seu

Não deixe de deixar seu comentário, seja com opiniões sobre os artigos já publicados, seja com dúvidas e sugestões para a continuidade da série, esperamos que esta série esteja da forma que você espera.

Não deixe de compartilhar estes artigos da série e convidar seus amigos para o curso. Artigos indicando o curso em seus blogs também são bem vindos.

Até já.

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br

  • Olá eu já deixei uma mensagem para você e fui pesquisar no site e vi que você fez a sidebar, o problema é que no meu não esta funcionando, basicamente eu copiei e colei os códigos do seu site e simplesmente não aparece a sidebar, já aconteceu isso com você, tem alguma ideia?

    • Você criou a sidebar neste artigo certo? Mas você chamou ela na página onde quer que apareça?
      esta é a chamada para a sidebar.

  • Carlos Sampaio

    Aqui comigo também não apareceu nada, mas acho que é para não aparecer nada mesmo. Apenas fizemos as “chamadas” para a sidebar, não programamos nada. Se eu estiver errado o Jair Rebello poderia corrigir.

    Vi apenas hoje, mas já estou ansioso pela aula 7. Já foi disponibilizada?

    Um abraço!

  • Carlos Sampaio

    Complementando…
    Acredito que o mais importante, neste momento, é verificar se na área administrativa (Aparência / Widgets) aparece a seção ‘Sidebar’.

    Arraste um Widget para esta seção e veja se está funcionando. Aqui funcionou! 😀

  • Olá Jair!

    Quando irão ser postado o restante do material ? pois estou muito ansioso, pois o conteúdo e a forma com a qual tem explicado, está ajudando muito!

    Forte Abraço!

  • Peak

    Royal MultiPurpose Retina WordPress Theme. Amazing WordPress responsive and retina theme
    with a premium support and awesome drag and drop pagebuilder http://8grids.com/portfolio/peak-wordpress-theme/
    for anyone create a great website in an
    extremely easy way. Create the
    Site You Want – Whether you need of pages with advanced resources, striking
    galleries, a professional blog, or an online store, it’s all included
    in Peak. Best of all, everything is mobile-ready right from the
    start.

  • leandro

    Olá Jair, qual plugin você utiliza para auto bio na sidebar?