Menú de navegación desplegable que muestra la última publicación por categoría

9 minutos de lectura

avatar de usuario
Ben dagas

Así que estoy tratando de trabajar en mi menú de navegación en mi sitio web de wordpress. Estoy tratando de copiar el menú de navegación de hongkiat.com (que se muestra en la imagen).

En el menú de navegación de Hongkiat, verá las CINCO (5) categorías principales (diseño/desarrollo, tecnología, inspiración, comercio social y trato). Una vez que el usuario pasó el cursor sobre una categoría principal, se mostrarán las publicaciones recientes en la categoría principal.

De todos modos, logré codificar el menú desplegable con la categoría principal que se muestra más su categoría secundaria. Ahora el dilema radica en cómo puedo mostrar la última publicación (al menos 3 publicaciones) en la categoría principal sobre la que pasa el usuario.

ingrese la descripción de la imagen aquí

De todos modos, aquí está mi código:

HTML/PHP

<ul>
    <?php 

        global $post;
        $myposts = get_posts('numberposts=3&offset=1');
        foreach($myposts as $post) ;


        $args = array(
        'show_option_all'    => '',
        'hide_empty'         => '0',
        'orderby'            => 'name',
        'order'              => 'ASC',
        'style'              => 'list',
        'use_desc_for_title' => 1,
        'child_of'           => 0,
        'hierarchical'       => 1,
        'title_li'           => (''),
        'show_option_none'   => __( '' ),
        'number'             => null,
        'echo'               => 1,
        'depth'              => 2,
        'current_category'   => 0,
        'pad_counts'         => 0,
        'taxonomy'           => 'category',
        'walker'             => null
        );
        wp_list_categories( $args ); 
    ?>
</ul>

CSS

.navone {
    display:inline-block;
    height:35px;
    vertical-align:middle;
    margin:0px auto;
    font-family: "Raleway",san-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-synthesis: weight style;
    font-variant: normal;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform:uppercase;
}

.navone ul {
    margin:0;
    padding:0;
}

.navone ul ul {
    display: none;

}

