Code hiển thị các danh mục con trong WordPress

Khi bạn vào một mục lớn sẽ thấy xuất hiện danh mục con trong Category, hôm nay mình sẽ chỉ các bạn cách Code hiển thị các danh mục con trong blog WordPress

Code hiển thị các danh mục con trong WordPress

Như hình trên ta có thể thấy, khi vào Chuyên mục Kinh Doanh, ở dưới đồng thời sẽ xuất hiện danh sách cách chuyên mục con (Bất động sản, Doanh nghiệp…) thuộc chuyên mục Kinh Doanh

Để làm được như vậy, rất đơn giản. Hãy chèn đoạn code sau vào nơi cần hiển thị và đừng quên hãy tự CSS Style lại cho nó đẹp và giống hình trên nhé.

Bạn có thể chèn code sau vào vị trí cần hiện thị nhé ( nên chèn trực tiếp vào child theme của bạn để update ko bị mất code )

<div class="flatsome-display-category">
<?php

$term = get_queried_object();

$children = get_terms( $term->taxonomy, array(
'parent' => $term->term_id,
'hide_empty' => false
) );

if ( $children ) { 
foreach( $children as $subcat )
{
echo '<a href="' . esc_url(get_term_link($subcat, $subcat->taxonomy)) . '">' . $subcat->name . ' </a>';
}
}
?>
</div>

Code hiển thị các danh mục con vào Function và tạo Shortcode

Hoặc chèn Code hiển thị các danh mục con trong WordPress vào function.php của theme bạn đang dùng nhé

add_shortcode( 'danhmuccon', 'show_danhmuccon' );
function show_danhmuccon() { ?>
<div class="flatsome-display-category">
<?php

$term = get_queried_object();

$children = get_terms( $term->taxonomy, array(
'parent' => $term->term_id,
'hide_empty' => false
) );

if ( $children ) { 
foreach( $children as $subcat )
{
echo '<a href="' . esc_url(get_term_link($subcat, $subcat->taxonomy)) . '">' . $subcat->name . ' </a>';
}
}
?>
</div>
<?
}

Trên UX build ta nhét shortcode này vào vị trí cần hiện thị là được nhé

[danhmuccon]

Muốn đẹp thêm css dạng này vô nhé

/*css Show danh mục con */
.flatsome-display-category a {
/* background-color: #ddd; */
padding: 5px;
margin: 5px;
background: #0775ef;
box-shadow: 1px 4px 0px 0px rgb(0 0 0 / 40%);
border: 2px solid #498e5c;
cursor: pointer;
color: white;
}
.flatsome-display-category a:hover {
background: #f6f7f7;
box-shadow: 1px 4px 0px 0px rgb(0 0 0 / 40%);
border: 2px solid var(--wp--preset--color--luminous-vivid-orange);
cursor: pointer;
color: var(--wp--preset--color--black);
}

Sau khi thêm css nó có dạng này

Với theme Flatsome bạn có thể thêm tại

– Danh mục thêm ở file: Flatsome Child: archive-title.php (template-parts/posts/partials/archive-title.php)

– Trang Blog bài viết thêm ở: Flatsome Child: entry-title.php (template-parts/posts/partials/entry-title.php)

Chúc thành công nhé