Artikel ini adalah panduan awal untuk memasang Plus UI versi WordPress. Theme dirancang agar pengguna WordPress dapat memperoleh tampilan yang mendekati Plus UI Blogger tanpa harus mengelola XML Blogger.
Sebelum instalasi
- WordPress 6.2 atau lebih baru direkomendasikan.
- PHP 7.4 atau lebih baru.
- HTTPS aktif.
- Backup situs bila theme dipasang pada website yang sudah memiliki konten.
Instal melalui dashboard
- Buka Appearance → Themes.
- Klik Add New Theme.
- Klik Upload Theme.
- Pilih file
plus-ui-wp-vX.X.X.zip. - Klik Install Now.
- Setelah selesai, klik Activate.
Instal melalui file manager
Jika upload dashboard dibatasi hosting, ekstrak folder theme ke:
/wp-content/themes/plus-ui-wp/
Pastikan file style.css berada langsung di dalam folder theme, bukan di folder bertingkat ganda.
Import Demo Content
Theme menyediakan importer agar struktur awal lebih cepat menyerupai demo.
- Buka Appearance → Plus UI Demo Import.
- Klik Import Demo Content.
- Tunggu sampai WordPress kembali ke halaman importer.
- Buka homepage dan lakukan hard refresh.
Importer membuat 10 artikel dokumentasi, kategori, halaman dasar, menu, featured image WebP, dan pengaturan homepage.
Atur permalink
Buka Settings → Permalinks. Untuk blog/dokumentasi, struktur Post name biasanya paling sederhana.
https://example.com/judul-artikel/
Site Identity
Buka Customizer dan atur logo, judul situs, serta favicon. Favicon ideal menggunakan gambar persegi.
Menu
Importer membuat menu awal. Anda tetap dapat menggantinya dari Appearance → Menus. Lokasi yang disediakan theme mencakup Primary, Mobile, dan Footer.
Homepage
Beranda Plus UI WP memuat beberapa bagian utama:
- Header + utility icons.
- Bar menu sekunder.
- Notification bar.
- Carousel.
- Pinned Post.
- Latest Posts.
- Popular Posts dan Labels.
- Footer.
Pilih Pinned Post
Buka Appearance → Customize lalu pilih artikel yang ingin dijadikan pinned post. Demo awal menggunakan artikel Komponen UI dan Tipografi.
Mode tampilan
Pengunjung dapat memilih Light, Dark, System, atau Theme melalui ikon Appearance. Preferensi disimpan di browser sehingga tetap digunakan pada kunjungan berikutnya.
Setelah instalasi
- Ganti logo dan site title.
- Hapus atau edit artikel demo yang tidak dibutuhkan.
- Atur menu.
- Atur kategori.
- Pasang plugin SEO jika diperlukan.
- Pasang sistem cache sesuai hosting.
- Uji responsive desktop/tablet/mobile.
- Jalankan PageSpeed setelah semua plugin terpasang.
Masalah umum
Tampilan masih memakai cache lama
Hapus cache plugin/CDN lalu lakukan hard refresh browser.
Menu tidak muncul
Pastikan menu sudah ditetapkan ke lokasi Primary atau Mobile.
Featured image tidak tampil
Pastikan artikel memiliki Featured Image dan file upload dapat dibaca oleh WordPress.
Importer pernah dijalankan
Jalankan lagi untuk memperbarui demo bawaan. Theme tidak menghapus artikel non-demo.
Struktur file theme
Setelah diekstrak, folder theme berisi template WordPress, file CSS/JavaScript, library ikon SVG, dan modul importer.
plus-ui-wp/
├── assets/
│ ├── css/plus-ui.css
│ ├── js/plus-ui.js
│ ├── images/
│ └── svg-icons.json
├── inc/
│ ├── customizer.php
│ ├── demo-import.php
│ ├── demo-articles-id.php
│ └── icons.php
├── header.php
├── front-page.php
├── single.php
├── functions.php
└── style.css
Jangan mengubah parent theme langsung
Jika Anda akan membuat modifikasi PHP/CSS besar dan masih ingin menerima update, gunakan child theme. Perubahan kecil yang memang bagian proyek khusus dapat diletakkan di Additional CSS, tetapi logic PHP sebaiknya berada di child theme atau plugin kecil.
Contoh style.css child theme
/*
Theme Name: Plus UI WP Child
Template: plus-ui-wp
Version: 1.0.0
*/
Hak akses file
Theme tidak memerlukan permission tidak biasa. Secara umum folder memakai 755 dan file 644 sesuai konfigurasi hosting. Jangan mengubah semuanya menjadi 777 untuk mengatasi error upload.
PHP memory dan upload limit
Jika ZIP gagal diupload, cek upload_max_filesize dan post_max_size. Karena theme relatif ringan, limit standar hosting modern biasanya cukup.
Sesudah import demo
Importer tidak dimaksudkan sebagai database migration. Ia hanya membuat data contoh. Setelah Anda mulai mengedit artikel demo untuk konten produksi, jangan menjalankan importer ulang tanpa backup karena artikel yang ditandai sebagai demo akan diperbarui.
Update theme manual
- Backup versi lama.
- Aktifkan theme sementara hanya jika hosting tidak mendukung replace upload.
- Upload ZIP baru.
- Pastikan folder tetap bernama
plus-ui-wp. - Aktifkan kembali jika diperlukan.
- Clear cache.
Debug mode
Untuk staging, debug WordPress dapat membantu menemukan warning PHP. Jangan menampilkan error langsung ke pengunjung production.
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
Cek error log
File debug biasanya tersimpan di wp-content/debug.log ketika konfigurasi di atas aktif. Matikan kembali debug bila proses perbaikan selesai.
Kompatibilitas editor
Artikel biasa dapat ditulis dari Block Editor. Untuk komponen Plus UI yang memakai class khusus, gunakan Custom HTML block atau Code Editor agar markup tidak diubah oleh editor visual.
Checklist sebelum live
- Logo dan favicon bukan demo.
- Semua menu menuju URL nyata.
- Halaman Contact memiliki metode kontak.
- Privacy Policy diperbarui.
- Admin default dan password aman.
- Backup otomatis aktif.
- Cache dan SSL berjalan.
- Tidak ada artikel demo yang tidak ingin dipublikasikan.
