Kemunculan WordPress membuat proses pembuatan website menjadi lebih mudah. Sebelum ada WordPress, banyak developer yang menggunakan HTML statis untuk membuat website. Kini para developer mulai beralih menggunakan template yang tersedia di WordPress.
Meskipun saat ini tidak masalah tetap menggunakan HTML statis, tidak ada salahnya untuk mempertimbangkan pindah ke WordPress. Mengapa? Sebab dengan WordPress, Anda bisa membuat dan mengelola website lebih mudah.
WordPress menyediakan tema, plugin, widget, dan berbagai fitur lainnya yang memudahkan Anda mengelola website tanpa berurusan dengan coding.
Tentu saja sebagai pemilik website yang masih menggunakan HTML statis sudah seharusnya Anda mempertimbangkan untuk convert HTML ke WordPress. Selain memudahkan Anda untuk mengelola, WordPress juga mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi dibandingkan dengan HTML statis.
Jadi, bagaimana cara convert HTML ke WordPress? Tentu tidak langsung asal upload saja. Nah! Artikel ini akan membahas bagaimana sih cara upload file HTML ke WordPress secara lengkap. Tunggu apa lagi, mari simak satu persatu caranya.
Setidaknya ada tiga macam cara convert HTML ke WordPress yang tersedia saat ini.
- Membuat template WordPress secara manual berdasarkan website HTML statis.
- Menginstall tema setengah jadi dan memigrasikan konten.
- Membayar pengembang untuk convert HTML ke WordPress
Masing-masing cara tentu saja mempunyai kelebihan dan kekurangan. Anda bisa memilih salah satu cara yang paling sederhana sesuai dengan kemampuan dan kondisi website saat ini.
Hal yang Perlu Dipersiapkan Sebelum Convert HTML ke WordPress
Sudah menentukan cara mana yang akan Anda pilih? Jika Anda menggunakan cara yang pertama dan kedua, setidaknya ada beberapa hal yang perlu dipersiapkan seperti:
1. Layanan Hosting
Tentu saja perlu layanan hosting jika Anda belum mempunyainya. Anda bisa menggunakan layanan hosting lokal yang sudah terpercaya. Namun akan lebih baik jika menggunakan layanan WordPress Hosting yang mendukung penggunaan WordPress secara menyeluruh.
Pilihan lain, Anda bisa host website secara lokal (menginstall WordPress di komputer lokal) dan kemudian memindahkannya lain waktu. Namun jika menggunakan cara ini, Anda harus menginstal web server dan aplikasi pendukung lainnya di dalam komputer lokal.
2. Code Editor
Anda membutuhkan code editor seperti Atom, Notepad++, Sublime, atau aplikasi sejenis. Code editor akan membantu Anda membuka, mengedit, dan menyesuaikan kode HTML sebelum diunggah ke web hosting.
Sedangkan jika menggunakan cara yang ketiga, setidaknya Anda mempersiapkan biaya untuk mengeksekusinya. Sungkan juga kan jika meminta bantuan ahli atau pengembang website dengan bayaran 2M (Makasih, Mas!).
Supaya lebih jelas, berikut ini penjelasan lengkap setiap caranya.
3 Cara Upload File HTML ke WordPress
Nah, berikut ini beberapa cara convert HTML ke WordPress secara detail.
1. Membuat Tema WordPress Secara Manual Dari Website HTML Statis
Cara ini membutuhkan akses ke dalam direktori penyimpanan website dan juga sedikit kemampuan untuk membaca baris kode pemrograman.
Anda memerlukan akses untuk membaca berbagai macam file yang ada di dalam direktori website. Nah, beberapa file (berisi baris kode) yang sudah ada dapat Anda gunakan untuk membuat tema WordPress. Cukup sederhana bagi Anda yang sudah mempunyai beberapa pengetahuan mengenai HTML, CSS, dan PHP.
Jika tujuan Anda tidak hanya menyalin konten yang ada di HTML statis ke dalam WordPress, tetapi juga menduplikasi desain saat ini, ini berarti Anda harus membuat tema kustom Anda sendiri.
Tenang saja, caranya tidak sesulit yang dikira. Anda hanya perlu membuat beberapa folder dan file, sedikit copy dan paste, dan mengunggahnya ke dalam direktori tema WordPress.
Seperti yang sudah dijelaskan tadi, Anda akan membutuhkan code editor seperti Atom, Sublime, atau Notepad++ untuk mengakses isi dari setiap file HTML maupun file baru yang dibuat.
Langkah 1. Membuat Folder Tema Baru dan Beberapa File yang Diperlukan
Di dalam perangkat desktop, buat folder baru untuk menampung beberapa file tema. Anda bisa memberikan nama apa saja ke folder tersebut.
Kemudian buat beberapa file yang diletakkan di dalam folder tema; style.css, index.php, header.php, sidebar.php, dan footer.php.
Langkah 2. Menyalin CSS Saat Ini ke Dalam Stylesheet
Jika Anda menginginkan desain yang baru, tentunya Anda membutuhkan paling tidak beberapa fungsi CSS yang harus Anda simpan. Jadi, hal pertama kali yang perlu Anda lakukan adalah mengedit file style.css.
| /* Theme Name: Ganti dengan nama folder (ini untuk nama tema). Theme URI: Ganti dengan lokasi folder tema. Description: Deskripsi singkat mengenai tema Anda. Version: 1.0 Author: Nama Anda Author URI: Alamat website Anda. */ |
Caranya sangat mudah, Anda cukup menambahkan baris kode berikut di bagian atas file.
Langkah 3. Memisahkan Konten HTML Saat Ini
Sebelum masuk ke langkah ini, ada beberapa catatan mengenai WordPress yang perlu Anda tahu. WordPress menggunakan PHP untuk memanggil dan menerima berbagai macam dari database. Setiap file yang digunakan di dalam panduan singkat ini didesain untuk mengarahkan WordPress supaya menampilkan bagian dan lokasi website yang perlu diberikan konten.
Misalnya saja di dalam file HTML statis Anda seluruh komponen (header, footer, sidebar, dan isi konten) dalam satu file. Nah, setiap file yang dibuat tadi bertujuan untuk memisahkannya.
Jadi di bagian akhir nanti, Anda perlu mengatur beberapa bagian dari kode –yang sudah terpisah menjadi beberapa file– supaya konten dapat tertata dengan benar sesuai tampilan yang diinginkan. Sudah menangkap bagaimana logikanya? Mungkin akan lebih jelas jika mempraktikkannya langsung.
Pertama, buka file index.html yang sudah ada. Highlight apa pun dari atas file sampai tag baris kode pembuka class=”main”. Copy dan paste bagian tersebut ke dalam file header.php baru kemudian simpan dan tutup file header.
Buka kembali file index.html yang sudah ada. Highlight bagian elemen class=”sidebar” dan apa pun yang ada di dalamnya. Copy dan paste bagian tersebut ke dalam file sidebar.php, save kemudian file sidebar.
Ketiga, salin semua bagian setelah sidebar kemudian copy dan paste ke dalam file footer.php, jangan lupa save dan tutup file footer.
Terakhir, di dalam file index.html, highlight semua yang tersisa. Kemudian copy dan paste ke dalam file index.php baru yang sudah dibuat. Simpan, tapi jangan tutup terlebih dahulu file index.php.
Anda bisa menutup file index.html (bukan index.php) dan ikuti langkah selanjutnya.
Langkah 4. Menyempurnakan File Index.php
Langkah selanjutnya, yaitu menyempurnakan file index.php di tema baru. Anda hanya perlu memastikan bahwa seluruh fungsi yang tadinya dipisah-pisah ke dalam beberapa file dapat disatukan kembali di dalam file index.php.
Di bagian paling atas file index.php, tambahkan baris kode PHP di bawah ini.
| <?php get_header(); ?> |
Kemudian di bagian paling bawah, tambahkan dua baris kode PHP di bawah ini.
| <?php get_sidebar(); ?> <?php get_footer(); ?> |
Anda pasti sudah tahu kegunaan dari dua baris fungsi tersebut, kan? Benar! Fungsi get_sidebar(); untuk memanggil file sidebar dan get_footer(); untuk memanggil file footer dan mengambil konten yang ada di dalamnya.
Sampai di sini Anda sudah berhasil memanggil beberapa baris kode kumpul menjadi satu di index.php. Index.php selalu dipanggil pertama kali ketika website diakses. Itulah mengapa file ini bertugas untuk memanggil beberapa fungsi dan menampilkan konten yang digunakan oleh WordPress.
Terakhir, Anda perlu membuat apa yang disebut dengan Loop. Ini merupakan bagian utama dari index.php di WordPress yang berguna untuk menampilkan konten post ke pengunjung. Anda cukup menyalin baris kode di bawah ini ke dalam file index.php di bagian 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; ?> |
Langkah 5. Mengunggah Tema ke Dalam WordPress
Sekarang Anda hanya perlu membuat tema yang sudah dibuat di lokal tadi dapat dimuat di WordPress. Caranya dengan mengunggahnya ke dalam folder tema. Untuk melakukannya, Anda butuh akses ke dalam direktori instalasi WordPress yang bisa diakses dengan cara menggunakan FTP.
Cukup unggah folder tema (dino-themes) yang sudah dimodifikasi tadi ke dalam direktori WordPress ‘../wp-content/themes/’.
Setelah selesai, akses halaman “WP Admin » Appearance » Themes” dan Anda seharusnya menemukan tema baru di sana. Selanjutnya Anda hanya tinggal mengaktifkan tema tersebut dengan klik tombol “Active”.
Jika sudah aktif dan bisa diakses dengan baik, Anda hanya perlu menyesuaikan website WordPress baru dengan konten lama di website HTML statis.
2. Menginstall Tema Setengah Jadi Kemudian Migrasi Konten HTML
Cara ini mungkin menjadi pilihan yang paling sederhana dibandingkan dengan cara lainnya. Jika sudah mempunyai layanan web hosting, Anda hanya perlu menyisihkan sedikit pengeluaran untuk membeli tema premium (berbayar).
Di samping tetap mempertahankan desain HTML statis yang ada saat ini, Anda juga bisa menggunakan ribuan tema WordPress yang tersedia secara gratis maupun yang premium. Namun saya menyarankan untuk menggunakan tema premium karena mempunyai kualitas yang lebih baik daripada tema gratis.
Ada banyak sekali tema premium yang tersedia di WordPress. Sebelum memutuskan menggunakan tema yang sesuai dengan kebutuhan, Anda bisa mencari tema berdasarkan kategori terlebih dahulu. Anda bisa menyesuaikan dengan konsep tema yang sama dengan website HTML statis atau menggunakan konsep berbeda.
Setelah Anda memilih tema yang sesuai dengan kebutuhan, unduh tema tersebut (biasanya akan berbentuk file zip) dengan cara klik install. Secara otomatis tema akan terpasang di dalam koleksi tema WordPress. Untuk mengaktifkan, Anda cukup masuk lagi ke halaman WP “Admin » Appearance » Themes”. Cari nama tema yang sudah diinstal tadi kemudian klik “Active”.
Setelah menyelesaikan ini, Anda sudah mempunyai tema WordPress yang baru,tapi masih perlu beberapa penyesuaian. Ketika mengakses website menggunakan tema yang sudah terpasang, Anda hanya akan melihat tampilan konten yang kosong dan terkesan membosankan. Itu tidak masalah karena hal tersebut dikarenakan belum ada konten sama sekali di website. Maka dari itu, langkah selanjutnya Anda akan mengimpor konten lama.
Anda bisa mengimpor konten HTML statis dengan mudah menggunakan bantuan plugin gratis yang sudah tersedia di WordPress. Untuk menginstallnya cukup akses “Dashboard » Plugins » Add New“ kemudian cari plugin dengan nama ‘HTML Import 2’ dari Stephanie Leary. Setelah plugin ini terinstall dan aktif, Anda bisa mengikuti panduannya untuk mengimpor seluruh direktori halaman HTML statis, termasuk gambar.
Setelah selesai, Anda seharusnya sudah bisa mengakses website menggunakan WordPress dengan format tema yang baru. jika membuat tema Anda sendiri, seharusnya tampilan website Anda terlihat seperti yang sebelumnya, hanya saja berjalan menggunakan CMS WordPress.
3. Membayar Pengembang Untuk Convert File HTML ke WordPress
Cara terakhir ini merupakan cara termudah karena Anda tidak perlu melakukan apa pun, kecuali mengeluarkan biaya yang (terkadang) cukup besar. Anda bisa membayar pengembang untuk convert HTML ke WordPress. Biayanya tergantung siapa yang Anda rekrut dan seberapa kompleks website HTML statis yang Anda punya. Mudah dan simpel.
Cara ini tentu saja sangat cocok bagi Anda yang tidak mempunyai cukup waktu untuk convert file HTML ke WordPress. Atau, bagi Anda yang sebelumnya membeli website HTML dan ingin beralih menggunakan WordPress.
Penutup
Cara upload file HTML ke WordPress memang cukup mudah bagi yang sudah familiar dengan bahasa pemrograman maupun web server. Hanya saja bagi Anda yang belum pernah bersentuhan langsung, cara upload file HTML ke WordPress terkesan sulit.
Untuk upload file HTML ke WordPress sendiri ada beberapa hal yang perlu dipersiapkan seperti akses ke web server, aplikasi pendukung, dan mungkin saja biaya untuk membeli tema premium maupun membayar pengembang untuk memindahkan HTML Anda ke WordPress.
Sampai di sini dulu panduan kali ini. Jika masih ada yang perlu ditanyakan, jangan sungkan untuk meninggalkan komentar melalui kolom di bawah ini. Jangan lupa mengikuti sosial media kami untuk mendapatkan informasi seputar dunia teknologi, bisnis, digital marketing, dan tentu saja layanan web hosting. Semoga artikel ini bermanfaat!
Baca Juga: Cara Memasukkan dan Mengatur Gambar di HTML
Assalamualaikum terimakasih banyak pak sangat membantu.
Maaf imagenya tak bisa diload error kah ?