Mengapa Anda Harus Mengonversi Situs Web HTML Anda Menjadi Tema WordPress

Diterbitkan: 2021-08-24

Masih menggunakan situs web HTML kuno? Saatnya Anda mengonversi situs web HTML Anda ke situs web WordPress dan memanfaatkan banyak fitur yang ditawarkan oleh sistem manajemen konten populer ini. Kami akan fokus pada mengapa Anda harus beralih ke WordPress dan bagaimana Anda bisa mencapainya.

pengantar

HTML vanilla murni telah menjadi standar emas untuk pengembangan situs web sejak lama. Namun, situs web di masa lalu adalah kerangka, tanpa lonceng & peluit yang rumit, dan menggunakan HTML untuk situs tersebut masuk akal saat itu.

Dengan tren dan kebutuhan pasar saat ini, Anda sekarang dapat mengonversi HTML ke WordPress dan memanfaatkan Sistem Manajemen Konten untuk menjalankan situs web Anda, alih-alih Anda menulis kode. Baca lebih lanjut untuk memiliki pemahaman yang lebih luas tentang Pengembangan WordPress.

alasan-untuk-mengkonversi-html-situs web-ke-wordpress

Alasan Mengunggah atau Mengonversi Situs Web HTML ke WordPress

Ini adalah beberapa alasan utama mengapa pindah dari situs web HTML statis ke situs web WordPress adalah langkah yang ideal:

  1. WordPress adalah alat yang fantastis untuk membuat dan membuat antarmuka pengguna unik yang tidak mudah dilakukan dengan template HTML statis untuk desain situs web.
  2. WordPress memiliki komunitas pengembang yang kuat yang dapat membantu Anda dengan situs Anda dan memandu tantangan masa lalu pendatang baru.
  3. Jika Anda ingin menyesuaikan tata letak dengan cepat, hal yang sama tidak dapat dicapai dengan tata letak HTML biasa. Fasilitas pembuat Halaman WordPress memungkinkan pengguna untuk menyesuaikan tata letak & tampilan dan nuansa situs web saat bepergian.
  4. Jika Anda tidak ingin menggunakan file HTML yang ada, Anda dapat memilih dari ribuan tema yang tersedia. Ada kemungkinan besar Anda akan menemukan tema yang sangat mirip dengan tampilan dan nuansa HTML Anda. Dengan begitu Anda menghemat biaya dan upaya untuk mengonversi tata letak HTML yang ada ke WordPress dan memanfaatkan template yang sudah jadi
  5. WordPress telah berkembang selama periode tersebut dan selama evolusi komunitas WordPress telah memastikan bahwa itu ramah SEO. Ini memiliki beberapa plugin peningkatan SEO yang luar biasa, salah satu plugin tersebut adalah YOAST SEO, standar emas untuk manajemen SEO di WordPress. Ini membantu dalam mencapai peringkat mesin pencari yang lebih besar, yang merupakan tujuan akhir dari membangun situs web bisnis.
cara-untuk-mengonversi-html-situs web-ke-wordpress

Berbagai Cara Untuk Mengonversi Situs Web HTML ke WordPress

Setelah membahas mengapa disarankan untuk mengonversi HTML ke WordPress, kita akan menyelami untuk memahami cara mencapainya.

Ada tiga pilihan yang tersedia

  • Metode manual, yang mengharuskan membangun semuanya dari bawah ke atas.
  • Metode tema anak terdiri dari penggunaan tema WordPress dasar dan menyesuaikannya dengan spesifikasi Anda.
  • Teknik pluginnya.

Metode yang Anda pilih bergantung pada pengetahuan pengkodean Anda, jumlah waktu yang ingin Anda curahkan untuk proyek ini, dan preferensi Anda.

langkah-untuk-mengkonversi-html-situs web-ke-wordpress-menggunakan-metode-manual

Konversi Manual Situs Web HTML ke WordPress

