Neste tutorial completo, vou te mostrar como criar um mapa interativo blogs de viagens utilizando apenas o Elementor Pro! ✈️🌍
Download do 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"]
PHPCó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