Hiển Thị Danh Mục Con Trong Danh Mục Cha ở Category

Nếu bạn muốn hiển thị danh mục con trong danh mục cha ở Category trên trang category.php, bạn có thể sử dụng WordPress để lấy danh mục cha hiện tại và truy vấn các danh mục con theo nó.

Code Hiển thị danh mục con trong danh mục cha ở Category

Xem thêm: Hiển thị danh sách các danh mục con theo ID của danh mục cha

Code ở file category.php

<?php
			// Lấy thông tin category hiện tại
			$current_category = get_queried_object();

			// Kiểm tra nếu category hiện tại là danh mục con
			if ($current_category->parent != 0) {
			    // Lấy thông tin danh mục cha
			    $parent_category = get_category($current_category->parent);
			} else {
			    // Nếu không phải danh mục con, thì chính nó là danh mục cha
			    $parent_category = $current_category;
			}

			// Truy vấn các danh mục con của danh mục cha
			$args = array(
			    'taxonomy'   => 'category',
			    'parent'     => $parent_category->term_id, // Lấy danh mục con của danh mục cha
			    'hide_empty' => false,                    // Bao gồm cả category không có bài viết
			);

			$child_categories = get_categories($args);

			// Kiểm tra và hiển thị danh mục con
			if (!empty($child_categories)) {
			    echo '<div class="cat-archive-list row row-small large-columns-3 medium-columns-2 small-columns-1 hide-for-medium">';

			    foreach ($child_categories as $child_category) {
			        // Thêm class "active" nếu danh mục con đang được truy cập
			        $active_class = ($current_category->term_id == $subcategory->term_id) ? ' class="active"' : '';
			        echo '<div class="cat-list-item col ' . $active_class . '" >
								<div class="col-inner">';
			        echo '<a href="' . esc_url(get_category_link($child_category->term_id)) . '">';
			        echo '<div class="box-text">';
			        echo '<img width="30" height="30" src="/wp-content/themes/flatsome-child/img/folder.png" alt="file">';
			        echo '<h2> ' .esc_html($child_category->name).'<span> ('. esc_html($child_category->count).')</span></h2>';
			        echo '</div>';
			        echo '</a>';
			        echo '</div>';
			        echo '</div>';
			    }

			    echo '</div>';
			} else {
			    echo '<p>Không có danh mục con nào.</p>';
			}
			?>

<?php

// Lấy thông tin category hiện tại

$current_category = get_queried_object();

// Kiểm tra nếu category hiện tại là danh mục con

if ($current_category->parent != 0) {

// Lấy thông tin danh mục cha

$parent_category = get_category($current_category->parent);

} else {

// Nếu không phải danh mục con, thì chính nó là danh mục cha

$parent_category = $current_category;

}

// Truy vấn các danh mục con của danh mục cha

$args = array(

'taxonomy' => 'category',

'parent' => $parent_category->term_id, // Lấy danh mục con của danh mục cha

'hide_empty' => false, // Bao gồm cả category không có bài viết

);

$child_categories = get_categories($args);

// Kiểm tra và hiển thị danh mục con

if (!empty($child_categories)) {

echo '<div class="cat-archive-list row row-small large-columns-3 medium-columns-2 small-columns-1 hide-for-medium">';

foreach ($child_categories as $child_category) {

// Thêm class "active" nếu danh mục con đang được truy cập

$active_class = ($current_category->term_id == $subcategory->term_id) ? ' class="active"' : '';

echo '<div class="cat-list-item col ' . $active_class . '" >

<div class="col-inner">';

echo '<a href="' . esc_url(get_category_link($child_category->term_id)) . '">';

echo '<div class="box-text">';

echo '<img width="30" height="30" src="/wp-content/themes/flatsome-child/img/folder.png" alt="file">';

echo '<h2> ' .esc_html($child_category->name).'<span> ('. esc_html($child_category->count).')</span></h2>';

echo '</div>';

echo '</a>';

echo '</div>';

}

echo '</div>';

} else {

echo '<p>Không có danh mục con nào.</p>';

}

CSS trong style.css

/*Page Header Cat*/
.title-cat {
    text-align: center;
    margin-bottom: 30px;
}
.cat-list-item h2 {
    font-size: 14px;
    margin-bottom: 0;
    padding-right: 40px;
    padding-left: 10px;
}
.cat-list-item h2 span {
    font-weight: 100;
    font-size: 12px;
}
.cat-list-item img {
    margin-right: 5px;
}
.cat-list-item .box-text {
    display: flex;
    align-content: center;
    align-items: center;
}
.cat-list-item .col-inner {
    box-shadow: rgba(0, 0, 0, .16) 0 1px 4px;
    border-radius: 5px;
    padding: 10px;
    height: 100%;
    background: white;
    border-top: 3px solid #3a5e98;
}
.cat-list-item .col-inner:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    transition: 0.3s;
    background: #3a5e98;
    left: 0;
    bottom: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.cat-list-item .col-inner:hover:after,
