« Gerencie suas meta descrições no b2evolutionCriação de skins para b2evolution: os primeiros passos »
Abr 23

Criação de skins para b2evolution - widgets

b2evolution 3

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.

Tags: , ,

Endereço de trackback para este post

Trackback URL (clique direito e copie atalho/localização do link)

Sem feedback para esse post ainda

Deixe seu comentário


Seu endereço de e-mail não será revelado nesse site.

Sua URL será exibida.
PobreExcelente
(Quebras de linha se tornam <br />)
(Nome, e-mail & website)
(Permitir que usuários o contatem através de um formulário eletrônico (seu e-mail não será exibido.))
Subscribe to comments by email

Você pode usar apenas o seu OpenID para fornecer seu nome, e-mail e url.

Contato / Ajuda. ©2010 by Walter Cruz. Design & icons by N.Design Studio. Skin by Tender Feelings / Skin Faktory.
Entries RSS Comments RSS Entrar