Primeiras aulas do curso WordPress: criação de um tema personalizado

WordPress: criação de um tema personalizado

Criando um tema - Introdução

Olá pessoal, sejam muito bem-vindos. Eu sou o Rafa Nercessian. Eu vou fazer uma introdução sobre o que nós vamos ver nesse curso onde vamos criar um tema customizado no WordPress. Então fomos contratados pela Alura intercâmbios que é uma agência de intercâmbios no Brasil que tem o objetivo de criar um novo site para divulgar os diversos cursos e destinos que a empresa vai oferecer para os seus clientes.

Então esse daqui vai ser o projeto que nós iremos montar ao longo do curso. Então vamos ter essa página da Home com uma imagem e esses respectivos dizeres com o nome da cidade, também uma eventual promoção desse destino e tudo isso vai ser controlado lá no painel administrativo. Então o administrador do site da Aluna intercâmbios vai lá no painel administrativo do WordPress e vai cadastrar essas informações.

Vamos ver como conseguimos fazer essa integração de cadastrar no painel administrativo e depois mostrar o conteúdo que cadastrarmos no painel administrativo para aparecer aqui no site da Alura intercâmbios. Nós vamos ter essa segunda página do nosso projeto que é a página de destinos que o administrador também vai lá no painel administrativo cadastrar esses vários destinos, essas várias cidades com as imagens, com os títulos, uma pequena descrição sobre cada um desses locais.

E aqui vamos ter também a possibilidade do usuário realizar um filtro. Então, por exemplo, ele vai vir aqui e escolher um país, por exemplo, a Coréia do Sul, vai clicar em pesquisar e nós vamos ter as respectivas cidades desse país que ele for pesquisar nessa página de destinos.

Nós vamos ter a terceira página do nosso projeto que é a página sobre nós onde vamos ter um pequeno informativo sobre a história da Alura intercâmbios para que os usuários possam saber um pouco mais sobre os cursos que a empresa tem para oferecer. Então para seguir com nós nesse curso é importante que você tenha um conhecimento já na linguagem de programação PHP e também já tenha trabalhado no painel administrativo do WordPress.

Caso você ainda não tenha esses conhecimentos eu vou mostrar os cursos na Alura que você pode fazer que vai ajudar. Então o primeiro curso que seria referente à linguagem de programação PHP seria esse daqui, "Introdução ao PHP: Primeiros passos" que já vai dar uma boa base para você com relação à linguagem PHP que vamos precisar utilizar no nosso curso para desenvolver esse tema para Alura intercâmbios.

E também tem esse outro curso de WordPress que é "Wordpress: Sites com Elementor" que nesse curso discutimos os principais pontos do WordPress, sobre posts, páginas. Nós vamos trabalhar no painel administrativo que também já vai dar uma boa base para você poder seguir nesse curso onde vamos montar esse tema customizado para a Aluna intercâmbios. Então eu aguardo vocês. Sejam muito bem-vindos e eu espero que o curso ajude no crescimento profissional de vocês.

Criando um tema - Instalando Wordpress

Nós fomos contratados pela Alura intercâmbios que é uma agência de intercâmbios com diversos cursos ao redor do mundo com o objetivo de desenvolver um novo site para eles com o intuito de que eles mostrem os diferentes cursos que eles têm para oferecer aos seus clientes. Então esse vai ser o projeto que nós iremos montar para a Alura intercâmbios.

Então esse projeto é composto por essa página que é a página da Home que vai ter essa imagem de fundo e também vai ter esses dizeres dinâmicos e um dos requerimentos dos administradores do site da Alura intercâmbios é que eles querem ser capazes de alterar o conteúdo, a imagem de fundo, esses dizeres dinâmicos só que eles não têm um grande conhecimento em programação para fazer essas alterações e eles querem ver as soluções que temos para oferecer que podem ajudar eles nessa tarefa.

