Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Theme Development
Code

Membuat Tema WordPress dari HTML Statis: Mempersiapkan Markup

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: Creating Template Files

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

Tahun lalu saya melakukan survei kecil (dan diakui sangat tidak ilmiah) di antara pengembang WordPress lainnya.

Yang saya ingin tahu adalah ini: Ketika mereka membangun tema WordPress pertama mereka, bagaimana mereka melakukannya? Apakah mereka meretas tema yang ada atau apakah mereka memulai dengan HTML statis mereka sendiri dan mengubahnya menjadi tema?

Mayoritas orang yang saya ajak bicara menggunakan pendekatan kedua - mereka semua adalah pengembang frontend berpengalaman yang telah membangun situs menggunakan HTML dan CSS, dan merasa paling mudah untuk mengambil file HTML mereka yang ada dan mengonversinya menjadi sebuah tema. Dua orang yang saya ajak bicara adalah dosen atau guru, dan memberi tahu saya bahwa ini adalah pendekatan yang mereka gunakan dengan para siswa.

Jadi dalam seri ini saya akan menunjukkan kepada Anda bagaimana melakukan hal itu.

Anda akan mulai dengan file HTML tunggal (dengan stylesheet terpisah) dan mengubahnya menjadi tema WordPress dengan beberapa file template dan dengan berbagai hook, fungsi, dan tag template yang disertakan untuk memanfaatkan loop, menu, widget, dan lainnya.

Dalam tutorial pertama ini, saya akan menunjukkan kepada Anda bagaimana mempersiapkan HTML Anda sebelum mengonversinya ke PHP untuk membuat tema, yang akan kita bahas nanti di serial ini.


Apa yang Akan Anda Butuhkan

Untuk tutorial ini, yang Anda butuhkan hanyalah alat dasar untuk mengedit HTML:

  • Editor kode pilihan Anda
  • Browser untuk melihat hasil pekerjaan Anda

1. Mengapa Mempersiapkan HTML Anda?

Secara teori, Anda dapat mengambil HTML yang valid, menambahkan tag template yang benar dan sebuah loop dan mengubahnya menjadi sebuah tema, tetapi saya akan merekomendasikan untuk menjadi sedikit lebih menyeluruh dari itu.

Alasannya adalah WordPress akan menambahkan elemen dan kelas HTML saat Anda mulai menambahkan fitur seperti menu dan widget, sehingga masuk akal untuk bekerja dengan elemen dan kelas tersebut pertama kali. Saya menjabarkan kelas dan ID yang dibuat oleh WordPress dalam tutorial sebelumnya, jadi Anda mungkin ingin membiasakan diri dengan yang sebelumnya.

Alasan lainnya adalah untuk memastikan bahwa markup Anda sesuai standar dan ditulis dalam HTML5. Jika Anda mengonversi situs statis lama ke WordPress, Anda mungkin bekerja dengan kode lama yang ada dalam versi HTML sebelumnya dan yang, sejujurnya, perlu merapikannya.

Saya tidak dapat memberi tahu Anda bagaimana Anda harus merapikan markup Anda, tetapi saya dapat memberi Anda saran tentang cara menggunakan HTML5 dengan WordPress dan menyusun struktur dokumen Anda.


2. HTML5 dan WordPress - Penataan Markup Anda

Ada sejumlah elemen HTML5 seperti <article> dan <aside> yang memiliki tempat-tempat yang jelas dimana mereka digunakan dalam tema WordPress - saya sudah menulis blog tentang ini, tetapi pemikiran tentang bagaimana masing-masing ini harus digunakan terus berkembang, jadi gunakan penilaian Anda sendiri.

Dalam file HTML yang akan saya kerjakan untuk tutorial ini, strukturnya adalah sebagai berikut:

Seperti yang Anda lihat ini menggunakan sejumlah elemen HTML5 serta beberapa yang mendahului HTML5. Di bagian selanjutnya dari tutorial ini, saya akan menunjukkan kepada Anda bagaimana membagi struktur ini ke dalam file template, tetapi untuk sekarang simpan saja semuanya dalam satu file bernama index.html.

