Aprenda como configurar seu ambiente de Desenvolvimento WordPress e dar os primeiros passos para começar a desenvolver sites, blogs, temas e plugins.
O grande problema dos Desenvolvedores WordPress
Com a evolução da internet a necessidade por um painel administrativo nos sites é cada vez maior. Com isso, o mercado de WordPress tem crescido cada vez mais. Já que ele é perfeito para quem precisa de um site com conteúdo editável, com a possibilidade de criar novas páginas e artigos no blog. Cada vez mais clientes me procuram precisando de um site, blog, ou sistema em WordPress.
40% dos sites da internet são criados em WordPress
Segundo Matt Mullenweg, criador do WordPress
Esse é um mercado que movimenta bilhões de dólares no mundo, e aqueles que sabem como criar sites em WordPress se beneficiam disso.
Existe uma grande demanda por desenvolvedores WordPress, e poucos tem esse conhecimento. A verdade é que existe muita informação desorganizada na internet sobre WordPress, o que cria uma grande confusão na cabeça de quem quer aprender.
Você já procurou algum tutorial de WordPress na internet e saiu com mais dúvidas do que já estava?
Isso é muito comum, eu também já passei por isso, e decidi então criar esse material para que você não tenha que enfrentar esses problemas novamente.
Para aprender a desenvolver em WordPress você precisa de um GPS, um guia que vai te orientar pelo melhor caminho. Caso contrário, você irá perder muito tempo e dinheiro.
Nesse ebook você vai aprender a criar seu ambiente de desenvolvimento WordPress e como começar.
Ao finalizar esse ebook você vai estar pronto para colocar a mão na massa e começar a desenvolver seus primeiros sites, blogs, temas e plugins em WordPress.
O que é WordPress?
O WordPress é uma plataforma que permite a você criar um blog ou um site de forma simples e fácil. Através do login em um painel de administração, o usuário pode modificar cores do site, fontes, informações como telefone, endereço e ainda publicar conteúdo em forma de posts ou páginas.
Essa plataforma é chamada de CMS (Content Management System) ou sistema de gerenciamento de conteúdo. O WordPress, ou apenas WP, é open source (código aberto); isso significa que ele pode ser baixado e alterado de graça.
Diferença entre WordPress.com e WordPress.org
Existem duas formas de você utilizar o WP. No site wordpress.com você pode criar um site totalmente grátis com apenas alguns cliques, porém seu site vai ter o subdomínio .wordpress.com (por exemplo: territoriodigital.wordpress.com).
Essa é a forma mais fácil para quem quer começar ou testar a plataforma. Além disso, é possível conseguir um domínio próprio seu pelo pagamento de uma taxa mensal, dessa forma você pode ter um site mais profissional.
A desvantagem é que você não tem controle total da plataforma por estar num servidor que não é seu.
A segunda forma é utilizar o wordpress.org. Nesse site é possível fazer o download dos arquivos de instalação do WordPress e instalar a plataforma em sua própria hospedagem, ou ainda num servidor local para testes. A vantagem é que você tem controle total da plataforma, podendo alterar código e fazer backup dos seus arquivos e banco de dados.
A desvantagem é que você terá um custo maior com hospedagem e domínio, porém você está trabalhando de forma mais profissional. É assim que os grandes blogs e sites da internet fazem. Meu blog, por exemplo, é feito com WordPress e hospedado em um servidor privado.
Como instalar o WordPress
Para instalar o WordPress você vai precisar de um servidor apache (PHP) e um banco de dados MySQL.
Existem hospedagens que já oferecem tudo isso pronto e instalado, você só precisa instalar o WP ou ainda existem hospedagens que já possuem ferramentas, como o Fantástico De Luxe, para instalar o WP com alguns cliques.
Você vai precisar ter um domínio (nome do seu site) registrado também. Para registrar um domínio .com.br você pode acessar o registro.br e para registrar um domínio .com ou .net e etc, você pode acessar o site name.com ou dynadot.com
A seguir vou te mostrar como instalar o WordPress numa hospedagem, ou ainda em ambiente local (localhost), que é a forma mais recomendada para quem quer fazer testes e trabalhar com desenvolvimento WordPress.
Assim você não precisa contratar uma hospedagem toda vez que quer trabalhar num projeto, pode começar localmente e quando o projeto estiver concluído fazer o upload para a hospedagem.
Como instalar o WordPress numa hospedagem
Primeiramente, antes de começar a instalação você precisa contratar um serviço de hospedagem. Já tive a oportunidades de testar diversas hospedagens, ao longo desses 8 anos trabalhando como desenvolvedor.
A hospedagem mais adequada para trabalhar com WordPress que encontrei foi a Hostgator . O suporte deles atende muito rápido (cerca de 15 min), o servidor é muito rápido e tem um bom custo benefício.
Basicamente para instalar o WordPress você tem que executar os seguintes passos:
Passo 1: Acesse o Painel de Administração da Hospedagem
Quando você contrata uma hospedagem, você recebe esses dados por email. Geralmente o acesso ao seu painel é feito através do endereço do seu site /cpanel, por exemplo: territoriodigital.com.br/cpanel.
Passo 2: Arquivos de instalação do WordPress
Faça o download dos arquivos de instalação do WordPress. Após finalizar o download, no painel de administração da hospedagem, acesse o link chamado “File Manager”, ou “Gerenciador de Arquivos”, para enviarmos os arquivos para o servidor.
Faça o upload do arquivo .zip baixado do WordPress para a pasta raiz do seu site. Se você tem apenas um site, você deve subir os arquivos dentro da pasta public_html do seu servidor. Se você tem mais de um site seria a pasta public_html/meusite.
Após enviado o .zip, selecione esse arquivo e clique em extrair. Abra a pasta wordpress e selecione todos os arquivos, clique no botão move para mover todos os arquivos para a raiz do seu site novamente. Após movido você pode deletar a pasta wordpress.
Passo 3: Banco de Dados
Volte para a tela inicial da sua hospedagem e acesse o ícone MySQL Databases. O desenho dos ícones pode variar de hospedagem para hospedagem, mas a funcionalidade é a mesma.
Crie um novo banco de dados para o WordPress. Crie também um usuário e em seguida atribua esse usuário ao novo banco de dados. Marque a opção para habilitar todos os privilégios e conclua.
Passo 4: Instalação do WordPress
Após criado o banco de dados acesse o endereço principal do seu site no navegador. Vai ser iniciada a instalação do WordPress. Coloque as informações com o nome do banco de dados criado anteriormente, nome do usuário e senha. Mantenha o servidor como localhost (apenas troque caso o endereço do seu servidor de banco de dados seja diferente) e altere o prefixo das tabelas do WordPress para outro qualquer por segurança, como por exemplo, esti_.
Se tudo correr bem será exibido uma nova tela para preencher as informações do seu site, caso tenha ocorrido algum erro verifique se as informações que você inseriu anteriormente estão corretas. Nessa nova tela digite o nome do seu site, o usuário do WordPress, sua senha e seu email. Pronto! Seu WordPress está instalado com sucesso!
Como instalar o WordPress em localhost
Se você precisa desenvolver um site para um cliente, quer criar um blog ou um tema WordPress, então você vai precisar instalar o WordPress em um servidor local (localhost). Dessa maneira você pode ficar mais a vontade para fazer testes e desenvolvimento.
Passo 1: Instalação do XAMPP no seu computador
Faça o download do XAMPP e a instalação. O XAMPP vai configurar um servidor Apache e o banco de dados MySQL em seu computador. Assim você vai pode executar seus projetos WordPress no seu próprio computador, sem a necessidade de contratar uma hospedagem.
A instalação é bem simples, basta avançar e confirmar. O XAMPP só tem a versão 32 bits disponível, mesmo que seu Windows seja 64 bits você pode usar a versão 32 bits normalmente.
Após finalizada a instalação, execute o XAMPP e inicie os serviços Apache e MySQL.
Se você tiver problemas para executar o serviço do Apache no XAMPP pode estar dando conflito de porta com algum software que você utiliza, como por exemplo, o skype. Desablite o uso da porta 80 nas configurações avançadas do seu skype, ou feche todos os programas que possam estar utilizando essa porta.
Passo 2: Arquivos de Instalação do WordPress
Faça o download dos arquivos de instalação do WordPress. Após finalizar o download, extraia os arquivos do wordpress.zip que você baixou no diretório:
c:/xampp/htdocs/nome da pasta que você criar.
Passo 3: Banco de Dados
Acesse no seu navegador o endereço: http://localhost/phpmyadmin para criar um novo banco de dados.
Clique em “Base de Dados” depois digite o nome, por exemplo: “meubanco” e clique em criar.
Após, acesse o seu navegador padrão como Chrome ou Internet explorer no endereço:
http://localhost/nome da pasta que você criou para dar início a instalação.
Passo 4: Instalação do WordPress
Acesse no seu navegador o endereço: http://localhost/nome da pasta que você criou. Para dar início a instalação do WordPress.
Na tela de instalação você vai digitar o nome do banco MySQL que você escolheu. Nome do usuário padrão do XAMPP é “root”, e senha em branco. O servidor você vai deixar “localhost”. E o prefixo eu aconselho sempre a mudar para “alguma coisa ” por exemplo, “meuwp” por questões de segurança.
Basta avançar e depois escolher o nome do seu site, usuário e senha de sua preferência.
Pronto! Agora você já pode acessar sua instalação do WordPress no endereço http://localhost/nome da pasta que você criou.
Templates WordPress
O WP permite a você escolher templates ou temas para modificar a aparência e o design do seu site. Existem tanto templates gratuitos como pagos, e a diferença está nas funcionalidades que aquele template oferece e no nível de profissionalismo.
Para escolher um template gratuito você pode acessar o diretório de temas do WordPress.
Se você prefere investir em algo mais profissional você pode encontrar temas pagos (Premium) no Theme Forest e no Mojo Marketplace por uma média de 50 dólares.
Dica: Os templates WordPress, por padrão, ficam na pasta de instalação do seu WordPress /wp-content/themes.
Plugins WordPress
É possível também utilizar plugins para aumentar as funções do seu site, como por exemplo, exibir uma lista de fotos do seu instagram, criar um formulário para captura de e-mails ou exibir um pop-up para os visitantes quando seu site é visualizado.
Existem milhares de plugins gratuitos para download no repositório de plugins do WordPress, e se você precisa uma opção adicional você pode comprar plugins premium no site Code Canyon.
Widgets
Os widgets são áreas customizáveis dentro de um tema, normalmente nas laterais, rodapé ou topo, que permitem que sejam adicionados recursos visuais ao seu tema.
O WordPress já vem com alguns widgets padrões como: lista de categorias, lista de posts recentes, nuvem de tags, HTML personalizado e etc. Mais widgets podem ser adicionados por meio de plugins que venham com a opção de adicionar widget, como por exemplo o Facebook Like Box Widget.
Menus
O WP permite que você tenha controle sobre os menus do seu site ou blog. Você pode adicionar os links desejados, sejam páginas, artigos do blog, categorias ou links personalizados.
O seu tema deve ter áreas marcadas, onde podem ser adicionados menus. Como por exemplo, cabeçalho, rodapé, lateral e etc.
Configurando sua IDE para o Desenvolvimento
IDE ou Ambiente de Desenvolvimento Integrado, é a ferramenta que vai permitir criar os arquivos de código do seu tema, ou editar o código fonte de arquivos já existentes.
Vamos recomendar duas IDE’s nesse ebook, vamos lá:
- Notepad++
O Notepad++ é uma IDE muito leve, rápida e fácil de ser baixada. Para quem está começando é uma ótima pedida, por ser fácil de instalar e já começar a criar suas páginas. Ele pode ser baixado nesse link de forma gratuita. - PhpStorm
O PhpStorm é uma IDE mais robusta, com mais recursos que vão facilitar o desenvolvimento, como por exemplo, o auto completar do WordPress, que tem uma biblioteca de funções que a medida que você digita o seu texto ele te dá opções de possíveis comandos começados com as letras digitadas.O PhpStorm é um software pago porém pode ser baixada uma versão de testes nesse link.
Criando meu primeiro tema WordPress
Agora chegou a hora de por a mão na massa! Vamos criar seu primeiro tema simples em WordPress. Nosso “Hello World WordPress”. Bora?
Antes de começar a criar o tema é necessário que você já tenha instalado o WordPress.
Passo 1 – Criar a pasta do tema e arquivos iniciais
Abra a pasta de instalação do seu WordPress, normalmente c:/xampp/htdocs/pasta que você escolheu.
Abra a pasta wp-content/themes e crie uma nova pasta nesse diretório chamada meutema.
Depois abra sua IDE e dentro da sua pasta meutema crie os arquivos em branco: index.php e style.css
Se você acessar agora sua área administrativo do WordPress: http://localhost/pasta que você instalou/wp-admin e ir no menu “aparência/temas” verifique que nosso novo tema já apareceu na lista, porém ainda sem informações.
Passo 2 – Meta tags com as informações sobre o tema
Abra o arquivo style.css com seu IDE e digite o seguinte bloco de código e salve o arquivo:
/*
Theme Name: Meu Tema
Description: Esse é meu primeiro tema WordPress
Author: Digite seu nome
Autor URI: http://meusite.com.br
Version: 1.0
*/
Essas tags vão identificar para o WordPress o nome do seu tema, descrição, o autor (quem criou o tema), o site do autor e a versão do tema. Quando você lançar uma atualização do tema, você pode subir a versão do tema para 1.1 por exemplo. Existem outras tags de indentificação do WordPress que você pode ver na documentação do WordPress.
Passo 3 – Screenshot do tema
Para imagem de exibição do tema, também, chamada de screenshot. Vamos precisar de uma imagem de 880×660 largura x altura. No formato .PNG
Você pode criar essa imagem no Photoshop, ou até mesmo no Paint.
Salve essa imagem dentro da pasta do seu tema com o nome screenshot.png e ela deve aparecer automaticamente na imagem de exibição do seu tema no WordPress
Passo 4 – Carregar os posts no tema
Ative o nosso tema e vamos criar nossas linhas de código WordPress! Abra o arquivo index.php com seu IDE e digite a seguintes linhas de código e na sequência eu te explico cada comando:
Explicando o código
<?php indica início de código PHP
?> indica fechamento de código PHP
get_header() Carrega o cabeçalho do WordPress
; encerramento de linha de código PHP
if( have_posts() ) função que verifica se existem posts no WordPress
while( have_posts() ) Cria uma repetição enquanto houver posts no WordPress
the_post() Carrega as informações do post atual do WordPress
the_permalink() exibe o hyperlink do post atual carregado
the_title() exibe o título do post atual carregado
the_content() exibe o conteúdo do post atual carregado
endwhile encerra a repetição iniciada no while
endif encerra a condição se houver posts existentes
get_footer() carrega o rodapé do WordPress
Pronto! Acesse a URL do seu blog http://localhost/pasta que você instalou para testar
Agora você deve ter seu primeiro tema WordPress, funcionando da maneira como na imagem a seguir.
Se ocorreu algum erro, verifique se o código está 100% idêntico ao passado.