Mengonversi Situs HTML ke Situs WordPress

Pada awalnya (dari web) semua situs web dibuat hanya dengan teks dan HTML statis. Namun sekarang, lebih dari 20 tahun kemudian, web adalah tempat yang jauh berbeda. Situs web jauh lebih kompleks. Mereka memberikan pengalaman yang lebih kaya dan lebih menyenangkan bagi pembuat situs dan pengunjung.

Ini sebagian besar berkat proyek open source seperti WordPress. Yang, selama sekitar sepuluh tahun terakhir, telah berhasil dalam misi intinya untuk mendemokratisasikan penerbitan online (dan lebih banyak lagi dalam prosesnya) sehingga siapa pun yang menginstal WordPress dan tema/plugin yang tepat dapat memiliki situs web modern dengan desain canggih dan fungsionalitas. Tidak ada pengkodean – bahkan HTML! – diperlukan.

Inilah sebabnya mengapa untuk pengguna WordPress yang rajin seperti saya, hampir sulit untuk percaya bahwa pada tahun 2018 seseorang mungkin masih mengoperasikan situs web HTML statis alih-alih situs web WordPress dengan tema dan plugin. Tetapi kenyataannya masih ada sejumlah besar situs HTML aktif saja di luar sana. (Atau HTML dengan sedikit CSS.)

Memang, pemilik situs ini mungkin memiliki alasan bagus untuk tidak meningkatkan atau mengonversi. Mungkin konten situs mereka tidak pernah berubah dan format serta desain sederhana yang sudah ada dapat digunakan? Atau mungkin tidak terlalu merepotkan daripada mengkhawatirkan memperbarui situs WordPress? Keduanya adalah alasan yang sah (antara lain). Contoh utama dari, "Jangan perbaiki apa yang tidak rusak."

Namun, saya merasa bahwa ini mungkin bukan alasan utama beberapa (mungkin banyak) belum membuat lompatan. Yang paling jelas adalah bahwa mereka tidak tahu bagaimana mengubah situs HTML mereka menjadi situs WordPress. Terutama tanpa kehilangan konten atau perlu melakukan pemformatan berlebihan pada halaman demi halaman.

Untungnya, seperti yang sering terjadi pada WordPress, ada beberapa cara untuk menyelesaikan masalah ini. Saya telah menyusun beberapa opsi di bawah ini.

Berlangganan Saluran Youtube Kami

Opsi Anda untuk Mengonversi situs HTML Statis ke situs WordPress

Bagaimana Anda memilih untuk mengubah situs HTML statis Anda menjadi situs WordPress tidak diragukan lagi akan bergantung pada preferensi pribadi Anda, investasi waktu/moneter yang diinginkan, dan tingkat keahlian dengan kode. Anda harus menjadi orang yang memutuskan mana yang terbaik untuk Anda, tetapi dengan ringkasan di bawah ini Anda harus dapat memutuskan dengan cepat dan langsung beralih ke informasi yang paling relevan dalam posting ini untuk situasi spesifik Anda.

Ada tiga opsi utama:

1. Buat tema WordPress secara manual berdasarkan situs HTML statis Anda saat ini.

Ini akan mengharuskan Anda untuk masuk ke kode Anda. Anda harus mengakses direktori situs Anda saat ini melalui FTP dan menggunakan kode yang ada sebagai titik awal. Dari sana Anda perlu membuat file yang diperlukan untuk tema WordPress dan menyalin bit kode dari codex WordPress. Ini cukup sederhana dan mudah jika Anda memiliki pengalaman dengan HTML, CSS, dan sedikit PHP.

2. Pasang tema yang sudah jadi dan cukup migrasikan konten Anda.

Ini mungkin pilihan terbaik di persimpangan kesederhanaan dan nilai. Dengan asumsi Anda sudah memiliki hosting untuk situs web Anda saat ini, Anda hanya perlu mengeluarkan uang jika Anda memilih untuk membeli tema premium. Plugin yang akan kita gunakan untuk mengimpor konten tersedia secara gratis di Repositori Plugin WordPress resmi.

3. Membayar untuk memiliki layanan konversi HTML ke WordPress untuk membuat ulang situs Anda.

Ini adalah solusi termudah, karena tidak mengharuskan Anda melakukan banyak hal. Namun itu tidak akan banyak membantu Anda untuk membiasakan Anda dengan WordPress dan biayanya akan bervariasi tergantung pada siapa yang Anda pilih untuk disewa. Saya tidak akan membahas opsi ini di bagian di bawah ini karena jika ini adalah rute yang Anda minati, Anda cukup melakukan pencarian cepat untuk penyedia layanan dan mereka akan mengurus sisanya.

