Generacionweb, Diseño web Valencia
contacto por teléfono
contacto por whatsapp
Contactar

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

Vover a Snippets

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.

 

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

 

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:
shortcode menu

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

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:

shortcode menu productos

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

También puedes hacer que aparezcan contraídas las subcategorías:
shortcode menu productos 3

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

Descargar
  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

Relacionados:
generaionweb
  • "El diseño no es solo lo que se ve y se siente. El diseño es cómo funciona." - Steve Jobs
Servicios
Nosotros
Generacionweb
660 202 266
Whatsapp
Twitter Facebook Whatsapp Map-marker-alt
🚀 Asesoría gratuita

¿Deseas una solución web a medida pero no sabes por dónde empezar? Déjanos tus datos y programaremos una reunión de 30 minutos para identificar la mejor solución para tu proyecto.

¡Quiero una asesoría!
Copyright © 2024 Generacionweb | Todos los derechos reservados.