Tags: b2evolution 3
Link: http://www.leeturner.org/index.php/manage-your-meta-descriptions
O texto abaixo é uma tradução, o vídeo encontra-se em inglês. O artigo original se encontra aqui
Essa questão foi enviada por e-mail “Como adicionar tags de meta descrição únicas no b2evolution?”. Você pode ou assistir o vídeo abaixo que mostra o passo a passou ou ler o resto do post.
Antes de entrarmos nos detalhes de como gerenciar as tags de meta descrição com o b2evolution é importante saber o que elas são e porque você iria as desejar em suas páginas HTML.
O propósito de uma tag de meta descrição é dar uma descrição única de cada uma de suas páginas web. Idealmente, cada página no seu site terá uma descrição totalmente única e precisa sobre ela De uma perspectiva do HTML, todos os elementos <meta> (existem mais de um) ficam na tag <head> da sua página e tem o seguinte formato:
<meta name="description" content="Descrição única da sua página"/>
Então, agora você sabe o que elas são e porque você as quer em suas páginas html? Bom, a resposta rápida é que os mecanismos de busca irão usá-las quando estão exibindo suas páginas nos resultados da busca. Esse não é sempre o caso, já que eles podem escolher porções diferentes do conteúdo da sua página se eles perceberem que ele é mais relevante para a busca em questão mas frequentemente a meta descrição é usada como a descrição de suas páginas. Veja o vídeo para um exemplo disso. Você portanto irá querer que suas meta descrições sejam únicas e relevantes para o conteúdo da sua página para deixar os mecanismos de buscas felizes e atrair usuários para as suas páginas.
No b2evolution 3.3.3 existem diversas formas de gerencias suas tags de meta descrição. Você pode configurar as descrições para o nível do blog (como a página índice do seu blog), o nível de página (como um post individual ou uma página) e o nível de categorias (a página exibida quando você clica num link de categoria).
Tags de Meta Descrição para o Blog
Faço o login na administração do seu blog e vá para a Aba Avançada nas Opções do Blog:
Opções do Blog -> [your blog] -> Advanced
Vá até o fim dessa tela e você verá uma seção chamada Meta data. Existe um campo chamado ‘Descrição Curta’ que é usada como a meta descrição no nível do blog.
Tags de Meta Descrição para Páginas
To edit the page level meta description tag you need to head on over to the write/edit screen for each post. Make sure that you are on the Expert tab and scroll down to the bottom of the page to the section called Advanced properties. There you will see a field called <meta> desc. This is where you enter your meta description for this specific post.
Tags de Meta Descrição para Categorias
OK, então o próximo passo e configurar as meta descrições para as suas páginas de categorias. para fazer isso você precisa fazer duas coisas. A primeira é habilitar essa funcionalidade nas configurações de SEO do seu blog, então entre em:
Opções do Blog -> [your blog] -> SEO
Rola a página para a seção chamada Páginas de categorias e lá você verá uma caixa de marcação chamadaMeta descrição.Selecione essa caixa e salve suas configurações. Agora vá para a aba de Categorias do blog:
Opções do Blog -> [your blog] -> Categorias
Clique no ícone de edição para cada uma das suas categorias e preencha o campo Descrição com o que você deseja que apareça como meta descrição da página da categoria.
Usando um excerto como Tag de Meta Descrição
Existe outra configuração no b2evolution 3.3.3 que se relaciona com as meta descrições e está na aba de SEO na seção chamada Single post pages / “Permalink” pages. Essa seção permite que você configure as meta descrições de cada post/página para ser o mesmo que o excerto do post. Eu pessoalmente recomendo gastar um tempo para adicionar uma meta descrição para cada post da forma que eu descrevi acima para que você garanta que tem uma descrição única e relevante para otimizar a descrição. O excerto não será tão otimizado como uma descrição que você escreve por si mesmo.
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.
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)
Criando uma lista de links sem a necessidade de um blog em separado (linkblog)
dicas Enviar feedback »
No início da série 3.x, o François Planque adicionou alguns novos tipos de post, e eu vi nisso uma oportunidade para resolver um pequeno problema que me incomodava: para mim, ter de criar um blog para que ele forcenesse uma lista de links para ser usada em outro blog era algo chato de se fazer Além do mais, adicionava mais um item numa interface já poluída. Eu nunca tinha visto como ficava a barra do b2evolution com muitos blogs criados (fica muito esquisito), e vi nisso uma oportunidade de ajudar a eliminar uma parte desses blogs.
Minha idéia inicial era usar os posts com o tipo "Link" e a partir deles criar a lista de links de um blog, mas o Daniel já estava usando esse tipo de post para outro próposito em seu blog. Então, acabei optando por criar um novo tipo, que o François chamou de "Sidebar Link" (link na barra lateral). Para adicionar links usando esse tipo de post, crie o link da mesma forma que você criava antigamente: o título sendo o texto do link e o campo "Link para o site" sendo o link em si. Não esqueça de colocar o tipo de post como "Sidebar Link". Para exibir a lista de links em seu skin, adicione um widget do tipo "Lista de links simples na barra lateral", que irá exibir numa lista os links criados com o tipo "Sidebar Link".
Se a intenção for eliminar totalmente o linkblog, basta clicar em Opções Globais (ou pode ser Configurações Globais) -> Recursos e habilitar a movimentação de categorias. Após isso, basta entrar nas categorias do seu linkblog e movê-las para o seu blog e mudar o tipo de todos os posts para "Sidebar Links" (o que pode ser unm pouco chato se você tiver muitos links guardados )
Comentários Recentes