Pan rallado personalizado con lista de niños (categorías o páginas)

9 minutos de lectura

avatar de usuario
jonnieve

Actualmente estoy construyendo mi primera plantilla de WordPress (usando Bootstrap 4) y necesito integrar migas de pan a mi página. Puedo ver que el tema que estamos usando actualmente también ofrece migas de pan, pero como estas son migas de pan predeterminadas, no es suficiente.

Breadcrumb predeterminado, lo que quiero decir, es algo simple como:
Inicio / Categoría / Subcategoría / Página

Lo que necesito construir es más como:
Inicio / Categoría / Subcategoría / Página también, pero cuando pasa el cursor por Categoría o Subcategoría, debería ver los elementos secundarios de la opción seleccionada actualmente.

e.g. hovering HOME will display the available categories:

Home / Category / Subcategory / Page
  |
Category A
Category B
Category C


Or, to see the other available subcategories, it will look like this:

Home / Category / Subcategory / Page
         |
       Subcategory A
       Subcategory B
       Subcategory C

Ya he construido esto para una página estática. El código se ve así:

<div class="d-none d-md-block">
     <div class="dropdown">
          <div class="dropdown-menu">
               <a class="dropdown-item" href="~/Category1">Category 1</a>
               <a class="dropdown-item" href="~/Category2">Category 2</a>
               <a class="dropdown-item" href="~/Category3">Category 3</a>
          </div>

          <a class="dropdown-toggle" data-toggle="dropdown">
             Home
          </a>
     </div>

     <div class="dropdown">
          <div class="dropdown-menu">
               <a class="dropdown-item" href="~/Catgeory4/SubCat1">SubCat 1</a>
               <a class="dropdown-item" href="~/Catgeory4/SubCat2">SubCat 2</a>
               <a class="dropdown-item" href="~/Catgeory4/SubCat3">SubCat 3</a>
               <a class="dropdown-item" href="~/Catgeory4/SubCat4">SubCat 4</a>
          </div>

          <a class="dropdown-toggle" data-toggle="dropdown">
             Category 4
          </a>
     </div>

     <a href="~/Catgeory4/SubCat2/Page" class="crumb active">Page</a>
</div>