Então a segunda página do nosso projeto que vamos desenvolver também é a página de “Destinos” que vai mostrar alguns roteiros, algumas cidades ao redor do mundo com cursos de idiomas e aqui assim como na Home os administradores do site querem ser capazes de poder colocar novos roteiros, remover alguns roteiros dependendo da necessidade que eles forem ter. E temos a última página, a página sobre nós que vai falar um pouco sobre a história da Alura intercâmbios.

Então para podermos atender esse requerimento dos administradores do site da Alura intercâmbios, nós vamos utilizar a plataforma do WordPress. Então no WordPress vamos montar um tema customizado para a Alura intercâmbios e no painel administrativo do WordPress os administradores do site vão ser capazes de colocar os devidos roteiros, as imagens, o conteúdo para que seja mostrado no site para os usuários que forem acessar o site da Alura intercâmbios.

Então para podermos trabalhar com o WordPress vamos precisar de um servidor Web e também de um banco de dados. E no curso de pré-requisito nós vimos lá que existe aquele programa chamado XAMPP que já vai vir com servidor Web da Apache e o banco de dados do MySQL. Então vamos abrir uma nova aba para ver como fazemos o download do XAMPP no nosso computador.

Então vou pesquisar na barra de pesquisa do google "download xampp". Vai ser logo esse primeiro link "apachefriends.org". Eu vou clicar aqui no botão "Download XAMPP" e o XAMPP está disponível nos diferentes sistemas operacionais, Windows, Linux e o Mac. No caso como estou no Windows eu faria o download respectivo ao sistema operacional do Windows. Então clicaríamos em "Baixar" que o processo de download seria já inicializado.

Eu já fiz o download do XAMPP e quando você faz o download você vai clicando em "Next" até o fim. Quando você chegar no fim da instalação do XAMPP vai aparecer para você um painel de controle que vai ser esse daqui mostrado no canto superior esquerdo da tela. Esse vai ser o painel de controle do XAMPP que vai aparecer para você. E aqui vamos precisar inicializar o serviço da Apache, vou clicar em "Start" e também o do banco de dados do MySQL.

Vou clicar em "Start". Então uma vez que a configuração do XAMPP já foi feita, precisaríamos fazer o download do WordPress para começar esse desenvolvimento. Então vou voltar no Browser. Nós pesquisaríamos "download wordpress" na barra de pesquisa do google. Seria logo esse primeiro link "br.wordpress.org" e clicaríamos no canto direito "Baixar WordPress" e vai aparecer aqui embaixo essa opção "Baixar o WordPress". A versão atual no momento da gravação é a 5.4.1 que pode ser diferente quando você fizer o curso.

Então bastaria clicarmos aqui no botão "Baixar WordPress" que o download já seria inicializado. Eu já fiz o download do WordPress. Eu vou cancelar para não fazer novamente. E aqui, deixa eu só abrir o local onde estão os arquivos do WordPress, está aqui. Então quando fazemos o download do WordPress nós precisamos fazer o quê?

Precisamos levar esses arquivos do WordPress lá para o diretório "htdocs" do XAMPP que é o diretório que vai ter os nossos arquivos Web. Então para isso podemos vir no painel de controle do XAMPP e vamos clicar nessa opção, neste botão "Explorer" que ele já vai abrir o local onde nós fizemos a instalação do XAMPP. Então uma vez que estamos nesse diretório XAMPP temos que pesquisar pelo diretório "htdocs".

Vou só colocar o zoom para podermos ver melhor. Nós temos que vir nesse diretório "htdocs" e no diretório "htdocs" temos que levar os arquivos do WordPress que fizemos o download agora há pouco. Então vou arrastar para cá os arquivos do WordPress. Só esperar essa transferência ser concluída para conseguirmos fazer a configuração do WordPress. A transferência foi concluída para o diretório "htdocs".

