NieR

WordPress telah menjadi platform blogging yang paling banyak digunakan di dunia, diperkirakan digunakan pada seperempat miliar situs online saat ini. 

WordPress berfungsi sebagai blog, tetapi juga sebagai sistem manajemen konten langsung, siap digunakan dengan URL yang ramah mesin pencari dan HTML dan CSS yang sepenuhnya valid. 

Dengan begitu banyak situs yang menggunakan WordPress dan hanya sekitar 1.200 tema yang terdaftar di WordPress.org, ada pasti ada banyak situs yang tampak persis sama. Anda dan klien Anda harus menonjol, atau akhirnya dicap sebagai "hanya blog WordPress lainnya". 

Dalam artikel ini, saya akan menunjukkan kepada Anda cara mengambil template situs HTML dan CSS yang ada dan mengubahnya menjadi tema untuk WordPress. Tentu saja, tema WordPress adalah topik yang terlalu luas untuk dibahas seluruhnya dalam satu artikel, jadi saya akan memberi Anda beberapa sumber daya di bagian akhir untuk memajukan pembelajaran Anda. 

Diharapkan, Namun, artikel ini akan berfungsi sebagai pengantar yang baik dan memberi Anda dasar yang kuat untuk mulai belajar membuat tema WordPress Anda sendiri. Saya anggap Anda sudah tahu HTML dan CSS, dan sudah memiliki desain situs yang ingin Anda adaptasi ke WordPress. 

Mengenal PHP tidak diperlukan, karena saya akan menjelaskan setiap fungsi yang Anda butuhkan saat kami menggunakannya.

Namun, sebelum kita memulai, Anda perlu menyiapkan lingkungan pengembangan WordPress. Jika Anda biasanya hanya bekerja dengan HTML / CSS, Anda mungkin tidak terbiasa dengan "penyiapan pengembangan".

Saat menggunakan WordPress (atau kerangka kerja PHP lainnya) Anda perlu bekerja dengan pengaturan pengembangan, karena mereka menjalankan kode sisi server yang membutuhkan database seperti MySQL untuk berfungsi, dan itu berarti Anda tidak dapat memeriksa apakah suatu tema berfungsi hanya dengan membuka file di browser. Entah Anda membuat situs pengembangan di server sebenarnya, atau Anda dapat menyiapkan lingkungan pengembangan lokal.

Keuntungan Pengembangan Tema WordPress Kustom

Tema yang dibuat khusus jauh lebih dari yang terlihat. Dan ada manfaat yang bisa didapat di mana-mana. Misalnya, dengan memulai dari awal, Anda tidak perlu membongkar kode pengembang lain untuk menyesuaikan berbagai elemen. Pada saat yang sama, Anda tidak dibatasi oleh pengaturan apa pun yang telah dibangun oleh pengembang ke dalam tema.

Selain itu, ada juga beberapa keuntungan signifikan yang bisa didapat dalam kinerja situs. Tema siap pakai cenderung menyertakan banyak skrip dan gaya - beberapa di antaranya mungkin tidak digunakan. Dengan mengembangkan sendiri tema WordPress, Anda hanya dapat menambahkan item yang Anda butuhkan. Ini mengurangi pembengkakan dan dapat meningkatkan waktu muat halaman.

Sejujurnya, kami hanya menggores permukaan dari apa yang bisa dicapai. Secara keseluruhan, ini tentang membangun tema WordPress yang memenuhi kebutuhan proyek Anda - tidak lebih dan tidak kurang. Bukankah itu seharusnya menjadi tujuan untuk setiap situs web yang Anda buat?

Jadi, mari kita lihat di balik layar tentang cara membuat tema WordPress Anda sendiri!

Pengembangan Tema WordPress untuk Pemula

Untuk pemula, pengembangan tema WordPress bisa jadi mengintimidasi. Itu bisa dimengerti, karena ini adalah subjek yang sangat luas dengan banyak kemungkinan. Dan jika Anda pernah melihat-lihat kode sumber dari tema yang sudah jadi , Anda akan mudah merasa kewalahan. Ada banyak hal yang harus dicerna.

Salah satu cara untuk meratakan kurva pembelajaran adalah memulai dari yang paling dasar. Karena, setelah Anda memahami apa yang membuat tema WordPress berfungsi, Anda dapat membangun fondasi itu satu per satu.

Sebelum kita membahas masalah ini, mari kita kurangi tugas mengembangkan tema WordPress menjadi beberapa konsep inti.

Keterampilan Dasar Yang Diperlukan Untuk Pengembangan Tema Wordpress

Hal pertama yang pertama: Anda tidak harus menjadi programmer ahli untuk membuat tema WordPress Anda sendiri. Itu tidak membutuhkan pengetahuan lanjutan tentang ilmu komputer.

Untuk memulai, Anda harus memiliki pemahaman dasar tentang bahasa-bahasa berikut:

• CSS
• HTML
• PHP

Dan tidak, kami belum melupakan JavaScript. Ini banyak digunakan dan penting untuk fungsionalitas tingkat lanjut. Tetapi bagi mereka yang baru belajar tentang cara kerja tema WordPress, itu tidak 100% diperlukan pada saat ini.

Kuncinya: jangan takut dengan apa yang tidak Anda ketahui. Mengembangkan tema WordPress sebenarnya adalah peluang bagus untuk meningkatkan keterampilan Anda di bidang-bidang ini. Semakin banyak Anda berlatih, semakin banyak Anda akan belajar.

Pelajari Hirarki Template Wordpress

Apa yang dimaksud dengan tema WordPress? Anda mungkin terkejut mengetahui bahwa tema dapat terdiri dari sedikitnya dua file:

index.php - Menyediakan template untuk tema Anda untuk menampilkan konten;

style.css - Berfungsi sebagai lembar gaya utama untuk tema Anda;

Cukup ringan, bukan? Untuk menambahkan sedikit lebih banyak fleksibilitas, tema "barebones" mungkin juga mencakup berikut ini:

header.php - Menampilkan bagian tajuk situs web Anda di setiap halaman;

footer.php - Menampilkan bagian footer situs Anda di setiap halaman;

functions.php - Mendefinisikan fungsionalitas opsional untuk tema Anda, termasuk skrip dan gaya yang diantrekan, bersama dengan potongan kode PHP, dll .;

Secara teori, setidaknya, Anda dapat menjalankan seluruh situs web hanya dengan file-file ini. Tetapi kami sering ingin menyesuaikan lebih lanjut. Di situlah Hierarki Template WordPress berperan.

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.