Cara Menggunakan WordPress Untuk Website – Waryanto mengikuti seorang penulis konten teknis, dia menyukai dunia teknis IT, pemasaran digital, dan blogging perjalanan. Ia suka berbagi hal-hal baru yang bermanfaat bagi orang lain.
Template WordPress merupakan gabungan dari beberapa file yang menentukan tampilan website Anda. File ini biasanya terdiri dari HTML, PHP, CSS dan JavaScript/jQuery. Sebenarnya ada banyak template website gratis yang bisa Anda coba.
Cara Menggunakan WordPress Untuk Website
Namun pada tutorial kali ini kita akan membahas cara membuat template WordPress menggunakan HTML5, CSS3 dan responsive design.
Website Terkenal Yang Menggunakan WordPress
Selain itu, Anda juga akan mempelajari cara memisahkan beberapa bagian model. Template sendiri sama dengan plugin, karena terpisah dari kode utama WordPress.
Penasaran dengan kursus selengkapnya? Mari kita simak dulu pengertian HTML5 agar lebih mudah mempelajari tutorial membuat template WordPress berikut ini.
HTML5 merupakan HTML versi terbaru yang dilengkapi dengan fitur-fitur terbaru dengan tampilan website yang lebih baik ketika website diakses di berbagai perangkat seperti komputer, laptop, tablet bahkan ponsel.
Kehadiran elemen HTML baru merupakan bagian dari perubahan pada HTML5. Misalnya, footer halaman HTML saat ini ditentukan oleh elemen
, yang memberi tahu browser web apakah konten merupakan bagian dari footer.
Cara Membuat Button Di WordPress Yang Mudah, Tanpa Coding!
Desain responsif berarti website Anda akan secara otomatis menampilkan format terbaik bagi pengunjung tergantung pada layar perangkat yang mereka gunakan.
Jadi tata letak website akan merespon ruang yang tersedia pada layar perangkat yang digunakan pengunjung. Konten akan berada di tempat yang tepat sehingga tidak ada konten yang terpotong atau melewati layar dan web terlihat bagus.
Untuk membuat template WordPress ini, Anda harus menyiapkan text editor seperti Notepad++, localhost seperti XAMPP, dan install WordPress di localhost.
Template WordPress akan disimpan di folder wp-content/themes/, jadi Anda perlu membuat nama folder untuk template tersebut. Dalam tutorial ini, kami memberi nama folder my-templates. Nama folder harus unik, artinya tidak boleh sama dengan nama folder model lain.
Cara Membuat Website Dengan Xampp Dan WordPress
Template WordPress dapat dibuat hanya dengan dua file yaitu index.php dan style.css dan akan digunakan oleh WordPress untuk menampilkan halaman dan postingan di website Anda.
Selanjutnya, Anda memerlukan postingan, halaman, dan bagian lain dari situs web untuk menampilkan tata letak yang Anda inginkan.
Setiap bagian dari website akan memiliki file tersendiri untuk menyimpan kode HTML dan PHP, setiap file disebut template.
Jika Anda menggunakan jenis postingan khusus, Anda dapat membuat templat yang hanya digunakan untuk jenis postingan tersebut. Jika Anda ingin entri dari kategori tertentu tampil berbeda, Anda dapat menggunakan pernyataan if…then.. di dalam loop.
Cara Membuat Website Di WordPress Dengan Cepat (instan)
Selanjutnya tambahkan beberapa informasi pada baris atas file style.css, maka akan dibaca oleh WordPress dan ditampilkan di dashboard.
Informasinya harus ditulis sebagai komentar CSS multi-baris, masing-masing header pada barisnya sendiri, dimulai dengan header kata kunci.
Ada beberapa kata kunci header yang dapat Anda gunakan untuk menentukan informasi seperti penulis (nama Anda), penulis situs web, deskripsi template, nama template, versi template, dll. Untuk kata kunci header lebih lanjut, silakan lihat Codex WordPress – File Header.
Catatan: Baris 7 dan 8 hanya diperlukan jika Anda ingin mengunggah template ke WordPress.org. Jika hanya akan digunakan untuk website Anda, sebaiknya jangan diisi.
Perbedaan Post Dan Page Pada WordPress
Pada langkah ini, template Anda akan muncul di halaman template dashboard WordPress Anda. Anda akan melihat pola seperti gambar di bawah ini.
Silakan tambahkan baris kosong setelah komentar penutup pada baris 10. Kemudian tambahkan kode di bawah ini pada baris 11.
Tempat pertama adalah bagian terpenting dari gaya responsif. * adalah karakter pengganti dan cocok dengan setiap kategori dalam dokumen HTML.
Pertama, sertakan file CSS bernama normalize.css. Beberapa browser memiliki pengaturan default yang berbeda untuk margin dan padding.
Cara Membuat Website Sendiri Dari Nol (panduan Pemula)
Filenormalize.css akan mengatur sejumlah properti untuk memastikan website Anda terlihat bagus di semua browser, berikut cara membuat template WordPress responsif.
Selanjutnya, aktifkan widget sidebar. Jika Anda tidak memasukkan kode ini, link menu widget tidak akan muncul di halaman dashboard WordPress dan Anda tidak dapat menambahkan widget.
Selanjutnya, Anda perlu mendaftarkan menu navigasi khusus untuk mengaktifkan fitur Appearance > Menu di panel kontrol. Silakan tambahkan kode di bawah ini ke baris berikutnya dari kode sebelumnya.
Selanjutnya buka file sidebar.php dan tambahkan kode berikut. Ini membuat sidebar dan widget muncul di model saat get_sidebar() dipanggil.
Cara Membuat Website Toko Online Gratis Menggunakan WordPress Untuk Pemula
Baris pertama memberitahu WordPress bahwa jika tidak ada widget yang aktif maka HTML sidebar tidak akan ditampilkan. Baris kedua mengatur properti elemen yang berisi widget.