Mapa Interativo 2.0

Neste tutorial completo, vou te mostrar como criar um mapa interativo blogs de viagens utilizando apenas o Elementor Pro! ✈️🌍

Download do mapa:

Baixar mapa ⭳
PHP
// lista de subcategorias
function listar_subcategorias($atts) {
    // Define os atributos padrão
    $atts = shortcode_atts(array(
        'id' => 34, // ID da categoria principal
    ), $atts);

    // Verifica se o ID da categoria foi fornecido
    $parent_category_id = intval($atts['id']);
    if ($parent_category_id <= 0) {
        return 'Por favor, forneça um ID de categoria válido.';
    }

    // Impede execução no editor do Elementor
    if (defined('ELEMENTOR_PRO_VERSION') && \Elementor\Plugin::$instance->editor->is_edit_mode()) {
        return '<p>[Subcategorias serão exibidas aqui]</p>';
    }

    // Obtém as subcategorias
    $subcategories = get_categories(array(
        'parent'     => $parent_category_id,
        'hide_empty' => false, // Altere para true se quiser mostrar apenas categorias com posts
    ));

    // Verifica se há subcategorias
    if (!empty($subcategories)) {
        $output = '<ul>';
        foreach ($subcategories as $subcategory) {
            $output .= '<li>';
            $output .= '<a href="' . esc_url(get_category_link($subcategory->term_id)) . '">' . esc_html($subcategory->name) . '</a>';
            $output .= '</li>';
        }
        $output .= '</ul>';
        return $output;
    } else {
        return 'Nenhuma subcategoria encontrada.';
    }
}
add_shortcode('subcategorias', 'listar_subcategorias');

// [subcategorias id="123"]
PHP

Código CSS

CSS
@media(max-width: 767px) {
    selector img {
        max-width: 500px;
        width: 1000px;
    }
}

selector ul {
    list-style: none;
    padding-left: 10px;
}

selector a {
    color: #333;
}

selector a:hover {
    color: #FD5056;
}

selector h3 {
    font-size: 1.1em;
    margin: 0;
}

selector h4 {
    font-size: 1em;
    margin: 0;
    font-weight: 600;
}
CSS

Mais tutoriais

Preencha seus dados para ser redirecionado