Criação de skins para b2evolution

« Gerencie suas meta descrições no b2evolution

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

Abr 23

Criação de skins para b2evolution - widgets

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: b2evolution 3, skins, tutorial

Endereço de trackback para este post

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

1 comentário

§ Vânia dito em: 18/01/2011 @ 15:13

Achei simples para criar um skin customizado. Mas, ao mesmo tempo o sistema parece ser um pouco travado! Vc me recomendaria?

Feed dos comentários para esse post.

Walter Cruz - b2evolution