Desenvolvendo um site em WordPress com Odin

Atualizado 20/03/2017

Neste post irei ensinar como desenvolver um site em WordPress usando o Framework Odin, que é feito pela comunidade brasileira do WordPress, para quem não conhece muito sobre Frameworks, e principalmente sobre Odin, podem dar uma conferida no post que trata de aceleradores de construção de sites em wordpress.

Em resumo, o Odin ou qualquer outro Framework serve para acelerar a construção e criar, de certa forma, uma padronização do seu código de acordo com a convenção de boas práticas e semânticas na web, grande parte já incluem Bootstrap como sua base de front-end, ou seja, após instalar o Framework, você só se preocupará em programar o site do jeito que quiser, sem perder tempo com configurações básicas de funcionalidade do WordPress.

Bom, vamos ao que realmente interessa:

Não entrarei em detalhes de como instalar o WordPress ou um servidor local, pois não é o foco do post de hoje, mas suponho que saiba instalar e já tenha instalado e tudo esteja devidamente funcionando.

Vamos começar indo na página do Odin:

http://wpod.in/

Faça o download do arquivo zip no site, e descompacte na pasta themes do seu wordpress:

wp-content > themes > seunovotemaodin

No meu caso, o nome do meu novo tema será hositec3.0 mas coloque o nome do tema do jeito que desejar.

Para esse exemplo, usarei o windows como plataforma, mas você  pode desenvolver usando qualquer um dos sistemas operacionais que desejar.

Sabendo que já temos o arquivo

style.css

na raiz do site, você pode alterar as informações que tem nele, como o nome do tema, nome do autor e dados pessoais, e por fim ativa-lo pelo painel administrativo do WordPress. NÃO INSIRA ESTILOS NESSE ARQUIVO.

style

Para alterar e criar o CSS do site sem a necessidade de pré-processadores (que mostrarei como a seguir), você pode editar por outro caminho, que é o: seu-tema/assets/css/ nele terá o arquivo, Style.css

Feito isso, seu tema já está pronto para começar, mas precisaremos “instalar” ele no WordPress.
Como pode observar, seu arquivo style.css na raiz do site, não possuí nenhum estilo CSS nele, isso se dá,  porque o Odin utiliza pré-processadores, e todos os nossos estilos são desenvolvido em SASS e compilado por Grunt. (exceto se você optar por CSS puro).

O Odin e a maioria dos frameworks atuais, utilizam SASS ou LESS como pré-processadores de estilos, então precisaremos criar o “Grunt” (do português “grunhido”) para validar nosso código.

A tendência atual de front-end, é utilizar pré-processadores de estilos, como Sass e Less, se você é iniciante ou avançado em linguagem server-side, sugiro estudar e se aprofundar nisso, se você não conhece esses estilos, mas conhece o CSS, não terá muita dificuldade de aprender, pois é basicamente as mesmas instruções, só que com pré-processadores temos condições mais avançadas de criar estilos, como por exemplo, criar variáveis.

Como também estilos não é o tema desse post, prosseguirei com a instalação de nosso novo template.

Ativando seu tema pelo painel do WordPress

Ative o tema que instalou pelo painel

tema

Ao acessar o site, ele terá mais ou menos essa cara:

site

 

Como vemos acima, ele já está no padrão Booststrap, e funcionando, mas para que os novos estilos funcionem corretamente, temos que “criar/instalar” o grunt no tema.

Instalando o Grunt

Antes de qualquer coisa, precisamos instalar o Node.js em sua máquina, ele é fundamental para que funcione a compilação de seu código, ele serve tanto para utilizar GULP (Gole, em português), quanto Grunt. Ambos são “tipos de compilação” mais usados em Frameworks modernos. (Outra questão que não entrarei em detalhes agora), mas siga as orientações do site para instalar.

Também é necessário instalar o Ruby em sua máquina, pois o sass é dependente dele;

Observe que tem uma pasta dentro do seu tema, chamada “src”. Após instalar o Node.js, vá até seu terminal do seu sistema operacional e acesse a pasta src de seu tema, no meu exemplo e com o windows é o seguinte caminho:

 cd c/xampp/htdocs/hositec/wp-content/themes/hositec3.0/src

E digite o seguinte comando:

npm install

Depois digite:

npm install -g grunt-cli

E logo em seguida digite:

npm install grunt-contrib-sass --save-dev

Por último:

gem install sass

Explicando:

O primeiro comando instala o node_modules em seu tema, poderá ver que no diretório src, agora existe uma pasta com este nome. O segundo comando instala o Grunt para compilar, e o terceiro e quarto comando instala o Sass. (Obs. pode ser que demore um pouco a instalação, mas vária de acordo com sua máquina e suas configurações.)

Pelo site oficial do Grunt ou pelo GitHub, tem mais informações sobre como instalar em seu tema.

Feito isso, você já poderá iniciar seu desenvolvimento. Lembrando que os estilos que deve inserir, precisam ser em  CSS/Sass e escritos dentro da pasta assets/sass;

arquivos

Agora,  SEMPRE que fizer qualquer alteração no código de estilo ou java script do seu tema, você precisa compilar, e para isso você deve sempre usar o terminal:

Para compilar é muito simples, você deve acessar pelo terminal, a pasta “src” do seu tema,

Ex:

 cd c/xampp/htdocs/hositec/wp-content/themes/hositec3.0/src

E dar o seguinte comando:

grunt

Assim ele compilará todo seu sass, transformando em CSS e validará suas alterações;

Abaixo o grunt compilado com sucesso:

capturar

Conclusão:

Em resumo, pode parecer complicado a primeira vez que fizer este tipo de trabalho, usando framework e/ou pré-processadores, mas depois que você consegue usufruir, dificilmente deixará de usar, pois além de prático, traz muita qualidade e praticidade ao seu código.

Eu particularmente só uso pré-processadores pela variedade de opções que me proporciona ao desenvolver em front-end.

Agora você já tem seu tema instalado e funcionando para estilizar e programar usando Odin, espero que tenham gostado.

Qualquer dúvida só comentar.

Obrigado. =)

 

Obs: Alguns comandos podem mudar conforme o tempo passa, isso porque os criadores do framework sempre estão buscando novas soluções. Então é importante salientar que sempre é bom, buscar as novas versões, até mesmo para uma segurança maior

About Rubens Junior 18 Articles
Programador Sênior na empresa Hositec, Front-end e Backend; Conhecimento em: Java, PHP, Android, Mysql, HTML, CSS, SASS, LESS, Type Script, Jquery, Webservice, JavaScript... e eterno estudante de outras linguagens também.