Bài viết này hướng dẫn xuất các bài viết của WordPress, có thể là Post hoặc một Custom Post Types nào đó, theo danh sách bảng chữ cái Alphabet, với chữ cái ở trước mỗi phần và một menu nhỏ.

Sắp xếp bài viết WordPress theo bảng chữ cái

Ví dụ

Ở trang Optimizely có danh sách các định nghĩa về Marketing Online. Bài viết này sẽ hướng dẫn các bạn làm tương tự.

Optimizely

Thực hiện

Bạn có thể tạo một Page Template (tham khảo ở đây, mục template-contact.php) dành riêng cho các bài viết sắp xếp theo alphabet.

Lấy danh sách bài viết

<?php
    $ab_list = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y');
    $all_posts = array();
    query_posts('post_type=post&posts_per_page=-1&orderby=title&order=ASC');
    if (have_posts()) {
        while (have_posts()) {
            the_post();
            $all_posts[] = array(
                    'title' => get_the_title(),
                    'link' => get_the_permalink(),
                    'excerpt' => get_the_excerpt(),
                );
        }
    }
    wp_reset_query();
?>

Bạn có thể thay post_type=post bằng một Custom Post Types tùy ý.

Danh sách chữ cái có bài viết

<?php
    $active_ab_list = array();
    foreach ($all_posts as $e) {
        $active_ab_list[] = strtoupper($e['title'][0]);
    }
    $active_ab_list = array_unique($active_ab_list);
?>

Xuất bảng chữ cái

<ul>
    <?php
        foreach ($ab_list as $e) {
            echo '<li><a href="#' . $e . '" class="';
            if (!in_array($e, $active_ab_list)) {
                echo 'inactive';
            }
            echo '">' . $e . '</a></li>';
        }
    ?>
</ul>

Mình chỉ ví dụ xuất HTML, không bao gồm CSS. Chữ cái nào không có bài viết sẽ có class="inactive". Kết quả tham khảo:

<ul>
    <li><a href="#A" class="">A</a></li>
    <li><a href="#B" class="">B</a></li>
    <li><a href="#C" class="">C</a></li>
    <li><a href="#D" class="inactive">D</a></li>
    <li><a href="#E" class="inactive">E</a></li>
    <li><a href="#F" class="inactive">F</a></li>
</ul>

Xuất danh sách bài viết

<?php foreach ($active_ab_list as $item) : ?>
<section>
    <h2 id="<?php echo $item; ?>"><?php echo $item; ?></h2>
    <?php
        foreach ($all_posts as $p) :
        if (strtoupper($p['title'][0]) == $item) :
    ?>
    <article>
        <h3><a href="<?php echo $p['link']; ?>"><?php echo $p['title']; ?></a></h3>
        <p><?php echo $p['excerpt']; ?></p>
    </article>
    <?php endif; endforeach; ?>
</section>
<?php endforeach; ?>

Đây chỉ là một hướng dẫn tạm dùng được, chưa tối ưu cho lắm. Các bạn có thể thử loại bỏ phần tử của mảng $all_posts sau khi có bài viết được xuất ra để vòng lặp sau có số lần lặp thấp hơn.

Chúc các bạn thành công!