Shorcode que muestra las categorías y subcategorías con parametros

El shortcode ‘muestra_categorias’ recoge todas las categorías y subcategorías de tu blog y las muestra en un formato de menú. Este menú se puede personalizar a través de CSS para adaptarse al diseño y estilo de tu sitio web.

Características del Shortcode

Este shortcode tiene varias características útiles:

Ocultar categorías vacías: El shortcode está configurado para ocultar cualquier categoría que no tenga publicaciones. Esto ayuda a mantener tu menú de categorías limpio y relevante.
Ordenar por nombre: Las categorías se muestran en orden alfabético para facilitar la navegación.
Mostrar subcategorías: Además de las categorías principales, el shortcode también muestra las subcategorías correspondientes.
Estilización personalizada: El shortcode incluye un bloque de estilos CSS que puedes modificar para que coincida con el diseño de tu sitio web.

Uso del Shortcode en Elementor

Este shortcode se puede usar en Elementor para mostrar las categorías de tu blog en forma de menú. Simplemente tienes que añadir el shortcode en un widget de texto o en cualquier lugar donde se acepten shortcodes.

En resumen, el shortcode ‘muestra_categorias’ es una herramienta poderosa y flexible para mostrar las categorías y subcategorías de tu blog. Con un poco de personalización, puedes hacer que este menú de categorías se integre perfectamente con el diseño de tu sitio web.

Además puedes usarlo con parametros, para que te muestre cantidad de posts:

También puedes hacer que aparezcan contraidas las subcategorías:

Shortcode Categorías Blog

function muestra_categorias_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'desplegado' => 'si',
            'cantidad' => 'no',
        ), 
        $atts, 
        'muestra_categorias'
    );

    $categories = get_categories(array(
        'hide_empty' => 1,
        'orderby' => 'name',
        'parent' => 0
    ));

    $current_category = get_queried_object();

    $output = '<div class="categorias-wrapper">';
    $output .= '<div id="categorias_posts">';

    $output .= '<style>
    #categorias_posts {
      --micatpost-color-fondo: black;
      --micatpost-color-borde: #000;
      --micatpost-color-link: #fc0274;
      --micatpost-color-link-hover: #fff;
      --micatpost-color-link-hover-background: #fc0274;
      --micatpost-color-subcategoria: #222;
      --micatpost-color-subcategoria-hover: #fc0274;
      --micatpost-color-active: #28b7bc;
    }
    #categorias_posts .categorias-wrapper {
      display: flex;
      flex-wrap: wrap;
    }
    #categorias_posts .categoria-parent {
      flex-basis: 100%;
      margin-bottom: 2px;
    }
    #categorias_posts .categoria-link,
    #categorias_posts .subcategoria-link {
      display: block;
      width: 100%;
      padding: 10px;
      border: 1px solid var(--micatpost-color-borde);
      background-color: var(--micatpost-color-fondo);
      text-decoration: none;
      color: var(--micatpost-color-link);
    }
    #categorias_posts ul.subcategorias-lista {
      margin-left: 10px;
    }
    #categorias_posts ul.subcategorias-lista {
      list-style: none;
      margin: 2px 0 0 0;
    }
    #categorias_posts a.categoria-link {
      background: var(--micatpost-color-link);
      color: #000;
      border-radius: 4px;
    }
    #categorias_posts a.categoria-link:hover {
      background: var(--micatpost-color-link-hover-background);
      color: var(--micatpost-color-link-hover);
      transition: 0.3s;
      padding-left: 15px;
    }
    #categorias_posts .subcategorias-lista a.categoria-link {
      color: #fff;
      border-radius: 4px;
      background: var(--micatpost-color-subcategoria);
    }
    #categorias_posts .subcategorias-lista a.categoria-link:hover {
      background: #000;
      color: var(--micatpost-color-subcategoria-hover);
      transition: 0.3s;
      padding-left: 15px;
    }
    #categorias_posts ul.subcategorias-lista {
        margin: 0;
        padding: 0 0 0 15px;
        margin-top:0;
    }
    #categorias_posts a.categoria-link.categoria-active,
    #categorias_posts a.subcategoria-link.categoria-active{
        background: var(--micatpost-color-active) ;
    }
    #categorias_posts span.toggle-button {
        display: inline;
        z-index: 999;
        margin-top: -41px;
        padding: 6px;
        background: #ffffff6b;
        border-radius: 4px;
        right: 4px;
        font-weight: bold;
        cursor: pointer;
        float: right;
        margin-right: 5px;
    }
    #categorias_posts span.toggle-button:hover {
        background: #fff;
    }
    /* Añade esto para ocultar las subcategorías por defecto */
    #categorias_posts ul.subcategorias-lista {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    #categorias_posts ul.subcategorias-lista.desplegado {
        max-height: 2000px; /* Un valor alto para permitir que todas las subcategorías se muestren */
        margin-top:2px;
    }
    </style>';

    $output .= '<script>
    // Añade esto para manejar el clic en el botón
    document.addEventListener("DOMContentLoaded", function() {
        var buttons = document.querySelectorAll("#categorias_posts .toggle-button");
        buttons.forEach(function(button) {
            button.addEventListener("click", function() {
                var sublist = this.nextElementSibling;
                if (sublist.classList.contains("desplegado")){
                    sublist.classList.remove("desplegado");
                } else {
                    sublist.classList.add("desplegado");
                } 
            });
        });
    });
    </script>';

    $output .= get_category_list($categories, $current_category, $atts);

    $output .= '</div>';
    $output .= '</div>';

    return $output;
}
add_shortcode('muestra_categorias', 'muestra_categorias_shortcode');

