Related Post: Cara Membuat Baca Artikel Lainnya di WordPress

Blok related post menampilkan daftar artikel terkait otomatis di bawah tulisan yang sedang dibaca — tanpa Anda menempelkan link satu per satu. Di WordPress, cara paling fleksibel membuat baca artikel lainnya adalah menggunakan shortcode dengan parameter kategori, tag, penulis, atau field kustom.

Banyak pembaca blog menutup tab setelah satu artikel efeknya bounch rate jadi buruk, itu karena tidak ada petunjuk untuk membaca artikel lainnya. Blok rekomendasi artikel di bawah konten mengisi celah itu tanpa iklan baru.

Apa Itu Related Post: Definisi yang Seragam

Related post (artikel terkait) adalah komponen atau block yang dibuat dengan kode html yang di render dari query tertentu yang menampilkan judul-judul posting lain yang relevan dengan artikel aktif. Biasanya muncul setelah paragraf terakhir, sebelum komentar, atau di sidebar — tulisannya bisa “Baca artikel lainnya”, “Artikel terkait”, atau “Rekomendasi untuk Anda”.

Nama Inggris related post dipakai developer dan plugin; pembaca awam cukup paham istilah “artikel terkait”. Keduanya merujuk fitur yang sama: mesin situs memilih beberapa URL lain, lalu merender link + thumbnail + cuplikan singkat.

Sedangkan menu navigasi statis, related post bersifat kontekstual per URL. Menu “Blog” tidak berubah; blok rekomendasi berubah tiap artikel karena logika pencocokan tag atau kategori ikut berubah.

Google tidak mewajibkan related post untuk ranking, namun tautan internal relevan membantu crawler menemukan artikel lama. Jadi tim SEO sering memasangnya bersama strategi meningkatkan engagement blog lewat arsitektur konten.

Mengapa Blok Baca Artikel Lainnya Penting

Pembaca yang sampai di paragraf terakhir artikel sudah menunjukkan minat — sayang bila dia tidak diberikan artikel lainnya dan berhenti di situ. Tanpa anjuran baca artikel lainnya, mereka akan menutup tab browser. Related post menempatkan tiga sampai lima URL relevan tepat di zona mata sebelum komentar atau footer.

Manfaat utamanya ada dua: pengunjung menemukan topik terkait tanpa mencari manual, dan situs memperkuat tautan internal antar artikel. Google tidak mewajibkan blok ini untuk ranking, namun crawler lebih mudah menemukan artikel lama bila link kontekstual ada di banyak URL.

Walau begitu, rekomendasi yang tidak relevan justru menurunkan kepercayaan — judul acak dari kategori salah terasa seperti iklan. Logika pencocokan by tag atau kategori harus ketat; lebih baik tiga judul tepat daripada sepuluh judul asal-asalan.

Strategi Penempatan Blok Related Post yang Benar

Banyak blogger salah kaprah soal posisi related post. Blok dipasang hanya karena tema punya widget sidebar, atau plugin diaktifkan tanpa cek tampilan HP. Akibatnya pengunjung tidak pernah melihat rekomendasi — padahal kode dan query sudah benar.

Intinya: related post harus muncul saat pembaca selesai (atau hampir selesai) membaca artikel aktif, tanpa memotong alur di awal. Urutan DOM yang aman untuk single post WordPress:

1. Judul + meta artikel
2. Isi konten utama
3. Blok Baca artikel lainnya / related post
4. Bio penulis (bila ada)
5. Area komentar
6. Footer situs

Jadi tempat paling sering tepat: langsung setelah paragraf penutup, sebelum komentar. Pembaca yang scroll sampai bawah sudah siap memilih judul berikutnya.

Posisi yang Sering Salah Kaprah

Menurut kami, kesalahan paling sering bukan algoritma tag — melainkan blok yang hanya hidup di sidebar tema lama. Cek tampilan mobile dulu sebelum optimasi query.

Inline di Tengah vs di Akhir Artikel

Ada dua pola related post yang sering dibingungkan:

• Di akhir artikel — daftar 3–5 judul setelah konten. Cocok untuk tutorial panjang dan artikel berita. Shortcode [related_posts] di editor blok atau hook tema the_content + append.
• Inline di tengah — satu kartu artikel terkait setelah H2 ke-2 atau sekitar 40–60% scroll. Cocok bila artikel >1.500 kata dan risiko pembaca keluar di tengah. Plugin seperti plugin artikel terkait inline WordPress dirancang untuk slot ini.

