Desenvolvimento de temas de WordPress usando LESS

Os profissionais mais bem remunerados e referenciados em suas áreas de atuação dominam as mais novas tecnologias, isso é regra em qualquer profissão, conhecimento nunca é demais, precisamos estar sempre atento as tendências para evitar que uma onda nos jogue para “fora do mercado”. Após (milhares de) anos fazendo HTML e CSS eu diria que me acomodei como profissional, estava sempre adiando meus estudos de novos tecnologias, por preguiça mesmo, quando conheci uma pessoa com um conhecimento incrível em CSS e front-end development, Luiz Tanure, quando recentemente trabalhamos juntos, mas não no mesmo projeto, em um agência em São Paulo.

Sua paciência e seu gosto por ensinar abriram minha mente para novas tecnologias, que apesar de ainda não terem sido adotadas como padrão no mercado,  são vistas como diferencial no curriculum dos melhores profissionais. Ele me ensinou muita coisa, mas nesse texto vou tratar de LESS, eu nem sabia que isso existia há algumas semanas e agora estou aqui escrevendo um post para passar esse conhecimento, que ele pacientemente me ensinou, para vocês.

O que é LESS?

A tradução literal da palavra less significa menos, não é a toa que foi escolhida como acrônimo dessa linguagem, se escrever mais linhas de código de CSS com muito menos linhas dessa nova linugagem. O LESS é uma pseudo-linguagem de programação, simula tudo aquilo que você sempre quis no seu CSS, é lindo de morrer, adiciona:

  • Variáveis – Esqueça o comando de encontrar e substituir strings para trocar aquela cor, você pode realmente definir variáveis.
  • Mixins
  • Operadores – Bem simples, agora é possível somar, multiplicar, etc.
  • Funções – Como são poderosas funções (bem escritas), programadores experientes vão deitar e rolar com essa nova funcionalidade.

Tudo isso parece tão óbvio, o CSS precisava dessa sobre-vida, eu mesmo não aguentava mais escrever aqueles códigos corridos e repetitivos. Tudo isso parece muito bom, mas e a implementação desse trem, será que é tão fácil quanto parece? Em primeiro lugar o LESS na verdade é só um jeito de escrever um código que vai gerar o mesmo CSS que você já está acostumado, ele não substitui seu velho conhecido, ele apenas é uma linguagem que, depois de compiladas, gera seus arquivos de CSS tradicionais. É de fácil implementação sim, mas eu confesso que demorei muito tempo para conseguir compilar meu primeiro código dentro de um tema de WordPress, mas você pode aprender o caminho das pedras lendo pacientemente e cuidadosamente esse artigo.

LESS ou SAAS

O mercado ainda não escolheu seu padrão, como na época da briga do BluRay e do HD-DVD, qualquer escolha por uma tecnologia incipiente corre o risco de “escapar da curva” da noite para o dia, mas a vantagem é que as duas tecnologias são muito parecidas e quem sabe uma aprende rapidamente a outra. Poderia enumerar diversos motivos pelos quais eu escolhi LESS, mas um leitor atento poderia rebater todos, apontando vantagem do SASS, então vou dizer simplesmente que escolhi por intuição. Além disso, uma busca no site da apinfo por vagas abertas em LESS, mostra que profissionais com esse conhecimento estão muito bem cotados.

WordPress e LESS

Como de costume gosto de fazer uma introdução no tema antes de sujar as mãos com o código, confesso que tive muita dificuldade em conseguir usar o LESS no WordPress, não conseguia compilar meu arquivo por nada nesse mundo, bati muito a cabeça na parede até encontrar a solução, que vou compartilhar de mão beijada. Mas antes você precisa saber que existem dois tipos de compiladores, o que compila o código a cada acesso no site, e o pré-compilador, que é compilado pelo sistema. Vou cobrir o segundo, que é mais simples e eficiente em termos de processamento e cache. Lembrando que estamos falando de desenvolvimento de temas, não de plugins.

Referências

https://github.com/oncletom/wp-less – Documentação oficial do plugin Wp-Less (em inglês)

https://github.com/oncletom/wp-less/wiki/Embedding-within-a-WordPress-Theme#Basics%20of%20embedding – Usando o plugin para embedar LESS no seu tema. (em inglês)

https://lesscss.loopinfinito.com.br – Documentação oficial traduzida

https://carlorizzante.com/2011/how-to-implement-less-in-wordpress-first-approach/ – Tutorial como usar o LESS com compilador de javascript (sem plugin) (em inglês)

https://en.wikipedia.org/wiki/LESS_(stylesheet_language) – Wikipedia (em inglês)

