Bagaimana cara mengubah kode html menjadi situs web?

Jadi, Anda telah melihat statistik terbaru, mengatakan bahwa WordPress saat ini mendukung 33% situs web di internet. Sebagai pemilik situs web, Anda dapat mempertimbangkan untuk mengonversi situs HTML statis Anda ke WordPress

Table of Contents Show

Hal yang Harus Diperhatikan Saat Bergerak
Berbagai Cara Mengonversi HTML ke WordPress
Membuat Tema WordPress Dari Situs HTML Statis
Melepaskan Desain Dan Hanya Menjaga Konten
Menggunakan Tema Anak Yang Diadaptasi Dari Tema Yang Sudah Ada

Meskipun masih oke untuk memiliki situs web berbasis HTML karena HTML5 cukup kuat, terutama untuk situs pajangan. Tetapi untuk yang lainnya, WordPress memberikan solusi yang lebih nyaman. WordPress menawarkan banyak tema, plugin, dan widget untuk meningkatkan situs web dan menambahkan fitur yang bermanfaat

Ini juga mudah dikelola. Anda dapat menambah dan menghapus konten tanpa coding. Dengan situs HTML, ini adalah cerita yang berbeda. Kecuali Anda tahu cara membuat kode, memperbarui konten dengan HTML bisa jadi sulit

Pada artikel ini, Anda akan mempelajari cara mengonversi HTML statis ke WordPress, dan berbagai metode untuk melakukannya. Mari kita mulai

Hal yang Harus Diperhatikan Saat Bergerak

Sebelum pindah, Anda perlu mempertimbangkan beberapa hal

Layanan hosting. Anda harus memiliki paket hosting sebelum memulai, karena persyaratannya mungkin berbeda dari situs HTML. Anda memerlukan hosting untuk situs WordPress Anda. Sebagai alternatif, Anda dapat menghosting situs web Anda secara lokal, dan menayangkannya nanti
Editor kode. Anda memerlukan editor kode seperti Notepad ++, Atom, Sublime, dll. , untuk mengubah kode HTML situs web Anda
Waktu dan uang. Anda perlu mempertimbangkan waktu dan uang yang ingin Anda investasikan. Jika Anda siap dan berkomitmen untuk belajar, tutorial ini sangat cocok untuk Anda. Alternatifnya, Anda juga dapat menyewa pengembang atau menggunakan aplikasi migrasi WordPress untuk membantu mengonversi. Mempekerjakan seseorang jauh lebih mudah, tetapi Anda akan kehilangan kesempatan untuk belajar, dan prosesnya mungkin mahal

Berbagai Cara Mengonversi HTML ke WordPress

Ada beberapa metode untuk mengonversi HTML ke WordPress, dan memiliki tingkat kesulitan yang berbeda. Mereka adalah sebagai berikut

Membuat Tema WordPress dari situs HTML statis. Jika Anda lebih suka desain situs web HTML lama Anda utuh, opsi ini cocok untuk Anda. Itu juga rute yang paling menantang dan membutuhkan pengkodean. Tapi, jangan terintimidasi. Yang perlu Anda lakukan hanyalah menyalin/menempelkan kode HTML lama ke beberapa file PHP
Kehilangan desain dan mempertahankan konten saja. Jika Anda tidak keberatan meninggalkan desain situs web lama dan menemukan tema WordPress untuk awal yang baru, opsi ini cocok untuk Anda. Anda hanya perlu mentransfer konten ke rumah barunya
Menggunakan tema anak yang diadaptasi dari tema yang sudah ada. Ini mungkin cara termudah jika Anda ingin mempertahankan desain situs web lama. Dengan metode ini, Anda akan menggunakan tema WordPress yang sudah ada sebelumnya dan mengembangkannya. Sebagai bonus, Anda dapat langsung menggunakan fitur canggih WordPress

Migrasi situs web menjadi mudah – cukup buat keputusan dan duduk santai sementara kami melakukan sisanya. Migrasikan Situs Web Anda

Membuat Tema WordPress Dari Situs HTML Statis

Jika tujuan Anda adalah membuat situs web WordPress yang menyerupai situs HTML lama Anda dari awal, Anda bisa mulai dari sini. Dalam tutorial ini, kami menggunakan template HTML statis oleh Rachel McCollin

1. Buat Folder Tema Dan File Dasar

Buat folder tema baru di desktop Anda dan beri nama. Kami menamai folder kami sebagai tema saya. Setelah itu, buka editor kode Anda dan buat file berikut

gaya. css
indeks. php
tajuk. php
sidebar. php
footer. php

Biarkan editor terbuka. Kami akan kembali lagi nanti

2. Ubah CSS Situs Web Lama ke Lembar Gaya WordPress