function get_category_list($categories, $current_category, $atts) {
    $output = '';
    foreach ($categories as $category) {
        $output .= '<div class="categoria-parent">';
        $category_name = $category->name;
        if ($atts['cantidad'] === 'si') {
            $category_name .= ' (' . $category->count . ')';
        }
        if ($current_category && $current_category->term_id === $category->term_id) {
            $output .= '<a class="categoria-link categoria-active" href="' . get_category_link($category->term_id) . '">' . $category_name . '</a>';
        } else {
            $output .= '<a class="categoria-link" href="' . get_category_link($category->term_id) . '">' . $category_name . '</a>';
        }

        $children = get_categories(array(
            'hide_empty' => 1,
            'orderby' => 'name',
            'parent' => $category->term_id
        ));

        if ($children) {
            $output .= ' <span class="toggle-button">+</span>'; // Añade esto
            $output .= '<ul class="subcategorias-lista';
            if ($atts['desplegado'] === 'si') {
                $output .= ' desplegado';
            }
            $output .= '">';
            
            $output .= get_category_list($children, $current_category, $atts);
            
            $output .= '</ul>';
        }
        
        $output .= '</div>';
    }
    return $output;
}

Shortcode para las categorías de Woocommerce

También puedes usar este otro shorcode para tu tienda online, hemos modificado el código anterior para que incluso puedan funcionar juntos.

// categorias de producto
function muestra_categorias_productos_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'desplegado' => 'si',
            'cantidad' => 'no',
        ), 
        $atts, 
        'muestra_categorias_productos'
    );

    $categories = get_terms(array(
        'taxonomy' => 'product_cat',
        'hide_empty' => 1,
        'orderby' => 'name',
        'parent' => 0
    ));

    $current_category = get_queried_object();

    $output = '<div class="categorias-wrapper">';
    $output .= '<div id="categorias_productos">';

    $output .= '<style>
    #categorias_productos {
      --micatpost-color-fondo: black;
      --micatpost-color-borde: #000;
      --micatpost-color-link: #fc0274;
      --micatpost-color-link-hover: #fff;
      --micatpost-color-link-hover-background: #fc0274;
      --micatpost-color-subcategoria: #222;
      --micatpost-color-subcategoria-hover: #fc0274;
      --micatpost-color-active: #28b7bc;
    }
    #categorias_productos .categorias-wrapper {
      display: flex;
      flex-wrap: wrap;
    }
    #categorias_productos .categoria-parent {
      flex-basis: 100%;
      margin-bottom: 2px;
    }
    #categorias_productos .categoria-link,
    #categorias_productos .subcategoria-link {
      display: block;
      width: 100%;
      padding: 10px;
      border: 1px solid var(--micatpost-color-borde);
      background-color: var(--micatpost-color-fondo);
      text-decoration: none;
      color: var(--micatpost-color-link);
    }
    #categorias_productos ul.subcategorias-lista {
      margin-left: 10px;
    }
    #categorias_productos ul.subcategorias-lista {
      list-style: none;
      margin: 2px 0 0 0;
    }
    #categorias_productos a.categoria-link {
      background: var(--micatpost-color-link);
      color: #000;
      border-radius: 4px;
    }
    #categorias_productos a.categoria-link:hover {
      background: var(--micatpost-color-link-hover-background);
      color: var(--micatpost-color-link-hover);
      transition: 0.3s;
      padding-left: 15px;
    }
    #categorias_productos .subcategorias-lista a.categoria-link {
      color: #fff;
      border-radius: 4px;
      background: var(--micatpost-color-subcategoria);
    }
    #categorias_productos .subcategorias-lista a.categoria-link:hover {
      background: #000;
      color: var(--micatpost-color-subcategoria-hover);
      transition: 0.3s;
      padding-left: 15px;
    }
    #categorias_productos ul.subcategorias-lista {
        margin: 0;
        padding: 0 0 0 15px;
        margin-top: 0px;
    }
    #categorias_productos a.categoria-link.categoria-active,
    #categorias_productos a.subcategoria-link.categoria-active{
        background: var(--micatpost-color-active) ;
    }
    #categorias_productos span.toggle-button {
        display: inline;
        z-index: 999;
        margin-top: -41px;
        padding: 6px;
        background: #ffffff6b;
        border-radius: 4px;
        right: 4px;
        font-weight: bold;
        cursor: pointer;
        float: right;
        margin-right: 5px;
    }
    #categorias_productos span.toggle-button:hover {
        background: #fff;
    }
    /* Añade esto para ocultar las subcategorías por defecto */
    #categorias_productos ul.subcategorias-lista {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    #categorias_productos ul.subcategorias-lista.desplegado {
        max-height: 2000px; /* Un valor alto para permitir que todas las subcategorías se muestren */
        margin-top:2px;
    }
    </style>';

    $output .= '<script>
    // Añade esto para manejar el clic en el botón
    document.addEventListener("DOMContentLoaded", function() {
        var buttons = document.querySelectorAll("#categorias_productos .toggle-button");
        buttons.forEach(function(button) {
            button.addEventListener("click", function() {
                var sublist = this.nextElementSibling;
                if (sublist.classList.contains("desplegado")){
                    sublist.classList.remove("desplegado");
                } else {
                    sublist.classList.add("desplegado");
                } 
            });
        });
    });
    </script>';

    $output .= get_product_category_list($categories, $current_category, $atts);

    $output .= '</div>';
    $output .= '</div>';

    return $output;
}
add_shortcode('muestra_categorias_productos', 'muestra_categorias_productos_shortcode');