Namun jangan pasang keduanya berlebihan pada artikel pendek (<800 kata). Satu blok akhir sudah cukup; inline di tengah justru terasa mengganggu.

Sedangkan artikel pendek (tips 400–600 kata), cukup related post di akhir saja. Inline memecah fokus bila belum ada substansi yang dituntaskan.

Checklist Penempatan Sebelum Go-Live

Sebelum publish, uji satu artikel representatif di Chrome Android (lebar ~360 px) dan desktop:

• Blok related post terlihat tanpa scroll ekstra setelah paragraf terakhir?
• Tidak ada duplikat blok dari tema + plugin?
• Judul rekomendasi relevan dengan tag/kategori artikel aktif?
• Link footer legal / kebijakan privasi masih reachable — blok tidak mendorong footer terlalu jauh?
• Blok tidak muncul di halaman About, Contact, atau landing page tanpa artikel?

Apabila memakai shortcode manual, tempelkan di template yang sama di semua post — jangan andalkan editor per artikel kecuali kurasi khusus. Konsistensi penempatan membantu pembaca membentuk kebiasaan: scroll sampai bawah, lalu pilih judul lanjutan.

Untuk blog dengan sidebar aktif di desktop, boleh pertahankan widget related post di sidebar dan blok inline/akhir — asal isinya tidak duplikat persis. Sidebar = cuplikan; akhir artikel = daftar lengkap. Bila keduanya identik, hapus salah satu.

Macam-macam Related Post: by Tag, Kategori, Penulis, dan Lainnya

Sebelum menulis kode, tentukan aturan pencocokan. Lima pola paling sering:

Apabila taxonomy rapi, by tag lebih tajam dari kategori. Namun by custom field butuh disiplin input meta box — satu salah ketik, rekomendasi kosong.

Menurut kami, blog UMKM dengan kurang dari 100 artikel cukup mulai dari by kategori; tag baru worth it setelah ada 20+ artikel per cluster topik.

Cara Membuat Related Post di WordPress dengan Shortcode

Shortcode memungkinkan editor menempelkan [related_posts] di editor blok tanpa sentuh PHP lagi. Jadi alurnya sederhana: pasang kode sekali, pakai shortcode di tiap artikel.

Kode PHP Shortcode Related Post Lengkap

Blok berikut mendaftarkan shortcode, menjalankan query aman, menyimpan HTML ke cache transient satu jam, dan mendukung layout list atau flex. Salin ke child theme atau plugin snippet — cocok untuk bisnis yang ingin rekomendasi artikel tanpa langganan SaaS.

Bagian 1: Query dan Parameter

Fungsi ini hanya jalan di halaman single post. Blok pertama menyiapkan argumen WP_Query dari parameter shortcode.