https://tommcfarlin.com/using-less-in-wordpress/ – Dicas de um programador (em inglês)

https://codex.wordpress.org/Function_Reference/wp_enqueue_style – (nova) Função padrão do WordPress para incorporar scripts nos temas.

Como proteger seu site WordPress dos recentes ataques hackers

Estou escrevendo um post rápido com uma dica de segurança super simples para proteger seu blog hospedado de um possível ataque hacker, semelhante aos que o servidor wordpress.com sofreu essa semana. Os hackers usam um script para tentar adivinhar a senha do usuário ‘admin’, utilizado como padrão na maioria dos blogs hospedados, a minha recomendação é para que se altere o nome do usuário administrador, para qualquer coisa, menos ‘admin’. Isso aumenta um pouco a segurança do seu blog, mas ainda é preciso sempre ficar atento a possíveis vulnerabilidades.

Referências

http://idgnow.uol.com.br/internet/2013/04/14/blogs-e-sites-wordpress-sofrem-ataque-hacker-forca-bruta/

Ativando WordPress Multisite (MU)

Também conhecido com WordPress network essa funcionalidade permite criar vários blogs na mesma instalação do WordPress, que compartilham plugins e temas, é uma das ferramentas mais avançadas do sistema, é como multiplicar o poder do WordPress por mil. Lembre-se de fazer backup da sua instalação. Para quem gosta de tutoriais rápidos, vamos direto ao passos.

Passo 1 – Habilite multisite no wp-config.php
Existem dois tipos de redes, que operam em subdomínios e subpastas, vamos tratar somente da segunda opção que é mais simples de ativar, acesse o link na referência para o tutorial completo. Cole o código abaixo na última linha do wp-config.php, salve e não feche o arquivo ainda.

/* Multisite */
define('WP_ALLOW_MULTISITE', true);

Passo 2 – Ative a rede pelo painel

Ferramentas -> Instalação da Rede
Ferramentas -> Instalação da Rede

Um novo item irá aparecer no seu painel, em Ferramentas -> Instalação da Rede. Vai pedir para você desativar os plugins antes de prosseguir.

Depois de ativada a rede você vai ter que colar dois trechos de códigos, um no wp-config.php e outro no .htaccess, que serão exibidos se tudo correr bem.

Passo 3 – Painel do administrador

Para instalar plugins, temas e atualizações surgiu um novo painel, chamado painel do administrador. Se você criar um blog para um usuário ele não vai poder instalar um plugin, sempre que você precisar instalar um plugin vai ter que acessar o painel da rede e depois voltar para o cada blog e ativar. Dica, se você usa o plugin BuddyPress vai ter que colar esse código no wp-config:


/* Enable BuddyPress Multisite*/
define ( 'BP_ENABLE_MULTIBLOG', true );

Referências

http://codex.wordpress.org/Create_A_Network – Página oficial que ensina a ativar a rede de blogs com muito mais informação, em inglês

Receba feedback do seus visitantes com o plugin Usernoise

Abra um novo canal de relacionamento com seus visitantes e clientes, com esse incrível plugin um novo item aparece ao lado do seu site, permitindo um novo tipo de interação. É possível receber idéias, críticas e elogios para melhorar seu site.

Plugin uservoice, um novo canal de comunicação
plugin Usernoise

No momento que eu escrevo este post o plugin está ativado e operando, se quiser entender como funciona é só clicar na caixinha do lado esquerdo do site escrito “comentário”, mas se por ventura o plugin estiver desabilitado no momento da sua visita, segue uma captura de tela para um registro mais apurado.

Recomendo utilizar esse plugin porque é muito versátil e pode ser útil em qualquer projeto, além de permitir um melhor relacionamento com o visitante pode ajudar os administradores a melhorarem continuamente. Fica muito mas fácil receber opiniões de pessoas de fora da equipe de desenvolvimento, que enxergam o site com outros olhos e podem alertar para problemas e melhorias que ainda não tinham entrado no radar.

Não é um plugin must-have porque sua funcionalidade é complementar, mas está na lista dos plugins que eu recomendo para meus clientes.

Referências

http://wordpress.org/extend/plugins/usernoise/screenshots/ – Página oficial do plugin

Explorando "post type" com dois plugins completos

O WordPress lança funcionalidades novas a cada versão, as vezes é muito difícil acompanhar essas mudanças, muita gente ainda não conhece uma funcionalidade incrível que foi lançada recentemente, os tipos de post customizados (custom post type). Os autores tem muitas opções para organizar seus posts, categorias e tags resolvem quase todo pepino, não deixando nada a desejar, então para que serve os tipos de posts?

