Langsung ke konten utama

Implementasi HTML Bootstrap Design Web ke WordPress


Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress.

Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding.

Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis.

Ada tiga macam cara convert HTML ke WordPress yang terdapat untuk saat ini.

1. Membangun tampilan WordPress secara manual merujuk pada blog HTML statis.
2. Menginstall tema setengah jadi dan memigrasikan konten.
3. Membayar pengembang bagi convert HTML ke WordPress.


Hal yang Perlu Dipersiapkan Sebelum Convert HTML ke WordPress

1. Layanan Hosting

Kamy bisa menggunakan layanan hosting lokal yang telah terpercaya. Namun akan lebih bagus jika kamu menggunakan layanan WordPress Hosting yang mendukung pemakaian WordPress secara menyeluruh. 

2. Code Editor

Salah satu hal yang perlu kamu siapkan yaitu software code editor. Kamu bisa menggunakan atom, Notepad++, Sublime, Visual Studio Code atau program lainnya yang sejenis. Code editor ini akan membantu kamu dalam membuka, mengedit, dan menyesuaikan kode HTML sebelum diunggah ke web hosting/ 

Cara Upload File HTML ke WordPress

1. Membangun Tema WordPress Secara Manual dari Situs HTML Statis

Cara ini membutuhkan akses ke pada direktori penyimpanan blog dan pun sedikit kemampuan bagi membaca baris kode pemrograman.

Kamu memerlukan akses bagi membaca beragam macam file yang terdapat di pada direktori blog. Nah, beberapa file (berisi baris kode) yang telah ada dapat Kamu gunakan bagi merancang tema WordPress. Lumayan sederhana untuk Kamu yang telah mempunyai beberapa pengetahuan mengenai HTML, CSS, dan PHP.

Langkah 1. Membangun Folder Tema Baru dan Beberapa File yang Diperlukan

Di pada alat desktop, bikin folder baru bagi menampung beberapa file tema. Kamu dapat memberikan nama apa saja ke folder tersebut.

Kemudian bikin beberapa file yang diletakkan di pada folder tema; style.css, index.php, header.php, sidebar.php, dan footer.php.

Langkah 2. Menyalin CSS Ketika Ini ke Stylesheet

Seandainya Kamu menginginkan desain yang baru, pastinya Kamu membutuhkan sangat tak beberapa manfaat CSS yang mesti Kamu simpan. Jadi, hal pertama-tama kali yang perlu Kamu lakukan yakni mengedit file style.css.

Langkah 3. Memisahkan Konten HTML

Sebelum masuk ke langkah ini, ada beberapa catatan mengenai WordPress yang perlu Kamu tahu. WordPress menggunakan PHP bagi memanggil dan menerima beragam macam dari database. Setiap file yang digunakan di pada panduan singkat ini didesain bagi mengarahkan WordPress supaya menampilkan bagian dan lokasi blog yang perlu diberikan konten.

Misalnya saja di pada file HTML statis Kamu seluruh komponen (header, footer, sidebar, dan isi konten) pada satu file. Nah, setiap file yang dibangun tadi bertujuan bagi memisahkannya. 

Jadi di bagian ahir nanti, Kamu perlu mengatur beberapa bagian dari kode –yang telah terpisah menjadi beberapa file– supaya konten dapat tertata dengan benar sesuai tampilan yang diinginkan. Telah menangkap bagaimana logikanya? Mungkin akan lebih jelas apabila mempraktikkannya seketika.

Pertama-tama, buka file index.html yang telah ada. Highlight apa pun dari atas file hingga  tag baris kode pembuka class=”main”. Copy dan paste bagian tersebut ke pada file header.php baru kemudian simpan dan tutup file header.

Buka kembali file index.html yang telah ada. Highlight bagian unsur class=”sidebar” dan apa pun yang terdapat di dalamnya. Copy dan paste bagian tersebut ke pada file sidebar.php, save kemudian file sidebar.

Ketiga, salin seluruh bagian setelah sidebar kemudian copy dan paste ke pada file footer.php, jangan lupa save dan tutup file footer.

Terakhir, di pada file index.html, highlight seluruh yang tersisa. Kemudian copy dan paste ke pada file index.php baru yang telah dibangun. Simpan, tapi jangan tutup terlebih dahulu file index.php.

Kamu dapat menutup file index.html (bukan index.php) dan ikuti langkah berikutnya.