Kode HTML situs Anda saat ini dapat menjadi titik referensi untuk konversi manual. Para ahli menyarankan agar Anda memiliki pengetahuan pengkodean yang cukup sebelum mencoba prosedur terjemahan ini. Anda harus terbiasa dengan HTML, CSS, dan PHP pada khususnya.

Berikut cara mengonversi HTML ke WordPress secara manual:

Langkah 1: Buat folder tema baru

Buat file baru di PC Anda untuk menyimpan file tema Anda. Anda bebas memberi nama kategori ini apa pun yang Anda pilih (ini akan bertindak sebagai nama atribut). Buat file yang sesuai dan biarkan tetap terbuka di editor pengkodean pilihan Anda:

  1. Style.css
  2. index.php
  3. Header.php
  4. Sidebar.php

Langkah 2: Salin kode CSS ke lembar gaya baru

Anda dapat menyalin ulang kode CSS setelah Anda membuat file. Mereka yang ingin mereplikasi situs mereka dan memindahkannya ke WordPress perlu mencari dan mengekstrak kode CSS dari lokasi mereka sebelumnya. File style.css bertanggung jawab atas tampilan situs. Oleh karena itu tambahkan baris berikut ke dalamnya:

 /* 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 */

Langkah 3: Pisahkan kode HTML saat ini

Untuk memulai, buka file index.html.

Salin kode dari file WordPress yang dihasilkan dan tempel ke area berikut:

  1. Header.php — File ini berisi semuanya, mulai dari pengenalan kode HTML Anda hingga area konten utama. Anda harus menyalin dan menempelkan <?php wp_head();?> tepat sebelum bagian </head>.
  2. Sidebar.php — Di sinilah Anda akan memasukkan semua kode dari bagian <aside>.
  3. Footer.php — Bagian ini berjalan dari bagian bawah sidebar ke bagian atas file. Tambahkan panggilan untuk <?php wp_footer();?> sebelum mengakhiri tanda kurung dengan </body>.

Langkah 4: Ubah Header.php dan Index.php untuk WordPress

Anda kemudian akan memodifikasi header.php dan index.php agar sesuai dengan format WordPress.

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--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_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

Untuk melakukannya, cari tautan yang terlihat seperti ini di bagian <head>:

 <link rel=”stylesheet” href=”style.css”>.

Ganti URL sebelumnya dengan yang ini:

 <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

Simpan dan keluar dari file header.php sekarang.

Buka file index.php di browser web Anda. Seharusnya kosong.

Isilah titik-titik dengan tepat sebagai berikut:

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

Langkah 5: Unduh tema baru Anda

Saat folder tema Anda selesai, unggah ke situs web Anda dan selesaikan konversi HTML ke WordPress. Untuk melakukannya, buka tempat Anda mengunduh WordPress dan tambahkan folder yang baru dibuat ke /wp-content/tema.

Periksa daftar atribut di halaman WP-Admin Anda, tema, dan tema untuk melihat apakah nama atribut ada. Jika ini masalahnya, Anda melakukan semuanya dengan benar dan sekarang dapat mengaktifkannya.

langkah-untuk-mengkonversi-html-situs web-ke-wordpress-menggunakan-anak-tema-metode

Mengonversi Situs Web HTML melalui Tema Anak WordPress

Langkah 1: Pilih tema

Pertama-tama, pilih tema desain HTML yang sesuai. Cari sub-tema yang mirip dengan situs web Anda saat ini. Jika Anda menemukan pola yang disertakan, Anda tidak akan mencari pengkodean sebanyak itu.

Anda harus menyediakan fitur awal karena fitur ini dibangun di atas baris kode dasar.

Langkah 2: Buat folder tema baru

Dengan cara yang sama, Anda melakukannya di metode terakhir, dan Anda akan membuat folder baru di desktop Anda.

Folder harus memiliki judul yang sama dengan gaya induk, tetapi dengan tambahan "-anak" di bagian akhir. Perhatikan bahwa tidak boleh ada spasi dalam nama.

Langkah 3: Buat gaya lembar baru

Kemudian, di dalam folder, buat file style.css dan tambahkan baris kode tambahan:

Ingatlah bahwa ini hanyalah sebuah contoh. Anda harus memulai kembali dengan detail Anda. Setelah proses selesai, simpan file.

 Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

Langkah 4: Buat Functions.php

Kemudian, untuk tema anak, Anda akan menulis file functions.php dan menyalin gaya induknya.

Buat file baru bernama functions.php untuk melakukannya. Pastikan, untuk memulai, <?php. menandai.

Sekarang ketik kode berikut ke dalam kotak:

 function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Kode ini memberi tahu WordPress untuk beralih ke tema induk dan menggunakan gaya tema anak yang ditentukan di sana.

Langkah 5: Aktifkan subjek anak

Terakhir, Anda harus mengonfigurasi tema. Sebelum mengirimkan folder ke WordPress, unzip menggunakan menu Appearance, Themes, lalu “Add New.” Dari sana, Anda dapat mengambil file zip. Lihat di folder wp-content / theme sebagai opsi lain.

langkah-untuk-mengkonversi-html-situs web-ke-wordpress-menggunakan-plugin-teknik

Impor Konten Anda dari Situs Web HTML ke WordPress menggunakan Plugin

Langkah 1: Siapkan situs baru

Unduh tema WordPress pilihan Anda di situs baru Anda. Pastikan itu adalah template yang Anda inginkan dan dapat berubah dengan cepat. Agar sesuai dengan identitas Anda, Anda harus memperbarui tampilan.

Langkah 2: Instal Plugin

Langkah pertama adalah mengunduh dan menginstal plugin HTML Import 2. (Apakah Plugin WordPress aman digunakan? Baca terus untuk mengetahui lebih lanjut). Cara termudah untuk melakukannya adalah pergi ke Plugins > Add New dan ketik nama plugin di Panel Admin WordPress Anda. Klik Instal Sekarang ketika Anda menemukannya di layar (mungkin dekat dengan bagian bawah). Setelah selesai, luncurkan.

Langkah 3: Unggah halaman

Publikasikan halaman Anda ke server yang sama dengan instalasi WordPress Anda setelah plugin diinstal.

Informasi yang harus Anda isi:

  • Direktori untuk Diimpor
  • URL situs lama
  • Berkas Bawaan
  • Ekstensi file yang akan disertakan
  • Direktori untuk dikecualikan
  • Pertahankan nama file

Setelah itu, navigasikan ke tab konten dan konfigurasikan elemen HTML yang membawa konten situs Anda.

Langkah kedua adalah menyiapkan pengalihan dari URL lama ke URL baru. Anda tidak akan kehilangan nilai SEO yang ada dengan cara ini.

Simpan opsi Anda lalu klik Impor File setelah Anda melewati setiap tab.

Kesimpulan

Di pasar kompetitif yang selalu berubah saat ini, memiliki situs web WordPress yang fleksibel dapat menjadi cara paling efektif bagi perusahaan Anda untuk berkembang.

Dengan trik praktis untuk meningkatkan kecepatan situs WordPress dan cara meningkatkan situs WordPress Anda untuk lalu lintas tinggi, WordPress dapat berkembang dengan bisnis Anda, baik itu besar atau kecil.

Meskipun plugin pengonversi HTML ke WordPress mungkin tampak sebagai solusi yang layak, mereka tidak dapat dibandingkan dengan hasil yang diperoleh melalui pengkodean manusia, terutama saat mengonversi situs web HTML ke tema WordPress.

Mentransfer dari situs HTML statis ke sistem manajemen konten yang lebih efektif dengan kemampuan yang mapan, seperti platform WordPress, adalah pilihan yang baik jika Anda memilikinya, terutama jika dibandingkan dengan platform serupa lainnya seperti Wix. Saat Anda mengonversi HTML ke WordPress, itu membuat situs Anda lebih mudah dikelola dan dikelola karena tema WordPress dan fitur WordPress yang ramah pengguna. Hubungi Kami untuk solusi WordPress khusus di antara banyak layanan lain dan wujudkan ide Anda dengan Creole Studios!