Do ponto de vista de um autor que precisar falar de vários assuntos diferentes no mesmo WordPress, por exemplo, treinos de corrida, horta caseira e administração de empresas, essa nova funcionalidade pode ajudar a organizar o conteúdo, separando cada assunto em seu próprio blog. O leitor ia ficar bem confuso se no mesmo blog encontrasse tantos assunto, mesmo estando super organizado em categorias.

Na verdade essa é um demanda que faz mais sentido do ponto de vista dos desenvolvedores, já que vários plugins utilizam posts customizados para não bagunçar o banco de dados do WordPress, assim quem cria plugins tem uma opção extra para trabalhar com o banco de dados, sem o bagunçar, mas mesmo autores de blogs podem a utilizar para escrever sobre vários assuntos.

O próprio WordPress já utiliza essa funcionalidade no seu core, você sabia que páginas são posts? Porém são um tipo de post exclusivo, denominados páginas, no banco de dados do WordPress estão posts e páginas juntos na mesma tabela.

Plugin Custom Content Type Manager

um blog novo no menu
um blog novo no menu

Para trabalhar com essa funcionalidade sem alterar o código-fonte do seu tema existe a opção de utilizar o plugin Custom Content Type Manager, que permite adicionar e editar post types facilmente.

Para criar um tipo de post utilizando este plugin  é muito simples, após a instalação você pode escolher o nome e um ícone para seu tipo de post e um menu aparece no painel, como na imagem ao lado. Assim você tem um novo blog dentro do WordPress, é aberto no menu um item novo, igual ao dos posts.

adicionando um post customizado
adicionando um post customizado

A tela para adicionar um post é parecida com a padrão, mas sem categorias e tags, como você pode ver na imagem ao lado. Para quem precisa criar um blog novo e está com pressa esse plugin ajuda muito, como no caso de um cliente que tem um game usando o WordPress e utilizou post type para as atividades que os jogadores precisam cumprir.

Plugin Post Type Switcher

mudando tipo de post
mudando tipo de post

A última dica é o plugin Post Type Switcher, com ele é possível trocar o tipo de um post, uma caixinha de seleção aparece no menu de edição, que permite alterar facilmente o tipo do post. Se você quer, por exemplo, transformar um Post em Página.

 

WordPress MU x custom post yype
O que vale mais a pena, habilitar o WordPress MU e criar novos blogs ou utilizar estes plugins? Na minha opinião, ativar o MU é mais trabalhoso, mas tenha em mente que o custom post types é bem limitado, essa funcionalidade é boa para organizar o conteúdo, ainda mais em alguns casos quando já se tem um blog e não quer misturar os posts. Do ponto de vista do desenvolvedor é ainda mais importante para deixar o banco de dados organizados.

Plugin portable phpMyAdmin

phpmyadmin_logo_300x300Desenvolvedores de WordPress que são da turma da pesada, ou seja, que alteram php e banco de dados do sistema sabem que ficar trocando de tela, aba ou janela atrapalha muito, ainda mais quando tem muita coisa aberta na tela, fazer os caminhos de ida e volta podem exigir muita concentração. Para evitar ficar abrindo abas e logando no phpMyAdmin fui procurar uma solução.

Quando descobri esse plugin fiquei muito feliz mesmo, é tão bom que eu não vou precisar de mais de um parágrafo para te convencer a instalar, se você responder sim a minha pergunta você vai terminar de ler esse post e vai direto fazer a instalação. Você utiliza WordPress e phpMyAdmin? Então saia correndo daqui e vá instalar o Portable phpMyAdmin, sem mais delongas, esse é um must-have. Um novo item aparece no menu do seu WordPress com seu phpMyAdmin sempre pronto, esse desenvolvedor merece um troféu pela solução criativa, tenho instalado este plugin em todos os meus projetos.

Referências

http://wordpress.org/extend/plugins/portable-phpmyadmin/ – Site oficial do plugin

WordPress com suporte a vários idiomas

Hello my friend, estamos hoje conectados na teia mundial de computadores e mesmo um site de uma empresa brasileira pode ter uma versão tipo exportação, com suporte a vários idiomas, com o plugin qTranslate você pode dar suporte a qualquer idioma de maneira muy fácil. Chineses, franceses, alemães, russos, todos vão poder acessar seu site e se sentir em casa e quem sabe até comprar seus produtos ou serviços?

Nada se compara a um site acessível to the whole world, prepare seu site para o acesso de estrangeiros com suporte à outros idiomas, uma simples bandeirinha para trocar toda a linguagem do site e o gringo se sente em casa.

Plugin qTranslate

