Primeiras aulas do curso Plugin no Wordpress: widget, shortcode e configurações

Plugin no Wordpress: widget, shortcode e configurações

Primeiros passos com um plugin - Introdução

Olá, sem muito bem-vindos, vamos fazer uma introdução sobre o que a gente vai ver nesse curso, focado mais nessa parte de customizações do WordPress, mais especificamente na parte dos plugins.

Então, a gente tem aqui esse projeto da Alura e a nossa tarefa vai ser realizar algumas customizações aqui na página de palestras. Então, a ideia é que a Alura vai realizar diversas palestras aqui, por todo o Brasil e a gente tem umas customizações aqui, que a gente precisa fazer para ajudar o administrador do site da Alura.

Então, a primeira customização que a gente vai trabalhar, vai ser com essa daqui, que é a lista dos patrocinadores, então a gente tem lá que esses patrocinadores poderão variar entre a Caelum, a Casa do Código e o Hipster.tech.

Então a ideia é a seguinte, a gente tem aqui no momento esses dois patrocinadores, Caleum e Casa do Código, vamos supor que na semana que vem, a Alura vai realizar uma palestra, que os patrocinadores vão ser a Casa do Código e o Hipsters.tech.

Então, a ideia é que o administrador possa vir aqui no painel administrativo, aqui do WordPress. Aí, ele vai vir aqui na parte dos Widgets que a gente vai criar e aqui nos patrocinadores da palestra, ele vai vir aqui e simplesmente trocar, a Casa do Código, Hipsters, vai salvar e aqui.

E aqui, nós vamos ter essa informação refletida no site, então a gente tem aqui Casa do Código e o Hipsters, então a gente vai construir tudo isso, vai construir esse Widget aqui, para fazer essa seleção e vamos fazer os devidos ajustes aqui, para renderizar aqui na página, no front end da aplicação.

Uma vez que a gente fez essa alteração aqui, nós vamos trabalhar nessa customização aqui para colocar o local do evento da palestra que a Alura vai realizar aqui no Google Maps.

Então, a ideia também a seguinte, a ideia é que o usuário, o administrador aqui do site, ele vai vir aqui nesse plugin que a gente vai criar, a gente vai criar tudo isso, essa parte aqui do menu, esse menu customizado aqui, a gente viu que está em inglês, que a gente também vai trabalhar com essa parte de tradução, internacionalização do nosso plugin.

E aqui é a ideia é a seguinte, que ele vai... a gente vai cadastrar aqui, no momento está Rua Vergueiro, ele está aqui com Vergueiro, eu vou colocar o endereço aqui, por exemplo, que eu usei durante o curso aqui, vamos pegar um lugar aqui de Curitiba, eu usei esse endereço aqui, Curitiba e aqui, a gente vai colocar uma data, quando que vai ser realizada essa palestra.

Então, hoje é dia 24 de outubro, então eu vou colocar aqui, por exemplo, 31 de outubro, que está a quase uma semana, então eu vou salvar essas alterações, tudo isso a gente vai criar, a gente vai criar esse painel aqui e aqui, se a gente recarregar a página, a gente vai ter aqui o novo endereço, Rua Saíra Dourada, que eu coloquei aqui na parte de configuração.

Aqui está o local no Google Maps e aqui tem também essa contagem regressiva que a gente vai fazer, lembra que eu tinha colocado a data que era perto, era 31 de outubro, quase uma semana de hoje, então está aqui, a contagem regressiva e a gente vai montar tudo isso.

E aí, para finalizar, a gente vai vir aqui e vai montar essa customização aqui, para mostrar a temperatura no local do evento, então a gente cadastrou aqui que vai ser Curitiba, então aqui, a gente vai comunicar com um API, vai consumir um API, para mostrar aqui a temperatura também na página da Alura.

Bom, é isso daqui que a gente vai ver no curso, só que para seguir aqui, eu recomendo que vocês tenham mexido um pouco no WordPress, não precisa ser profissional também, mas é bom que vocês saibam um pouco aqui como é que funciona o painel administrativo.

