Categoria: b2evolution 3

Criação de skins para b2evolution - widgets

b2evolution 3 Enviar feedback »

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_containerNT_('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_containerNT_('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_containerNT_('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_containerNT_('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_containerNT_('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</aby <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_textarray(
                'before'      => '',
                'after'       => '',
            ) );
        ?>
</p>
</div>

E para o título da página

PHP:

<title><?php
        // ------------------------- TITLE FOR THE CURRENT REQUEST -------------------------
        request_titlearray(
            '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.

b2evolution 3.3.2 estável lançado

b2evolution 3 2 feedbacks »

O b2evolution versão 3.3.2 estável "Venice" foi lançado.

Baixe aqui »

A versão 3.3.2, consiste principalmente de correções de bugs da versão 3.3.1 . 3 meses de correções de bugs! A maioria deles foi trazida do trabalho que iniciamos esse verão no b2evolution IV e foram introduzidas na série 3.x pelo Tilman (a versão IV não será lançada senão em alguns meses).

Nós recomendamos a versão 3.3.2 para todos os usuários agora. Atualizar da versão 3.3.1 é somente uma questão de substituir alguns arquivos.

Atualizações de versões anteiores irão precisar do procedimento de atualização padrão (que leva cerca de 5 minutos se você não tem hacks). Skins são compatíveis desde o b2evolution 2.x.

Principais mudanças no 3.3.2

  • Muitas correções de bugs (@tblue / @francoisplanque)
  • Plugin Auto Links melhorado (@francoisplanque)
  • Corrigido bug permitindo múltiplos plugins terem configurações específicas por blog(@francoisplanque)
  • Verificação de permissão de editar o post no momento da atualização do mesmo (ao salvar no BD) (@tblue)
  • XML-RPC:

    • Adicionada verificações de permissões adicionais (@tblue)
    • API metaWeblog.newMediaObject melhorada (@tblue)
    • Assinaturas de métodos da API corrigidas (valores de retorno) (@tblue)
    • Uso de charsets corretos. (@tblue)
    • Verificação de categorias extras antes da postagem (envia o erro correto de XML-RPC no caso de falha). (@tblue)

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:

while( $Item = & mainlist_get_item() )

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.

b2evo 3.3.1 estável lançado

b2evolution 3 Enviar feedback »

O b2evolution versão 3.3.1-estável “Los Angeles” foi lançado!

Baixe aqui »

Como dizem, é a versão mais avançada do b2evolution… ! Melhor ainda, essa versão passou por uma bateria de testes em versões beta e release-candidate  de forma a garantir que upgrades de versões 2.x irão acontecer sem problema! (Pode ser feito em menos de  um minuto!)

Note que também é possível atualizar de versões 1.x mas você irá precisar de um novo evoskin v2/3 e repersonalizar ele para o design do seu site. De qualquer forma, apenas siga as instruções de atualização no arquivo infex.html dentro do pacote ZIP.

Skins e Plugins das versões 2.x irão funcionar no  3.x. Skins desenvolvidos especificamente para o 3.x oferecerão funcionalidades adicionais (como posts introdutórios & posts em destaque).

Pacotes de linguagem do 2.x irão funcionar no 3.x se você adicionar um arquivo de definição de idioma. Dê uma olhada na pasta /locales ou baixe um pacote de tradução do 3.x aqui. Para tradução para português, existe uma prévia disponível em http://pt.b2evo.net/files/pt_BR-3.3.zip.

Essa versão 3.x estável atinge os padrões e funcionalidades que eu coloquei na minha lista insnamente longa no final de 2008, enquanto ainda morava em  (por isso o nome da versão). Para próximas versões, por favor envie pedidos de funcionalidade via twitter, começando assim ” @b2evolution wish: ” – um pedido por usuário em 140 caracteres ou menos! Essa é a regra do jogo :)

Muitas novas funcionalidade!

Aqui você irá poder relembrar as funcionalidades adicionadas nas versões 3.x:

3.3.1-estável

  • Plugin de arquivo melhorado ( @tblue )
  • Plugin Auto Links melhorado ( @francoisplanque )
  • Plugin Auto-P melhorado ( @blueyed )
  • Corrigida exibição de novos widgets instalados via plugin ( @tblue )
  • Corrigida URLs canônicas para posts multipáginas ( @tblue )
  • Corrigido multiblogs.php & a_noskin.php ( @francoisplanque )
  • Arquivo de linguagem mestre atualizado (POT)
  • Limpeza de skins/CSS
  • Correções de bugs adicionais

3.3.0-rc1

  • Skins:

    • Skins podem ter agora traduções específicas (pasta "locales" dentro da pasta do skin, A estrutura de pastas é a mesma para tradução de plugins). (tblue246)
    • Todos os skins agora permitem desabilitar o RSS (leeturner2701)
  • SEO:

    • meta descrição e meta palavras -chave para cada post (leeturner2701)
    • Descrções de categorias podem ser usadas como meta descrição de para páginas de categorias (walter)
  • Admin:

    • O admin agora lembra se o TinyMCE foi usado ou não pela última vez, por post e por blog. (fplanque)
    • Previne o clique em  "Publicar AGORA!"' quando um post está configurado para protegido ou particular (tblue246)
  • Instalador:

    • B2evolution não vem mais com um  _basic_config.php . Ele vem com um _basic_config.template.php no lugar. Dessa forma, a atualização para uma nova versão não sobrescreve o configuração básica anterior. O instalador agora cria o  _basic_config.php baseado no  _basic_config.template.php + dados entrados pelo formulário. (fplanque)
    • Seleção de idioma foi movida para um lugar visível! (fplanque)
    • Somente um locale é ativado por padrão (aquele selecionado durante a instalação). (fplanque)
    • Tela principal simplificada (fplanque).
  • Plugins:

    • Plugin twitter não requer mais a extensão do PHP curl  (yabs)
    • Novo gancho de plugin: BeforeSessionsDelete (yabs, blueyed)
  • Outros:

    • melhorias no i18n e charset (sam2kb)
    • Correções de bugs! (blueyed, tblue246, sam2kb, yabs, leeturner2701, fplanque)

3.2.0-beta

  • Skins:

    • Anexos em posts. Arquivos que não são imagens que estejam ligados em um post serão listados e linkados abaixo do post. (sam2kb)
    • Todos os skins padrão agora suportam posts  em destaque e posts introdutórios. (fplanque).
    • Páginas de categoria, tag, arquivo e busca agora mostram apenas resumos dos posts por padrão. (Requer um skin 3.x; se não o skin irá mostrar posts completos como antigamente). Isso pode ser controlado nas configurações de SEO do Blog. (fplanque)
    • Os skins agora podem ter um arquivo _skin.class.php para sobrescrever o comportamente padrão do Skin e fornecer configurações específicas do skin. Demo: o skin custom tem cores de cabeçalho configuráveis. As configurações podem ser mudadas em Blog Settings > Skin Settings (fplanque) – Todos são bem vindos a estender esas configurações para quaisquer skins que você quiser.
    • Skins podem agora ter um arquivo  item.css file para especificar formato dos conteúdos. Ele será reusado em editores WYSIWYG. (fplanque)
  • URLs & SEO:

    • Homepage: opção de redirect 301 para homepage canônica. (fplanque)
    • Arquivos por data: opção de redirect 301 para urls canônicas. (fplanque)
    • Opção para suportar rel="canonical” quando a redireção 301 não puder ser usada. (fplanque)
    • Options para selecionar quanto conteúdo mostrar (excerpt|teaser|normal) em diferentes tipos de posts. (fplanque)
    • Páginas de Tags: Modo de prefixo somente, que permite urls como http://…/tag/tag-name sem caractere final (blueyed)
    • Atributo rel="tag” opcional (blueyed)
    • Retorno para uma url limpa após o comentário em um post(fplanque)
  • Log & estatísticas:

    • Detecção da nova “ajax search” do Google como referências de busca. (fplanque)
    • Log “serprank” (start= or dc=) param if given in search url. (fplanque)
    • Adicionado goal tracker: /htsrv/track.php (fplanque)
  • UI:

    • Limpeza da interface do usuário (fplanque)
    • O blog é sempre exibido após a publicação de um post. Se alguém realmente NÃO quiser isso, podemos tornar isso uma opção. (fplanque)
    • TinyMCE atualizado para 3.2.4.1 — botões faltando foram corrigidos. (fplanque)
  • Plugins:

    • Plugins agora podem ter configurações específicas para cada blog. (fplanque)
    • Incluído plugin do baseado no twitterlution e estendido para lidar com contas específicas do twitter para cada blog .(Lee Turner, fplanque)
  • Outros:

    • Arquivos CSS combinados para reduzir o número de arquivos CSS carregados. (Sim, eu combinei mais do que dividi ;) Stubs são deixados no lugar para compabilidade retroativa e para prevenir erros 404. (fplanque)
    • Correções de Bug (tblue, blueyed, waltercruz, fplanque, sam2kb, yabs)
    • Correções de CSS (tblue, blueyed, fplanque)
    • Correções de internacionalização (tblue)

3.1.0-beta

  • UI:

    • Editor WYSIWYG integrado (TinyMCE) (blueyed,fplanque)
    • Novo menu (evobar): estendido, extensível por meio de plugins e um pouco de animação (fplanque)
    • Seletor de data jQuery UI integrado (Afwas)
  • Características do Blog:

    • Posts introdutórios: adicionada coluna de tipo na tela e agora é mais silencioso com relação a noindex, sitemaps & notificações.
    • A categoria padrão para novos posts pode agora ser escolhida explicitamente para cada blog.
    • Categorias agora podem ser reordenadas manualmente (ao invés da listagem alfabética). Essa é uma configuração geral de sistema.
    • Geração automática de resumos (fplanque)
    • Histórico de edições do post (clique no reloginho nas listagens de posts) (fplanque)
  • Widgets:

    • Limpeza da interface AJAX (fplanque)
    • O widget Lista de items niversal Universal agora combina as funcionalidades de listagem de posts, de páginas, de links e linkblog... + combinations. Muito poderoso :) (fplanque)
    • Widget de posts relacionados (fplanque)
    • Ppssibilidades dos widgets estendidas (fplanque,yabba,tblue)
    • Widgets podem ser habilitados/desabilitados. (Tblue)
    • O tipo de item Sidebar Links + widget agora permitem a exibição de uma lista de links sem o uso de um blog separado para isso. (walter,fplanque
  • Outros:

    • Número de queries reduzido/velocidade otimizada (blueyed)
    • URLs mais limpas quando navegando através de multiplas páginas. (fplanque)
    • Corrigida a seleção de idioma durante a instalação.
    • Não é exibida a seleção de idiomas na edição de posts se apenas um idioma está disponível
  • Correções de bugs. Many! (Tblue,blueyed,walter)

3.0.0-alpha

  • Características gerais

    • Suporte a avatar de usuários
    • Suporte a campos no perfil: MSN/Live IM, Yahoo IM, AOL AIM, ICQ ID, Skype, Main phone, Cell phone, Office phone' Home phone, Office FAX, Home FAX, Website, Blog, Linkedin, Twitter, Facebook, Myspace, Flickr, YouTube, Digg, StumbleUpon, Role, Organization, Division, VAT ID, Main address, Home address... (o que mais? ;)
    • Posts em destaque permitem que você tenha os últimos posts em destaque acima de todos os outros com uma formatação especial. (requer um skin que implemente get_featured_Item() )
    • Posts introdutórios permitem que você adicione introduções no topo de suas páginas de categorias e tags. O mesmo vale para a home page. (requer um skin que implemente get_featured_Item() )
  • Photoblogging

    • Agora é possível selecionar múltiplas imagens no gerenciador de arquivos e:

      • criar múltiplos posts (1 por imagem)
      • ou crie um post com todas as imagens em anexo
    • Posts de fotos estarão no status rascunho por padrão, permitindo que você adicione títulos e comentários antes de publicar.
    • Widget de índice de fotos para mostrar suas últimas fotos em uma barra lateral de um blog.
    • Suporte para thumbnails "recortados" (a imagem sempre irá ocupar a área completa do thumbnail)
    • Tamanhos de thumbnail podem ser configurados em /conf/_advanced.php
  • Estatísticas melhoradas & analytics

    • Completa revisão do log de acessos
    • Consultas mais rápidas
    • Monitoramento de alvos (TODO finish)
    • Análise de frases de busca
  • Performance

    • Cache em nível de página. Pode ser habilitado em cada blog individualmente (Configurações avançadas do blog)
  • Interface administrativa

    • Ordenação de widgets Yabbarriffic drag & drop (você pode até mesmo mover um widget de um contâiner para o outro)
    • O gerenciador de arquivos agora suporta uma pasta compartilhada (/media/shared/global/)
    • Dashboard melhorada.
    • Adicionados atalhos de usabilidade.
    • Melhoria de compatibilidade com iPhone.
  • Edição de post

    • Adicionado botão "Salvar & editar"
    • Adicionado botão "Publique AGORA!" em um clique
    • Tratamento melhorado de arquivos anexos & imagens.
    • Posts podem ser explicitamente ordenados usando o campo ordem. Isso pode ser configurado para cada post no modo de edição avançado (na coluna direita).
    • Posts podem ter agora campos personalizados. Campos personalizados podem ser definidos para cada blog em "Configurações do Blog > Recursos".
    • A data de publicação pode ser configurada para data explicíta ou simplesmente para "agora" nesse caso ela será atualizada sem a necessidade de digitar a data e hora atuais.
    • Títulos de urls (slugs) podem ter agora até 200 caracteres.
    • Você pode agora especificar um título diferente para ser exibido na tag <title> tag ao invés do título regular do seu post
  • Logging e estatísticas

    • Sessão e registro de acessos, assim como informação de debug são feitos sistematicamente no encerramento do PHP. Portanto, chamadas para $Hit->log() e debug_info() não são mais necessárias nos skins. (Mas também não tem problemas de estiverem lá.)
    • Registro de busca por frases
  • Mais configurações de SEO:

    • Páginas 404 personalizáveis
    • Respostas 404 personalizáveis (200, 301, 302, 303, 404 e 410 !)
    • Meta tags descrição e palavras-chave são inseridas na página principal apenas, para editar conteúdo duplicado
  • Blog por e-mail melhorado (tilman)
  • Blog de demonstração criado na instalação retrabalhado
  • Propriedades do blog

    • Nome de blog maior (até 255 caracteres)
    • Geração automática de slugs para categorias/capítulos(nomes de url)
  • Comentários

    • Quem tiver permissão para *editar* comentários irá ter permissões estendidas em *novos* comentários também, incluindo a postagem de tags <a> .
  • Bug fixes
Contato / Ajuda. ©2010 by Walter Cruz. Design & icons by N.Design Studio. Skin by Tender Feelings / Skin Faktory.