.cat-list-item .col:nth-child(1) .col-inner {
    height: 100%;
}
.cat-list-item .col-inner:hover h2,
.cat-list-item .col:nth-child(1) .col-inner h2 {
    color: white;
    z-index: 9;
}
.cat-list-item .col-inner:hover img,
.cat-list-item .col:nth-child(1) .col-inner img{
    z-index: 9;
}
.cat-list-item .col-inner:hover .box-text:after,
.cat-list-item .col:nth-child(1) .col-inner .box-text:after{
    filter: contrast(0%) brightness(2);
    z-index: 9;
}
.cat-list-item .box-text {
    padding: 0;
}
.cat-list-item .box-text:after {
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: 34px;
    height: 34px;
    position: absolute;
    display: block;
    background-image: url(https://tunlamweb.com/wp-content/themes/flatsome-child/img/icon-grey.png);
}
.cat-list-item .box-text:after {
    right: 5px;
    top: auto;
    color: #e9e9eb;
}

/*Page Header Cat*/

.title-cat {

text-align: center;

margin-bottom: 30px;

}

.cat-list-item h2 {

font-size: 14px;

margin-bottom: 0;

padding-right: 40px;

padding-left: 10px;

}

.cat-list-item h2 span {

font-weight: 100;

font-size: 12px;

}

.cat-list-item img {

margin-right: 5px;

}

.cat-list-item .box-text {

display: flex;

align-content: center;

align-items: center;

}

.cat-list-item .col-inner {

box-shadow: rgba(0, 0, 0, .16) 0 1px 4px;

border-radius: 5px;

padding: 10px;

height: 100%;

background: white;

border-top: 3px solid #3a5e98;

}

.cat-list-item .col-inner:after{

content: '';

position: absolute;

width: 100%;

height: 0;

transition: 0.3s;

background: #3a5e98;

left: 0;

bottom: 0;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

}

.cat-list-item .col-inner:hover:after,

.cat-list-item .col:nth-child(1) .col-inner {

height: 100%;

}

.cat-list-item .col-inner:hover h2,

.cat-list-item .col:nth-child(1) .col-inner h2 {

color: white;

z-index: 9;

}

.cat-list-item .col-inner:hover img,

.cat-list-item .col:nth-child(1) .col-inner img{

z-index: 9;

}

.cat-list-item .col-inner:hover .box-text:after,

.cat-list-item .col:nth-child(1) .col-inner .box-text:after{

filter: contrast(0%) brightness(2);

z-index: 9;

}

.cat-list-item .box-text {

padding: 0;

}

.cat-list-item .box-text:after {

content: "";

background-repeat: no-repeat;

background-size: contain;

width: 34px;

height: 34px;

position: absolute;

display: block;

background-image: url(https://tunlamweb.com/wp-content/themes/flatsome-child/img/icon-grey.png);

}

.cat-list-item .box-text:after {

right: 5px;

top: auto;

color: #e9e9eb;

}

Giải thích Code

Lấy danh mục cha:
- $current_category->parent != 0: Kiểm tra nếu danh mục hiện tại là danh mục con (có parent khác 0).
- get_category($current_category->parent): Lấy thông tin danh mục cha.
Truy vấn danh mục con:
- parent => $parent_category->term_id: Lấy các danh mục con của danh mục cha.
Hiển thị danh mục con:
- Hiển thị dạng danh sách <ul> với các thẻ <li>.
Class “active”:
- Kiểm tra xem danh mục hiện tại có khớp với danh mục con đang được lặp hay không.

Kết quả hiển thị

Giả sử bạn có cấu trúc danh mục như sau:

Tin tức (ID = 1)
- Thời sự (ID = 2)
- Quốc tế (ID = 3)

Khi bạn truy cập vào danh mục “Thời sự” (ID = 2) hoặc “Quốc tế” (ID = 3), code sẽ hiển thị:

Xem thêm bài viết khác

Nếu truy cập vào danh mục cha “Tin tức”, bạn vẫn sẽ thấy danh sách các danh mục con của nó.

Triển khai

Đặt đoạn code trên vào file category.php.
Thêm CSS vào file style.css để trang trí.

Kết quả mong đợi

Khi truy cập vào danh mục cha hoặc danh mục con, các danh mục con của danh mục cha tương ứng sẽ được hiển thị.
Danh mục hiện tại sẽ được gắn class “active” để làm nổi bật.

Nếu bạn cần tùy chỉnh hoặc gặp vấn đề khi triển khai, hãy để mình biết nhé!

Theo dỗi tên trên Fanpage và Youtube của mình nhé.

Chúc bạn thành công.