E também é importante que vocês saibam um pouco de como que... um pouco sobre (pega pena) que a gente vai fazer os códigos aqui com o PHP, então, se você tem um pouco desses conhecimentos, já vai ajudar bastante. No mais é isso, sejam muito bem-vindos e eu espero que o curso ajude no crescimento profissional de vocês. Até mais.

Primeiros passos com um plugin - Adicionando tema da Alura

Sejam muito bem-vindos ao curso, onde nós vamos realizar aqui algumas customizações para o site da Alura, través da plataforma do WordPress.

Então, se você não tem ainda o WordPress instalado, eu vou colocar depois aqui nos exercícios, os passos de instalação e a gente tem também aqui, nós vamos precisar de um servidor com o banco de dados, se você já fez outros cursos aqui na Alura, muito provavelmente você já utilizou o XAMPP aqui alguma vez.

Se você ainda não tem o XAMPP instalado, eu também vou deixar os passos de instalação depois nos exercícios, então uma vez que a gente tem o WordPress com o XAMPP instalado, falta agora o quê?

A gente pegar os arquivos com o designer da Alura passou para a gente, para a gente poder configurar aqui no WordPress e no XAMPP. Então o primeiro passo que nós temos que fazer é pegar os arquivos do WordPress e levar para a pasta htdocs do XAMPP.

Então, vou colocar aqui o nosso... aqui o meu local de instalação no XAMPP, na pasta htdocs e eu vou colocar aqui na pasta htdocs, os arquivos referentes ao WordPress. Então, eu já fiz o download aqui do WordPress, então eu vou colocar ele aqui, pesquisar, aqui onde está a minha instalação do WordPress.

Vou arrastar para cá, para a pasta htdocs do XAMPP e eu vou aproveitar e vou renomear aqui essa pasta, para não ficar esse nome WordPress genérico, eu vou colocar aqui com o botão direito do mouse, renomear e eu vou colocar o nome do projeto que a gente vai estar trabalhando, que vai ser para a Alura.

Então, eu vou colocar aqui Alura. Uma vez que a gente tem aqui essa pasta com os arquivos do WordPress, falta a gente pegar os arquivos que o designer da Alura passou para a gente, para a gente poder configurar como sendo um tema do WordPress.

Então, para isso, a gente vai ter que vir aqui dentro dessa pasta wp-content, aqui na pasta themes e eu vou colocar esse tema da Alura que o designar passou para a gente, que também vai estar lá nos exercícios para vocês.

Então, eu vou colocar aqui na minha pasta de documentos, aqui e eu vou arrastar para cá, esse tema customizado que o designer passou para a gente.

Então, uma vez que eu já tenho o WordPress aqui instalado na pasta, dentro da pasta htdocs do XAMPP e aqui a gente tem o tema customizado, que o designer passou para a gente, falta só a gente realizar de fato a instalação e a configuração do WordPress, para que a gente possa trabalhar com os plugins posteriormente.

Então, vamos lá, para isso, a gente precisa aqui no XAMPP, inicializar o servidor do Apache e também aqui o MySQL, clicando aqui no botão start, verificar que está tudo verde, aqui, que está tudo conectando.

E aí, agora, eu vou abrir aqui uma nova janela no Chrome e eu vou colocar aqui: localhost e o arquivo que a gente quer acessar, que a gente renomeou de WordPress, para Alura, então, eu vou colocar aqui “/alura”, que é o nome do nosso projeto e a gente deve ter aqui a primeira parte de instalação do WordPress.

Então, a gente tem aqui o símbolo do WordPress, tudo ok, clicamos no botão “Vamos lá!” e aí, agora, a primeira etapa de configuração aqui do WordPress é indicar qual será o banco de dados que vai ser utilizado para conexão, para poder salvar as informações.

