1. Tạo Page Template

Trước tiên, bạn nên tạo một Page Template riêng (ví dụ: template-glossary.php). Trong đó, bạn sẽ thực hiện các bước sau:

1.1 Lấy danh sách bài viết theo thứ tự alphabet

<?php
$alphabet = range('A', 'Z');
$all_posts = [];

query_posts([
    'post_type'      => 'post', // hoặc custom post type
    'posts_per_page' => -1,
    'orderby'        => 'title',
    'order'          => 'ASC',
]);

if (have_posts()) {
    while (have_posts()) {
        the_post();
        $all_posts[] = [
            'title'   => get_the_title(),
            'link'    => get_the_permalink(),
            'excerpt' => get_the_excerpt(),
        ];
    }
}
wp_reset_query();
?>

1.2 Xác định các chữ cái có bài viết

<?php
$active_letters = [];

foreach ($all_posts as $post) {
    $letter = strtoupper(substr($post['title'], 0, 1));
    if (ctype_alpha($letter)) {
        $active_letters[] = $letter;
    }
}
$active_letters = array_unique($active_letters);
sort($active_letters);
?>

2. Hiển thị menu chữ cái A-Z

Chữ cái không có bài viết sẽ có class inactive để bạn xử lý style nếu cần:

<ul class="alphabet-nav">
    <?php foreach ($alphabet as $char): ?>
        <li>
            <a href="#<?= $char; ?>" class="<?= in_array($char, $active_letters) ? '' : 'inactive'; ?>">
                <?= $char; ?>
            </a>
        </li>
    <?php endforeach; ?>
</ul>

3. Hiển thị danh sách bài viết theo từng chữ cái

<?php foreach ($active_letters as $char): ?>
<section>
    <h2 id="<?= $char; ?>"><?= $char; ?></h2>

    <?php foreach ($all_posts as $post): ?>
        <?php if (strtoupper(substr($post['title'], 0, 1)) === $char): ?>
            <article>
                <h3><a href="<?= $post['link']; ?>"><?= $post['title']; ?></a></h3>
                <p><?= $post['excerpt']; ?></p>
            </article>
        <?php endif; ?>
    <?php endforeach; ?>
</section>
<?php endforeach; ?>

Gợi ý cải tiến hiệu suất

• Sử dụng get_posts() thay vì query_posts() để tránh ảnh hưởng main loop
• Xử lý phân nhóm trước (group by alphabet) để giảm số lần lặp
• Gắn ID theo anchor để menu A-Z nhảy chính xác

Kết luận

Bảng chữ cái giúp người dùng dễ tìm bài viết hoặc mục từ theo tên, rất phù hợp cho website dạng từ điển, thư viện, danh sách định nghĩa… Bạn có thể tùy biến thêm CSS hoặc JS để làm sticky sidebar, highlight chữ cái đang xem, v.v. Chúc bạn áp dụng thành công!