Mengonversi landing page statis (HTML/CSS) menjadi tema WordPress adalah langkah strategis untuk mendapatkan kemudahan manajemen konten (CMS) tanpa kehilangan desain kustom yang sudah Anda buat.
Berikut adalah panduan langkah demi langkah untuk melakukan konversi secara mandiri dengan standar pengembangan modern.
1. Persiapan Struktur Folder Tema
Langkah pertama adalah membuat folder baru di direktori /wp-content/themes/. Berikan nama folder yang unik, misalnya my-custom-landing-page.
Di dalam folder tersebut, buatlah file-file dasar berikut:
-
style.css: Berisi informasi metadata tema. -
index.php: File utama cadangan. -
header.php: Untuk bagian atas website. -
footer.php: Untuk bagian bawah website. -
functions.php: Untuk mengaktifkan fitur tema.
2. Menyiapkan File Metadata (style.css)
Salin kode CSS dari landing page asli Anda ke dalam style.css. Di bagian paling atas, tambahkan komentar khusus agar WordPress mengenali folder ini sebagai tema:
/*
Theme Name: My Landing Page Theme
Author: Nama Anda
Description: Konversi Landing Page ke WordPress.
Version: 1.0
*/
3. Memecah HTML Menjadi Bagian-Bagian WordPress
A. Header (header.php)
Pindahkan kode HTML dari bagian <!DOCTYPE html> sampai ke penutup tag </header> ke dalam file ini. Jangan lupa tambahkan fungsi wajib wp_head() tepat sebelum tag </head>.
B. Footer (footer.php)
Pindahkan kode dari bagian awal <footer> sampai tag penutup </html>. Tambahkan fungsi wp_footer() tepat sebelum tag </body>.
C. Konten Utama (index.php)
Gunakan fungsi PHP untuk memanggil bagian-bagian yang sudah dipisah:
<?php get_header(); ?>
<?php get_footer(); ?>
4. Memanggil Aset (CSS dan JS) melalui functions.php
Agar script dan gaya tampilan termuat dengan benar sesuai standar WordPress, gunakan file functions.php. Jangan melakukan hardcode link di header.php.
<?php
function load_landing_page_assets() {
wp_enqueue_style('main-style', get_stylesheet_uri());
wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_landing_page_assets');
5. Mengintegrasikan Konten Dinamis
Agar konten bisa diubah melalui Dashboard WordPress, Anda memiliki dua pilihan utama:
-
Metode Tradisional: Menggunakan “The Loop” WordPress di dalam
index.phpuntuk menampilkan konten dari Page Editor. -
Metode Modern (Block Theme): Mengonversi elemen HTML Anda menjadi blok-blok WordPress. Ini adalah cara yang direkomendasikan jika Anda ingin memaksimalkan fitur Full Site Editing (FSE).
Tips Ahli: Gunakan file
theme.jsonjika Anda ingin mengontrol skema warna dan tipografi tema secara global melalui Editor Situs.
Konversi landing page ke WordPress memberikan Anda fleksibilitas desain sekaligus kekuatan pengelolaan data. Dengan membagi struktur HTML menjadi komponen PHP dan mendaftarkan aset secara benar, Anda telah memiliki pondasi tema WordPress yang ringan dan cepat.
Jika Anda ingin melangkah lebih jauh, pertimbangkan untuk menggunakan Advanced Custom Fields (ACF) untuk mempermudah pengisian teks dan gambar pada landing page Anda tanpa menyentuh kode lagi di masa depan.