A gente ainda não tem esse banco, a gente precisa criar. Então, eu vou clicar aqui numa nova guia e eu vou colocar localhost/phpmyadmin, para ele abrir o painel administrativo aqui, para a gente poder criar o banco de dados. Então, eu vou clicar aqui em new.

E aí, eu vou colocar o nome do nosso banco, como sendo Alura e eu vou colocar aqui a colagem do banco, como sendo utf8, para poder permitir aqui os caracteres especiais da língua português. Então, eu vou pesquisar aqui, utf8, que deve estar um pouco mais para baixo aqui, utf8 e eu vou colocar esse utf8, que é o general ci, que é mais comumente utilizado aqui.

Então, eu vou colocar criar e nós temos o nosso banco de dados da Alura, então, agora a gente pode voltar para a nossa parte de instalação do WordPress e vamos colocar aqui como o banco que a gente criou, é o banco da Alura.

O nome de usuário do banco, se você instalou o XAMPP seguindo os passos, sem nenhuma modificação, o nome de usuário deverá ser root, então vamos colocar aqui: root e a senha por padrão é a senha vazia.

Então, eu vou colocar aqui para apagar, colocar senha vazia, servidor do banco de dados, localhost, a gente está utilizando o banco localmente e o WordPress, ele coloca esse prefixo wp nas tabelas que ele for inserir nesse banco, para que a gente saiba já automaticamente que essas tabelas são referentes aqui ao WordPress.

Então, está tudo ok, eu vou clicar aqui em enviar e agora, nós temos aqui, que a conexão do banco de dados foi executada com sucesso e nós clicamos no botão instalar. Passamos aqui o título do site com sendo Alura, vamos colocar aqui Alura.

O nome do usuário, eu vou colocar aqui o meu nome para acessar depois o painel administrativo da Alura, colocamos uma senha um pouco mais fácil, porque a gente está trabalhando no nosso ambiente de desenvolvimento, então eu vou colocar 1, 2, 3, 4, 5, 6.

Em ambiente de produção, a gente de fato prefere ter uma senha mais robusta, então, mas aqui como estamos só no nosso ambiente local, não tem problema, para a gente lembrar mais fácil, confirmo essa senha aqui de uso fraca, vou colocar aqui o meu e-mail e nós podemos já instalar o WordPress.

Vou clicar aqui para instalar o WordPress e se tudo deu ok aqui, a gente deve ser capaz de acessar o painel administrativo, então eu vou colocar aqui para acessar, vou colocar aqui o nome do meu usuário Rafael e a senha que nós criamos, 1, 2, 3, 4, 5, 6.

Vou clicar aqui para acessar e a gente já deve ser redirecionado aqui para o painel administrativo do WordPress. Então agora que nós estamos aqui no painel administrativo, se a gente for aqui no site nesse momento, nós vemos que... Opa, não no wpadmin, mas sim, só no Alura, nós temos aqui um tema que é diferente do que o tema do designer da Alura... passou para a gente.

A gente precisa ativar esse tema que o designer passou com as customizações necessárias para o site da Alura, para a gente poder criar os plugins a partir daí.

Então, para a gente poder ativar esse tema customizado, nós precisamos vir aqui nesse menu lateral esquerdo em aparência, temas e nós ativamos aqui esse tema que nós colocamos na pasta wp-content themes.

Então, a gente vem aqui, coloca para ativar e agora, se a gente fizer um refresh aqui na página da Alura, a gente já deve ser capaz do quê? De ver esse tema customizado aqui, que o designer passou para a gente, mas a gente vê, se eu clicar, se eu abrir aqui o nosso projeto final, nós temos algumas modificações aqui.

Então perceba, esse é o nosso projeto final, a home, até que está bem parecida, a gente tem aqui o menu, a gente tem aqui uma página de exemplo, mas aqui a gente tem um menu um pouco diferente, a gente tem essa página de palestra, que no momento, nós não temos aqui no nosso ambiente local de desenvolvimento.