Existem diversos plugins para dar suporte a multi linguagem, mas como diz a própria descrição do plugin, você vai testar outros e acabar voltando para o plugin qTranslate, que recebe o selo F5 Sites de qualidade máxima, pode ser visto em prática no nosso projeto Pomodoros, que tem suporte a inglês e português. Look the sceenshots para entender como funciona essa belezinha:

tela permite ter o mesmo posts em vários idioma
tela permite ter o mesmo posts em vários idioma

O post é curto mas o conteúdo é precioso, aproveite nossa dica de plugin e impressione seus clientes e visitantes.

Sublime Text 2 com pacote para desenvolvedores WordPress

Qual editor você utiliza para seus projetos em WordPress? Existem dezenas de centenas de editores na internet, eu sou fã do bloco de notas ou do notepad++, até o gedit do linux para mim já está de bom tamanho, sou da filosofia de quanto mais simples melhor, ainda quero aprender a utilizar o Eclipse, uma IDE completa, mas ainda não tive a oportunidade.

Sublime com WordPress
Sublime com WordPress

Comecei recentemente um novo projeto e me foi recomendado pelo gestor conhecer o editor que ele utilizava, o Sublime Text 2, por ser muito leve e ter funcionalidades que interessa dentro do escopo do projeto. Gosto muito de conhecer novas tecnologias e fiquei surpreso com a versatilidade desse editor, tenho instalado tanto no Windows quanto no Linux.

Para eu abandonar meu bloco de notas era preciso que existesse algum “tcham”, algo mais que realmente fizesse minha vida melhor. Em uma busca rápida no Google encontrei um tutorial que ensina a instalar pacotes para incrementar o Sublime com novas funcionalidades e dentro desses pacotes um me chamou a atenção, o pacote de WordPress, que vem com todas as funções e tags fazendo um auto-complete super eficiente.

Gostei muito desse recurso e agora estou utilizando o Sublime “oficialmente” para meus projetos, para programadores WordPress eu recomendo e vou ensinar a instalar, é muito fácil mesmo.

Parte 2 – Instalando o pacote WordPress

Abra o Sublime e navegue para Preferências->Visualizar Pacotes (preferences->browse packages), você vai cair num diretório com todos os pacotes, basta baixar o zip no link abaixo e extrair nessa pasta, então reiniciar o programa. Agora você já vai ter o recurso de auto completar com funções do WordPress.

Referências

http://www.sublimetext.com/ – Página oficial do Sublime

https://github.com/purplefish32/sublime-text-2-wordpress – Pacote de recursos WordPress para Sublime

http://clintberry.com/2012/sublime-text-2-php-symfony-development/ – Post ensinando a instalar vários pacotes para PHP e WordPress no Sublime, em inglês

Publicando o post automaticamente no Facebook e Twitter

Plugins utilizados Twitter Publisher e Wordbooker

Parece cenário de ficção científica pensar em apertar o botão “publicar” do post e o mesmo criar um tweet e um post no Facebook, mas sim meus caros, isso é possível. Ficar “bombando” nossas próprias páginas manualmente é muito demorado, já não basta ter o trabalho de escrever o post ainda ter que ficar colando os links e descrição em cada rede social. Apresento dois plugins camaradas que vão fazer você demitir o estagiário.

Plugin 1 – Twitter Publisher

Teste
Configurando o Twitter Publisher

Fácil de configurar e ainda permite algumas opções “extras”. Para configurar basta logar na sua conta do Twitter, que o plugin pega as informações e se “auto configura”. Esse plugin tem um pequeno problema, se você atualiza um post que já foi publicado ele cria mais um tweet, ou seja, o plugin não sabe a diferença entre “publicar” e “atualizar”. Mas tem uma opção para contornar esse problema, como pode ser visto na captura de tela o checkbox “

Plugin 2 – Wordbooker

wr
WordBooker configurações

Eu já testei dezenas de plugins de Facebook que prometem publicar seu post automaticamente e na minha opinião esse é o melhor, a integração não é muito trabalhosa e cumpre muito bem sua função, mas tem tantas opções que eu ainda estou perdido, não tive tempo para testar cada configuração. Agora quando um post é lançado no blog ele atualiza meu perfil no Facebook e a fanpage do blog F5 Sites, jogando um post no wall.

A configuração é rápida, basta logar na sua conta que ele carrega todas as suas fanpages e você pode escolher em qual publicar, além de permitir publicar no seu mural, como você pode ver na captura de tela ao lado. Esse plugin é fundamental para quem tem página no face e o tenho instalado em outros blogs.

 

Conclusão

Dois plugins ótimos para quem utiliza a dupla dinâmica Facebook e Twitter, pode economizar muito tempo. Mais uma dica que vale ouro para você melhorar seu blog e deixar seus leitores atualizados com seus últimos posts.