Criação de skins para b2evolution: os primeiros passos - Walter Cruz - b2evolution

9 views
Skip to first unread message

Walter Cruz - b2evolution

unread,
Jan 2, 2010, 2:16:45 PM1/2/10
to b2evolu...@googlegroups.com

Criação de skins para b2evolution: os primeiros passos - Walter Cruz - b2evolution


Criação de skins para b2evolution: os primeiros passos

Posted: 02 Jan 2010 08:07 AM PST

Nesse tutorial, vamos criar um skin muito básico para o b2evolution. Na verdade, vamos transformar um template já existente em um skin.

Por sugestão do Eliazer, vou usar o template "The Perfect 'Blog Style' 3 Column Liquid Layout (Percentage widths)". Como ele é extremamente simples, podemos ter um mínimo de certeza que o css não atrapalhará nosso trabalho. ;)

O primeiro passo é criar uma pasta para o skin dentro da pasta skins do b2evolution. A pasta que eu criei para esse skin se chama layout_3col.

O arquivo que o b2evolution procura para o skin, por padrão, chama-se index.main.php Em um post futuro, eu mostrarei como funciona a hierarquia de templates do b2evolution. Por hora, ter o arquivo index.main.php no template será o suficiente.

Copie e cole o conteúdo do template que queremos adaptar no arquivo index.main.php. Após isso, instale o skin no painel de administração, e configure algum blog para usar esse skin. Você vai ver que ficou com uma cópia do template original, o que não é muito útil. Isso porque agora precisamos 'rechear' o nosso skin com as tags de template do b2evolution.

O primeiro passo é fazer a inicialização do skin. Isso é feito chamando a função: skin_init( $disp ) no início do skin.

Para isso, podemos colocar no início do skin a seguinte tag, antes mesmo do início do html:

PHP:

<?php
skin_init$disp );
?>

Essa variável, $disp, indica o modo de visualização com o qual estamos trabalhando no momento. Por exemplo, podemos estar usando a visualização de uma página ($disp='page'), a visualização de um post ($disp='single') ou a visualização de uma lista de posts ($disp='posts'). No futuro, veremos como usar isso para criar detalhes ou até mesmo templates diferentes para as diferentes visualizações.

Agora, vamos começar a colocar as tags de template dentro da div css com id col1.

O bloco básico a ser colocado:

PHP:

<?php
        // --------------------------------- INÍCIO DOS POSTS ----------------------------------
        // Mostra mensagem se não houver post:
        display_if_empty();
        while( $Item = & mainlist_get_item() )
        {
            // ------------------------------ SEPARADOR DE DATAS ----------------------------
            $MainList->date_if_changedarray(
                        'before'      => '<h3>',
                        'after'       => '</h3>',
                        'date_format' => '#',
                    ) );
            echo '<h2>';
            $Item->title();
            echo '</h2>';
            // ---------------------- CONTEÚDO DO POST ----------------------
            skin_include'_item_content.inc.php',  array(
                    'image_size'    =>    'fit-400x320' ) );
            // -------------------------- CONTEÚDO DO POST -------------------------
            echo 'Postado na categoria: ';
            $Item->categories();
            echo '<br /> Tags';
            $Item->tags();
            echo '<br />';
            $Item->feedback_linkarray('type' => 'comments') );
            // ------------------ FEEDBACK (COMMENTS/TRACKBACKS) INCLUSOS AQUI------------------
            skin_include'_item_feedback.inc.php');
            // ---------------------- FIM DOS COMENTÁRIOS (COMMENTS/TRACKBACKS) ---------------------
            echo '<hr />';
 
        } // ---------------------------------- FIM DOS POSTS ------------------------------------
?>

display_if_empty() irá mostrar uma mensagem se aquele tipo de visualização não tiver nenhum posts.

Após isso, começa o loop padrão do b2evolution. Como o b2evolution é orientado a objetos, o que você obtém é um objeto do tipo Item.

A forma básica desse loop é a seguinte:

PHP:

while( $Item = & mainlist_get_item() )
{
    //faz alguma coisa com cada item (post)
}

Após o início do loop, existe uma chamada ao método date_if_changed do objeto $Mainlist. Esse método irá exibir a data dos posts sempre que a data mudar, ou seja, se você tiver 3 posts numa mesma data, será exibido a data, seguida pelos 3 posts, seguida pela data do próximo post. (Ou seja, a data não será exibida 3 vezes).

Logo após, exibimos o título do post:

PHP:

echo '<h2>';
$Item->title();
echo '</h2>';

O conteúdo do post é exibido pela inclusão de outro arquivo:

PHP:

// ---------------------- CONTEÚDO DO POST ----------------------
skin_include'_item_content.inc.php',  array(
        'image_size'    =>    'fit-400x320' ) );
// -------------------------- CONTEÚDO DO POST -------------------------

De onde vem esse arquivo que estamos incluindo? Vejamos: como o nosso skin não possui um arquivo chamado _item_content.inc.php, por padrão, o b2evolution procura um arquivo com esse nome na pasta /skins, e lá o encontraremos. Antigamente, existia uma função chamada $Item->content() que fazia a exibição do conteúdo do post, mas atualmente essa função está marcada como obsoleta no código, e se você a incluir, no final das contas, ela tentará incluir o arquivo _item_content.inc.php .

Podemos simplesmente aproveitar o arquivo _item_content.inc.php fornecido pelo b2evolution, ou se acharmos que precisamos de personalizá-lo ainda mais, podemos copiá-lo para a pasta de nosso skin e fazer as personalizações necessárias.

Após isso, incluímos no skin as categorias e as tags de cada post:

PHP:

echo 'Postado na categoria: ';
$Item->categories();
echo '<br /> Tags';
$Item->tags();
echo '<br />';

Depois disso, incluímos um link para o visitante do blog incluir comentários:

PHP:

$Item->feedback_linkarray('type' => 'comments') );

E como queremos que quando o visitante clicar nesse link ele realmente veja o formulário de comentários, podemos fazer a inclusão do formulário de uma forma muito fácil:

PHP:

// ------------------ FEEDBACK (COMMENTS/TRACKBACKS) INCLUSOS AQUI------------------
skin_include'_item_feedback.inc.php');
// ---------------------- FIM DOS COMENTÁRIOS (COMMENTS/TRACKBACKS) ---------------------

Novamente, se quisermos personalizar o formulário de comentários, podemos copiar o arquivo _item_feedback.inc.php para o nosso template e editarmos a nossa cópia.

Por questões de simplicidade, incluí um <hr /> como separador de cada post. O mais correto fosse criar uma div para cada post, mas assim já temos uma separação visual entre um post e outro.

Pronto! Já temos um skin básico para o b2evolution!

Quer dizer, mais ou menos né? Isso porque as nossas duas barras laterais e os menus superiores ainda trazem o texto 'placeholder' que veio do template que copiamos. Para isso, precisaremos lidar com o conceito de contâineres e widgets, o que veremos na próxima seção desse tutorial.

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
Reply all
Reply to author
Forward
0 new messages