Menu di navigazione a discesa che mostra l'ultimo post per categoria

Question

Quindi sto cercando di lavorare nel mio menu di navigazione nel mio sito web wordpress. Sto cercando di copiare il menu di navigazione da hongkiat.com (mostrato nell'immagine).

Nel menu di navigazione di Hongkiat, vengono visualizzate le cinque categorie principali (Design/sviluppo, Tecnologia, Ispirazione, COmmerce speciale e Deal). Una volta che l'utente è passato su una categoria padre, mostrerà i post recenti nella categoria padre.

In ogni caso, sono riuscito a codificare il menu a discesa con la categoria padre che mostra più la sua categoria figlio. Ora il dilemma si trova su come posso visualizzare l'ultimo post (almeno 3 post) sotto la categoria genitore che è al passaggio del mouse da parte dell'utente.

Comunque, ecco il mio codice:

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; 
} 

se qualcuno cou Aiutami o fai notare cosa mi manca perché il mio codice non funziona. Il mio codice non ha errori, ma non sto realizzando ciò che voglio realizzare.

Qualcuno potrebbe estendere la propria mano.

Answer 1

<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="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
        </li> 
      <?php endwhile; ?> 
     </ul> 
     <?php endif; wp_reset_query(); ?> 
    </li> 
<?php } }?> 
</ul> 

Answer 2

Si può provare questo:

<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="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
        </li> 
      <?php endwhile; ?> 
     </ul> 
     <?php endif; wp_reset_query(); ?> 
    </li> 
<?php endforeach; ?> 
</ul> 

Non è testato, ma dovrebbe funzionare.

Answer 3

Ti mancano alcune cose nel codice precedente.

Proviamo a renderlo semplice.

Fase 1: Prendi tutte le categorie padre e categorie bambino di età inferiore al loro interno una serie di nome come $total_categories

Si può vedere il codice sottostante per ottenere la matrice per tutte le categorie controllanti e le categorie figlio

<?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; 
} 
?> 

uscita fornita era per il mio caso

Sopra l'array apparirà come dove è l'ID della categoria padre e le categorie secondarie sono 19 e 20 in più abbiamo anche incluso l'ID della categoria genitore (18) nell'array e l'indice dell'array.

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

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

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

) 

Ora è sufficiente attraversare la matrice $total_categories per ottenere tutte le categorie principali e top 3 messaggi sotto che le categorie

<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="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
        </li> 
      <?php endwhile; ?> 
     </ul> 
     <?php endif; wp_reset_query(); ?> 
    </li> 
<?php endforeach; ?> 
</ul> 

uscita fornita era per il mio caso

E sarà infine darvi l'HTML desiderato con l'output di contenuto richiesto come di seguito:

<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> 

Il codice ti mancava era:

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

Per ottenere i primi 3 posti si dovrà ottenere i posti in ordine decrescente Ordina per ID e naturalmente posts_per_page ti porterà 3 solo i record

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

e per ottenere i messaggi ri lata a categorie (se il padre o figlio) così abbiamo superato la matrice contenente il genitore e bambino categorie