Mempersiapkan Konversi HTML ke WordPress

Tidak peduli rute mana yang Anda putuskan untuk diambil di bawah, ada beberapa hal yang ingin Anda lakukan sebelum menyelam.

Yang pertama adalah memilih paket hosting. Anda akan ingin melihat opsi yang ada di luar sana dan memutuskan paket yang paling sesuai dengan kebutuhan Anda. Atau mungkin Anda ingin membuat instalasi WordPress lokal saja? Anda selalu dapat memigrasikannya ke layanan hosting nanti.

Setelah Anda memilih, Anda harus menginstal WordPress dan masuk ke WP Admin. Ini adalah titik di mana dua kemungkinan jalur kita terbagi.

Mengonversi Situs HTML Statis Anda Secara Manual ke WordPress

Jika tujuan Anda adalah tidak hanya memasukkan konten dari situs HTML statis ke WordPress tetapi juga menduplikasi desain Anda saat ini, ini berarti Anda perlu membuat tema kustom Anda sendiri. Untungnya, itu tidak seseram kedengarannya pada awalnya. Ini hanya melibatkan pembuatan beberapa folder dan file, sedikit salin dan tempel, lalu unggah hasilnya.

Anda akan memerlukan editor kode seperti Sublime atau Notepad++ dan akses ke direktori situs HTML dan direktori instalasi WordPress baru Anda.

Langkah 1: Buat Folder Tema Baru dan File yang Diperlukan

Di desktop Anda, buat folder baru untuk menyimpan file tema Anda. Beri nama apa pun yang Anda ingin tema Anda diberi nama.

Selanjutnya, buat beberapa file (yang semuanya masuk ke folder tema baru Anda) di editor kode Anda. Jangan lakukan apa pun pada mereka dulu. Biarkan saja terbuka untuk pengeditan lebih lanjut.

• Style.css
• index.php
• header.php
• sidebar.php
• footer.php

Langkah 2: Salin CSS yang Ada Ke dalam Stylesheet Baru

Jika Anda ingin menduplikasi desain, ini mungkin berarti Anda memiliki setidaknya beberapa CSS yang ingin Anda simpan. Jadi file pertama yang ingin Anda edit adalah file Style.css Anda.

Untuk memulai, tambahkan yang berikut ini ke bagian atas file Anda.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Setelah bagian ini cukup tempel CSS Anda yang ada di bawah ini. Simpan dan tutup file.

Langkah 3: Pisahkan HTML Anda Saat Ini

Sebelum kita masuk ke langkah ketiga, izinkan saya memberi Anda catatan singkat tentang cara kerja WordPress. WordPress menggunakan PHP untuk memanggil dan mengambil potongan data dari database yang mendasarinya. Setiap file yang kami gunakan dalam tutorial kecil ini dirancang untuk memberi tahu WordPress bagian mana dari konten situs Anda yang akan ditampilkan dan di mana.

Jadi ketika saya mengatakan kita akan "memotong" HTML yang ada, apa yang sebenarnya kita lakukan hanyalah memotong dan menempelkan bagian dari kode yang ada ke dalam file berbeda yang baru saja kita buat, sehingga WordPress akan tahu di mana harus menampilkan mereka.

Ini dia.

Pertama, buka file index.html situs Anda saat ini. Sorot semuanya mulai dari bagian atas file hingga tag pembuka div class="main" . Salin dan tempel bagian ini ke file header.php Anda, simpan dan tutup.

Kedua, kembali ke file index.html Anda. Sorot elemen samping class="sidebar" dan semua yang ada di dalamnya. Salin dan tempel bagian ini ke file sidebar.php Anda, simpan dan tutup.

Ketiga, di index.html Anda pilih semuanya setelah sidebar Anda dan salin dan tempel ke file footer.php Anda, simpan dan tutup.

Terakhir, di file index.html Anda, pilih semua yang tersisa (ini harus menjadi bagian konten utama) dan tempelkan ke file index.php Anda. Simpan, tapi jangan tutup dulu.

Anda dapat menutup file index.html Anda sekarang dan melanjutkan ke langkah terakhir. Hampir selesai!

Langkah 4: Selesaikan File Index.php Anda

Untuk menyelesaikan file index.php tema baru Anda, Anda perlu memastikannya dapat memanggil bagian lain (selain konten utama) yang disimpan di file lain yang telah Anda buat. Atau dengan kata lain, kumpulkan kembali elemen-elemen yang baru saja kita “potong”.

