下拉導航菜單，顯示每個類別的最新帖子

Question

所以我想在我的WordPress的網站上的導航菜單上工作。我試圖從hongkiat.com複製導航菜單（如圖所示）。您可以在Hongkiat的導航菜單中看到FIVE（5）父類別（設計/開發，技術，靈感，SOcial COmmerce和交易）。一旦用戶在父類別上懸停，它將在父類別下顯示最近的帖子。

無論如何，我設法編寫與父類別顯示的下拉菜單加上它的子類別。現在困境在於如何在用戶懸停的父類別下顯示最新的帖子（至少3個帖子）。

總之，這裏是我的代碼：

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

如果有人湊ld幫助我或者指出我錯過了什麼，因爲我的代碼不起作用。我的代碼沒有錯誤，但我沒有達到我想要完成的目標。

任何人都可以伸出援助之手。

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

你可以試試這個：

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

這不是測試，但它應該工作。

Answer 3

您在上面的代碼中缺少了一些東西。

讓我們試着簡化它。

步驟1：獲取其下的所有父類別和子類別命名爲$total_categories

數組裏面你可以看到下面的代碼來獲取所有父類別和子類別的陣列

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

輸出提供了我的情況

以上陣列將如下其中是父類別ID和子類別是19和20加我們也已包括父類別ID （18）陣列中以及索引的陣列構成。

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

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

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

) 

現在只需遍歷數組$total_categories讓所有的父母類別和前3名的帖子根據該類別

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

輸出提供了我的情況

，它會最後給你所需要的內容輸出低於所期望的HTML：

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

你失蹤的代碼是：

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

要獲得前3名的帖子，你將獲得職位通過ID，當然posts_per_page降 爲了將讓你3只記錄

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

而獲得職位重新遲來到類別（無論是父母或子女） 所以我們已經通過包含父陣列以及兒童 類別