-1

Olá

Estou tentando criar um seletor de cidades para o usuário selecionar a cidade e de acordo com a cidade, ir para a página específica, mas não sei nem como pesquisar sobre isso

Fiz tudo em wordpress, montei um popup e nesse popup coloquei um iframe, onde nesse iframe tem um menu dropdown para selecionar a cidade, porém ao selecionar a cidade, a página fica dentro do iframe

Ou seja, acho que iframe não seja a melhor opção nesse caso.

Qual seria a melhor forma de fazer isso no wordpress?

4
  • Predente memorizar a cidade por Cookies ou direto no DB?
    – RpgBoss
    19/02/2018 às 0:42
  • Vc quer que a página que fica dentro do iframe vá para a página principal?
    – Sam
    19/02/2018 às 0:42
  • Coloque na pergunta o código no iframe que você está usando. É preciso saber como vc está fazendo isso, senão não tem como adivinhar.
    – Sam
    19/02/2018 às 0:57
  • não pretendo memorizar, seria apenas mesmo um link para ir para a cidade específica, as páginas de cidades estão todas prontas. o código que estou usando no seletor, é esse pastebin.com/jba0zizG e inseri um iframe dentro do plugin "Layred Poup" para exibir um iframe dessa página, usando o seguinte código <iframe src="myURL" width="100%" height="100%" frameBorder="0" scrolling="no"></iframe > me perdoem os erros e etc.. sou novo aqui, não costumo postar em fórums obrigado pela ajuda. 19/02/2018 às 12:25

1 Resposta 1

0

Como você não deu muitos detalhes irei fazer algo básico, mas que irá servir. Basta você adaptar posteriormente.

Nós podemos trabalhar com Páginas Estáticas no WordPress, isso vai nos permitir criar, alterar ou deletar a página através do painel de administração.

Primeiro iremos criar nosso arquivo na raiz do tema. wp-content/themes/SEU-TEMA/cities.php

Dentro desse arquivo iremos adicionar o código abaixo:

/**
 * Template Name: Choose City
 */

Esse Template Name indica para o WordPress que esta, é uma página de template. Assim pode podemos escolher no painel de administração.

Painel de administração do WordPress

No mesmo arquivo, iremos adicionar o código base. Aqui você pode fazer do seu jeito.

Eu peguei um layout para testar: https://bootsnipp.com/snippets/8Mlzr . Como é apenas uma demonstração e não há muitos detalhes, irei fazer algo bem básico.

Código comentado:

<?php
    /**
     * Template Name: Choose City
     * Layout Author: https://bootsnipp.com/snippets/8Mlzr
     */

    ?>
