Dalam proyek pengembangan situs Penerbit Kolofon, tim Alifbata fokus pada efisiensi dan kemudahan pengelolaan data. Alih-alih menggunakan plugin e-commerce yang berat, kami membangun sistem katalog buku kustom yang ringan, cepat, dan terintegrasi langsung dengan WhatsApp.
Tutorial ini akan memandu Anda menerapkan sistem yang sama menggunakan plugin Code Snippets di WordPress.
Langkah 1: Persiapan & Instalasi
-
Pastikan Anda telah menginstal plugin Code Snippets dari repositori WordPress.
-
Buat snippet baru dan beri nama: “Alifbata – Sistem Katalog Buku”.
- Pastikan menambahkan untuk PHP ya, seperti gambar di bawah ini.
Langkah 2: Implementasi Kode (Versi Universal)
#1 Tempelkan kode di bawah ini. Kode ini sudah menyertakan fitur Custom Post Type, Meta Box untuk detail buku, sistem pencarian, hingga integrasi tombol WhatsApp.
/**
* Project: Katalog Buku
* Developer: Alifbata Digital (https://alifbata.digital)
*/
// 1. DAFTARKAN MENU KATALOG BUKU
add_action('init', function() {
register_post_type('katalog_buku', array(
'labels' => array(
'name' => 'Katalog Buku',
'singular_name' => 'Buku',
'add_new' => 'Tambah Buku Baru',
'add_new_item' => 'Tambah Koleksi Buku Baru'
),
'public' => true,
'menu_icon' => 'dashicons-book-alt',
'supports' => array('title', 'editor', 'thumbnail'),
'rewrite' => array('slug' => 'katalog-buku', 'with_front' => false),
'has_archive' => false,
'query_var' => true,
));
});
// 2. BUAT KOLOM ISIAN (DETAIL BUKU)
add_action('add_meta_boxes', function() {
add_meta_box('info_buku', 'Detail Informasi Buku', 'alifbata_callback_buku', 'katalog_buku', 'normal', 'high');
});
function alifbata_callback_buku($post) {
$fields = array(
'penulis' => 'Penulis',
'kategori' => 'Kategori',
'penerbit' => 'Penerbit',
'halaman' => 'Jumlah Halaman',
'dimensi' => 'Dimensi Buku',
'isbn' => 'ISBN',
'tag' => 'Tag/Label'
);
foreach ($fields as $key => $label) {
$val = get_post_meta($post->ID, '_b_'. $key, true);
echo '<p><label><strong>'.$label.':</strong></label><br><input type="text" name="b_'.$key.'" value="'.esc_attr($val).'" style="width:100%; padding:8px; margin-top:5px; border:1px solid #ccc; border-radius:4px;"></p>';
}
}
// 3. SIMPAN DATA OTOMATIS
add_action('save_post', function($post_id) {
$fields = array('penulis','kategori','penerbit','halaman','dimensi','isbn','tag');
foreach ($fields as $f) {
if (isset($_POST['b_'.$f])) {
update_post_meta($post_id, '_b_'.$f, sanitize_text_field($_POST['b_'.$f]));
}
}
});
// 4. SHORTCODE UNTUK DAFTAR KATALOG [katalog_buku]
add_shortcode('katalog_buku', function() {
$paged = isset($_GET['halaman']) ? max(1, intval($_GET['halaman'])) : 1;
$search = isset($_GET['cari_buku']) ? sanitize_text_field($_GET['cari_buku']) : '';
$args = array(
'post_type' => 'katalog_buku',
'posts_per_page' => 12,
'paged' => $paged,
's' => $search,
'post_status' => 'publish'
);
$q = new WP_Query($args);
ob_start();
?>
<div class="alifbata-catalog-wrapper">
<form role="search" method="get" class="search-katalog" style="margin-bottom:30px; display:flex; gap:10px;">
<input type="text" name="cari_buku" placeholder="Cari judul atau penulis..." value="<?php echo $search; ?>" style="flex-grow:1; padding:10px; border:1px solid #ddd;">
<button type="submit" style="padding:10px 20px; background:#333; color:#fff; border:none; cursor:pointer;">Cari Buku</button>
</form>
<div class="book-grid" style="display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:25px;">
<?php if ($q->have_posts()) : while ($q->have_posts()) : $q->the_post();
$penulis = get_post_meta(get_the_ID(), '_b_penulis', true);
?>
<div class="book-item" style="text-align:center; border:1px solid #eee; padding:15px; border-radius:10px; transition: 0.3s;">
<a href="<?php the_permalink(); ?>" style="text-decoration:none; color:#333;">
<div style="margin-bottom:15px;">
<?php if (has_post_thumbnail()) : the_post_thumbnail('medium', array('style'=>'max-width:100%; height:auto; border-radius:5px;'));
else: echo '<img src="https://via.placeholder.com/300x450?text=No+Cover">'; endif; ?>
</div>
<h4 style="margin:10px 0 5px; font-size:16px;"><?php the_title(); ?></h4>
<p style="font-size:13px; color:#777;"><?php echo $penulis ?: 'Penulis'; ?></p>
</a>
</div>
<?php endwhile; ?>
</div>
<div class="pagination" style="margin-top:30px; text-align:center;">
<?php
echo paginate_links(array(
'base' => add_query_arg('halaman', '%#%'),
'total' => $q->max_num_pages,
'current' => $paged,
'add_args' => array('cari_buku' => $search),
));
?>
</div>
<div style="margin-top:40px; text-align:center; font-size:12px; color:#aaa; border-top:1px solid #eee; padding-top:10px;">
Powered by <a href="https://alifbata.digital" target="_blank" style="color:#888; text-decoration:none; font-weight:bold;">Alifbata Digital</a>
</div>
<?php else : ?>
<p>Maaf, buku yang Anda cari tidak ditemukan.</p>
<?php endif; wp_reset_postdata(); ?>
</div>
<?php
return ob_get_clean();
});
// 5. HALAMAN SINGLE BUKU (CUSTOM CONTENT)
add_filter('the_content', function($content) {
if (is_singular('katalog_buku') && is_main_query() && in_the_loop()) {
$p_id = get_the_ID();
$fields = array(
'Penulis' => get_post_meta($p_id, '_b_penulis', true),
'Penerbit' => get_post_meta($p_id, '_b_penerbit', true),
'ISBN' => get_post_meta($p_id, '_b_isbn', true),
'Halaman' => get_post_meta($p_id, '_b_halaman', true),
);
ob_start();
?>
<div class="single-buku-container" style="display:flex; gap:40px; flex-wrap:wrap; margin-bottom:40px;">
<div style="flex:1; min-width:280px;">
<?php the_post_thumbnail('large', array('style'=>'width:100%; border-radius:8px; box-shadow:0 10px 20px rgba(0,0,0,0.1);')); ?>
</div>
<div style="flex:2; min-width:300px;">
<h1 style="margin-top:0;"><?php the_title(); ?></h1>
<table style="width:100%; border-collapse:collapse; margin:20px 0;">
<?php foreach ($fields as $label => $val) : if($val): ?>
<tr style="border-bottom:1px solid #eee;">
<td style="padding:10px 0; color:#666;"><strong><?php echo $label; ?></strong></td>
<td style="padding:10px 0;">: <?php echo esc_html($val); ?></td>
</tr>
<?php endif; endforeach; ?>
</table>
<a href="https://wa.me/6283844504058?text=Halo%20Kolofon,%20saya%20tertarik%20dengan%20buku%20<?php echo urlencode(get_the_title()); ?>"
target="_blank"
style="background:#25d366; color:#fff; padding:15px 30px; text-decoration:none; border-radius:50px; display:inline-block; font-weight:bold;">
Pesan via WhatsApp
</a>
</div>
</div>
<div class="sinopsis-section" style="margin-bottom:30px;">
<h3 style="border-bottom:2px solid #333; display:inline-block; padding-bottom:5px;">Sinopsis</h3>
<div style="line-height:1.8; color:#444;"><?php echo wpautop($content); ?></div>
</div>
<div style="text-align:right; font-size:11px; color:#bbb; margin-top:50px; border-top:1px solid #f9f9f9; padding-top:10px;">
Developed by <a href="https://alifbata.digital" target="_blank" style="color:#aaa; text-decoration:none;">Alifbata Digital</a>
</div>
<?php
return ob_get_clean();
}
return $content;
});
#2 Setelah itu, klik save & activate.
#3 Sekarang coba cek sidebar dashboard Anda, seharusnya sudah muncul menu Katalog Buku:
#4 Coba tambah buku dan lengkapi detailnya.
Langkah 3: Cara Menampilkan Katalog
Untuk menampilkan daftar buku di halaman depan atau halaman khusus:
-
Buat halaman baru di WordPress (Pages > Add New).
-
Ketik atau tempelkan shortcode berikut:
[katalog_buku] -
Publish halaman tersebut, dan jika sudah Anda upload tampilannya akan seperti ini.
Langkah 4: Mengisi Data Buku
Kini Anda memiliki menu “Katalog Buku” di sidebar admin.
-
Tambahkan judul buku sebagai judul post.
-
Isi sinopsis di area teks utama.
-
Isi kolom detail (Penulis, ISBN, dsb) di bagian bawah.
-
Set Featured Image sebagai sampul buku.
Catatan Tambahan dari Alifbata:
-
Integrasi WA: Jangan lupa mengganti nomor dengan nomor admin Anda.
-
Tampilan: Desain di atas menggunakan CSS inline sederhana agar langsung bekerja pada tema apapun. Anda bisa memindahkan gaya tersebut ke file
style.cssuntuk kustomisasi lebih lanjut.
Dengan mengikuti langkah-langkah di atas, Anda kini memiliki sistem katalog buku yang ringan, fungsional, dan terlihat profesional tanpa membebani performa situs WordPress Anda. Solusi kustom ini tidak hanya memudahkan pengunjung dalam mencari koleksi buku, tetapi juga mempercepat proses konversi penjualan langsung ke WhatsApp.
Sistem yang kami bangun untuk Penerbit Kolofon ini adalah bukti bahwa teknologi yang tepat tidak harus rumit. Jika Anda mengalami kendala saat pemasangan kode atau ingin melakukan kustomisasi desain yang lebih spesifik, jangan ragu untuk berdiskusi dengan kami.
Selamat mencoba, dan mari terus berkarya melalui literasi digital!
Butuh bantuan untuk optimasi situs atau pengembangan fitur kustom lainnya? Kunjungi kami di Alifbata Digital – Partner Digital untuk Pertumbuhan Bisnis Anda.