Agora podemos renomear esse diretório WordPress para manter o mesmo nome do projeto que estamos desenvolvendo da Alura intercâmbios. Então vou clicar com o botão direito do mouse "Renomear" e vou colocar aqui "alura-intercambios". Então o projeto já foi renomeado. E com isso nós podemos voltar aqui no nosso Browser e colocar "localhost" e o nome do projeto que acabamos de renomear que é "alura-intercambios".

E deverá mostrar para nós a tela de inicialização do WordPress para que consigamos fazer a devida instalação. Vamos só aguardar mais alguns instantes. Ele apareceu para mim "Bem-vindo ao WordPress". Então vamos clicar aqui. Vamos lá. Então a primeira pergunta que o WordPress faz é com relação o banco de dados que vamos estar vinculado com esse projeto da Alura intercâmbios.

Nós ainda não temos esse banco, precisamos criar. Então para podermos criar esse banco eu vou abrir uma outra aba no Browser e vou colocar "localhost/phpmyadmin" e deverá mostrar para nós essa tela de gerenciamento dos bancos de dados. Então vou clicar em "Novo" para criar um novo banco e vou colocar o nome do meu banco como sendo "alura-intercambios".

O mesmo nome que temos lá no nosso projeto que renomeamos lá no diretório "htdocs". "Alura-intercambios", vou manter essa colagem "utf8" para os caracteres especiais da língua portuguesa, o acento, o til. Com o "utf8" não deverá ter nenhum problema. Eu vou clicar em "Criar".

Nós temos agora esse novo banco "alura-intercambios" e agora podemos voltar aqui para a instalação do WordPress e podemos configurar o nome do banco que acabamos de criar que é "alura-intercambios". O nome de usuário quando fazemos o download do XAMPP. Por padrão é" root", a senha é vazia, vou apagar aqui. Nós mantemos as mesmas configurações do servidor do banco de dados e o prefixo da tabela. Vou clicar em "Enviar".

Se tudo deu certo o WordPress fala "Muito bem! Você conclui essa parte da instalação". Clicamos em "Instalar" e vamos lá colocar o título do nosso site. Eu vou colocar como sendo "Alura Intercâmbios". Vou colocar o nome do usuário o meu nome, a senha que eu quero utilizar para acessar o painel administrativo. Eu vou colocar uma senha fácil de eu lembrar na hora durante o curso que é 123456.

Se fossemos colocar esse projeto na internet o ideal seria colocar uma senha mais forte. Até o WordPress coloca que a senha é muito fraca. Então vou colocar que eu quero utilizar essa senha só para usarmos no ambiente local de desenvolvimento. O meu e-mail vou colocar "rafael.nercessian@alura.com.br". E agora nós podemos clicar em "Instalar o WordPress" que esse processo deverá ser finalizado.

Vamos só aguardar alguns instantes e ver se conseguimos acessar o painel administrativo. Pronto. O WordPress mostrou para mim "Sucesso! O WordPress foi instalado". Então clicamos em "Acessar" e devemos ser capazes de acessar o painel administrativo do WordPress que nós já conhecemos. Então o painel administrativo, o menu lateral esquerdo com as opções que podemos clicar para fazer as devidas configurações no WordPress. Então a primeira etapa concluída.

Criando um tema - Configurando um novo tema

Nós fizemos a instalação do WordPress. Nós precisamos começar o desenvolvimento do tema para a Alura intercâmbios. Então o primeiro passo é verificarmos aonde que os temas ficam armazenados no WordPress. Então no painel administrativo, no menu lateral esquerdo vamos clicar em "Aparência" > “temas” e temos essa opção dos temas.

Então quando clicamos em “temas”, repare que o WordPress no momento em que fizemos a instalação ele já mostra para nós três temas que já vem pré-configurados que nesse exato momento são os temas "Twenty Twenty", o "Twenty Nineteen" e o "Twenty Seventeen" referenciando os anos que foram devolvidos cada um desses temas.

