# Panduan Konversi — UMKM Go Online → Theme WordPress

Dokumen ini memetakan setiap blok HTML statis ke file template WordPress.
Tujuannya: konversi cepat, konsisten, tanpa kehilangan kualitas.

---

## 1. Struktur Proyek Saat Ini

```
/var/www/umkm/
├── index.html              → template utama (9 section + header + footer)
├── assets/
│   ├── css/
│   │   ├── fonts.css       → @font-face (Manrope, Playfair, Caveat)
│   │   └── app.css         → semua style (CSS variables + BEM-lite)
│   ├── fonts/              → font self-hosted (woff2)
│   ├── img/                → gambar (WebP) + favicon
│   └── js/
│       └── app.js          → interaksi vanilla JS
└── readme-konversi.md      → dokumen ini
```

---

## 2. Peta Section → File Theme WordPress

| # | Blok HTML (komentar di index.html) | File Theme WP | Keterangan |
|---|---|---|---|
| 1 | `HEADER / NAVIGASI` | `header.php` | Daftarkan menu: `register_nav_menu('primary', ...)` |
| 2 | `HERO` | `front-page.php` (atas) | Text via `get_theme_mod('umkm_hero_title')` atau ACF |
| 3 | `MARQUEE` | `front-page.php` | Teks berjalan — bisa customizer repeater |
| 4 | `KEUNGGULAN` | `front-page.php` | 4 item — ACF repeater / `page_meta` |
| 5 | `LAYANAN / KATEGORI` | `front-page.php` | **CPT `layanan`** + `WP_Query` loop |
| 6 | `TENTANG` | `front-page.php` | Teks + gambar via customizer/ACF |
| 7 | `CARA KERJA` | `front-page.php` | 4 langkah — bisa CPT `langkah` atau repeater |
| 8 | `GALERI` | `front-page.php` | CPT `galeri` / Native WP Gallery |
| 9 | `TESTIMONI` | `front-page.php` | **CPT `testimoni`** (nama, usaha, rating) |
| 10 | `FAQ` | `front-page.php` | CPT `faq` / plugin FAQ |
| 11 | `CTA WHATSAPP` | `front-page.php` | Nomor WA via customizer |
| 12 | `KONTAK` | `page-kontak.php` | Form → Contact Form 7 / WPForms |
| 13 | `FOOTER` | `footer.php` | `wp_nav_menu`, widget area |
| — | `THEME SWITCHER` | HAPUS | Diganti Customizer warna |

---

## 3. Aset yang Harus Dipindah ke Theme

```
umkm-wp-theme/
├── style.css                 → gabungan app.css + fonts.css (bisa enqueue)
├── functions.php             → enqueue, menu, CPT, customizer
├── header.php
├── footer.php
├── front-page.php
├── page-kontak.php
├── assets/                   → fonts, img, js (salin dari project ini)
└── readme.txt                → header theme WP (opsional)
```

**Enqueue di functions.php:**

```php
function umkm_theme_assets() {
    wp_enqueue_style('umkm-fonts', get_template_directory_uri() . '/assets/css/fonts.css', [], '1.0');
    wp_enqueue_style('umkm-main', get_template_directory_uri() . '/assets/css/app.css', ['umkm-fonts'], '1.0');
    wp_enqueue_script('umkm-js', get_template_directory_uri() . '/assets/js/app.js', [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'umkm_theme_assets');
```

---

## 4. Custom Post Types yang Disarankan

