[b2evolution-pt] Criação de skins para b2evolution - widgets - Walter Cruz - b2evolution

47 views
Skip to first unread message

Walter Cruz - b2evolution

unread,
Apr 23, 2010, 4:13:19 PM4/23/10
to b2evolu...@googlegroups.com

Criação de skins para b2evolution - widgets - Walter Cruz - b2evolution

Criação de skins para b2evolution - widgets

Posted: 23 Apr 2010 08:25 AM PDT

Nessa segunda parte do tutorial, veremos como funciona principalmente o uso dos widgets no b2evolution e como adaptar o nosso layout para o uso deles. Mas antes, um pouco de história.

Senta que lá vem história

Na série 1.x do b2evolution, quando você baixava um skin (template), ele vinha mais ou menos fechado, e a maior parte das alterações tinha de ser feita no código. Por exemplo, se na sua barra lateral viessem, nessa ordem, um formulário de busca, seguido de um calendário, seguido da sua lista de links, e por alguma razão você quisesse que o calendário ficasse em primeiro lugar na sua barra lateral, você precisaria mexer no código-fonte do skin, copiar e colar alguns trechos, ajustar algumas coisas e agora sim, ter o template do jeito que você quer.

Na série, 2, o François introduziu o conceito de widgets e contâineres. Funciona da seguinte forma: a sua barra lateral agora é um contâiner, um espaço onde você pode encaixar coisas. E o calendário, a lista de links e o formulário de busca são as peças que você pode encaixar nesse espaço, dentro da própria administração do b2evolution.

Vamos agora adaptar o nosso skin para que ele tenha suporte a widgets!

Cuidando das barras laterais

Primeiro, vamos remover o conteúdo das barras laterais, transformando-as em contâineres para os nossos widgets, dessa forma:

PHP:

<div class="col2">
            <?php
                // Display container and contents:
                skin_container( NT_('Sidebar'), array(
                        // The following params will be used as defaults for widgets included in this container:
                        'block_start' => '',
                        'block_end' => '',
                        'block_display_title' => true,
                        'block_title_start' => '<h2>',
                        'block_title_end' => '</h2>',
                        'list_start' => '<ul>',
                        'list_end' => '</ul>',
                        'item_start' => '<li>',
                        'item_end' => '</li>',
                    ) );
            ?>
            </div>
            <div class="col3">
            <?php
                // Display container and contents:
                skin_container( NT_('Sidebar 2'), array(
                        // The following params will be used as defaults for widgets included in this container:
                        'block_start' => '',
                        'block_end' => '',
                        'block_display_title' => true,
                        'block_title_start' => '<h2>',
                        'block_title_end' => '</h2>',
                        'list_start' => '<ul>',
                        'list_end' => '</ul>',
                        'item_start' => '<li>',
                        'item_end' => '</li>',
                    ) );
            ?>
            </div>

Dentre os parâmetros principais a serem passados para a função que cria os contâineres, block_start é o conteúdo html que será escrito antes de cada widgets, block_end é o que virá depois. Como não queremos nada nem antes nem depois de cada item, vamos deixar isso em branco. block_display_title especifica se o título do bloco será exibido, block_title_start e block_title_end são respectivamente o que irá depois do nosso título do bloco. Ou seja, os widgets que nós adicionarmos, terão o título de cada um dentro de uma tag h2 (coerente com o layout original)

Após isso, precismos avisar ao b2evolution que o nosso skin contém esses contâineres para widgets. Para isso, precisamos ir em Opções Globais -> Skins e recarregar o skin. Com isso, o b2evolution fará a varredura no código do nosso skin à procura de widgets.

O cabeçalho

Para adicionar o suporte a widgets no cabeçalho, eu adicionei o seguinte código:

PHP:

