Anda pemilik website berbasis HTML dan berencana untuk mengubahkan menjadi veri WordPress? Jika demikian, Anda perlu memahami cara convert HTML ke WordPress untuk melakukannya. Perlu diketahui bahwa melakukan konversi situs HTML ke WordPress tidak semudah tinggal upload file saja dan perlu perhatian khusus.
Bagaimana Cara Convert HTML ke WordPress?
Untuk melakukan konversi situs HTML statis menjadi WordPress, Anda harus memenuhi beberapa persyaratan terlebih dahulu. dalam hal ini, pastikan Anda dapat mengakses direktori penyimpanan website dan sedikit kemampuan tentang baris kode. Anda bisa menggunakan code editor seperti Atom, Sublime atau Notepad++ untuk mengakses isi file HTML.
Berikut langkah-langkah konversi HTML ke WordPress
1. Membuat Folder Tema Baru dan Beberapa File yang Diperlukan
Di komputer Anda, buat sebuah folder (dengan nama sesuai keinginan) untuk menyimpan file tema. Di dalam folder tersebut, buat file baru antara lain style.css, index.php, header.php, sidebar.php dan footer.php.
2. Menyalin CSS ke Stylesheet
Untuk opsi desain baru dan ingin mengambil fungsi CSS tertentu, Anda bisa menyunting file style.css. Tambahkan baris kode ini di bagian atas file:
/*
Theme Name: ganti menjadi nama folder (nama tema)
Theme URI: ganti menjadi lokasi folder tema
Description: penjelasan singkat tentang tema
Version: 1.0
Author: nama Anda
Author URI: alamat website Anda
*/
3. Split Konten HTML
Buka file index.html yang sudah ada kemudian highlight semua mulai dari atas file hingga tag baris kode pembuka class=”main”. Copy kemudian paste ke file header.php yang baru. Jangan lupa untuk Save sebelum menutup file header.
Buka lagi index.html lalu highlight elemen class=”sidebar” dan semua yang ada di sana. Copy lalu paste ke file sidebar.php. Jika sudah, Save file sidebar tersebut.
Copy semua bagian setelah sidebar lalu paste ke file footer.php, Save lalu tutup footer.
Buka index.html, kemudian highlight semua yang belum Anda copy sebelumnya. Copy kemudian paste ke file index.php baru yang sebelumnya dibuat. Berikutnya, klik Save dan biarkan terlebih dahulu
sebelum melanjutkan, Anda bisa close dulu file index.html (bukan index.php)
4. Penyempurnaan File Index.php
Setelah memisahkan fungsi ke beberapa file, saatnya Anda menyatukan kembali fungsi-fungsi tersebut melalui file index.php. Pada bagian paling atas dari index.php, silakan tambahkan baris kode berikut:
<?php get_header(); ?>
Sementara di ujung bawah, silakan tambahkan baris kode ini:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Berikutnya, Anda perlu memastikan bahwa membuat Loop yang berguna utnuk menampilkan konten post ke visitor. Caranya, silakan salin baris kode ini ke file index.php di tengah konten:
?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”post-header”>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div>
</div><!–end post header–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!–end entry–>
<div class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
</div><!–end post–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</div><!–end navigation–>
<?php else : ?>
<?php endif; ?>
5. Upload Tema ke WordPress
Selesai dengan baris kode di atas, kini saatnya untuk mengunggah tema tersebut ke folder tema WordPress. Anda memerlukan akses ke direktori instalasi WordPress menggunakan FTP. Opsi lain, Anda juga bisa memilih mengunggah tema melalui cPanel.
Silakan upload folder tema hasil modifikasi tadi ke direktori WordPress ‘../wp-content/themes/’
Setelah unggah folder selesai, buka WP Admin » Appearance » Themes. Apabila tidak ada masalah, kini Anda sudah bisa menemukan tema baru. Silakan aktifkan tema tersebut dan pastikan semua ditampilkan dan berfungsi sesuai harapan.
Anda mungkin perlu melakukan beberapa penyesuaian terlebih dahulu agar website WordPress tersebut kompatibel dengan konten lama, yaitu konten yang ada di situs HTML Anda sebelumnya.
Jika dirasa sudah benar, Anda bisa mulai mengimpor konten HTML statis, ke website baru menggunakan plugin. Salah satu plugin gratis yang bisa Anda pertimbangkan adalah HTML Import 2 by Stephanie Leary. Silakan cari, instal lalu aktifkan plugin tersebut kemudian ikuti instruksi penggunaannya yang terbilang sangat mudah.
Kesimpulan
Itulah tadi salah satu pilihan cara convert HTML ke WordPress yang bisa Anda coba. Ya, sebenarnya masih ada opsi cara lain yang mungkin juga bisa menjadi pertimbangan Anda, seperti menyunting tema setengah jadi, membayar jasa developer dan opsi lainnya. Namun dengan opsi di atas, Anda bisa mempertahankan desain website lama Anda.
