Advertisement
  1. Code
  2. Web Development
Code

Membuat Tema WordPress Dari HTML Statis: Membuat File Template

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a WordPress Theme From Static HTML.
Creating a WordPress Theme From Static HTML: Preparing the Markup
Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPress

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Pada bagian pertama dari serial ini, saya menunjukkan kepada Anda bagaimana mempersiapkan file HTML dan CSS untuk WordPress, memastikan strukturnya berfungsi, kode tersebut valid dan kelas yang benar sedang digunakan.

Dalam tutorial ini Anda akan belajar mengambil file index.html dan membaginya menjadi satu set file template untuk digunakan oleh WordPress.


Apa yang Akan Anda Butuhkan

Untuk tutorial ini yang Anda butuhkan adalah alat yang paling dasar untuk mengedit HTML dan PHP:

  • Editor kode pilihan Anda.

Apa itu File Template?

Tema WordPress terdiri dari sejumlah file template. Paling tidak, sebuah tema harus berisi dua file agar bisa bekerja, ini adalah index.php dan style.css.

Namun, dengan tema yang ditulis dengan baik, isi file index.php akan dipecah menjadi file template utama (index.php) dan satu set file include. Ini adalah file yang berisi kode untuk header, sidebar dan footer.

Dalam beberapa tema, file include tambahan digunakan untuk The Loop; saya akan membahasnya di Bagian 4 dari serial ini. File-file tersebut disebut file include karena Anda menambahkan kode ke file index.php Anda untuk memberi tahu WordPress agar menyertakan isinya.

File index.html kami akan dibagi menjadi empat file PHP:

  • index.php, yang akan berisi konten utama plus kode untuk memasukkan file lainnya
  • header.php, yang akan menyertakan bagian <head> plus semua yang ada di header dan navigasi
  • sidebar.php, yang akan berisi area widget sidebar
  • footer.php yang akan berisi (sudah Anda duga!) footer, plus tag </body> penutup

Selama seri ini, Anda akan menambahkan ke file-file ini sehingga tema Anda bisa mencakup widget, menu dan sebuah loop, dan Anda akan menambahkan kait yang akan digunakan oleh plugin. Anda juga akan menambahkan file template tambahan untuk menampilkan berbagai jenis konten. Jika Anda ingin keuntungan dari ini, lihatlah halaman Codex di WordPress Template Hierarchy.

Tapi untuk saat ini, semua yang akan Anda lakukan adalah membuat satu set file PHP dan membagi isi file index.php Anda kepada mereka.


Membuat File-file PHP

Langkah pertama adalah membuat file kosong. Buat empat file kosong dengan nama berikut dan buka di editor kode Anda:

  • index.php
  • header.php
  • sidebar.php
  • footer.php

Pastikan semua ini ada dalam folder yang memiliki nama tema Anda - dalam kasus saya, saya akan memberi nama folder 'wptutsplus-demo-theme'.

Salin juga stylesheet Anda ke dalam folder ini. Anda tidak akan mengeditnya dalam tutorial ini, tapi Anda akan melakukannya di bagian selanjutnya dari serial ini.


Mengisi File Header

Selanjutnya Anda akan menyalin bagian atas index.html ke file header.php Anda.

Buka index.html dan pilih semuanya dari deklarasi DOCTYPE pembukaan ke tag div class="main" pembuka:

Salin kode ini dan tempelkan ke file header.php Anda.

Simpan file header baru Anda.


Mengisi File Sidebar

Sekarang ulangi ini untuk sidebar.

Di file index.html Anda, pilih elemen aside class="sidebar" dan segala isinya:

Sekarang salin ini ke file sidebar.php Anda dan simpan.


Mengisi File Footer

Proses pemuatan file footer.php identik dengan header dan sidebar.

Pilih semuanya setelah sidebar di file index.html Anda:

Copy dan paste ke file footer.php Anda.

Simpan file footer Anda.

Anda mungkin bertanya-tanya mengapa div .main ditutup pada file footer dan bukan sidebar. Ini agar jika nanti Anda membuat file template untuk halaman yang tidak memiliki sidebar, Anda akan kehilangan include sidebar dalam template itu dan tetap menyertakan footernya, dan div .main akan ditutup dengan benar.

Mengisi File Indeks

Langkah terakhir adalah mengatur file index.php Anda. Ini sedikit lebih terlibat, Anda harus menambahkan beberapa fungsi PHP yang digunakan WordPress untuk menyertakan header, sidebar dan footer.

Buka file index.php kosong Anda dan tambahkan kode yang ditunjukkan di bawah ini:

Pastikan untuk meninggalkan spasi di antara pembuka include header dan include sidebar, di sinilah Anda akan menambahkan konten file indeks yang tidak ada di header, sidebar atau footer.

Sekarang buka lagi file index.html dan pilih semua kode di antara elemen div class="main" pembuka dan sidebar:

Copy ini dan paste ke file index.php Anda di bawah baris get_header().

Simpan file index.php Anda.


Ringkasan

Anda sekarang memiliki permulaan tema WordPress. Anda telah mengubah file HTML Anda menjadi satu set file PHP dan mengaturnya untuk bekerja sama.

Di bagian selanjutnya dari serial ini, saya akan menunjukkan cara mengedit stylesheet untuk membuat karya tema Anda, dan mengunggah tema Anda ke WordPress.


Sumber daya

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.