E é isso que a gente vai começar a trabalhar agora. Então por essa aula é isso, muito obrigado.

Primeiros passos com um plugin - Criando a página de palestra

Na aula anterior, nós fizemos a instalação do WordPress e também fizemos a configuração do tema customizado, que o designer da Alura havia passado para a gente. Então no nosso ambiente local de desenvolvimento, a gente deve ter um resultado bem parecido com esse daqui.

Se nós formos lá no nosso projeto final aqui, nós vemos que a home até que está bem parecida, nós temos algumas diferenças aqui no menu de navegação, mas a principal diferença que vai ser o foco do nosso curso, vai ser essa página de palestra aqui.

Então, a ideia é que a Alura vai realizar diversas palestras aqui por todo o Brasil e a gente vai ter que fazer as customizações devidas aqui nessa página, então as customizações que a gente vai ter que fazer, colocar aqui o Google Maps, indicando o local onde a palestra vai ser realizada ou o próximo evento.

Nós temos aqui a contagem regressiva para esse próximo evento, a lista de patrocinadores que poderá ter a Caelum, a Casa do Código, Hipsters.tech e aqui também uma indicação de qual que é a temperatura no local onde a palestra vai ser realizada.

Então, essa vai ser a customização que a gente vai ter que estar fazendo aqui no curso. Então, o primeiro passo que nós temos que fazer é justamente o quê? Criar essa página palestra, que a gente ainda não tem essa página no nosso ambiente local de desenvolvimento.

Então vamos voltar aqui para o nosso ambiente local de desenvolvimento e para a gente poder criar uma página, não tem segredo, eu vou colocar aqui para voltar no painel administrativo, vamos aqui no menu lateral esquerdo em páginas, adicionar nova.

E aí, eu vou colocar o título da nossa página como sendo palestra, vou colocar aqui, clicar em publicar, confirmo que eu quero publicar e aí, eu vou clicar para ver a página. Então, eu vou colocar aqui ver página e perceba que a nossa página já foi criada.

Não se preocupem ainda com o layout, a gente vai consertar esse layout aqui ao longo do curso, mas o importante é que a página palestra aqui, ela já foi criada. Então, uma vez que a página palestra aqui já foi criada, vamos começar a realizar as customizações necessárias.

Então, vou voltar aqui para o nosso projeto final e a primeira customização que a gente vai realizar, pessoal, vai ser aqui dessa lista de patrocinadores. Então, o que que acontece?

Os patrocinadores da Alura poderão variar entre esses três, isso quer dizer que existem palestras que a Alura vai realizar, que poderá somente ter um patrocinador, poderão ter dois, poderão até mesmo ter os três ou tem palestras que não vai ter nenhum patrocinador.

E aí, a Alura vai querer retirar essa lista aqui, para não fazer também nenhuma propaganda gratuita. Então, esse é o primeiro requerimento que a gente vai ter que trabalhar.

Então, para a gente poder fazer essa customização, é natural a gente pensar, que a gente tem que ir no tema customizado, os arquivos que o designer havia passado para a gente e que a gente tem que fazer uma modificação, inserir algum código, para mostrar essas imagens aqui, esses logos dos patrocinadores.

Então, para a gente poder fazer essas customizações, eu vou usar aqui no curso a IDE do PhpStorm, mas fique a vontade de utilizar a IDE ou editor de texto de sua preferência. Então, vou clicar aqui para abrir o PhpStorm, vou colocar PhpStorm, só esperar ele carregar.

E aí, nós vamos abrir aqui os arquivos do WordPress com o tema customizado da Alura, que o designer passou para a gente. Então, eu vou clicar aqui em open, vou lá na minha pasta XAMPP que está aqui, a minha pasta XAMPP, vou aqui... Opa, abri ela, vamos na pasta htdocs.

E nós temos aqui o nosso projeto da Alura com os arquivos do WordPress e o tema customizado que o designar passou para a gente. Vou clicar, que eu quero abrir esse projeto aqui, vou fechar aqui essas dicas que ele dá para a gente e agora, a gente já tem aqui o nosso projeto.

