Index A-Z Encyclopedia for Category Article – Script Code PHP

Raymond Kelvin Nando  — Index A-Z Encyclopedia for Category Article adalah script code yang saya buat untuk memudahkan secara otomatis website yang bernuansa wiki, atau direktori sehingga artikel yang terkategorikan didalam kategori khusus bisa ditampilkan di berbagai letak di website sesuai kebutuhan.

Fitur – Fitur

• Index A-Z ala Wiki atau Ensiklopedia
• Urutan Sesuai Abjad dalam 1 kolom
• Artikel baru akan otomatis terupdate, tanpa perlu edit manual

Langkah – Langkah

Anda bisa menempelkan kode dibawah ini di functions.php atau bisa melalui plugins WPCodePro.

// Shortcode: [az_index category=""]
function az_index_shortcode($atts) {
    ob_start();

    // Ambil kategori dari shortcode
    $atts = shortcode_atts(array(
        'category' => '',
    ), $atts);

    // Ambil semua post di kategori tersebut
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => -1,
        'orderby'        => 'title',
        'order'          => 'ASC',
        'category_name'  => $atts['category'],
    );

    $query = new WP_Query($args);
    $posts_by_letter = array();

    // Kelompokkan post berdasarkan huruf pertama judul
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $title = get_the_title();
            $first_letter = strtoupper(mb_substr($title, 0, 1));

            if (preg_match('/[A-Z]/', $first_letter)) {
                $posts_by_letter[$first_letter][] = array(
                    'title' => $title,
                    'link'  => get_permalink(),
                );
            } else {
                $posts_by_letter['#'][] = array(
                    'title' => $title,
                    'link'  => get_permalink(),
                );
            }
        }
        wp_reset_postdata();
    }

    ksort($posts_by_letter);
    $letters = array_keys($posts_by_letter);

    // ====== NAVIGASI HURUF DI ATAS ======
    echo '<div class="alphabet-nav">';
    foreach ($letters as $letter) {
        echo '<a href="#' . esc_attr($letter) . '">' . esc_html($letter) . '</a>';
    }
    echo '</div>';

    // ====== TAMPILKAN SEMUA POST DI SATU KOLOM ======
    echo '<div class="az-grid">';
    echo '<div class="az-column">';
    foreach ($posts_by_letter as $letter => $posts) {
        echo '<p id="' . esc_attr($letter) . '" class="az-letter">' . esc_html($letter) . '</p><ul>';
        foreach ($posts as $p) {
            echo '<li><a href="' . esc_url($p['link']) . '">' . esc_html($p['title']) . '</a></li>';
        }
        echo '</ul>';
    }
    echo '</div>'; // .az-column
    echo '</div>'; // .az-grid

    return ob_get_clean();
}
add_shortcode('az_index', 'az_index_shortcode');

// ====== Tambahkan CSS langsung ke head ======
function az_index_inline_css() {
    ?>
    <style>
    /* ===== ALPHABET NAVIGATION ===== */
    .alphabet-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 4px;
      margin: 20px 0;
      padding: 0;
    }
    .alphabet-nav a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: 0.9rem;
      border-radius: 4px;
      background: #f4f4f4;
      color: #333;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid #e2e2e2;
      transition: all 0.15s ease;
      font-family: system-ui, sans-serif;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .alphabet-nav a:hover {
      background: #333;
      color: #fff;
      transform: translateY(-1px);
    }

    /* ===== DAFTAR POST ===== */
    .az-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      align-items: start;
      position: relative;
    }
    .az-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* ubah dari h2 ke paragraf */
    .az-column .az-letter {
      border-bottom: 2px solid #ddd;
      padding-bottom: 4px;
      margin-top: 20px;
      font-family: system-ui, sans-serif;
      font-size: 1.1em;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .az-column ul {
      list-style: none;
      padding-left: 0;
      margin: 0 0 16px 0;
    }
    .az-column ul li {
      margin: 4px 0;
      line-height: 1.4;
    }
    .az-column ul li a {
      color: #333;
      text-decoration: none;
      transition: color 0.2s;
    }
    .az-column ul li a:hover {
      color: #0073aa;
      text-decoration: underline;
    }

    @media (max-width: 768px) {
      .alphabet-nav a {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
      }
    }
    </style>
    <?php
}
add_action('wp_head', 'az_index_inline_css');

Setelah anda simpan, anda bisa implementasikan diberbagai letak di website melalui shortcode

[az_index category="contoh"]

Keterangan :

• Ganti contoh, dengan url kategori semisal raymondkelvinnando.com/contoh berarti yang ditulis didalam tanda petik adalah (contoh)

Sekian dan Terima Kasih, Semoga bisa bermanfaat.