function get_product_category_list($categories, $current_category, $atts) {
    $output = '';
    foreach ($categories as $category) {
        $output .= '<div class="categoria-parent">';
        $category_name = $category->name;
        if ($atts['cantidad'] === 'si') {
            $category_name .= ' (' . $category->count . ')';
        }
        if ($current_category && $current_category->term_id === $category->term_id) {
            $output .= '<a class="categoria-link categoria-active" href="' . get_term_link($category) . '">' . $category_name . '</a>';
        } else {
            $output .= '<a class="categoria-link" href="' . get_term_link($category) . '">' . $category_name . '</a>';
        }

        $children = get_terms(array(
            'taxonomy' => 'product_cat',
            'hide_empty' => 1,
            'orderby' => 'name',
            'parent' => $category->term_id
        ));

        if ($children) {
            $output .= ' <span class="toggle-button">+</span>';
            $output .= '<ul class="subcategorias-lista';
            if ($atts['desplegado'] === 'si') {
                $output .= ' desplegado';
            }
            $output .= '">';

            $output .= get_product_category_list($children, $current_category, $atts);

            $output .= '</ul>';
        }

        $output .= '</div>';
    }
    return $output;
}

Para mostrarlo usa:

Además puedes usarlo con parámetros, para que te muestre cantidad de productos:

También puedes hacer que aparezcan contraídas las subcategorías:

Jose Hilario

¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Deja una respuesta Cancelar la respuesta

Categorías

Diseño web (104)

Inteligencia Artificial (4)

Plugins (16)

Promociones (4)

Tutoriales Wordpress (47)

¿Necesitas una web? Contacta con nosotros.

Relacionados:

Diseño web

Herramientas Esenciales para la Optimización de Imágenes en la Web: Transforma y Comprime sin Perder Calidad

La necesidad de optimizar imágenes para la web es más importante que nunca, especialmente para garantizar tiempos de carga rápidos y una presentación visual atractiva.

noviembre 7, 2024 No hay comentarios

Plugins

YITH WooCommerce Wishlist, un imprescindible plugin para WooCommerce

YITH WooCommerce Wishlist El plugin YITH WooCommerce Wishlist es una herramienta esencial para cualquier tienda en línea que utilice WooCommerce. Facilita a los clientes la

noviembre 1, 2024 No hay comentarios

Diseño web

¿Cuándo es necesario hacer un mantenimiento web con WordPress?

Introducción al mantenimiento web en WordPress El mantenimiento web en WordPress no es solo una tarea; es una parte esencial para garantizar el rendimiento óptimo

octubre 29, 2024 No hay comentarios

Shorcode que muestra las categorías y subcategorías con parametros

Tabla de contenidos

Características del Shortcode

Uso del Shortcode en Elementor

Shortcode Categorías Blog

Shortcode para las categorías de Woocommerce

Deja una respuesta Cancelar la respuesta

¿Necesitas una web? Contacta con nosotros.

Herramientas Esenciales para la Optimización de Imágenes en la Web: Transforma y Comprime sin Perder Calidad

YITH WooCommerce Wishlist, un imprescindible plugin para WooCommerce

¿Cuándo es necesario hacer un mantenimiento web con WordPress?