Então, quando nós criamos uma página aqui em WordPress, pessoal, essa página palestra, que a gente acabou de criar, perceba que a gente tem aqui esse designer aqui com o header Alura, a gente tem esse footer aqui, mapa de cursos. Essa renderização é feita lá no nosso tema, através de um arquivo chamado page.php.

Então é natural pensar que se eu fizer alguma modificação nesse arquivo page.php, que essa alteração vai ser refletida aqui nessa página palestra que a gente acabou de criar. Vamos confirmar se de fato isso está acontecendo? Então eu vou lá, vou abrir aqui a minha IDE.

Vou aqui na nossa pasta da Alura wp-content, aqui em temas, aluta e vamos aqui no arquivo page.php, que é o arquivo que o designer havia passado para a gente.

Então, para confirmar se de fato esse arquivo aqui está sendo utilizado para renderizar a página palestra, que a gente acabou de criar, logo depois dessa tag section aqui, eu vou colocar um novo parágrafo, eu vou colocar aqui, abrir a tag do parágrafo, eu vou colocar aqui: “Estou dentro do arquivo page.php”.

Então, se nós voltarmos aqui para o nosso ambiente local desenvolvimento e eu renderizar essa página aqui, recarregar ela, perceba que a gente tem o quê? A gente tem esse novo conteúdo que a gente acabou de inserir, estou dentro do arquivo page.php.

Então, com isso, a gente conseguiu confirmar aqui de fato, para renderizar essa página palestra, está sendo utilizado esse arquivo page.php, então é fácil fazer esse requerimento, basta a gente vir aqui nesse arquivo page.php e colocar o devido código aqui, para mostrar os logotipos dos patrocinadores das palestras da Alura.

Isso funcionária? Funcionária, mas a gente não está sendo... não está fazendo de uma forma tão eficiente, porque lembra do requerimento do administrador da Alura? Ele falou que os patrocinadores vão variar, dependendo da palestra poderão ter um, poderão ter dois, três ou até mesmo nenhum dos patrocinadores.

Isso quer dizer que toda a hora, a gente teria que vir aqui nesse arquivo page.php e fazer uma mudança no código aqui para ilustrar o devido patrocinador de cada palestra, muito trabalho. O ideal é o quê?

O ideal é que a gente colocaria aqui dentro desse painel administrativo uma nova funcionalidade aqui, para que o administrador da Alura possa selecionar quais são os devidos patrocinadores da palestra.

E aí, com isso, a gente não tem que ficar toda a hora voltando no código para colocar... para poder mudar a imagem do patrocinador, a gente delegaria essa responsabilidade para o administrador aqui da Alura.

Então, sempre quando a gente está falando de uma nova funcionalidade, de um novo recurso que tem que ser adicionado aqui ao WordPress, nós estamos falando dos plugins. Então pense nos plugins, como sendo uns aplicativos que a gente tem lá no nosso smartphone.

Então, a gente tem lá o nosso smartphone, ele tem umas funcionalidades pré-estabelecidas, como receber chamada, enviar SMS, por exemplo, mas a partir do momento que a gente precisa de novas funcionalidades, de novos recursos, a gente precisa desses aplicativos.

Aqui no WordPress é parecido, o WordPress, por si só, ele tem algumas funcionalidades, alguns recursos específicos com ele, a partir do momento que a gente precisa começar a realizar essa customizações para o nosso sistema, é que nós vamos utilizar esse plugins para poder atingir esse objetivo.

E é isso que nós vamos fazer na próxima aula, nós vamos começar a criar esse plugin, para mostrar a lista dos patrocinadores. Por essa aula é isso, muito obrigado.

Sobre o curso Plugin no Wordpress: widget, shortcode e configurações

O curso Plugin no Wordpress: widget, shortcode e configurações possui 230 minutos de vídeos, em um total de 68 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