.navone ul li:hover > ul {
    display: block;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navone ul {
    list-style: none;
    position: relative;
    display: inline-table;
}

.navone ul:after {
    content: ""; clear: both; display: block;
}

.navone ul li {
    float: left;
    cursor:pointer;
    padding:10px 20px;
}

.navone ul li:hover {
    background:#000;
}

.navone ul li:hover a {
    color: #fff;
}
    
.navone ul li a {
    display: block;
    color: #FFF;
    text-decoration: none;
}

.navone ul li ul {
    width:200px;
    z-index:9;
}

.navone ul ul {
    background: #000;
    padding: 0;
    position: absolute;
    top:100%;
    left:0;
}

.navone ul ul li {
    float: none; 
    position: relative;
    padding:5px 10px;
}

.navone ul ul li a {
    color: #fff;
}

.navone ul ul li a:hover {
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navone ul ul ul {
    position: absolute; left: 100%; top:0;
}

.navone ul li ul li {
    padding:8px 10px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.navone ul li ul li:hover {
    border-left:5px solid #F52100;
    padding-left:20px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navtwo {
    display:inline;
}

SI alguien pudiera ayudarme o señalar lo que me estoy perdiendo porque mi código no funciona. Mi código no tiene errores, pero no estoy logrando lo que quiero lograr.

¿Alguien podría extender su mano amiga?

  • En mi opinión, el mejor lugar para obtener una respuesta sólida para esto sería wordpress.seaunque es probable que obtenga algunas respuestas fantásticas aquí, sin duda, es más especializado allí: P

    – Can O’Spam

    13 de enero de 2016 a las 14:16


  • gracias sam, solo pensé que esta es una pregunta relacionada con PHP. la gente puede ayudar.

    – Ben Dagas

    16 de enero de 2016 a las 12:26

  • La forma más fácil en que lo haría es primero: crear un megamenú (menú extendido) y luego agregar mi forma de menú para agregar barras laterales. Luego puede registrar barras laterales y llenarlas con cualquier widget que desee (incluido el suyo). he hecho un esencia del caminante del menú que puedes revisar, tal vez te ayude.

    – dingo_d

    19 de enero de 2016 a las 17:28

avatar de usuario
fresno patel

<ul>
<?php $args = array(
        'type'                     => 'post',
        'child_of'                 => 0,
        'parent'                   => '',
        'orderby'                  => 'name',
        'order'                    => 'ASC',
        'hide_empty'               => 1,
        'hierarchical'             => 1,
        'exclude'                  => '',
        'include'                  => '',
        'number'                   => '',
        'taxonomy'                 => 'category',
        'pad_counts'               => false

);

$categories = get_categories( $args );

foreach($categories as $cat)
{ 
    if ($cat->category_parent == 0) {

?>
    <li>
        <?php echo $cat->name; $cat_id = $cat->term_id;?>
        <?php $post_args = array(
            'post_type'=>'post',
            'posts_per_page' => 3,
            'cat' => $cat_id
        );
        $the_query = new WP_Query($post_args);
        if($the_query->have_posts()): ?>
        <ul>
            <?php while($the_query->have_posts()): $the_query->the_post(); ?>
                    <li>
                        <a href="https://stackoverflow.com/questions/34768637/<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </li>
            <?php endwhile; ?>
        </ul>
        <?php endif; wp_reset_query(); ?>
    </li>
<?php } }?>
</ul>

  • Hola @Ash Patel, gracias por tu respuesta. Por algunas razones extrañas… Aparece la categoría Niño. Puede ver mi sitio web de prueba aquí: alfaomega.bendaggers.com Lo que estoy tratando de lograr es que solo muestre el Padre en el Menú. Luego, cuando se desplazó, aparecen las primeras 3 publicaciones publicadas en la categoría principal. La categoría secundaria no debe mostrarse como un submenú. y por cierto, he editado un poco en su código para agregar la miniatura de la publicación. CSS está un poco desordenado. ¿Podrías ayudar en esto?

    – Ben Dagas

    17 de enero de 2016 a las 14:08


  • para tu información Solo tengo 5 categorías de padres. y más de 15 categoría infantil.

    – Ben Dagas

    17 de enero de 2016 a las 14:14

  • He editado la respuesta anterior… por favor verifíquela una vez… 🙂

    – Ceniza Patel

    18 de enero de 2016 a las 16:24

Puedes probar esto:

<ul>
<?php $args = array(
        'type'                     => 'post',
        'child_of'                 => 0,
        'parent'                   => '',
        'orderby'                  => 'name',
        'order'                    => 'ASC',
        'hide_empty'               => 1,
        'hierarchical'             => 1,
        'exclude'                  => '',
        'include'                  => '',
        'number'                   => '',
        'taxonomy'                 => 'category',
        'pad_counts'               => false

);

$categories = get_categories( $args );

foreach($categories as $cat): ?>
    <li>
        <?php echo $cat->$name; $cat_id = $cat->$term_id;?>
        <?php $post_args = array(
            'post_type'=>'post',
            'posts_per_page' => 3,
            'cat' => $cat_id
        );
        $the_query = new WP_Query($post_args);
        if($the_query->have_posts()): ?>
        <ul>
            <?php while($the_query->have_posts()): $the_query->the_post(); ?>
                    <li>
                        <a href="https://stackoverflow.com/questions/34768637/<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </li>
            <?php endwhile; ?>
        </ul>
        <?php endif; wp_reset_query(); ?>
    </li>
<?php endforeach; ?>
</ul>

No está probado pero debería funcionar.

avatar de usuario
prakash rao

Te has estado perdiendo algunas cosas en el código anterior.

Tratemos de hacerlo simple.

Paso 1 : obtenga todas las categorías principales y las categorías secundarias debajo de ellas dentro de una matriz denominada como $total_categories

Puede ver el código a continuación para obtener la matriz para todas las categorías principales y categorías secundarias

<?php 
$parent_args = array(
        'type'                     => 'post',
        'parent'                   => '0',
        'orderby'                  => 'name',
        'order'                    => 'ASC',
        'hide_empty'               => 0,
        'hierarchical'             => 1,
        'taxonomy'                 => 'category',
        'pad_counts'               => false
);
$parent_categories = get_categories( $parent_args );

foreach ($parent_categories as $parent_category) {
    $child_args = array(
        'type'                     => 'post',
        'parent'                   => $parent_category->term_id,
        'orderby'                  => 'name',
        'order'                    => 'ASC',
        'hide_empty'               => 0,
        'hierarchical'             => 1,
        'taxonomy'                 => 'category',
        'pad_counts'               => false
    );  
    $cats_arr = array(); 
    $child_categories = get_categories( $child_args ); 
    $cats_arr[] = $parent_category->term_id;
    foreach ($child_categories as $child_category) {
        $cats_arr[] = $child_category->term_id;
    }

    $total_categories[$parent_category->term_id] = $cats_arr;
}
?>

Salida proporcionada fue para mi caso

La matriz anterior se verá como donde 18 es el ID de la categoría principal y las categorías secundarias son 19 y 20 además, también hemos incluido el ID de la categoría principal (18) en la matriz, así como el índice de la matriz.

Array
(
    [18] => Array
        (
            [0] => 18
            [1] => 19
            [2] => 20
        )

    [15] => Array
        (
            [0] => 15
            [1] => 16
            [2] => 17
        )

    [1] => Array
        (
            [0] => 1
        )

)

Ahora simplemente atraviesa la matriz $total_categories para obtener todas las categorías principales y 3 publicaciones principales bajo esas categorías

<ul>
<?php foreach($total_categories as $total_category_k=>$total_category_v): ?>
        <li>

            <a href=""><?php echo get_the_category_by_ID($total_category_k);?></a>
        <?php $post_args = array(
            'post_type'=>'post',
            'posts_per_page' => 3,
            'orderby'=>'ID',
            'order'=>'DESC',
            'tax_query' => array(
                                array(
                                    'taxonomy' => 'category',
                                    'field'    => 'term_id',
                                    'terms'    => $total_category_v,
                                    'operator' => 'IN'
                                ),
                            ),
            );

        $the_query = new WP_Query($post_args);
        if($the_query->have_posts()): ?>
        <ul>
            <?php while($the_query->have_posts()): $the_query->the_post(); ?>
                    <li>
                        <a href="https://stackoverflow.com/questions/34768637/<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </li>
            <?php endwhile; ?>
        </ul>
        <?php endif; wp_reset_query(); ?>
    </li>
<?php endforeach; ?>
</ul>

Salida proporcionada fue para mi caso

Y finalmente le dará el HTML deseado con la salida de contenido requerida como se muestra a continuación:

<ul>
        <li>

            <a href="">menu</a>
            </li>
        <li>

            <a href="">test</a>
            </li>
        <li>

            <a href="">Uncategorized</a>
                <ul>
                                <li>
                        <a href="http://localhost/wp/clark_atlanta_university/students-unlock-the-mysteries-of-the-brain-with-nih-scientists/">Students unlock the mysteries of the brain with NIH scientists</a>
                    </li>
                                <li>
                        <a href="http://localhost/wp/clark_atlanta_university/contacts-better-than-permanent-lenses-for-babies-after-cataract-surgery/">Contacts better than permanent lenses for babies after cataract surgery</a>
                    </li>
                                <li>
                        <a href="http://localhost/wp/clark_atlanta_university/nih-announces-recruitment-for-clinical-trial-to-test-new-tinnitus-treatment-device/">NIH announces recruitment for clinical trial to test new tinnitus treatment device</a>
                    </li>
                    </ul>
            </li>
</ul>

El código que te faltaba era:

'orderby'=>'ID',
'order'=>'DESC',

Para obtener las 3 publicaciones principales, deberá obtener las publicaciones en orden descendente por ID y, por supuesto, posts_per_page obtendrá solo 3 registros

'tax_query' => array(
                                    array(
                                        'taxonomy' => 'category',
                                        'field'    => 'term_id',
                                        'terms'    => $total_category_v,
                                        'operator' => 'IN'
                                    ),
                                ),
                );

Y para obtener publicaciones relacionadas con categorías (ya sea principal o secundaria), hemos pasado la matriz que contiene las categorías principal y secundaria

  • y lo siento, no soy un tipo de diseño, pero puedes crear un diseño del menú desplegable. Espero que tu diseño original también funcione

    – Prakash Rao

    21 de enero de 2016 a las 6:26

¿Ha sido útil esta solución?