Cara Membuat Menu Khusus di Dashboard WordPress Gutenberg

13/05/2026 Yunandra 18 Views

Daftar Isi

yunandracom. Menu khusus di Dashboard WordPress Gutenberg menjadi tema menarik dalam membuat website sekolah menggunakan WordPress.

Sebagai bagian dari tutorial aplikasi pendidikan, Website berbasis WordPress merupakan salah satu inovasi pendidikan Islam dari komponen teknologi Digital dan Media Pembelajaran.

Silahkan mengikuti kupas tuntas teknologi digital di dunia pendidikan di artikel: Teknologi Komputer dan Media Pembelajaran Digital >>

Tulisan ini akan membahas plug in pendukung pembuatan menu khusus baru di dashboard wordpress dan tutorial membuatnya dengan contoh membuat menu khusus “Regulasi”

Menu Baru Khusus di Dashboard WordPress

WordPress merupakan aplikasi pembuatan website gratis yang paling mudah dan banyak plug in yang mendukungnya.

salah satunya plug untuk membuat Menu baru di Dashbiard WordPress. Kita dapat membuat tipe editor post sesuai dengan kebutuhan kita.

Ada dua plug yang mendukung pembuatan Menu Khusus di Dashboard WordPress Gutenberg yaitu

Custom Post Type (CPT) UI. Fungsinya membuat menu khusus di dashboard WordPress
Advance Custom Fields (ACF). Fungsinya mengatur format yang akan tampil di menu editor gutenberg.

Cara Membuat Sistem Arsip Regulasi Pendidikan dengan CPT UI, ACF, dan Gutenberg

Mengelola ribuan dokumen regulasi pendidikan memerlukan struktur data yang lebih rapi daripada sekadar postingan berita biasa. Dengan memanfaatkan kombinasi Custom Post Type (CPT) UI, Advanced Custom Fields (ACF), dan editor Gutenberg, Anda dapat membangun database regulasi yang profesional, mudah difilter, dan memiliki performa SEO yang tinggi.

Berikut adalah panduan langkah demi langkah untuk membangun sistem tersebut tanpa harus menguasai bahasa pemrograman yang kompleks.

Tahap 1: Instalasi Plugin yang Diperlukan

Langkah awal adalah menginstal tiga alat utama di dashboard WordPress Anda:

CPT UI: Untuk membuat menu “Regulasi” terpisah dari menu “Post”.
Advanced Custom Fields (ACF): Untuk menambahkan data spesifik seperti Nomor Peraturan, Tahun, dan Status.
Code Snippets (Opsional tapi Direkomendasikan): Untuk meletakkan kode shortcode dengan aman tanpa merusak tema.

Tahap 2: Membuat Custom Post Type “Regulasi”

Buka CPT UI > Add/Edit Post Types.
Isi Post Type Slug dengan regulasi, Plural Label dengan Regulasi, dan Singular Label dengan Regulasi.
Pada bagian Settings, pastikan:
- Has Archive: True.
- Show in REST API: True (Wajib agar bisa menggunakan Gutenberg).
Klik Add Post Type.

Tahap 3: Menambahkan Field Khusus dengan ACF

Agar setiap regulasi memiliki data yang seragam, kita perlu membuat kolom input khusus:

Buka ACF > Field Groups > Add New.
Buat beberapa field utama:
- Nomor Peraturan (Tipe: Text)
- Tahun (Tipe: Number)
- Status (Tipe: Select – Isi pilihannya: Berlaku, Dicabut, Revisi)
- Link Dokumen (Tipe: Link)
Di bagian Location Rules, pilih Post Type is equal to Regulasi.
Klik Save Changes.

Tahap 4: Memasang Kode Shortcode di functions.php

Agar data dari ACF bisa tampil secara otomatis di dalam artikel, kita perlu menambahkan fungsi “pencetak data” di file functions.php tema atau melalui plugin Code Snippets:

PHP

// 1. Shortcode menampilkan data teks (Nomor, Tahun)
add_shortcode('tampilkan_acf', function($atts) {
    $atts = shortcode_atts( array('field' => ''), $atts );
    $data = get_field($atts['field']);
    return $data ? '<span class="acf-output">' . esc_html($data) . '</span>' : '';
});

// 2. Shortcode Badge Status Berwarna
add_shortcode('status_badge', function() {
    $status = get_field('status'); 
    if (!$status) return '';
    $color = ($status == 'Berlaku') ? '#28a745' : '#dc3545';
    return '<span style="background:'.$color.'; color:#fff; padding:4px 12px; border-radius:50px; font-weight:bold; font-size:12px;">' . esc_html($status) . '</span>';
});

// 3. Shortcode Tombol Unduh Otomatis
add_shortcode('tombol_link', function($atts) {
    $atts = shortcode_atts( array('field' => ''), $atts );
    $link = get_field($atts['field']);
    if( $link ): 
        return '<a href="' . esc_url($link['url']) . '" target="' . esc_attr($link['target']) . '" style="display:inline-block; padding:10px 20px; background:#2271b1; color:white; border-radius:5px; text-decoration:none; font-weight:bold;">' . esc_html($link['title']) . '</a>';
    endif;
    return '';
});

Tahap 5: Menyusun Tampilan dengan Gutenberg

Kini saatnya menyusun layout menggunakan Block Pattern agar setiap postingan regulasi memiliki desain yang konsisten:

Buat postingan baru di menu Regulasi.
Masukkan blok Paragraph atau Shortcode dan ketikkan kode berikut:
- [status_badge] untuk menampilkan status.
- [tampilkan_acf field="nomor_peraturan"] untuk menampilkan nomor.
- [tombol_link field="link_dokumen"] untuk tombol unduh.
Simpan desain tersebut sebagai Synced Pattern agar bisa digunakan kembali secara instan pada ribuan artikel lainnya.

Kesimpulan

Dengan metode ini, situs pendidikan Anda tidak hanya menjadi gudang file PDF, tetapi menjadi portal analisis regulasi yang interaktif dan mudah dikelola. Pemisahan antara konten berita dan data regulasi menggunakan CPT UI akan membuat mesin pencari seperti Google lebih mudah memahami struktur situs Anda, yang pada akhirnya akan meningkatkan trafik organik secara signifikan.

Untuk mengetahui tutorial lainnya, silahkan bukan Kumpulan Tutorial Membuat Website sekolah dengan WordPress