Home > Wordpress > Lakukan Cara ini! untuk Membuat Template Wordpress Menjadi Keren!

Lakukan Cara ini! untuk Membuat Template Wordpress Menjadi Keren!

Membuat Template WordPress yang menarik tentu saja akan meningkatkan kunjungan ke Website yang telah kamu buat. Template WordPress digunakan untuk menambah fungsional dari segi tampilan atau layout WordPress, sehingga tampilan lebih menarik lagi.

Sebenarnya apa yang dimaksud dengan Template Wordpress?? Template WordPress merupakan gabungan dari beberapa file yang terdiri dari HTML, PHP, CSS, dan JavaScript/jQuery.

Template WordPress juga tersedia dalam keadaan gratis, tetapi kamu harus jauh lebih hati-hati, apalagi jika kamu memesan melalui developer, terkadang terdapat script backdoor yang memungkinkan si developer bisa masuk kapan saja ke web kamu. Script ditanam pada kode tema atau template, Sehingga *developer bisa saja melakukan deface dan meminta biaya tambahan untuk mengembalikannya. Untuk itu sangat disarankan untuk membuat sendiri Template yang kita inginkan

Membuat Template WordPrees sendiri akan mempermudah kamu dalam mengatur tatat letak yang konsisten di setiap halaman dan juga tampilan Website dapat dengan mudah di modifikasi.

Sebelum kamu mengubah Template sendiri, Kamu harus mengetahui Cara Instalasi template WordPress yang benar terlebih dahulu.

Pada tutorial kali ini, kita akan membahas mengenai Bagaimana Cara Membuat Template WordPress dengan Menggunakan HTML5, CSS3, dan desain responsive, Kemudian kita juga akan membahas mengenai Bagaimana Memisahkan Beberapa Bagian dari Template. Template sama dengan plugin, karena terpisah dari code utama WordPress.

Persiapan Awal untuk Membuat Template Wordpress

Hal yang harus dipersiapkan untuk membuat template wordpress:

Text editor (contohnya: Notepad++)
Localhost, Anda dapat menggunakan XAMPP (silakan ikuti tutorial cara instal XAMPP)
Instalasi WordPress aktif di localhost(silakan ikuti tutorial cara instal WordPress di localhost)

Apa itu HTML5 dan Kenapa Harus Menggunakannya

HTML5 adalah versi terbaru dari HTML yang dilengkapi dnegan berbagai fitur terbaru, Ketika melakukan akses website pada komputer, laptop, tablet, bahkan HP tampilannya akan jauh lebih baik.

Terdapat elemen baru pada HTML5, contohnya Jika pada halaman HTML untuk footer didefinisikan dengan elemen

dan pada halaman HTML5 untuk footer didefiniksikan dengan elemen generik

Secara Basic terdapat kumpulan dokumen HTML5:

Desain Responsive

Desain responsive pengertiannya adalah bahwa Website yang kamu miliki punya tampilan otomatis dengan format terbaik agar penggunaannya sesuai dengan layar perangkat yang digunakan.

Tatat letak dari Website secara otomatis akan merespon terhadap besar layar yang ada di perangkat yang digunakan oleh pengunjung. Tata letak konten berada di tempat yang pas, sehingga tidak ada konten yang melebihi layar atau bahkan terpotong.

Cara Membuat Template WordPress

Langkah 1: Pahami Tempat Penyimpanan Template dan File

Template WordPress tersimpan di dalam folder wp-content/themes/, yang kamu perlukan adalah memberi nama folder template yang unik, dan tidak boleh sama dengan folder tempat lain.

Template WordPress hanya dapat dibuat dengan dua file yaitu index.php dan style.css, File tersebut akan digunakan WordPress untuk menampilkan halaman danpostingan di Website.

Lalu harus ada postingan, halaman, dan bagian lain dari website sehingga menampilkan tata letak sesuai dengan yang diinginkan.

Setiap bagian dari website memiliki file tersendiri untuk menyimpan code HTML dan PHP, setiap file itu disebut template.

Ketika menggunakan jenis postingan khusus, kamu dapat membuat template yang hanya digunakan untuk jenis postingan tersebut. Jika ingin postingan dari kategori tertentu dengan tampilan berbeda, dapat menggunakan statemen if…then.. di dalam loop.

