显示每个类别的最新帖子的下拉导航菜单

Posted

技术标签:

【中文标题】显示每个类别的最新帖子的下拉导航菜单【英文标题】：Drop Down Navigation Menu That Shows Latest Post per Category 【发布时间】：2016-04-18 13:00:57 【问题描述】：

所以我正在尝试在我的 wordpress 网站上处理我的导航菜单。我正在尝试从 hongkiat.com 复制导航菜单（如图所示）。

在 Hongkiat 的导航菜单中，您将看到五 (5) 个父类别（设计/开发、技术、灵感、社交商务和交易）。一旦用户将鼠标悬停在父类别上，它将在父类别下显示最近的帖子。

无论如何，我设法编写了下拉菜单，其中显示了父类别以及它的子类别。现在的困境在于如何在用户悬停的父类别下显示最新的帖子（至少 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;

如果有人可以帮助我或指出我缺少什么，因为我的代码不起作用。我的代码没有错误，但我没有达到我想要完成的目标。

谁能伸出援助之手。

【问题讨论】：

IMO，获得可靠答案的最佳地点是wordpress.se，尽管毫无疑问，您可能会在这里得到一些很棒的答案，但那里更专业：P 谢谢你，山姆，我只是认为这是一个与 PHP 相关的问题。人们可以提供帮助。 最简单的方法是首先：创建一个megamenu（扩展菜单），然后以我的菜单步行者方式添加侧边栏。然后您可以注册侧边栏并使用您想要的任何小部件（包括您自己的）填充它。我做了一个menu walker gist，你可以看看，也许会有所帮助。 【参考方案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>

【讨论】：

嗨@Ash Patel，谢谢您的回答。由于一些奇怪的原因..子类别出现了。你可以在这里看到我的测试网站：alphaomega.bendaggers.com 我想要实现的是它只在菜单上显示父级。然后，当它悬停时，会显示在父类别中发布的前 3 个帖子。子类别不应显示为子菜单。顺便说一句，我在您的代码中进行了一些编辑以添加帖子缩略图。 CSS有点乱。你能帮忙吗？ 仅供参考。我只有 5 个父类别。和超过 15 个子类别。 我已经编辑了上面的答案..请检查一次..:)【参考方案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>

它没有经过测试，但应该可以工作。

【讨论】：

【参考方案3】：

您在上面的代码中遗漏了一些东西。

让我们试着让它变得简单。

第一步：将所有父类及其下的子类放入一个名为$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;

?>

提供的输出适用于我的情况

上面的数组将显示 18 是父类别 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'
                                    ),
                                ),
                );

并获取与类别相关的帖子（无论是父级还是子级） 所以我们已经传递了包含父级和子级的数组 类别

【讨论】：

对不起，我不是设计专家，但您可以创建下拉菜单的设计.. 我希望您的原始设计也可以使用

以上是关于显示每个类别的最新帖子的下拉导航菜单的主要内容，如果未能解决你的问题，请参考以下文章

引导、导航选项卡、下拉菜单；如何根据 URI 设置活动选项卡

Magento：如何在主导航菜单的下拉菜单中添加活动产品

SharePoint Online 开发：修改站点导航宽度和下拉菜单

下拉菜单未显示和导航未居中

导航下拉菜单显示太左

如何在导航抽屉中显示菜单类别的菜单图标？