Sekarang, kita akan membuat style sheet WordPress dengan menyalin kode CSS lama Anda ke dalamnya. Pergi ke gaya. file css, dan rekatkan kode ini

/*
Theme Name: My Theme
Author: LakiGarang
Author URI: https://hostinger.com/tutorials/author/luqman
Description: A development theme, from static HTML to WordPress
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Kode ini memberikan informasi ke WordPress bahwa ini adalah tajuk stylesheet tema. Anda dapat mengedit detail seperti nama tema, penulis dan URL, deskripsi, dll

Tepat setelah header, salin dan tempel kode CSS lama Anda ke dalam file. Simpan dan tutup

3. Pisahkan HTML Situs Web Lama Anda

WordPress menggunakan PHP untuk menarik informasi dari basis datanya. Jadi, Anda perlu membagi HTML situs web lama Anda menjadi beberapa bagian untuk memastikannya dapat menyatukannya dengan benar

Jika ini terlihat rumit, jangan terlalu khawatir, prosesnya cukup mudah. Pertama, mari kita lihat bagaimana tampilan website statis kita dan kodenya.

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>

<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">

</head>

<body>
  
  <div class="header-bg">
  
    <header role="banner">
  
      <hgroup class="site-name three-quarters left">
        
        <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
        <h1 id="site-title" class="one-half-left">
          <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
        </h1>
        
        <h2 id="site-description">Fiction and Technical Writer</h2>
      
      </hgroup>
  
      <div class="right quarter">
                
          <a class="toggle-nav" href="#">☰</a>
          
      </div> <!-- .right quarter -->
    
    </header><!-- header -->
    
  </div><!-- header-bg-->
  
      
  <!-- full width navigation menu -->
  <nav class="menu main">
      
    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            
    <div class="main-nav">
      <ul class="menu">
        <li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
      </ul>
    </div>    
    
  </nav><!-- .main -->
    

  <div class="main">
    
    <div id="content" class="two-thirds left">

      <article class="post">
      
        <h2 class="entry-title">Welcome to This Website</h2>
    
        <section class="entry-content">
      
          <p>This site is comprised of one static HTML file.</p>
          <p>You will be able to add more content later via the WordPress admin screens.
            
          <h3>Here's a heading so you can check how it's styled</h3>
          <p>And another paragraph underneath.</p>
          <p>And a list:</p>
          
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>And so on...</li>
          </ul>
            
        
        </section><!-- .entry-content -->

      </article><!-- #post-## -->

    </div><!-- #content -->

    
    <aside class="sidebar one-third right">

      <aside class="widget-area">
        
        <div class="widget-container">
          
          <h3 class="widget-title">Buy My Book</h3>
          
          <img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/[email protected]?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
          
          <p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
  
        </div>
      
      </aside>

    </aside>
    
  </div><!-- .main -->


  <footer>
  
    <div class="fatfooter">
  
      <p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
  
    </div>

  </footer>

</body>
</html>

Sekarang, buka indeks situs web statis lama Anda. html, kami akan membaginya menjadi file WordPress yang baru dibuat. (Contoh di bawah ini adalah markup kami)

tajuk. php

Everything from the beginning of your old HTML code up to the main content area goes into this file. The main content area usually expressed with

Additionally, right before the element, copy and paste this code . This ensures WordPress plugins work properly. When you finish, save the file.

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>

<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
<?php wp_head();?>
</head>

<body>
  
  <div class="header-bg">
  
    <header role="banner">
  
      <hgroup class="site-name three-quarters left">
        
        <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
        <h1 id="site-title" class="one-half-left">
          <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
        </h1>
        
        <h2 id="site-description">Fiction and Technical Writer</h2>
      
      </hgroup>
  
      <div class="right quarter">
                
          <a class="toggle-nav" href="#">☰</a>
          
      </div> <!-- .right quarter -->
    
    </header><!-- header -->
    
  </div><!-- header-bg-->
  
      
  <!-- full width navigation menu -->
  <nav class="menu main">
      
    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            
    <div class="main-nav">
      <ul class="menu">
        <li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
        <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
      </ul>
    </div>    
    
  </nav><!-- .main -->

sidebar. php

Everything belonging to the section

in your old HTML code, goes into this file. When you finish, save the file.

<aside class="sidebar one-third right">

      <aside class="widget-area">
        
        <div class="widget-container">
          
          <h3 class="widget-title">Buy My Book</h3>
          
          <img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/[email protected]?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
          
          <p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
  
        </div>
      
      </aside>

    </aside>

footer. php

Sekarang, semuanya hingga akhir file harus berupa informasi footer, yang masuk ke dalam file ini

Just before the closing bracket , add this code for the same reason as in header.php. When you finish, save it.

</div><!-- .main -->


  <footer>
  
    <div class="fatfooter">
  
      <p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
  
    </div>

  </footer>
  <?php wp_footer();?>
</body>
</html>

Sekarang Anda sudah selesai dengan indeks lama. html. Anda dapat menutupnya bersama dengan file lain di folder tema Anda kecuali untuk header. php dan index. php. Mereka masih memiliki beberapa pekerjaan yang harus dilakukan

4. Ubah Gaya ke Format WordPress

In the header, all you need to do is change the style sheet from HTML to WordPress format. Look for an existing link in the section. In my case, it’s something like this:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

Ganti dengan baris ini

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

Sekarang, Anda dapat menyimpan dan menutup header. file php

Mari beralih ke indeks. file php. Itu harus kosong saat ini, jadi salin dan tempel baris kode ini

<?php get_header(); ?>

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

Kode ini akan memanggil sisa file WordPress Anda. Anda harus memperhatikan ruang antara header dan sidebar. Di situlah Anda akan menambahkan The Loop

The Loop akan memproses setiap postingan untuk ditampilkan, dan memformatnya sesuai dengan kesesuaian konten dengan kriteria di dalam tag The Loop. Merupakan aspek penting untuk menambahkan konten dinamis ke situs WordPress Anda

Untuk melakukannya, rekatkan kode berikut tepat setelah

<?php while ( have_posts() ) : the_post(); ?>
  <article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
    <h2 class="entry-title"><?php the_title(); ?></h2>
    <?php if ( !is_page() ):?>
      <section class="entry-meta">
      <p>Posted on <?php the_date();?> by <?php the_author();?></p>
      </section>
    <?php endif; ?>
    <section class="entry-content">
      <?php the_content(); ?>
    </section>
    <section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
      <span class="category-links">
        Posted under: <?php echo get_the_category_list( ', ' ); ?>
      </span>
    <?php endif; ?></section>
  </article>
<?php endwhile; ?>

Setelah Anda selesai, simpan index. php dan tutup. Anda berhasil membuat tema WordPress. Sekarang, Anda dapat menambahkannya ke situs WordPress Anda

5. Unggah Tema Anda ke WordPress

Setelah Anda selesai membuat tema dasar, Anda dapat mengunggahnya ke WordPress. Semua file di dalam folder tema Anda harus berada di tempat yang sama. Untuk melakukan itu, Anda dapat meng-zip-nya

Buka Dasbor Admin WordPress Anda. Buka Penampilan -> Tema. Klik Tambah Baru -> Unggah Tema

Di menu, cari file zip tema Anda, unggah, dan klik Instal Sekarang. Setelah itu jangan lupa aktifkan temanya

Sekarang ujung depan Anda akan terlihat seperti situs lama. Anda harus menyadari bahwa meskipun desain dasarnya terlihat sama, ada lebih banyak hal yang harus Anda lakukan untuk membuat integrasi menjadi lebih baik

Misalnya, Anda tidak dapat menggunakan fitur WordPress seperti area widget. Anda juga perlu menyesuaikan markup CSS untuk menjadikannya bagian dari desain asli WordPress

Melepaskan Desain Dan Hanya Menjaga Konten

Jika Anda tidak keberatan meninggalkan desain situs web HTML lama dan ingin menggunakan tema baru, ini adalah pilihan Anda. Metode ini juga akan mempermudah pengimporan konten

Yang harus Anda lakukan adalah menginstal tema yang Anda sukai dan mengaktifkannya, lalu ikuti langkah-langkah di bawah ini

Penting. Selalu cadangkan situs WordPress Anda sebelum melakukan perubahan apa pun

1. Instal Plugin Impor 2

Anda perlu menginstal Plugin Impor 2. Buka Plugin -> Tambah Baru dan cari berdasarkan nama. Anda akan menemukannya sedikit lebih jauh karena ini adalah plugin yang cukup lama tetapi masih berfungsi dengan baik. Klik instal dan aktifkan

2. Mempersiapkan Impor

Sekarang, buka Pengaturan WordPress -> Impor HTML. Anda dapat mengimpor beberapa halaman sekaligus atau satu per satu

Anda akan melihat bahwa plugin menunjuk ke jalur tertentu seperti html-files-to-import. Ini berarti Anda perlu mengunggah file HTML ke server yang sama dengan instalasi WordPress Anda. Jika Anda memerlukan detail lebih lanjut, Anda dapat merujuk ke panduan pengguna resmi

Dalam tutorial ini, kita akan mengimpor konten. Untuk melakukannya, pilih tag HTML di bagian atas dan pilih konfigurasinya di tiga kolom berikut

Setelah selesai, klik simpan pengaturan

3. Mulai Mengimpor Konten Anda

Tombol Impor File akan tersedia setelah Anda menyimpan pengaturan. Jika Anda melewatkannya, Anda juga dapat mengaksesnya dari Tools -> Import dan klik Run Importer di bawah opsi HTML

Pilih apakah Anda ingin mengimpor direktori file atau satu file, lalu klik Kirim. Setelah selesai, semua konten Anda yang ada akan tersedia di situs WordPress baru Anda

Menggunakan Tema Anak Yang Diadaptasi Dari Tema Yang Sudah Ada

Jika Anda ingin mempertahankan beberapa desain situs web lama Anda tetapi merasa metode pertama agak berlebihan, maka menggunakan tema anak bisa menjadi alternatif sederhana.

Tema anak memungkinkan Anda memanfaatkan ribuan tema yang ada (yang disebut tema induk) di WordPress dan membangun situs baru Anda di atasnya

Anda juga dapat mengubah tampilan situs Anda tanpa mengganggu inti tema induk. Anda tidak akan kehilangan modifikasi apa pun yang dilakukan saat memperbarui tema Anda

Kami telah menulis artikel lebih lanjut tentang cara membuat tema anak WordPress. Dalam tutorial ini, kami akan menggunakan Childify Me untuk menyederhanakan proses bagi pemula

Penting. Selalu cadangkan situs WordPress Anda sebelum melakukan perubahan apa pun

1. Pilih Tema yang Sesuai

Anda perlu menemukan tema yang cocok sebagai dasar untuk Anda kembangkan. Alangkah baiknya jika Anda dapat menemukan tema yang dekat dengan desain situs web lama Anda, sehingga Anda tidak perlu mengubah terlalu banyak hal nantinya.

Jelajahi direktori tema WordPress untuk menemukan kandidat yang cocok. Dalam tutorial ini, kita akan menggunakan tema Twenty Seventeen sebagai titik awal kita

2. Instal Childify Me

Buka Plugin -> Tambah Baru dan cari berdasarkan nama. Instal dan aktifkan

Kiat Pro

Plugin Childify Me menciptakan gaya. css dan fungsi. file php. Jika Anda ingin menambahkan fungsi khusus di sebuah functions.php. php, folder/file baru, Anda dapat mengunggahnya dengan menggunakan klien FTP. Jika Anda menggunakan Hostinger, Manajer File kami akan membantu mengelola file Anda langsung dari panel kontrol

3. Sesuaikan Tema Induk

Sekarang buka Penampilan -> Tema. Pastikan tema induk diaktifkan. Klik Sesuaikan, dan arahkan ke panel penyesuaian tema aktif Anda

4. Childify Tema Induk

Klik tombol Childify Me, dan beri nama tema anak Anda. Kami sarankan Anda menamainya mirip dengan tema induk. Klik buat. Setelah selesai, klik aktifkan dan pratinjau

5. Mulai Mengimpor Konten Anda

Sekarang situs WordPress baru Anda terlihat seperti versi HTML statis lama, yang tersisa hanyalah mengimpor konten. Di sini, Anda dapat menggunakan metode sebelumnya

Anda telah berhasil memindahkan situs web HTML statis Anda ke WordPress. Selamat

Cari tahu cara lain untuk bermigrasi ke WordPress

Wix ke WordPress
Squarespace ke WordPress
Blogger ke WordPress
Joomla ke WordPress
Pindahkan WordPress dari Subfolder ke Root

Kesimpulan

Kami telah membahas apa yang perlu dilakukan sebelum mengonversi situs HTML statis ke WordPress dan berbagai metode untuk menyelesaikan prosesnya

Rekap cepat – Anda dapat membuat tema WordPress dari awal. Ini adalah metode yang sulit tetapi pilihan yang bagus jika Anda tahu cara membuat kode dan memiliki waktu luang untuk berinvestasi

Alternatifnya, Anda juga dapat menggunakan plugin untuk membuat konversi lebih mudah, dan mengimpor semua konten Anda ke rumah barunya

Kami harap artikel ini membantu mempermudah prosesnya. Sampai jumpa di yang berikutnya

Penulis

Luqmanul M

Luqman adalah seorang ilmuwan sosial yang memproklamirkan diri. Dia bersemangat tentang pendidikan, teknologi, dan segala sesuatu di antaranya. Dia ingin membantu menciptakan sistem pendidikan berkualitas tinggi. Setelah menghabiskan empat tahun terakhir sebagai peneliti sosial dan guru blog, dia meminjamkan keahliannya kepada tim konten digital Hostinger. Untuk waktu senggang, ia senang membaca literatur ilmiah (dan tidak terlalu ilmiah) dengan ditemani secangkir kopi arabika hitam.