File template harus menggunakan nama yang sesuai dengan yang didefinisikan oleh dokumentasi WordPress.

Di bawah ini merupakan beberapa file template selain index.php:

header.php : isinya adalah code HTML untuk bagian atas halaman website, dimulai dengan code <!DOCTYPE html>
single.php : untuk menampilkan satu halaman dari blog
comments.php : untuk menentukan bagaimana komentar dan kolom komentar ditampilkan
footer.php : isinya adalah code HTML untuk menampilkan bagian bawah halaman website, termasuk

Daftar lengkap file template WordPress dapat di lihat disini

Langkah 2: Buat File Template dan CSS Stylesheet

Buat folder template-saya pada direktori …/themes/wp-content/

Pada folder template-saya silakan buat file-file berikut ini:
header.php
index.php
footer.php
functions.php
sidebar.php
single.php
page.php
style.css

Tambahkan beberapa informasi pada baris paling atas dari file style.css, agar dibaca WordPress dan ditampilkan di dashboard admin.

Informasi nya ditulis sebagai komentar CSS multi-line, setiap header ada pada barisnya sendiri, dimulai dengan kata kunci header.

Beberapa kata kunci header dapat digunakan untuk mendefinisikan informasi seperti author (nama kamu), author website, deskripsi dari template, nama dari template, versi template dan lain-lain. Lebih lengkap silakan cek WordPress Codex – File Header.

Silakan tambahkan code di bawah ini ke dalam file style.css:

Catatan: Untuk baris ke 7 dan 8 hanya dibutuhkan 
jika ingin mengupload template di WordPress.org. 
Jika hanya akan digunakan untuk website sendiri, tidak wajid di isi.

Template sudah muncul di halaman template dashboard WordPress. Terlihat tampilan seperti gambar dibawah ini:

{}}

Selanjutnya tambahkan code pada file CSS agar halaman Website mempunyai warna background

Tambahkan baris kosong setelah menutup komentar pada baris ke 10. Kemudian tambahkan code di bawah ini pada baris ke 11.

Entry pertama merupakan bagian terpenting dari responsive styling wildcard dan akan mencocokan setiap class tunggal yang ada di dalam dokumen HTML.

Entry kedua mengubah warna background, selain itu terdapat font default yang digunakan pada template.

Langkah 3: Tambahkan Code

Sebelum membuat tata letak template WordPress, kamu perlu menambahkan beberapa bagian code pada file-file template.

Kamu harus include file CSS dengan nama normalize.css. Perlu dingat bahwa Beberapa browser memiliki pengaturan default berbeda untuk halaman margin dan padding.

File normalize.css akan menetapkan jumlah atribute yang memastikan website akan tampil dengan baik pada semua browser, dan cara ini lah yang dipakai untuk membuat template WordPress supaya responsive.

1. functions.php

Buka file functions.php dan tambahkan code berikut:

Selanjutnya, aktifkan widget sidebar. agar link menu widget dapat di akses ke halaman dashboard dan bisa menambah widget.

Masih pada file functions.php, tambahkan code di bawah ini pada baris di bawah code sebelumnya.

Pendaftaran menu naviagasi kustom perlu dilakukan, caranya klik fitur Appearance > Menu pada dashboard admin. Lalu tambahkan code di bawah ini pada baris selanjutnya dari code sebelumnya.

Setelah itu silakan simpan file functions.php.

Buka file sidebar.php dan tambahkan code berikut ini, agar sidebar dan widget muncul pada template ketika get_sidebar() dipanggil.

Baris pertama untuk memberitahu WordPress jika tidak ada widget yang diaktifkan maka HTML sidebar tidak boleh ditampilkan.

Baris kedua untuk menetapkan atribut dari elemen yang berisi widget.

HTML5 menyediakan elemen

untuk sidebar.

Baris ketiga, merupakan function WordPress untuk menampilkan widget dan baris terakhir penutup statemen ‘if’.

Setelah itu simpan file sidebar.php.

Langkah 4: Buat Tata Letak untuk Template

header.php

File header.php merupakan bagian paling atas dari dokumen, dimulai dengan deklarasi DOCTYPE.