Langkah 4. Menyempurnakan File Index.ph[

Langkah berikutnya, yaitu menyempurnakan file index.php di tema baru. Kamu hanya perlu memastikan bahwa seluruh manfaat yang tadinya dipisah-pisah ke pada beberapa file dapat disatukan kembali di pada file index.php. 

Terakhir, Kamu perlu merancang apa yang disebut dengan Loop. Ini adalah bagian utama dari index.php di WordPress yang bermanfaat bagi menampilkan konten post ke pengunjung. Kamu lumayan menyalin baris kode di bawah ini ke pada file index.php di bagian tengah konten.

Langkah 5. Menggunggah Tema ke WordPress

Sekarang kamu hanya perlu merancang tema yang sudah dibangun di lokal tadi dapat dimuat di WordPress. Caranya dengan menggunggah ke pada folder tema. Untuk melakukannya, kamu perlu akses ke direktori instalasi WordPress. Kamu dapat menggunakan akses ftp atau mengunggah nya menggunakan cPanel.

2. Menginstall Tema Setengah Jadi Kemudian Migrasi Konten HTML

Cara ini mungkin menjadi alternatif yang sangat sederhana diperbandingkan dengan cara lainnya. Seandainya telah mempunyai layanan web hosting, Kamu hanya perlu menyisihkan sedikit pengeluaran bagi membeli tema premium (berbayar).

Di samping tetap mempertahankan desain HTML statis yang terdapat dikala ini, Kamu pun dapat menggunakan ribuan tema WordPress yang terdapat secara tidak dipungut bayaran maupun yang premium. Namun saya menyarankan bagi menggunakan tema premium karena mempunyai kualitas yang lebih bagus daripada tema tidak dipungut bayaran. 

Ada banyak sekali tema premium yang terdapat di WordPress. Sebelum memutuskan menggunakan tema yang sesuai dengan keperluan, Kamu dapat mencari tema merujuk pada kategori terlebih dahulu. Kamu dapat menyesuaikan dengan konsep tema yang sama dengan blog HTML statis atau menggunakan konsep berbeda.

Setelah Kamu memilih tema yang sesuai dengan keperluan, unduh tema tersebut (biasanya akan berbentuk file zip) dengan cara klik install. Secara otomatis tema akan terpasang di pada koleksi tema WordPress. Bagi mengaktifkan, Kamu lumayan masuk lagi ke halaman WP “Admin » Appearance » Themes”. Cari nama tema yang telah diinstal tadi kemudian klik “Active”.

Setelah menyelesaikan ini, Kamu telah mempunyai tema WordPress yang baru,tapi masih perlu beberapa penyesuaian. Ketika mengakses blog menggunakan tema yang telah terpasang, Kamu hanya akan melihat tampilan konten yang kosong dan terkesan membosankan. Itu tak masalah karena hal tersebut dikarenakan belum ada konten sama sekali di blog. Karenanya dari itu, langkah berikutnya Kamu akan mengimpor konten  lama.

Kamu dapat mengimpor konten HTML statis dengan gampang menggunakan bantuan plugin tidak dipungut bayaran yang telah terdapat di WordPress. Bagi menginstallnya lumayan akses “Dashboard » Plugins » Add New“ kemudian cari plugin dengan nama ‘HTML Import 2’ dari Stephanie Leary. Setelah plugin ini terinstall dan aktif, Kamu dapat mengikuti panduannya bagi mengimpor seluruh direktori halaman HTML statis, termasuk gambar.

Setelah selesai, Kamu seharusnya telah dapat mengakses blog menggunakan WordPress dengan format tema yang baru. apabila merancang tema Kamu sendiri, seharusnya tampilan blog Kamu terlihat seperti yang sebelumnya, hanya saja berjalan menggunakan CMS WordPress.

3. Membayar Pengembang untuk Convert File HTML ke WordPress

Cara terakhir ini adalah cara termudah karena Kamu tak perlu mengerjakan apa pun, kecuali mengeluarkan biaya yang (terkadang) lumayan besar. Kamu dapat membayar pengembang bagi convert HTML ke WordPress. Biayanya tergantung siapa yang Kamu rekrut dan seberapa kompleks blog HTML statis yang Kamu punya. Gampang dan simpel.

Cara ini tentu saja amat cocok untuk Kamu yang tak mempunyai lumayan waktu bagi convert file HTML ke WordPress. Atau, untuk Kamu yang sebelumnya membeli blog HTML dan ingin beralih menggunakan WordPress 

Komentar

Postingan populer dari blog ini

Logika Fuzzy (Model Sugeno dan Tsukamoto)

Logika Fuzzy adalah metodologi sistem kontrol pemecahan masalah yang cocok digunakan untuk diimplementasikan pada berbagai sistem, mulai dari sistem yang sederhana, sistem kecil, embedded system, jaringan PC, multichannel atau workstation berbasis akuisisi data dan sistem kontrol. Logika ini  merupakan suatu logika yang memiliki nilai kekaburan atau kesamaran antara benar atau salah. Logika Fuzzy sering digunakan dalam bidang elektronika. Konsep logika ini pertama kali diperkenalkan oleh Prof. Lotfi Astor Zadeh pada tahun 1962. A. Model Sugeno Model Sugeno adalah metode interfensi fuzzy untuk aturan yang dipresentasikan dalam bentuk IF-THEN, output yang dihasilkan sistem tidak berupa himpunan fuzzy, tetapi berupa konstanta atau persamaan linear. Sebagai fungsi keanggotaan dari konsekuen, Michio Sugeno mengusulkan penggunaan singleton. Singleton adalah sebuah himpunan fuzzy dengan fungsi keanggotaan yang pada titik tertentu mempunyai sebuah nilai dan 0 diluar titik tersebut. Du...

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...