Então é natural de pensar que quando formos nos arquivos do WordPress que fizemos o download nós encontremos algum código referente a esses três temas, o "Twenty Twenty", o "Twenty Nineteen" e o "Twenty Seventeen" porque eu estou vendo no painel administrativo. Tem que ter algum código lá que fizemos o download que esteja referenciando esses temas. Vamos conferir? Aqui no curso eu vou utilizar a IDE do PhpStorm, mas você pode ficar à vontade de usar a IDE de sua preferência.

Então vou abrir a IDE do PhpStorm e vou abrir esse diretório "alura-intercambios" que colocamos no diretório "htdocs" do XAMPP. Então eu só vou colocar o zoom para podermos ver melhor a pasta que temos aqui, "alura-intercambios" que foi aquela que eu havia renomeado. Então esse é o caminho que eu tenho, "C:\xampp\htdocs\alura-intercambios".

Quando eu venho nesse diretório "alura-intercambios" que é o arquivo do WordPress, nós só renomeamos para "alura-intercambios" e temos esse diretório "wp-content". Dentro do diretório "wp-content", repare que vai ter esse diretório "themes". Quando abrimos esse diretório "themes", olha o que nós temos. Então temos como caminho: “alura-intercambios” > “wp-content” > “themes”.

Nós temos esses três diretórios referenciando os três temas que temos no painel administrativo que são eles, o "Twenty Twenty", o "Twenty Nineteen" e o "Twenty Seventeen". Então para podermos customizar um tema no WordPress ele deverá ficar dentro desse diretório "themes". Então vamos lá, vamos criar um diretório para customizar esse tema para a Alura intercâmbios.

Então vou clicar com o botão direito do mouse "Novo > Diretório" e aqui o nome do diretório que vamos criar, vou colocar o nome "alura-intercambios", vou clicar em "OK" e nós colocamos esse diretório. Mas só pelo fato de colocarmos o diretório e voltar no painel administrativo, vamos ver se teve alguma alteração. Vamos atualizar a página, nada mudou. Nós ainda temos somente disponibilizado os três temas que já estavam aqui antes.

Isso porque nós só criamos o diretório, mas não criamos nenhum arquivo. O WordPress não sabe que estamos querendo desenvolver um tema. Nós precisamos criar alguns arquivos para isso. Então para podermos desenvolver um tema no WordPress, ele vai obrigar que trabalhemos com pelo menos dois arquivos. O primeiro arquivo é um arquivo de estilos chamado de "style.css".

Tem que ser esse nome, tem que ser "style.css". Então vou colocar o zoom para podermos ver melhor. Vou clicar com o botão direito do mouse, "Novo > Arquivo Stylesheet" e vou colocar o nome "style". Adicionamos e vamos adicionar também um novo arquivo que o WordPress exige que tenhamos que é um arquivo de conteúdo, um arquivo PHP que tem que ter esse nome "index".

Então "style.css" e "index.php". Vou clicar em "OK" e vamos ter esses dois arquivos, "index.php" e "style.css" dentro do diretório "alura-intercambios" que é o tema que vamos desenvolver para eles. Então só pelo fato de nós fazermos isso, só vou sair do zoom para podermos ver melhor agora e voltarmos no painel administrativo e atualizarmos a página do painel administrativo, repare que agora temos uma referência a esse tema que nós vamos começar a desenvolver.

Apareceu aqui para mim "alura-intercambios". Mas quando clicamos para ver as informações do tema, repare que nós ainda não temos nada muito descritivo. Está só o nome que demos para o nosso diretório "alura-intercambios". Não tem nenhuma informação de quem está fazendo esse desenvolvimento, não tem uma imagem, não tem absolutamente nada.

Se verificarmos alguns dos temas já pré-configurados, por exemplo, o "Twenty Twenty", nós temos essa imagem, temos o título descritivo, como que esse tema trabalha, tem até algumas tags de identificação para se quiséssemos colocar lá no repositório do WordPress nós conseguíamos encontrar esse tema de uma forma mais fácil com essas palavras que estão nas tags de identificação.

Então vamos colocar essas informações para deixar o nosso tema mais descritivo no painel administrativo. Então para isso nós temos que vir aqui no arquivo "style.css". Então vou abrir o arquivo "style.css" e nós temos que colocar essas informações dentro do arquivo "style.css" nas formas de comentários.

Para termos um comentário aqui eu vou colocar barra, asterisco, colocar o "Enter" e o que eu colocar entre esse asterisco inicial e esse asterisco final é que vão ser os comentários. Então temos que colocar algumas metainformações para o WordPress saber qual é o título, quem está desenvolvendo, qual é a versão do nosso tema. Então o primeiro passo que eu vou colocar aqui é o nome do tema que nós estamos desenvolvendo.

Então vou colocar Theme Name: Alura Intercâmbios que é o nome do tema que estamos desenvolvendo. Poderia ser o nome que desejarmos. Eu vou colocar "Alura Intercâmbios". Agora eu também quero mostrar quem é o autor, quem está desenvolvendo esse tema. Eu vou colocar autor em inglês, Author: Rafael Silva Nercessian e vou colocar o meu nome "Rafael Silva Nercessian" e eu vou colocar uma descrição também do que esse tema faz. "Descrição em inglês, Description: Tema customizado para a Alura Intercâmbios.

E eu quero também colocar aqui uma versão do tema para termos um controle. Então se fizermos algumas alterações semana que vem ou no próximo mês eu saber em que versão o nosso tema se encontra para ficar mais fácil de controlar essas mudanças. Então vou colocar Version: 1.0.0 e como nós estamos começando o desenvolvimento agora eu vou colocar a versão "1.0.0".

E poderemos também colocar, por exemplo, essas tags de identificação se quiséssemos colocar o nosso tema lá no repositório do WordPress para facilitar aos usuários a encontrarem o nosso tema, nós podemos colocar também essa especificação das tags.

Então colocaríamos Tag: cursos, idiomas, intercâmbios, viagens e poderíamos colocar alguns nomes chaves referentes ao nosso tema, como, por exemplo, "cursos, idiomas, intercâmbios, viagens" e poderíamos escolher outros nomes também para pertencer a essas tags de busca. Agora que fizemos isso, se voltarmos e atualizarmos a informação da nossa página, repare que já vamos ter algumas alterações.

O título ficou "Alura Intercâmbios". Quando clicamos em "Informações do tema", repare que temos aqueles dados que colocamos no arquivo "style.css". Nós temos um novo título, o versionamento do tema, quem está desenvolvendo, a descrição, as tags de identificação caso quiséssemos colocar no repositório do WordPress. E agora só falta colocarmos essa imagem customizada, assim como nós temos nos demais temas já pré-configurados no WordPress.

Para isso eu já tenho aqui a imagem que vamos estar trabalhando e ela tem que ter esse nome "screenshot". Então vou colocar para vocês, tem que ser esse nome "screenshot". E aí nós vamos levar esse arquivo "screenshot" aqui dentro do diretório "alura-intercambios". Então eu vou levar para cá essa imagem "screenshot", dentro do diretório "alura-intercambios", vou clicar “OK” para adicionar.

E agora sim nós vamos ter, se voltarmos para o painel administrativo e atualizarmos a página, repare que nós deveríamos ter também essa imagem referente ao nosso tema. Então essa primeira etapa de configuração do tema com a descrição, o título, o nome nós já conseguimos realizar.

Sobre o curso WordPress: criação de um tema personalizado

O curso WordPress: criação de um tema personalizado possui 199 minutos de vídeos, em um total de 75 atividades. Gostou? Conheça nossos outros cursos de WordPress em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda WordPress acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas