Tags: skins
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.
Anexos:
layout_3col_v1.zip (4.5 KB)
Essa semana o leeturner portou dois temas css e os transformou em skins do b2evolution.
São os temas:
Republic
e Hot Air Balloon:
Para mais informações sobre os temas, visite a página de skins do leeturner, que além desses dois, contém uma versão do tema frugal, que eu uso atualmente no devlog.
Atualizando seu skin pro 3.x: posts de introdução e posts em destaque
dicas, b2evolution 3 3 feedbacks »Antes de colocarmos a mão na massa, um exemplo de como fica essa funcionalidade. Veja os links abaixo:
Os textos exibidos acima, dentro da caixinha, são ou os posts em destaque ou posts de introdução. Veja também a página do manual do b2evolution que fala sobre os posts de introdução.
Essa é uma das características da série 3.x que exigem uma pequena adaptação do skin para funcionar. Se o seu blog usa algum dos skins padrão incluídos no b2evolution, nenhuma alteração será necessária, já que todos os skins da série 3.x já suportam todas as novas funcionalidades.
Primeiro, procure no seu skin a seção que faz o loop pelos posts. Ela começa geralmente assim:
Antes dessa seção, vamos incluir o bloco de código que irá exibir o post de introdução/em destaque
<?php
// Go Grab the featured post:
if( $Item = & get_featured_Item() )
{ // We have a featured/intro post to display:
// ---------------------- ITEM BLOCK INCLUDED HERE ------------------------
skin_include( '_item_block.inc.php', array(
'feature_block' => true,
'content_mode' => 'auto', // 'auto' will auto select depending on $disp-detail
'intro_mode' => 'normal', // Intro posts will be displayed in normal mode
'item_class' => 'featured_post',
'image_size' => 'fit-400x320',
) );
// ----------------------------END ITEM BLOCK ----------------------------
}
?>
Para facilitar, podemos copiar o arquivo _item_block.inc.php já existente em algum skin padrão (como por exemplo, o evopress) para dentro da pasta do nosso skin.
Isso irá criar e exbir a caixa com a classe de css featured_post, que você pode usar para aplicar alguma formação diferenciada ao seu post de introdução.
É isso. Com esse segundo post, completamos o que era necessário para atualizar seu skin para o b2evolution, lembrando que os skins criados para a série 2.x irão funcionar, mas sem os posts em destaque e sem as melhorias de SEO em meta-descrição e meta-keywords para cada post.
Eu sei que o tema de criação de skins no b2evolution pode ser um pouco complexo (devido ao sistema de widgets e contâineres e ao detalhamento que pode incluir arquivos específicos para a listagem de posts, para um post específico, para uma página específica). Em breve abordarei esse assunto em mais detalhes.
O Lee Turner lançou um novo skin para b2evolution, uma versão do tema Frugal para wordpress. O skin pode ser baixado no site de skins do b2evolution e um demo pode ser visto por lá também.
Comentários Recentes