php - 在 WORDPRESS 的下拉列表中显示所有家长类别

Question

所以我有这个代码 display all the PARENT categories .

<div class="catslist">
        <ul class="catlistul">
        <?php 
        $args = array(
        'orderby' => 'name',
        'hierarchical' => 1,
        'taxonomy' => 'category',
        'hide_empty' => 0,
        'parent' => 0,
        );
        $categories = get_categories($args);
        foreach($categories as $category) {
        echo '<li><a href="' . get_category_link($category->cat_ID) . '" title="' . $category->name . '">' . $category->name . '</a></li>';
        } 
        ?>
        </ul>
    </div>

代码运行完美，将放在我的导航栏中。

这样做的问题是，如果父类别太多，它看起来会很困惑。

是否有自定义 php 代码可以处理此任务:

1. 仅显示 1 个文本，例如“ARTICLE”
2. 当我将鼠标悬停在“文章”一词上时，下拉按钮将被激活 下图将说明我想要实现的目标。希望有人能在这方面帮助我。谢谢!

Answer 1

你可以试试这个:

HTML/PHP

    <nav>
        <ul class="cf">
            <li><a class="dropdown">Articles</a>
                <ul>
                    <?php 
                    $args = array(
                    'orderby' => 'name',
                    'hierarchical' => 1,
                    'taxonomy' => 'category',
                    'hide_empty' => 0,
                    'parent' => 0,
                    );
                    $categories = get_categories($args);
                    foreach($categories as $category) {
                    echo '<li><a href="' . get_category_link($category->cat_ID) . '" title="' . $category->name . '">' . $category->name . '</a></li>';
                    } 
                    ?>
                </ul>
            </li>
            <li><a href="#">Submit An Article </a></li>
            <li><a href="#">About Us</a></li>
        </ul>
</nav>

CSS

nav { max-width:1200px; width:100%; display:block; z-index:3; margin:0px auto; background:#131313;}
nav ul {-webkit-font-smoothing:antialiased; list-style: none; margin: 0; padding: 0; width: 100%; text-transform: uppercase; display: inline-block; width:auto;}
nav li { float: left; margin: 0; padding: 0; position: relative; }
nav a { color: #FFF; display: block; font: bold 12px/28px sans-serif; padding: 10px 25px; text-align: center; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; font-family:'Museo Sans 500', san-serif; font-weight:500px !important; letter-spacing:.02em; }
.cf li ul { z-index:3; text-align:left !important;}
.cf li ul li {width:200px; display:block;}
.cf li ul li a{text-align:left !important; cursor:pointer;}
.cf li a { cursor:pointer;}
.cf li:hover a { background: #000;}
nav li ul {float: left; left: 0; opacity: 0; position: absolute; top: 40px; visibility: hidden; z-index: 1; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
nav li ul li a{padding:5px 10px;}
nav li:hover ul { opacity: 1; top: 48px; visibility: visible;}
nav li ul li { float: none; width: 100%;}
nav li ul a:hover { background: #131313; padding-left:20px !important; border-left:5px solid #f52100;}
.cf:after, .cf:before { content:""; display:table;}
.cf:after { clear:both;}
.cf { zoom:1;}​