Jika markup Anda belum terstruktur dengan cara yang sama dan tidak ditulis dalam HTML5, luangkan waktu untuk membuat perubahan yang relevan. Yang penting adalah memiliki area berikut dari halaman yang didefinisikan dengan jelas:

  • header - di <header>
  • konten - dalam hal ini, saya menggunakan <div id="content">. Saya sengaja menggunakan ID di sini bukan kelas sehingga saya dapat menggunakan ini sebagai jangkar bagi screen reader untuk melewati menunya.
  • sidebar (jika Anda memilikinya) - di sini saya menggunakan <aside class="sidebar">. Saya juga menambahkan kelas tambahan untuk penataan - semuanya berorientasi obyek sehingga dapat digunakan di seluruh tema dan halaman yang saya tambahkan nanti di WordPress.
  • footer - di <footer>. Saya cenderung menempatkan elemen lain di dalam footer saya yang membungkus area widget - saya menyebutnya <div class="fatfooter">. Ini berarti saya dapat menerapkan warna latar penuh lebar ke elemen footer sekaligus menjaga elemen .fatfooter terpusat di halaman.

3. Menambahkan Kelas dan ID yang Dihasilkan oleh WordPress

Langkah selanjutnya adalah bekerja melalui markup Anda dan menambahkan beberapa kelas dan ID yang akan dikeluarkan oleh tema akhir Anda.

Tahap ini tidak benar-benar mempengaruhi tema akhir Anda, karena kelas dan ID akan ditambahkan secara otomatis melalui fungsi PHP yang akan Anda tambahkan nanti. Namun, jika Anda menambahkan kelas dan ID yang tepat sekarang, Anda akan menggunakannya di stylesheet Anda, sehingga penataan Anda akan terus berfungsi setelah Anda mengonversi HTML ke tema WordPress.

Kerjakan setiap bagian markup secara berurutan.

Header

WordPress tidak secara otomatis menambahkan kelas dan ID ke nama situs dan deskripsi tetapi masuk akal untuk menggunakan yang konsisten dengan terminologi WordPress. Sisi kiri header berisi elemen div dengan nama situs dan deskripsi di dalamnya sebagai berikut:

Di sisi kanan desain saya adalah ruang untuk alamat atau nomor telepon atau mungkin kotak pencarian. Anda dapat memberi fleksibilitas lengkap pada pengguna tema Anda atas apa yang ditampilkan di sini dengan mengaturnya sebagai area widget. Saya akan menunjukkan cara membuat area widget nanti dalam serial tetapi untuk sekarang tambahkan kelas yang relevan:

Gambar

Hal terpenting untuk ditambahkan ke konten Anda adalah kelas untuk gambar. WordPress menghasilkan kelas untuk gambar berdasarkan bagaimana Anda menambahkannya ke Media Manager sehingga Anda perlu memastikan semuanya dimasukkan dalam tema Anda.

Dalam markup untuk halaman dummy saya ada dua gambar - satu besar dan yang lainnya medium dan float right.

Untuk yang pertama saya tambahkan:

Dan untuk yang kedua, saya tambahkan:

Perhatikan bahwa di tema akhir Anda, Anda akan menghapus kode untuk gambar-gambar ini karena mereka akan secara otomatis ditambahkan oleh WordPress, tetapi ada baiknya untuk memasukkannya sehingga Anda dapat mengatur penataannya dengan benar.

Setelah menambahkan kelas ke markup Anda, Anda perlu memastikan bahwa Anda telah melayani kelas gambar di stylesheet Anda, jadi tambahkan yang berikut:

Jika Anda melihat halaman contoh saya, Anda akan melihat bahwa gambar pertama adalah 100% dari lebar konten, dan gambar kedua float ke kanan dengan margin:

creating-wordpress-theme-from-static-html-images

Sidebar dan Footer

Sidebar dan footer juga akan berisi area widget sehingga Anda perlu menambahkan kelas yang relevan ke markup dan gaya Anda menggunakan yang ada di stylesheet Anda.

Markup sidebar adalah sebagai berikut:

Markup untuk footer berisi empat area widget, yang masing-masing dapat menampung lebih dari satu widget. Seperti yang Anda lihat di bawah ini, saya menambahkan kelas ke masing-masing yang memberi tahu browser yang mana itu, sehingga saya dapat menargetkan masing-masing untuk penataan nanti.


Ringkasan

File HTML Anda sekarang disiapkan dan siap dikonversi menjadi satu set file tema. Dalam tutorial berikutnya saya akan menunjukkan kepada Anda bagaimana membagi dan menambahkan beberapa PHP dasar.


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.