<?php
function codef_related_posts_shortcode( $atts ) {
    global $post;
    if ( ! is_singular( 'post' ) || ! $post instanceof WP_Post ) {
        return '';
    }
    $atts = shortcode_atts(
        array( 'by' => 'category', 'limit' => 4, 'ids' => '',
            'meta_key' => '', 'meta_value' => '', 'orderby' => 'rand',
            'layout' => 'list', 'class' => '' ),
        $atts, 'related_posts'
    );
    $post_id = (int) $post->ID;
    $args = array(
        'post_type' => 'post', 'post_status' => 'publish',
        'posts_per_page' => min( 12, max( 1, absint( $atts['limit'] ) ) ),
        'post__not_in' => array( $post_id ), 'no_found_rows' => true,
        'update_post_meta_cache' => false, 'orderby' => sanitize_key( $atts['orderby'] ),
    );

Switch by Tag, Kategori, Penulis, Custom, Meta

    switch ( sanitize_key( $atts['by'] ) ) {
        case 'tag':
            $tags = wp_get_post_tags( $post_id, array( 'fields' => 'ids' ) );
            if ( empty( $tags ) ) { return ''; }
            $args['tag__in'] = array_map( 'absint', $tags );
            break;
        case 'author':
            $args['author'] = (int) $post->post_author;
            break;
        case 'custom':
            $ids = array_filter( array_map( 'absint', explode( ',', $atts['ids'] ) ) );
            if ( empty( $ids ) ) { return ''; }
            $args['post__in'] = $ids; $args['orderby'] = 'post__in';
            unset( $args['post__not_in'] );
            break;
        case 'meta':
            if ( empty( $atts['meta_key'] ) ) { return ''; }
            $args['meta_query'] = array( array(
                'key' => sanitize_key( $atts['meta_key'] ),
                'value' => sanitize_text_field( $atts['meta_value'] ), 'compare' => '=',
            ) );
            break;
        default:
            $cats = wp_get_post_categories( $post_id );
            if ( empty( $cats ) ) { return ''; }
            $args['category__in'] = array_map( 'absint', $cats );
            break;
    }

Bagian 2: Cache, HTML, dan Registrasi Shortcode

    $cache_key = 'codef_rp_' . md5( wp_json_encode( $args ) . $post_id );
    $cached    = get_transient( $cache_key );
    if ( is_string( $cached ) && $cached !== '' ) {
        return $cached;
    }

    $query = new WP_Query( $args );
    if ( ! $query->have_posts() ) {
        wp_reset_postdata();
        return '';
    }

    $layout = in_array( $atts['layout'], array( 'list', 'flex' ), true ) ? $atts['layout'] : 'list';
    $class  = 'codef-related-posts codef-rp-' . esc_attr( $layout );
    if ( $atts['class'] !== '' ) {
        $class .= ' ' . esc_attr( sanitize_html_class( $atts['class'] ) );
    }

    ob_start();
    echo '<section class="' . esc_attr( $class ) . '" aria-label="Artikel terkait">';
    echo '<h3 class="codef-rp-heading">Baca artikel lainnya</h3>';
    echo '<ul class="codef-rp-items">';
    while ( $query->have_posts() ) {
        $query->the_post();
        echo '<li class="codef-rp-item">';
        echo '<a href="' . esc_url( get_permalink() ) . '">' . esc_html( get_the_title() ) . '</a>';
        echo '</li>';
    }
    echo '</ul></section>';
    wp_reset_postdata();

    $html = ob_get_clean();
    set_transient( $cache_key, $html, HOUR_IN_SECONDS );
    return $html;
}
add_shortcode( 'related_posts', 'codef_related_posts_shortcode' );

Tempel kedua bagian berurutan dalam satu snippet — jangan pisah file. Baris penutup kurung fungsi hanya ada di bagian 2.

Baris no_found_rows dan update_post_meta_cache = false mengecilkan beban MySQL — detailnya kami bahas di bagian efisiensi query.

Penjelasan Parameter by Tag, Kategori, dan Meta

Switch case 'tag' membaca tag artikel aktif, lalu mencari posting lain dengan tag yang sama. Opsi author cocok untuk portal multi-penulis. Parameter custom plus ids memungkinkan kurasi manual tanpa query taxonomy.

Cara Pasang Kode: functions.php vs Plugin Snippet

Berikut tiga jalur aman untuk pemilik situs non-developer:

1. Child theme → functions.php — Buka Tampilan → Editor file tema, pilih child theme, tempel kode di akhir file. Simpan. Risiko: typo bisa memicu layar putih.
2. Plugin Code Snippets (Code Snippets di WordPress.org) — Buat snippet PHP baru, tempel kode, aktifkan. Snippet nonaktif otomatis bila ada error fatal saat simpan.
3. WPCode (WPCode — Insert Headers and Footers) — Tab “Code Snippets”, pilih “Add Snippet”, tipe PHP, jalankan di frontend.

Sebelum edit apa pun, export backup database lewat phpMyAdmin atau plugin backup. Panduan backup database MySQL membantu bila Anda belum pernah rollback.

Kemudian, setelah snippet aktif, buka satu artikel di editor blok, tambahkan blok Shortcode, ketik:

[related_posts by="category" limit="4" layout="flex"]

Pratinjau di frontend — daftar judul muncul di bawah konten. Apabila kosong, artikel mungkin belum punya kategori atau tag.

Parameter Shortcode dan Contoh Pemakaian

Apabila parameter dipahami, editor bisa mengganti logika tanpa developer:

• [related_posts by="tag" limit="3"] — tiga artikel ber-tag sama.
• [related_posts by="author" limit="5" orderby="date"] — lima artikel terbaru penulis yang sama.
• [related_posts by="custom" ids="101,205,310"] — kurasi manual tiga ID.
• [related_posts by="meta" meta_key="series" meta_value="wordpress-101"] — serial artikel via custom field.

