Olá pessoal, eu quero mostrar para vocês como criar página de localização com Advanced Custom Field e sem API do Google.

Eu vou utilizar a forma free do mesmo que esta no repositório do WordPress.

Primeiro de tudo ou vou criar uma página pelo painel de criação, eu vou nomear ela como “Localização” mas isso fica do seu critério.

Eu gosto de criar uma página modelo, para que se precisar alterar o nome ou alguma coisa referente a página não de algum conflito com a configuração do ACF que vamos criar.

Se você trabalha com um tema personalizado ou premium é só copiar a page.php e aproveitar todo o arquivo só deixando o bloco central limpo.

Vou deixar um exemplo simples abaixo:

Antes de tudo, hoje em dia você precisa ter uma conta no Google Maps Platform para ter acesso a API. Esse necessidade de conta premium é desde 2018 que o Google mudou alguns termos de uso e esse serviço passou a ser pago por acesso.

Então nesse tutorial eu vou mostrar uma forma alternativa e totalmente grátis para criar um iframe sem a necessidade de pagamento .

Por isso que vamos ter que utilizar um site externo para encontrar a Latitude e Longitude do nosso endereço é um pouco mais “chatinho” mas não tem segredo nenhum.

Criando a Página Personalizada

Vamos criar a nossa página dentro do WordPress, já com o nosso arquivo page-localizacao.php já foi criado anteriormente da forma que eu mostrei para vocês, lembrando que precisa ter o cabeçalho como esta dentro do arquivo de exemplo.

Template Name: Localização

Essa parte é a parte mais crucial do tema, que é ela que fala para o WordPress que vamos ter um Modelo de Página chamada “Localização”.

Agora com a página criada é só vinculada ao modelo de página Localização e vamos partir para os campos personalizados.

Imagem do campo de Modelo.

Criando os Campos Personalizados

Eu crie três campos personalizados, o primeiro é um campo de “Mensagem” nele eu falo a necessidade do site externo junto com o link do mesmo.

Campo de Mensagem do ACF

E depois criei dois campos de texto simples que vão receber os dados de Latitude e Longitude.

Campos de Latitude e Longitude.

Para facilitar para vocês eu vou deixar o JSON dos campos para que vocês possam copiar e a importar dentro do seu ACF (Campos Personalizados > Ferramentas).

Página de Cadastro – Backend

Agora com tudo configurado a sua página é para ficar assim como a da imagem abaixo com o modelo de localização junto com os campos personalizados.

Tela de Localização junto com os campos personalizados do Advanced Custom Fields.

Vamos gerar um endereço de teste para cadastrar as coordenadas eu vou utilizar o endereço padrão que já esta no site da GPS Coordinates, clique em “Gerar Coordenadas” e vamos para o site .

GPS Coordinates

Veja que já tem um endereço padrão “New York, United States” de teste vamos pegar as coordenadas e colocar na nossa página.

Página de Localização – Frontend

Agora estamos na parte final do tutorial, vamos adicionar as variáveis junto com o loop personalizado que vai receber o nosso iframe e coordenadas.

Eu vou colocar legendas nas linhas mais importantes para que fique mais simplificado para vocês entenderem:

Legenda das Linhas

  • Linha 3 e 4 = as variáveis que vão receber as coordenadas;
  • Linha 8 a 10 = Eu criei uma DIV com uma classe “map-responsive” ela é a responsável para o iframe ser responsivo.

Agora se todos os passos foram feitos corretamente a sua página de localização vai estar assim, você pode perceber que o mapa vai se adaptar a largura do seu site ou do seu conteúdo.

Mapa de Localização

Espero que vocês tenham gostado desse tutorial e até breve.

Por favor, se você gostou deixe seu like e também se possível compartilhe.

César Ribeiro
Written by

Hi, my name’s Cesar H. Ribeiro, I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, I’m Web Developer Freelancer, my main specialty is deploying custom Web Sites using the WordPress platform with base, transforming PSD/Layouts for Custom Themes. In feel years with Developer Freelancer, I worked with many agencies around the world like: Brazil, Australia, USA, Germany and Austria.

Related Posts