```php
// functions.php
function umkm_register_cpts() {
    // CPT Layanan
    register_post_type('layanan', [
        'labels' => ['name' => 'Layanan', 'singular_name' => 'Layanan'],
        'public' => true,
        'menu_icon' => 'dashicons-store',
        'supports' => ['title', 'editor', 'thumbnail', 'excerpt'],
        'has_archive' => false,
    ]);

    // CPT Testimoni
    register_post_type('testimoni', [
        'labels' => ['name' => 'Testimoni', 'singular_name' => 'Testimoni'],
        'public' => true,
        'menu_icon' => 'dashicons-format-quote',
        'supports' => ['title', 'editor', 'thumbnail'],
        'has_archive' => false,
    ]);

    // CPT Galeri
    register_post_type('galeri', [
        'labels' => ['name' => 'Galeri', 'singular_name' => 'Galeri'],
        'public' => true,
        'menu_icon' => 'dashicons-format-gallery',
        'supports' => ['title', 'editor', 'thumbnail'],
        'has_archive' => false,
    ]);

    // CPT FAQ
    register_post_type('faq', [
        'labels' => ['name' => 'FAQ', 'singular_name' => 'FAQ'],
        'public' => true,
        'menu_icon' => 'dashicons-editor-help',
        'supports' => ['title', 'editor'],
        'has_archive' => false,
    ]);
}
add_action('init', 'umkm_register_cpts');
```

---

## 5. Customizer Warna (pengganti data-theme switcher)

```php
function umkm_customize_register($wp_customize) {
    $wp_customize->add_setting('umkm_brand_color', [
        'default' => '#070E1D',
        'sanitize_callback' => 'sanitize_hex_color',
    ]);
    $wp_customize->add_setting('umkm_accent_color', [
        'default' => '#C8A96E',
        'sanitize_callback' => 'sanitize_hex_color',
    ]);

    $wp_customize->add_section('umkm_colors', [
        'title' => 'Warna UMKM Go Online',
        'priority' => 30,
    ]);

    foreach (['umkm_brand_color' => 'Warna Utama (Brand)', 'umkm_accent_color' => 'Warna Aksen (Gold)'] as $id => $label) {
        $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, $id, [
            'label' => $label,
            'section' => 'umkm_colors',
        ]));
    }
}
add_action('customize_register', 'umkm_customize_register');

// Output CSS dinamis
function umkm_customizer_css() {
    $brand  = get_theme_mod('umkm_brand_color', '#070E1D');
    $accent = get_theme_mod('umkm_accent_color', '#C8A96E');
    echo "<style>:root{--brand:{$brand};--accent:{$accent};}</style>";
}
add_action('wp_head', 'umkm_customizer_css');
```

---

## 6. Checklist Konversi

- [ ] Buat folder theme `wp-content/themes/umkm-go-online/`
- [ ] `style.css` header theme (nama, deskripsi, version)
- [ ] `functions.php`: enqueue assets, register menu, CPT, customizer
- [ ] `header.php`: blok HEADER → `wp_nav_menu('primary')`
- [ ] `footer.php`: blok FOOTER + `wp_footer()`
- [ ] `front-page.php`: hero + marquee + why + layanan loop + tentang + steps + galeri loop + testimoni loop + faq loop + cta
- [ ] `page-kontak.php`: form → CF7 shortcode `[contact-form-7 id="..."]`
- [ ] Hapus `theme-switcher` dari markup
- [ ] Ganti link `#` → `esc_url(get_permalink(...))`
- [ ] Gambar: `the_post_thumbnail('umkm-card')` (daftarkan ukuran: 640×480 crop)
- [ ] Test mobile 375px / 768px / 1440px
- [ ] Install plugin: Contact Form 7 (atau WPForms Lite)

---

## 7. Tips Tambahan

- **Preset kategori** di HTML statis (`data-theme="kuliner|fashion|jasa|toko"`) bisa dipertahankan di WP dengan **tema child + template kategori**, atau cukup andalkan Customizer warna agar klien bisa ubah sendiri.
- Untuk **harga / paket**, buat CPT `paket` dengan ACF: `nama`, `harga`, `fitur[]`, `label_cta`.
- Untuk **toko online penuh**, pertimbangkan WooCommerce — struktur CSS variables sudah siap menyesuaikan brand color.

---

© 2026 UMKM Go Online — Chartiva