Convert HTML ke Tema Wordpress

By Seika生花 - May 03, 2021



Mengonversi Situs HTML 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 / uang 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 meminta Anda untuk memasukkan 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 sedikit kode dari kodeks WordPress. Ini cukup sederhana dan lurus ke depan jika Anda memiliki pengalaman dengan HTML, CSS, dan sedikit PHP.

2. Pasang tema yang sudah dibuat sebelumnya dan cukup migrasikan konten Anda.

Ini mungkin pilihan terbaik di persimpangan antara 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 kami gunakan untuk mengimpor konten tersedia secara gratis di Repositori Plugin WordPress resmi.

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

Ini adalah solusi termudah, karena tidak mengharuskan Anda melakukan banyak hal. Namun itu tidak akan berbuat banyak untuk membiasakan Anda dengan WordPress dan biayanya akan bervariasi tergantung pada siapa yang Anda pilih untuk dipekerjakan. 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. Berikut cara Mengonversi Situs HTML ke Situs WordPress

Secara Manual Mengubah Situs HTML Statis Anda ke WordPress

Jika tujuan Anda adalah tidak hanya memasukkan konten dari situs HTML statis Anda 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, dan kemudian mengunggah hasilnya.

Anda akan membutuhkan 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 inginkan untuk dinamai tema Anda.

Selanjutnya, buat beberapa file (yang semuanya masuk ke folder tema baru Anda) di editor kode Anda. Jangan lakukan apa pun untuk 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 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 berikut ini ke 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 tempelkan CSS 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 dasarnya. 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 kami akan "memotong" HTML Anda yang ada, yang sebenarnya kami lakukan hanyalah memotong dan menempelkan bagian kode yang ada ke dalam file berbeda yang baru saja kami buat, sehingga WordPress akan tahu di mana harus menampilkan mereka.

Kita mulai.

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

Kedua, kembali ke file index.html Anda  . Sorot elemen  pinggir 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  , tempatkan baris berikut php.

<?php get_header(); ?>

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

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Dan terakhir, kita harus menambahkan apa yang disebut The Loop. Ini adalah php utama 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; ?>

Langkah 5: Unggah Tema Baru Anda

Sekarang setelah Anda membuat file tema dan menyimpannya dalam folder tema baru, Anda perlu mengakses direktori pemasangan WordPress baru Anda.

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

Semua 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 (melompati bagian tentang menggunakan tema yang sudah dibuat sebelumnya) untuk melihat bagaimana hal itu dilakukan. selamat anda telah berhasil Mengonversi Situs HTML ke Situs WordPress.

  • Share:

You Might Also Like

0 comments