El problema es que es mi primera plantilla de WordPress y que solo tengo una idea básica del php específico de wordpress :-[EntoncessiconoceuncomplementoqueofreceestetipodeestructuraestaréencantadodeusarloSitengoqueconstruirlodentrodelaplantillaestábienconmigotambiénSimplementenosécómoempezaraquíparaqueresulteenunapiezadinámicadecódigo

PD (si ayuda): esta es la función get_breadrumb actual del tema base:

if ( ! function_exists( 'bizbuzz_get_breadcrumb' ) ) {
/**
 *  Header image / Slider.
 *
 * @since 1.0.0
 */
function bizbuzz_get_breadcrumb() {

    $enable_breadcrumb = bizbuzz_get_option( 'enable_breadcrumb' );
    if ( $enable_breadcrumb ) {
        $args = array(
            'separator'    => '>',
            'show_current' => 1,
            'show_on_home' => 0,
        );
        if ( is_home() || is_front_page() ) {

            if ( $args['show_on_home'] ) {
                ?>
                <div id="bizbuzz-breadcrumb">
                    <div class="rt-wrapper">
                        <?php bizbuzz_default_breadcrumb( $args ); ?>
                    </div>
                </div>
                <?php
            }
        } else {
            ?>
            <div id="bizbuzz-breadcrumb">
                <div class="rt-wrapper">
                    <?php bizbuzz_default_breadcrumb( $args ); ?>
                </div>
            </div>
            <?php
        }
     }
   }
}

  • ¿Está utilizando solo páginas o tiene otros CPT y/o taxonomías? Este último, específicamente, se vuelve un poco más complicado.

    –Chris Haas

    13 de agosto de 2020 a las 19:23

  • Uso categorías y publicaciones relacionadas, así como páginas individuales fuera de cualquier categoría.

    – JonSnow

    14 de agosto de 2020 a las 7:23

avatar de usuario
Punto final

Prueba este código, está funcionando desde mi lado.

function custom_breadcrumbs()
{
    // Set variables for later use
    $here_text        = __( 'You are currently here!' );
    $home_link        = home_url("https://stackoverflow.com/");
    $home_text        = __( 'Home' );
    $link_before="<span typeof="v:Breadcrumb">";
    $link_after="</span>";
    $link_attr=" rel="v:url" property="v:title"";
    $link             = $link_before . '<a' . $link_attr . ' href="%1$s">%2$s</a>' . $link_after;
    $delimiter=" &raquo; ";              // Delimiter between crumbs
    $before="<span class="current">"; // Tag before the current crumb
    $after="</span>";                // Tag after the current crumb
    $page_addon       = '';                       // Adds the page number if the query is paged
    $breadcrumb_trail="";
    $category_links="";

    /** 
     * Set our own $wp_the_query variable. Do not use the global variable version due to 
     * reliability
     */
    $wp_the_query   = $GLOBALS['wp_the_query'];
    $queried_object = $wp_the_query->get_queried_object();

    // Handle single post requests which includes single pages, posts and attatchments
    if ( is_singular() ) 
    {
        /** 
         * Set our own $post variable. Do not use the global variable version due to 
         * reliability. We will set $post_object variable to $GLOBALS['wp_the_query']
         */
        $post_object = sanitize_post( $queried_object );

        // Set variables 
        $title          = apply_filters( 'the_title', $post_object->post_title );
        $parent         = $post_object->post_parent;
        $post_type      = $post_object->post_type;
        $post_id        = $post_object->ID;
        $post_link      = $before . $title . $after;
        $parent_string  = '';
        $post_type_link = '';

        if ( 'post' === $post_type ) 
        {
            // Get the post categories
            $categories = get_the_category( $post_id );
            if ( $categories ) {
                // Lets grab the first category
                $category  = $categories[0];

                $category_links = get_category_parents( $category, true, $delimiter );
                $category_links = str_replace( '<a',   $link_before . '<a' . $link_attr, $category_links );
                $category_links = str_replace( '</a>', '</a>' . $link_after,             $category_links );
            }
        }

        if ( !in_array( $post_type, ['post', 'page', 'attachment'] ) )
        {
            $post_type_object = get_post_type_object( $post_type );
            $archive_link     = esc_url( get_post_type_archive_link( $post_type ) );

            $post_type_link   = sprintf( $link, $archive_link, $post_type_object->labels->singular_name );
        }

        // Get post parents if $parent !== 0
        if ( 0 !== $parent ) 
        {
            $parent_links = [];
            while ( $parent ) {
                $post_parent = get_post( $parent );

                $parent_links[] = sprintf( $link, esc_url( get_permalink( $post_parent->ID ) ), get_the_title( $post_parent->ID ) );

                $parent = $post_parent->post_parent;
            }

            $parent_links = array_reverse( $parent_links );

            $parent_string = implode( $delimiter, $parent_links );
        }

        // Lets build the breadcrumb trail
        if ( $parent_string ) {
            $breadcrumb_trail = $parent_string . $delimiter . $post_link;
        } else {
            $breadcrumb_trail = $post_link;
        }

        if ( $post_type_link )
            $breadcrumb_trail = $post_type_link . $delimiter . $breadcrumb_trail;

        if ( $category_links )
            $breadcrumb_trail = $category_links . $breadcrumb_trail;
    }

    // Handle archives which includes category-, tag-, taxonomy-, date-, custom post type archives and author archives
    if( is_archive() )
    {
        if (    is_category()
             || is_tag()
             || is_tax()
        ) {
            // Set the variables for this section
            $term_object        = get_term( $queried_object );
            $taxonomy           = $term_object->taxonomy;
            $term_id            = $term_object->term_id;
            $term_name          = $term_object->name;
            $term_parent        = $term_object->parent;
            $taxonomy_object    = get_taxonomy( $taxonomy );
            $current_term_link  = $before . $taxonomy_object->labels->singular_name . ': ' . $term_name . $after;
            $parent_term_string = '';

            if ( 0 !== $term_parent )
            {
                // Get all the current term ancestors
                $parent_term_links = [];
                while ( $term_parent ) {
                    $term = get_term( $term_parent, $taxonomy );

                    $parent_term_links[] = sprintf( $link, esc_url( get_term_link( $term ) ), $term->name );

                    $term_parent = $term->parent;
                }

                $parent_term_links  = array_reverse( $parent_term_links );
                $parent_term_string = implode( $delimiter, $parent_term_links );
            }

            if ( $parent_term_string ) {
                $breadcrumb_trail = $parent_term_string . $delimiter . $current_term_link;
            } else {
                $breadcrumb_trail = $current_term_link;
            }

        } elseif ( is_author() ) {

            $breadcrumb_trail = __( 'Author archive for ') .  $before . $queried_object->data->display_name . $after;

        } elseif ( is_date() ) {
            // Set default variables
            $year     = $wp_the_query->query_vars['year'];
            $monthnum = $wp_the_query->query_vars['monthnum'];
            $day      = $wp_the_query->query_vars['day'];

            // Get the month name if $monthnum has a value
            if ( $monthnum ) {
                $date_time  = DateTime::createFromFormat( '!m', $monthnum );
                $month_name = $date_time->format( 'F' );
            }

            if ( is_year() ) {

                $breadcrumb_trail = $before . $year . $after;

            } elseif( is_month() ) {

                $year_link        = sprintf( $link, esc_url( get_year_link( $year ) ), $year );

                $breadcrumb_trail = $year_link . $delimiter . $before . $month_name . $after;

            } elseif( is_day() ) {

                $year_link        = sprintf( $link, esc_url( get_year_link( $year ) ),             $year       );
                $month_link       = sprintf( $link, esc_url( get_month_link( $year, $monthnum ) ), $month_name );

                $breadcrumb_trail = $year_link . $delimiter . $month_link . $delimiter . $before . $day . $after;
            }

        } elseif ( is_post_type_archive() ) {

            $post_type        = $wp_the_query->query_vars['post_type'];
            $post_type_object = get_post_type_object( $post_type );

            $breadcrumb_trail = $before . $post_type_object->labels->singular_name . $after;

        }
    }   

    // Handle the search page
    if ( is_search() ) {
        $breadcrumb_trail = __( 'Search query for: ' ) . $before . get_search_query() . $after;
    }

    // Handle 404's
    if ( is_404() ) {
        $breadcrumb_trail = $before . __( 'Error 404' ) . $after;
    }

    // Handle paged pages
    if ( is_paged() ) {
        $current_page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : get_query_var( 'page' );
        $page_addon   = $before . sprintf( __( ' ( Page %s )' ), number_format_i18n( $current_page ) ) . $after;
    }

    $breadcrumb_output_link  = '';
    $breadcrumb_output_link .= '<div class="breadcrumb">';
    if (    is_home()
         || is_front_page()
    ) {
        // Do not show breadcrumbs on page one of home and frontpage
        if ( is_paged() ) {
            $breadcrumb_output_link .= $here_text . $delimiter;
            $breadcrumb_output_link .= '<a href="' . $home_link . '">' . $home_text . '</a>';
            $breadcrumb_output_link .= $page_addon;
        }
    } else {
        $breadcrumb_output_link .= $here_text . $delimiter;
        $breadcrumb_output_link .= '<a href="' . $home_link . '" rel="v:url" property="v:title">' . $home_text . '</a>';
        $breadcrumb_output_link .= $delimiter;
        $breadcrumb_output_link .= $breadcrumb_trail;
        $breadcrumb_output_link .= $page_addon;
    }
    $breadcrumb_output_link .= '</div><!-- .breadcrumbs -->';

    return $breadcrumb_output_link;
}
add_shortcode('custom_breadcrumbs','custom_breadcrumbs');

Mostrar código de migas de pan

echo do_shortcode('[custom_breadcrumbs]');

  • la función debe colocarse dentro de functions.php y la llamada echo custom_breadcrumbs() donde queremos mostrar los enlaces, ¿verdad?

    – JonSnow

    14 oct 2020 a las 14:03

  • Lo probé, pero no funcionó para mí. Se parece a las viejas migas de pan, sin toggle deslizante

    – JonSnow

    14 oct 2020 a las 14:23

Esta es la función básica que, con suerte, debería llevarlo a usted o a otra persona en la dirección correcta:

function so_63339155_get_page_hierarchy($post = null): array
{
    // Make sure we have something
    $post = get_post($post);
    if (!$post) {
        return [];
    }

    // This will get all Post IDs of the "parent" objects
    $ancestors = get_post_ancestors($post);
    if (0 === count($ancestors)) {
        return [];
    }

    $ret = [];
    foreach ($ancestors as $postId) {
        // Grab the children for the page.
        // NOTE: This can take additional arguments such as sort order and visibility
        $ret[$postId] = get_children($postId);
    }

    return $ret;
}

Consultar la jerarquía del sitio y obtener datos de objetos para muchas publicaciones puede ser un poco costoso, por lo que es posible que desee verificar algo de almacenamiento en caché.

El código anterior usa el sistema de jerarquía nativo para las páginas y debería funcionar para cualquier CPT que se base en el tipo de página. Lo hace no admite términos de taxonomía, que es una bestia similar pero diferente. también lo hace no tome la página de inicio / portada al principio o la página actual al final, pero eso también se puede adaptar con bastante facilidad.

El resultado es una matriz cuyas claves son ID de publicación para los padres y cuyos valores son objetos WP_Post de los niños, por lo que get_post() tendrá que ser llamado una vez más en las teclas, y querrá llamar get_permalink() para obtener las URL.

  • Para ser honesto: no tengo ni idea de cómo hacer algo similar a mi código estático a partir de tu código 🙁

    – JonSnow

    14 de agosto de 2020 a las 7:24

  • Gracias @ChrisHaas por los comentarios adicionales. Un poco más fácil de entender ahora. Pero, ¿cómo y dónde llamo a la “función so_63339155_get_page_hierarchy($post = null): array” en mi contexto?

    – JonSnow

    28 de agosto de 2020 a las 5:59

¿Ha sido útil esta solución?