Di bagian paling atas file index.php Anda, letakkan baris php berikut.

<?php get_header(); ?>

Kemudian, di bagian paling bawah file index.php Anda, letakkan baris php ini.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Dan akhirnya, kita harus menambahkan apa yang disebut The Loop. Ini adalah bit utama php yang digunakan WordPress untuk menampilkan konten posting Anda kepada pengunjung. Jadi langkah terakhir dalam membuat file index.php tema baru Anda adalah menambahkan kode di bawah ini di dalam bagian 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; ?>

Simpan index.php Anda dan tutup. Anda tema sekarang selesai! Yang tersisa hanyalah mengunggahnya ke situs WordPress Anda.

Langkah 5: Unggah Tema Baru Anda

Sekarang setelah Anda membuat file tema dan menyimpan semuanya di dalam folder tema baru, Anda perlu mengakses direktori instalasi WordPress baru Anda.

Tempatkan folder tema baru Anda di dalam /wp-content/themes/ . Kemudian arahkan kembali ke WP Admin > Appearance > Themes dan tema yang baru Anda buat akan muncul di sana. Silakan dan aktifkan!

Yang tersisa untuk dilakukan pada saat ini adalah mengisi situs WordPress baru Anda dengan konten situs lama Anda. Ikuti bersama dengan bagian di bawah ini (melewati bagian tentang menggunakan tema yang sudah dibuat sebelumnya) untuk melihat bagaimana hal itu dilakukan.

Menggunakan Tema WordPress Pre-Made dan Mengimpor Konten HTML

Jika langkah-langkah di atas tampak terlalu intensif atau memakan waktu bagi Anda maka yakinlah, ada cara lain. Alih-alih mengubah desain apa pun yang sedang Anda kerjakan sekarang menjadi tema WordPress, Anda dapat memanfaatkan salah satu dari ribuan tema yang tersedia di pasar WordPress yang lebih luas.

Ada tema gratis dan ada tema premium. Sebelum memutuskan mana yang terbaik untuk Anda, Anda mungkin ingin membaca tentang tema mana yang dirancang untuk memenuhi kebutuhan Anda dan menelusuri berdasarkan kategori tema di sini di Tema Elegan dan di tempat lain.

Setelah Anda memilih tema yang Anda suka (dan paket file zip-nya telah diunduh), Anda akan ingin kembali ke WP Admin > Appearance > Themes > Add New dan instal/aktifkan tema WordPress baru Anda.

Setelah ini selesai, Anda akan memiliki situs web dan tema WordPress baru – tetapi sedikit yang lain. Saat Anda melihat pratinjau situs Anda, itu akan kosong dari konten dan mungkin terlihat agak membosankan. Tidak apa-apa, karena selanjutnya kita akan mengimpor konten situs lama Anda.

Di WP Admin, buka Plugins > Add New dan cari plugin bernama HTML Import 2 oleh Stephanie Leary. Setelah plugin ini diinstal dan diaktifkan, ikuti panduan pengguna praktisnya untuk mengimpor seluruh direktori halaman HTML Anda. Lengkap dengan gambar!

Setelah ini, Anda akan memiliki semua konten lama Anda yang hidup di WordPress dan diformat oleh tema baru Anda. Atau, jika Anda membuat tema sendiri di atas, situs Anda akan terlihat seperti sebelumnya – hanya berjalan di WordPress.

Kesimpulannya

Jika Anda telah menggunakan posting ini sebagai panduan untuk memigrasikan situs web Anda ke WordPress, maka Anda baru saja bergabung dengan salah satu komunitas open source terbesar di dunia. Selamat datang! Ini adalah tempat yang menyenangkan dengan banyak pengembang, desainer, blogger, DIYers, dan banyak lagi–semua membangun, bermain, dan berkreasi dengan tema/plugin WordPress dan WordPress.

Jika Anda “mendapatkan bug WordPress”, situs resmi WordPress.org penuh dengan tema, plugin, dan sumber daya lainnya yang bermanfaat. Jika Anda ingin mengubah lebih lanjut file tema Anda, jelajahi Codex untuk tips, trik, dan variasi yang tampaknya tak ada habisnya.

Dan tentu saja kami berharap Anda akan terus mengobrol di komentar di bawah dan berlangganan lebih banyak posting blog di masa mendatang.

Artikel Thumbnail melalui Max Griboedov / shutterstock.com