Untuk menampilkan postingan lain di bawah artikel dengan gaya kartu thumbnail, perluas loop PHP: tambahkan get_the_post_thumbnail() di dalam while. Namun tema block FSE kadang lebih mudah pakai pattern reusable daripada shortcode — baca perbandingan modernisasi tema WordPress bila tim Anda mempertimbangkan Timber.

Tampilan Frontend: List dan Flex

Class codef-rp-list (default) merender vertikal — cocok sidebar sempit dan artikel panjang. Tambahkan CSS berikut di Customizer → CSS Tambahan:

.codef-rp-list .codef-rp-items {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}
.codef-rp-list .codef-rp-item {
  margin-bottom: 0.5rem;
}

Sementara layout flex menampilkan kartu horizontal — bagus untuk blog dengan featured image konsisten:

.codef-rp-flex .codef-rp-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
}
.codef-rp-flex .codef-rp-item {
  flex: 1 1 220px;
}

Jangan campur flex dengan sidebar 250 px — kartu akan terpotong. Uji di layar 360 px lebar sebelum rilis ke production.

Efisiensi Query, Cache, Keamanan, dan Kompatibilitas Server

Lantaran related post memicu query tambahan tiap pageview artikel, cache jadi krusial. Tanpa cache, blog 10.000 kunjungan/hari = 10.000 query ekstra. Transient satu jam pada kode di atas menekan beban — invalidasi otomatis saat transient expired; purge manual lewat plugin cache (LiteSpeed, WP Rocket) setelah publish artikel baru.

Untuk keamanan, semua output lewat esc_url, esc_html, esc_attr. Input shortcode disanitasi via sanitize_key dan absint. Jangan pernah echo meta value mentah dari database tanpa escape.

Ternyata kompatibilitasnya luas: kode memakai WP_Query standar — jalan di PHP 7.4+ dan WordPress 6.x. Object cache (Redis) mempercepat transient bila hosting mendukung. Arsitektur headless membutuhkan endpoint REST terpisah; topik headless WordPress relevan bila front-end bukan tema PHP klasik.

Meski begitu, jangan aktifkan orderby=rand pada blog 5.000+ artikel tanpa cache — MySQL sort random mahal. Ganti ke date atau comment_count bila server shared hosting sering timeout.

Troubleshooting Bila Situs Error Setelah Pasang Kode

Layar putih (white screen of death) hampir selalu syntax error PHP. Langkah cepat:

1. Login FTP/cPanel, rename folder wp-content/plugins/code-snippets sementara — snippet nonaktif, situs hidup lagi.
2. Apabila kode ada di functions.php, ganti ke tema default twentytwentyfour via database atau rename folder child theme.
3. Setelah itu aktifkan WP_DEBUG_LOG di wp-config.php, cek file debug.log di wp-content.

Blok related post kosong? Periksa apakah artikel punya kategori/tag, shortcode sudah benar, dan artikel lain memang published — bukan draft.

Duplikat judul muncul? Tema Anda mungkin sudah punya related post bawaan — nonaktifkan salah satu. Error izin setelah migrasi? Baca solusi error not allowed WordPress pasca restore.

Agar aman, selalu uji di staging dulu. Satu baris titik koma hilang bisa mengunci dashboard — backup bukan opsi, melainkan syarat.

Plugin Related Post Gratis Populer di WordPress

Bila menulis PHP terasa berat, plugin berikut gratis di direktori resmi:

Jetpack mengirim data ke server eksternal — baca kebijakan privasi bila situs klinik atau lembaga pemerintah. Sedangkan YARPP jalan sepenuhnya lokal; cocok untuk data sensitif.

Menurut kami, plugin gratis cukup untuk blog under 1.000 artikel. Di atas itu, shortcode + object cache lebih terkendali.

Untuk halaman company profile yang menampilkan portofolio dan artikel berdampingan, struktur navigasi dan rekomendasi konten perlu dirancang sejak wireframe — tim pembuatan website company profile sering menyatukan keduanya agar pengunjung B2B tidak tersesat setelah satu artikel.

Sejak 2009, CodeF — web developer Indonesia — membantu klien memasang related post tanpa membebani hosting shared. Kadang shortcode custom, kadang YARPP dengan template disesuaikan — tergantung siapa yang mengelola konten setelah launch.

Jadi cara menampilkan artikel terkait di blog pada akhirnya soal logika pencocokan dan tampilan yang tidak mengganggu. Mulai dari by kategori, ukur klik internal di Search Console, baru refine ke tag atau custom field bila data sudah cukup.