<?php
            // Display container and contents:
            skin_container( NT_('Header'), array(
                    // The following params will be used as defaults for widgets included in this container:
                    'block_start' => '',
                    'block_end' => '',
                    'block_title_start' => '<h1>',
                    'block_title_end' => '</h1>',
                ) );
        ?>
        <?php
            // Display container and contents:
            skin_container( NT_('Tagline'), array(
                    // The following params will be used as defaults for widgets included in this container:
                    'block_start' => '<h2>',
                    'block_end' => '</h2>',
                ) );
        ?>
        <?php
            // Display container and contents:
            skin_container( NT_('Page Top'), array(
                    // The following params will be used as defaults for widgets included in this container:
                    'block_start' => '',
                    'block_end' => '',
                    'block_display_title' => false,
                    'list_start' => '<ul>',
                    'list_end' => '</ul>',
                    'item_start' => '<li>',
                    'item_end' => '</li>',
                ) );
        ?>

Depois de recarregarmos o skin para que o b2evolution reconheça os novos contâineres, eu adicionei os seguintes widgets: no Header (Cabeçalho) eu adicionei um widget com o título do blog, no Tagline (Slogan) eu adicionei um widget com o Slogan do Blog e no Page Top (Top da Página) um widget com a Lista pública de blogs.

Mas porque eu fiz essa confusão toda, um widget para o Header e outro para o Slogan? Porque eu queria manter o máximo possível o layout original, e nele, o Título está em um H1, ao passo que a descrição está dentro de um H2. Porém, ao tentar encaixar os dois dentro do mesmo widget, eu me deparei com o problema de não conseguir colocar o slogan dentro de um h2. E olha que comentário interessante eu achei no código:

Code:

// TODO: there appears to be no possibility to wrap the tagline in e.g. "<h2>%s</h2>"
//       Should there be a widget param for this?  fp> probably yes

Ou seja, é algo que mais alguém passou antes de mim :)

Título da página e rodapé

Para finalizar essa parte do tutorial, mais duas pequenas modificações: eu tornei o título da página dinâmico e adicionei o rodapé

Para o rodapé:

PHP:

<div id="footer">
    <p>This page uses the <a href="http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm">Perfect 'Blog Style' 3 Column Liquid Layout</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>. View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
<p>
        <?php
        // Display footer text (text can be edited in Blog Settings):
        $Blog->footer_text( array(
                'before'      => '',
                'after'       => '',
            ) );
        ?>
</p>
</div>

E para o título da página

PHP:

<title><?php
        // ------------------------- TITLE FOR THE CURRENT REQUEST -------------------------
        request_title( array(
            'auto_pilot'      => 'seo_title',
        ) );
        // ------------------------------ END OF REQUEST TITLE -----------------------------
    ?></title>

Ainda faltam algumas coisas

Acho que ainda mais um artigo nessa série (talvez 2!) e termos coberto o básico da criação de skins para o b2evolution.
You are subscribed to email updates from Walter Cruz - b2evolution
To stop receiving these emails, you may unsubscribe now.		 Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

--
Você está recebendo esta mensagem porque se inscreveu no grupo "b2evolution-pt" dos Grupos do Google.
Para postar neste grupo, envie um e-mail para b2evolu...@googlegroups.com.
Para cancelar a inscrição nesse grupo, envie um e-mail para b2evolution-p...@googlegroups.com.
Para obter mais opções, visite esse grupo em http://groups.google.com/group/b2evolution-pt?hl=pt-BR.

Eliazer

unread,
Apr 28, 2010, 8:45:26 AM4/28/10
to b2evolution-pt
Grande Walter!

Muito obrigado pelo tutorial! Está ficando ótimo!
Agora é botar a mão na massa e criar/portar skins para o
b2evolution...

Por falar nisso, duas sugestões para os próximos artigos:
1- Como dividir a área do footer em duas (ou mais) colunas, com espaço
para widgets (eu sei que dá pra replicar o conteúdo das outras áreas,
mas é interessante já ter isso no tutorial...)
2- Essa pode ser para um pós-tutorial: dicas para adaptar themes do WP
para o b2evolution ;o)

Mais uma vez: muito obrigado pelo ótimo trabalho que vc vem fazendo!
Acho que vc praticamente "leva nas costas" a comunidade brasileira do
b2evolution!

Eliazer Kosciuk
http://www.ideaplus.com.br
Reply all
Reply to author
Forward
0 new messages