Semua dokumen HTML harus diawali dengan deklarasi DOCTYPE, fungsinya untuk memberitahu web browser agar mengenali dokumen tersebut.

Doctype HTML5 hanya berupa html. Untuk tag pembuka memerlukan atribut language, dan WordPress menyediakan function untuk memasukkan code bahasa yang benar selama instalasi.

Bagian title, untuk baris code digunakan untuk menampilkan nama dari website, diikut dengan statemen if…then… untuk menampilkan tagline dari website atau judul dari halaman atau postingan yang diakses.

Karakter merupakan operator kondisional PHP bernama ternary operator. Baris code is_front_page() merupakan function WordPress yang mengembalikan TRUE jika akses halaman depan, atau FALSE jika akses postingan atau halaman lain.

Function sebelum colon digunakan jika TRUE dikembalikan, dan function setelah colon digunakan jika FALSE dikembalikan.

Function bloginfo() digunakan untuk melakukan perulangan dengan parameter berbeda agar mendapatkan bagian lain dari infromasi database WordPress.

Sebelum tag ditutup dengan tag , Kamu harus memasukkan action hook wp_head() untuk memastikan function lain yang terlampir dijalankan.

Function body_class() akan menampilkan body sebuah class CSS default yang ditetapkan oleh WordPress. Baris terakhir akan menampilkan menu navigasi, apabila telah dibuat di dashboard admin.

Silakan masukkan code berikut pada file header.php:

Simpan perubahan pada file header.php.

index.php

index.php berfungsi untuk mendefinisikan homepage dan juga sebagai tampilan default. Apabila tidak ditemukan template yang spesifik, seperti single.php, page.php.

Digunakan juga template tags untuk memastikan code header (get_header), sidebar (get_sidebar) dan footer (get_footer) berada di dalam homepage.

Loop dari WordPress akan menampilkan daftar dari postingan. Selain itu juga akan menggunakan elemen HTML5 semantik

dan

Beberapa elemen akan memilik class, dimana akan dibuat pada file style.css.

Loop dimulai pada <?php if (have_posts()) : while (have_posts()) : the_post(); ?> dan berakhir di <?php endif; ?>. Di dalam loop, digunakan tag template berikut:

<?php the_permalink(); ?> : digunakan untuk output URL yang benar dari postingan yang diakses
<?php the_title_attribute(); ?> : digunakan untuk output judul dari postingan
<?php the_author(); ?> : digunakan untuk output dari nama author
<?php the_excerpt(); ?> : digunakan output kutipan dari postingan, dimana akan auto-generated jika tidak ditulis.

Simpan perubahan pada file index.php.

File footer.php berfungsi untuk mendefinisikan setiap halaman dan penutup dari tag HTML file template lain. Contoh dan masih terbuka dari header.php.

Lakukan include action hook wp_footer() untuk memastikan code akhir WordPress dan JavaScript ditambahkan pada halaman. Jika ingin login sebagai admin ketika mengakses homepage, postingan atau halaman,maka akan tampil bar admin.

Silakan tambahkan code berikut ke dalam file footer.php:

single.php

File single.php berbeda dengan index.php, single.php mendefinisikan tata letak ketika mengakses halaman tertentu pada website.

Silakan tambahkan code berikut ke dalam file single.php

Setelah code ditambahkan, silakan simpan dengan menekan tombol ctrl + S.

Untuk melihat hasilnya, silakan akses salah satu postingan.

page.php

File page.php mendefinisikan halaman yang ditampilkan ketika diakses, halaman ini berbeda dengan index maupun postingan.

Silakan tambahkan code berikut ini:

style.css

Tambahkan code css ke dalam file style.css yang sebelumnya sudah dibuat. Silakan tambahkan code berikut di bagian bawah bari code css yang sudah ada.

Media Querie

Tampilan depan belum responsive, terlihat ketika website diakses melalui perangkat seluler.

Agara ;ebih responsive, tambahkan code berikut pada file style.php di bagian bawah class .article-loop. Ini akan membuat bagian konten responsive.

Jika website diakses melalui tampilan mobile, untuk sidebar masih belum responsive, supaya sidebar berpindah ke bagian bawah konten, silakan tambahkan code berikut ini.

Updated on 09 May 2019