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

[Walter Cruz - b2evolution]

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_changed( array(                         '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_link( array('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_link( array('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. Original post blogged on 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