<!DOCTYPE hml>
<html>
    <head>
        <title>Title of the document</title>
        <style>
            @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600";
            *,
            *::before,
            *::after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            }
            html, body {
            height: 100%;
            width: 100%;
            }
            a {
            color: #FFF;
            text-decoration: none;
            }
            a:hover {
            text-decoration: none;
            }
            body {
            padding: 0px;
            margin: 0;
            font-family: "Source Sans Pro", sans-serif;
            background: #644cad;
            background: -moz-linear-gradient(left, #644cad 0%, #4426a8 100%);
            background: -webkit-linear-gradient(left, #644cad 0%, #4426a8 100%);
            background: linear-gradient(to right, #644cad 0%, #4426a8 100%);
            -webkit-font-smoothing: antialiased;
            }
            h2 {
            margin-top: 0px;
            color: #4d5c6e;
            font-weight: 400;
            }
            p {
            color: #72879e;
            font-size: 16px;
            line-height: 24px;
            }
            .blur {
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
            }
            .flex {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            }
            .modalcontainer {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            }
            .modalcontainer.active {
            display: block;
            }
            .modal {
            display: none;
            position: relative;
            width: 600px;
            height: 330px;
            background-color: #FFF;
            overflow: initial;
            opacity:0;
            }
            .modal.active {
            display: block;
            }
            .modal .content {
            padding: 30px;
            }
            .modal .close {
            font-family: "Source Sans Pro", sans-serif;
            cursor: pointer;
            color: #FFF;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            position: absolute;
            right: 0;
            color: #999;
            font-size: 40px;
            }
            .modal .close span {
            transform: rotate(45deg);
            display: block;
            }
            .modal .buttons {
            width: 600px;
            position: absolute;
            bottom: 0;
            height: 50px;
            background-color: #FFF;
            }
            .modal .buttons a {
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            background-color: #EEE;
            color: #4d5c6e;
            transition: 0.3s;
            text-transform: uppercase;
            font-weight: bold;
            }
            .modal .buttons a:hover {
            background-color: #e1e1e1;
            }
            .modal .buttons a:nth-of-type(2) {
            float: right;
            color: #FFF;
            background-color: #00c06d;
            }
            .modal .buttons a:nth-of-type(2):hover {
            background-color: #00a75f;
            }
            .modalbttn {
            background-color: #24252A;
            padding: 12px 25px;
            text-transform: uppercase;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
            border-radius: 4px;
            }
            .modalbttn:hover {
            background-color: #2b2c32;
            }
            .wrapper-dropdown-3 {
            /* Size and position */
            position: relative;
            width: 200px;
            margin: 0 auto;
            padding: 10px;
            /* Styles */
            background: #fff;
            border: 1px solid rgba(0,0,0,0.15);
            box-shadow: 0 1px 1px rgba(50,50,50,0.1);
            cursor: pointer;
            outline: none;
            }
            .wrapper-dropdown-3:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -3px;
            border-width: 6px 6px 0 6px;
            border-style: solid;
            border-color: #000 transparent;
            }
            .wrapper-dropdown-3 .dropdown {
            /* Size & position */
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            padding:0;
            margin:0;
            /* Styles */
            background: white;
            border: 1px solid rgba(0,0,0,0.17);
            font-weight: normal;
            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -ms-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
            list-style: none;
            /* Hiding */
            opacity: 0;
            pointer-events: none;
            }
            .wrapper-dropdown-3 .dropdown li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #000;
            border-bottom: 1px solid #e6e8ea;
            box-shadow: inset 0 1px 0 rgba(255,255,255,1);
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
            }
            .wrapper-dropdown-3 .dropdown li i {
            float: right;
            color: inherit;
            }
            .wrapper-dropdown-3 .dropdown li:first-of-type a {
            border-radius: 7px 7px 0 0;
            }
            .wrapper-dropdown-3 .dropdown li:last-of-type a {
            border: none;
            border-radius: 0 0 7px 7px;
            }
            /* Hover state */
            .wrapper-dropdown-3 .dropdown li:hover a {
            background: #f3f8f8;
            }
            /* Active state */
            .wrapper-dropdown-3.active .dropdown {
            opacity: 1;
            pointer-events: auto;
            }
            /* No CSS3 support */
            .no-opacity       .wrapper-dropdown-3 .dropdown,
            .no-pointerevents .wrapper-dropdown-3 .dropdown {
            display: none;
            opacity: 1; /* If opacity support but no pointer-events support */
            pointer-events: auto; /* If pointer-events support but no pointer-events support */
            }
            .no-opacity       .wrapper-dropdown-3.active .dropdown,
            .no-pointerevents .wrapper-dropdown-3.active .dropdown {
            display: block;
            }
            .form-control {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            }
        </style>
    </head>
    <body>
        <div class="flex">
            <div class="modalcontainer">
                <div class="flex">
                    <div class="modal">
                        <div class="content">
                            <h2>Escolha sua cidade</h2>

                            <!-- Captura e exibe o conteúdo da página -->
                            <?php the_post(); the_content(); ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>

            /* Captura a instância do LocalStorage ou SessionSotrage, caso não encontre, define nulo */
            const localStorage = window.localStorage || sessionStorage || null;

            /* Caso o valor seja nulo, exibe um erro no Console. */
            if (localStorage == null) {
                throw Error("LocalStorage not found");
            }

            /* Captura o elemento .modalContainer (Overlay) */
            const modalContainer = document.querySelector(".modalcontainer")

            /* Captura o elemento .modal (Onde exibe as cidades) */
            const modal = document.querySelector(".modal");

            /* Captura o select da cidade. (Obrigatório) */
            const city = document.querySelector("#city");

            /* Exibe o modal com uma animação do tipo FadeIn */
            function displayCities() {
                modalContainer.style.display = "block";
                modal.style.display = "block";

                let anim = setInterval( () => {
                    let op = new Number(modal.style.opacity || 0)
                    modal.style.opacity = op+.01
                    modalContainer.style.opacity = op+.01

                    if (op >= 1) {
                        clearInterval(anim)
                    }
                }, 15)

                city.addEventListener("change", (e) => {
                    localStorage.setItem("city", e.target.value)
                    location.href = e.target.value;
                });
            }

            /**
             * (Opcional)
             * Verifica se a cidade já foi definida, caso já tenha sido
             * redireciona o usuário, caso contrário exibe as cidades
             *
             * Caso opte por não utilizar essa função, basta substituir
             * o código abaixo por "displayCities();"
             */
            if (! localStorage.getItem("city") ) {
                displayCities();
            } else {
                location.href = localStorage.getItem("city");
            }

        </script>
    </body>
</html>

Para cadastrar as cidades é bem simples. Basta acessar o painel de administração > Páginas > Adicionar Nova

Cadastrando cidades

Clique na opção Texto e utilize o código abaixo como exemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    <select id="city" class="form-control" name="city">
<option>Selecione uma cidade</option>
    <option value="https://www.ilhaboipeba.org.br/pousadasmorere.html">Moreré, Ilha de Boipeba (BA)</option>
    <option value="http://loucosporpraia.com.br/praia-de-jericoacoara-ceara/">Praia de Jericoacoara, Jijoca de Jericoacoara (CE)</option>
    <option value="http://www.diariodepernambuco.com.br/app/46,15/2017/02/23/interna_turismo,690904/bainha-do-sancho-em-fernando-de-noronha-ganha-titulo-de-melhor-praia.shtml">Baía do Sancho, Fernando de Noronha (PE)</option>
    <option value="https://viagemeturismo.abril.com.br/atracao/praia-patacho/">Praia do Patacho, São Miguel dos Milagres (AL)</option>
    <option value="https://viagemeturismo.abril.com.br/atracao/baia-dos-porcos/">Baía dos Porcos, Fernando de Noronha (PE)</option>
    <option value="https://www.feriasbrasil.com.br/pe/portodegalinhas/">Porto de Galinhas, Ipojuca (PE)</option>
    <option value="http://www.pipa.com.br/pt-br/">Praia de Pipa, Tibau do Sul (RN)</option>
    <option value="http://www.portalcanoaquebrada.com.br">Canoa Quebrada (CE)</option>
    </select>

Para adicionar novas cidades, basta adicionar novos elementos option setando no atributo value, o link da página.

Forçando o usuário a escolher a cidade:

Para forçar o usuário a escolher sua cidade, basta adicionar o código abaixo no seu arquivo onde está o header.

<script>
    /* Captura a instância do LocalStorage ou SessionSotrage, caso não encontre, define nulo */
    const localStorage = window.localStorage || sessionStorage || null;

    /* Caso o valor seja nulo, exibe um erro no Console. */
    if (localStorage == null) {
        throw Error("LocalStorage not found");
    }

    if (! localStorage.getItem("city") ) {
        /* Adicione aqui o link permanente da página */
        location.href = "https://www.example.com/cities/"
    }
</script>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .