Wordpress: integrando responsividade, efeitos visuais e explorando plugins
Importando o projeto - Apresentação
Boas-vindas ao curso de WordPress. O Luan Alves será o instrutor que vai te guiar nessa jornada de estudos.
Audiodescrição: Luan Alves é um homem cisgênero de pele clara, cabelos e olhos castanhos escuros. Usa barba, brinco na orelha esquerda e blusa preta. Ao fundo, parede branca com estantes de livros e um sofá. Ilumiminação gradiente do azul ao rosa.
O que vamos aprender?
Vamos aprender sobre WordPress ao trabalhar no projeto Jornada Viagens, um site de uma agência de turismo.
É um projeto já em andamento, ou seja, vamos precisar aprender a como fazer a migração de um projeto já iniciado, além de conhecer vários recursos interessantes e atuais sobre WordPress.
Por exemplo, o efeito de modo noturno que é um efeito para escurecer a tela presente na maioria dos sites. Também vamos trabalhar com a responsividade, isto é, ajustar o projeto para diferentes tamanhos de tela.
Além disso, vamos trabalhar com efeitos de movimento e a internacionalização da página. Como é um agência de turismo, precisamos que a página tenha versões para outros idiomas, como espanhol e inglês.
Também vamos ensinar um efeito de WhatsApp. Com esse recurso, ao clicar no botão de "WhatsApp" no site, o atendimento da agência de turismo será conectada com seus clientes.
Vamos trabalhar sobre vários efeitos de tela muito interessantes e atuais, vários recursos do Elementor e também do WordPress. Te esperamos no próximo vídeo para aprender tudo isso!
Importando o projeto - Instalando o XAMPP
Boas-vindas a mais um curso de WordPress.
Nesse curso, vamos continuar o projeto Jornada Viagens que já foi iniciado pelo instrutor Jhonatan Jacinto no curso WordPress: crie sites com Elementor e Figma.
Caso você já tenha finalizado esse curso e tenha o projeto Jornada Viagens no seu computador, você pode apenas acompanhar essa primeira aula.
Mas, caso você esteja iniciando o curso agora e não tem a primeira etapa do projeto, vamos te ensinar a como fazer a importação de um projeto WordPress que já está em andamento.
Como fazer a importação de um projeto WordPress?
Precisamos utilizar um sistema que ofereça um ambiente para rodar o WordPress. O WordPress por si só não roda na nossa máquina e necessita de uma hospedagem que ofereça um banco de dados em MySQL e que rode na linguagem de programação em PHP.
Vamos utilizar o serviço de hospedagem chamado Xampp que também foi utilizado no curso anterior. O Xampp oferece uma ótima hospedagem com qualidade e de forma gratuita.
Baixar o Xampp
Para baixar o Xampp, vamos abrir o site do Apache Friends no navegador.
Caso o site esteja em inglês, basta alterar o idioma para "PT-BR" no dropdown do canto superior direito. Após traduzida, você pode ler a página com calma.
Mas, vamos te ensinar como fazer a instalação do Xampp. Existem três opções disponíveis de download de acordo com o sistema operacional do seu computador: Windows, Linux e OS.
No nosso caso, o computador tem um sistema Windows. Vamos baixar clicando na primeira opção de "XAMPP para Windows" e aguardar o download iniciar automaticamente.
Uma questão muito importante: a versão mais atual do Xampp é a
8.2.4no momento de gravação desse curso. Porém, quando você for baixar o Xampp, ele já pode estar em outra versão.
Caso ainda esteja em uma versão 8, as funcionalidades do Xampp não devem mudar tanto. Mas, caso altere para as versões 9, 10 ou 11, podem ter maiores alterações de funcionalidade. Se isso impedir a continuidade do projeto, nós da Alura vamos preparar um conteúdo mais atualizado.
Instalar o Xamp
Após finalizar o download do instalador do Xampp, vamos abrir a pasta de "Downloads".
Outros dois arquivos muito importantes são jornadaviagens.sql e jornadaviagens.zip.
Esses dois arquivos do projeto Jornada Viagens estão disponíveis para download na atividade "Preparando o ambiente" dessa aula. É muito importante ter ambos arquivos baixados em sua máquina!
Agora, podemos continuar a instalação do Xampp. Para isso, basta clicar no instalador do Xampp com a extensão .exe.
Com isso, aparece uma janela de boas-vindas e um aviso em inglês que informa que alguns recursos do Xampp são bloqueados pelo Windows. Isso não influencia no projeto e no uso do programa, basta clicar em "OK".
Na janela "Setup" com as boas-vindas, podemos clicar no botão "Next".
Na nova aba "Select Componentes", são informados os recursos-padrão do Xampp. Caso queira você pode desselecionar alguns, mas recomendamos manter todos os recursos marcados. Como não vamos alterar nada nessa aba, vamos clicar em "Next".
Na nova aba "Installation folder", podemos escolher onde ficarão guardados os arquivos do programa Xampp. Por padrão, ficam no diretório C do Windows. Vamos manter essa pasta e clicar em "Next".
Na nova aba "Language", podemos alterar o idioma do programa. As opções são somente inglês e alemão. Por isso, vamos manter "English" (inglês) e apertar "Next".
Na aba "Ready to Install", vamos confirmar que estamos prontos para instalar ao clicar em "Next" novamente. Agora, precisamos aguardar alguns minutos para completar a instalação já que são muitos arquivos.
Feito isso, podemos selecionar para abrir o Xampp após finalizar a instalação e clicar em "Finish". Desse modo, abre-se o painel de controle do Xampp.
Com isso, já temos todo o ambiente de hospedagem pronto para receber um projeto WordPress. Vamos concluir a importação do projeto no próximo vídeo!
Importando o projeto - Importando projeto WordPress
Agora que já baixamos o Xampp que oferece um ambiente de hospedagem para um projeto WordPress, podemos finalmente fazer a importação do projeto Jornada Viagens.
Essa técnica de importação de projetos pode ser utilizada para outros projetos futuramente.
Importação do banco de dados
No painel de controle do Xampp, precisar dar "Start" no nível de "Apache". O Apache serve para rodar a linguagem de programação PHP, a qual é necessária para rodar um projeto WordPress. Também precisamos dar "Start" no nível de "MySQL" para poder rodar o banco de dados.
Primeiro, vamos fazer a importação do banco de dados do projeto. Depois, faremos a importação do WordPress.
No nível de "MySQL", vamos clicar no botão "Admin" para abrir o admin do banco de dados. Para fazer a importação nessa página phpMyAdmin no navegador, precisamos clicar na opção "Importar" no menu superior.
Na aba "Importando para o servidor atual", vamos clicar em "Escolher arquivo" para selecionar um arquivo a importar do computador. Devemos escolher o arquivo jornadaviagens.sql que é o arquivo da linguagem SQL de banco de dados.
Para finalizar essa importação, vamos em "opções específicas de formato" ao final da página e clicar em "Importar".
Após alguns segundos, você pode conferir que a importação foi concluída quando aparecer o banco de dados jornadaviagens no painel à esquerda. Se você seguiu os passos e o banco de dados não apareceu, aconselhemos seguir as intruções novamente.
Importação do projeto WordPress
Agora, vamos de fato fazer a importação do projeto WordPress. Para isso, vamos na pasta de "Downloads" no computador. Em seguida, vamos abrir o arquivo compactado jornadaviagens.zip que baixamos na atividade "Preparando o ambiente".
Nesta pasta, temos todos os arquivos em WordPress para serem importados. Basta copiar a pasta "jornadaviagens" que está dentro do arquivo zipado. Para isso, clique com o botão direito e escolha a opção "Copiar".
Vamos colá-lo no diretório do Xampp. Para isso, vamos até a pasta onde baixamos o programa. Em nosso caso, vamos em "Windows-SSD (C:) > Xampp > htdocs". Nessa pasta, vamos colar os arquivos do projeto Jornada Viagens com as teclas "Ctrl + V".
Como é um projeto que já está em andamento, temos muitos arquivos para serem colados. Esse processo pode demorar alguns minutos.
Essa pasta "jornadaviagens" que colamos no "htdocs" possui todos os arquivos do projeto WordPress. Por isso, não recomendamos fazer nenhuma alteração nos arquivos para não influenciar no projeto.
Agora, podemos voltar no phpMyAdmin no navegador para testar se conseguimos fazer essa importação. Na URL, vamos substituir o endereço atual e escrever apenas:
localhost/jornadaviagens
Desse modo, deve aparecer o projeto Jornada Viagens iniciado anteriormente - o que confirma que a importação foi bem-sucedida.
WordPress Admin
Agora, precisamos abrir o projeto no admin do WordPress. Para isso, vamos adicionar /wp-admin/ a URL:
localhost/jornadaviagens/wp-admin/
Ao dar "Enter", é carregado a página de login do WordPress Admin, onde precisamos informar as credenciais para entrar no projeto.
Como o projeto já está em andamento, precisamos utilizar as credenciais utilizados no último curso pelo instrutor Jhonatan:
- Nome de usuário: jota
- Senha: teste123
Após informar esses dados, vamos clicar em "Acessar" e entrar no WordPress Admin.
Nessa etapa do projeto, podemos aplicar todas as funcionalidades que vamos aprender com o WordPress. Nesse momento, vamos começar a aplicar funcionalidades de internacionalização, responsividade e também modo noturno.
Ao final do curso, vamos postar esse projeto em um site na internet. Te esperamos no próximo vídeo para aprender tudo isso.
Sobre o curso Wordpress: integrando responsividade, efeitos visuais e explorando plugins
O curso Wordpress: integrando responsividade, efeitos visuais e explorando plugins possui 91 minutos de vídeos, em um total de 35 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:
- Importando o projeto
- Internacionalização
- Responsividade no Wordpress
- Efeitos visuais com Wordpress
- Explorando funcionalidades com plugins