Construindo a barra lateral (sidebar.php)

Há algum tempo que desejávamos iniciar esta série de artigos, a partir da qual esperamos ajudá-lo a aprender como criar um template WordPress. Esta série irá analisar passo-a-passo todas as diferentes fases do desenvolvimento de um template para WordPress, e para que você consiga analisar e implementar todas elas, decidimos partir esta ideia em vários artigos mais simples de assimilar e explorar. No final da série, certamente conseguirá criar seu template WordPress!

Os templates wordpress são hoje em dia cada vez mais procurados e podem ser facilmente criados com o intuito de serem vendidos em mercados como a Theme Forest ou a Mojo Themes. Qualquer pessoa que deseje entrar neste mundo fascinante do desenvolvimento de templates para wordpress, pode posteriormente comercializá-los nesses mercados e começar a ganhar dinheiro produzindo templates de qualidade.

Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!

Vejamos algumas das competências do template que vamos desenvolver ao longo dos próximos artigos:

Otimização para motores de busca
Marcação com suporte Microformato da Google
Semântica da estrutura de marcação válida e lógica que pode ser usada em qualquer template
Layouts de CSS inteligentes
Classes dinâmicas para o corpo, postagens e comentários
Trackbacks e comentários em árvore separados
2 áreas para widgets que desaparecem quando não estão ocupadas
Tudo o resto que é normal num template WordPress

No final desta série de tutoriais, com o código feito e pronto a ser implementado, você poderá fazer praticamente tudo aquilo que desejar com ele. Você pode inclusive olhar para o resultado final como a sua framework WordPress de trabalho.

Sabemos que você tem esperado pacientemente por este artigo. Toda a gente adora a barra lateral de um Template WordPress. Mas para não variar, iremos criar uma barra lateral um pouco diferente do que é habitual em Templates WordPress. A nossa vai ser melhor e mais funcional!

FUNÇÕES CUSTOMIZADAS NA BARRA LATERAL

Primeiro as coisas mais importantes. Criando uma barra lateral em WordPress, uma das primeiras coisas a ter em consideração é que essa barra suporte widgets. A nossa barra lateral vai ter duas secções de widgets. Desta forma poderemos adaptar mais facilmente o código a templates de 2-colunas ou 3-colunas.

Isto é bastante simples e direto. No nosso ficheiro functions.php vamos registrar as nossas áreas de widgets com o seguinte código.

      // Registrar áreas de widgets
      function theme_widgets_init() {
       // Área 1
       register_sidebar( array (
       'name' => 'Primary Widget Area',
       'id' => 'primary_widget_area',
       'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
       'after_widget' => "</li>",
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
        ) );

       // Área 2
       register_sidebar( array (
       'name' => 'Secondary Widget Area',
       'id' => 'secondary_widget_area',
       'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
       'after_widget' => "</li>",
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
        ) );
      } // end theme_widgets_init

      add_action( 'init', 'theme_widgets_init' );

Agora temos duas áreas de widgets: A área de widget primária (Primary) e a área de widget secundária (Secondary). Não existe interesse em estar a chamar-lhes barra lateral primária e barra lateral secundária. Em alguns templates nem barra lateral existe, mas no entanto existem zonas compatíveis com widgets.

Agora, ainda no ficheiro functions.php iremos adicionar mais duas customizações super interessantes e engraçadas.

Primeiro, vamos definir os widgets pré-definidos: A pesquisa, páginas, categorias, arquivos, links e meta. Não iremos programar esses conteúdos manualmente no ficheiro sidebar.php. Iremos simplesmente dizer ao WordPress para os adicionar como widgets automaticamente na nossa área de widgets através das opções.

      $preset_widgets = array (
       'primary_widget_area'  => array( 'search', 'pages', 'categories', 'archives' ),
       'secondary_widget_area'  => array( 'links', 'meta' )
      );
      if ( isset( $_GET['activated'] ) ) {
       update_option( 'sidebars_widgets', $preset_widgets );
      }
      // update_option( 'sidebars_widgets', NULL );

Agora, na nossa área de widgets primária (primary_widget_area) temos então o widget de pesquisa, o widget de páginas, o widget de categorias, e o widget de arquivos. A área de widgets secundária (secondary_widget_area) tem os widgets para links e meta. Todos eles são carregados automaticamente com o template através das opções.

Consegue ver o código // update_option( 'sidebars_widgets', NULL ); na última linha? Se por alguma razão quiser zerar seus widgets, remova esse código. Como provavelmente perceberá, NULL significa sem widgets.

Agora, iremos criar uma nova condicional que irá verificar se existem widgets em alguma das nossas áreas de widgets. Isto será incrivelmente útil quando desenvolvemos a nossa barra lateral.

      // Verificar widgets nas áreas de widgets
      function is_sidebar_active( $index ){
        global $wp_registered_sidebars;

        $widgetcolums = wp_get_sidebars_widgets();

        if ($widgetcolums[$index]) return true;

       return false;
      } // end is_sidebar_active

Agora temos de colocar estes códigos a funcionar corretamente.

PROGRAMANDO A BARRA LATERAL

Com as nossas áreas de widgets dinâmicas registradas e os nossos widgets pré-definidos, o nosso Template da Barra Lateral será um dos mais simples que alguma vez viu. Mas lembre-se, iremos também envolver as nossas barras laterais numa declaração IF usando a nossa condicional is_sidebar_active().

Eis então como o código irá se parecer:

      <?php if ( is_sidebar_active('primary_widget_area') ) : ?>
        <div id="primary" class="widget-area">
         <ul class="xoxo">
          <?php dynamic_sidebar('primary_widget_area'); ?>
         </ul>
        </div><!– #primary .widget-area –>
      <?php endif; ?>  

      <?php if ( is_sidebar_active('secondary_widget_area') ) : ?>
        <div id="secondary" class="widget-area">
         <ul class="xoxo">
          <?php dynamic_sidebar('secondary_widget_area'); ?>
         </ul>
        </div><!– #secondary .widget-area –>
      <?php endif; ?>

Agora, se for na página de administração dos widgets e retirar todos os widgets das suas áreas de widget irá verificar que a nossa condicional dá erro. Isso significa que terão de existir widgets nas áreas para que o seu template funcione corretamente.

Essa a forma como gostamos que as coisas funcionem. Como reparou também, estamos muito pertinho do final, portanto, fique atento que a nossa série está quase terminando!

ESTÁ ACOMPANHANDO? TEM DÚVIDAS?

Este décimo artigo teve como base a programação da nossa barra lateral e a sua devida otimização. O mais importante neste momento é que você compreenda os passos que vamos dando e caso tenha dúvidas, poderá colocá-las sem problema. Contamos com a sua participação e as suas dúvidas. Está gostado? Participe com seus comentários!

Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!

Até já!

Como criar um Template WordPress – Parte X