카테고리별 최신 투고를 표시하는 드롭다운 네비게이션 메뉴

카테고리별 최신 투고를 표시하는 드롭다운 네비게이션 메뉴

그래서 워드프레스 웹사이트에서 네비게이션 메뉴 작업을 하려고 합니다.hongkiat.com (이미지 참조)에서 네비게이션 메뉴를 복사하려고 합니다.

Hongkiat의 네비게이션 메뉴에는 5개의 상위 카테고리(Design/dev, Technology, Inspiration, Social Commerce 및 Deal)가 표시됩니다.사용자가 부모 카테고리를 맴돌면 부모 카테고리 아래에 최근 게시물이 표시됩니다.

어쨌든, 나는 드롭 다운 메뉴를 부모 카테고리에 그 아이 카테고리를 더한 코드로 만들 수 있었다.여기서 딜레마는 사용자가 맴도는 부모 카테고리에 최신 게시물(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;
}

누군가 날 도와주거나 내 코드가 먹히지 않아서 내가 뭘 놓치고 있는지 지적해 줄 수 있다면 말이야.내 코드는 오류가 없지만 내가 원하는 것을 이루지 못하고 있다.

누구라도 도움의 손길을 내밀 수 있을까요?

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

다음과 같이 시험해 보십시오.

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

아직 테스트는 안 됐지만 작동은 할 거예요.

상기 코드에서 누락된 것이 몇 가지 있습니다.

간단하게 합시다.

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

제공된 출력은 내 사례에 대한 것입니다.

위의 어레이는 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'
                                    ),
                                ),
                );

또, 카테고리(부모 또는 자녀)에 관한 투고를 취득하기 위해서, 부모 카테고리와 자녀 카테고리를 포함한 어레이를 전달했습니다.

언급URL : https://stackoverflow.com/questions/34768637/drop-down-navigation-menu-that-shows-latest-post-per-category