8. Templat Header

Tutorial  kali ini mengasumsikan Anda sudah menambahkan elemen HTML di file header.php Anda seperti yang diulas di Tutorial 5 : Struktur Template Dan Direktori.

Kalau file  header.php  belum ada isinya, silahkan kembali ke Tutorial 5 dan baca bagian yang berkaitan dengan header.php dan footer.php . Lalu kembali ke laman ini lagi setelah kode yang harusnya ada di header.php Anda salin.

Bagian Kepala (Head)

Kalau mengikuti kaidah dokumen HTML, laman theme yang masih kosong secara teknis invalid. Kenapa begitu? Hal ini dikarenakan dokumen tersebut kehilangan tag “Doctype” yang diperlukan oleh perambah untuk menterjemahkan tag HTML. Seterusnya kita akan menandai dokumen web yang dibangun menggunakan DOCTYPE HTML5. HTML5 saat ini sudah diimplementasikan ke WordPress Theme.

DOCTYPE

Apa pentingnya DOCTYPE? Setiap mengawali dokumen HTML, tag DOCTYPE wajib dicantumkan di awal mark-up. DOCTYPE merupakan deklarasi elemen yang membantu perambah (browser) untuk mengetahui tipe HTML apa yang akan di uraikan (parse).

Merubah cara penulisan <meta> dan <link> CSS

Anda harus menghindari penggunaan tag berikut untuk HTML5

Selain itu anda juga harus menghindari penambahan properti elemen HTML seperti berikut align, bgcolor, height, width, size, type.

Kita lihat lagi header.php, salin kode berikut di bagian paling atas.

Tag Doctype HTML telah ditambahkan di bagian atas header.php sehingga ia akan dikenali oleh perambah. Namun, saat ini perambah terbaru misalnya Internet Explorer 8, tag HTML pembukanya mempunyai ID khusus yaitu  “ie8”. Ini memungkinkan kita untuk membuat CSS yang diarahkan hanya untuk IE8 saja tanpa harus membuat file CSS yang terpisah.

Lanjutkan menyalin kode berikut dibawah tag <!Doctype HTML>.

Kode diatas memerintahkan kalau perambah terdeteksi sebagai  IE8, tag HTML dengan ID “ie8” akan dijalankan jika tidak maka bukan HTML versi “ie8” yang dijalankan.

 

Kondisional lainnya bisa ditambahkan jika memang perlu misalnya untuk antisipasi perambah versi lama. Adanya pengkondisian ini dilakukan supaya tampilan laman web tidak berubah atau malah berantakkan karena spesifikasi HTML perambah yang berbeda atau karena kita menerapkan teknologi script terbaru yang tidak didukung oleh versi sebelumnya.

Sekarang dilanjutkan ke bagian  <head>  Theme. Bagian  <head> mengandung meta informasi mengenai laman web. Biasanya beberapa atribut tambahan diberikan misalnya judul dokumen terlihat di bagian paling atas browser Anda atau di laman hasil pencarian, selain itu ada kaitan ke file stylesheets (CSS) dan RSS feeds.

Salin kode berikut di bagian bawah setelah kode yang tadi disalin.

Penjelasan tiap bagian sbb:

Tag Meta

 

Ini adalah meta-informasi mengenai isi atau content. Baris pertama menampilkan karakter yang digunakan oleh theme. Baris kedua adalah lebar viewport dari perangkat yang digunakan (misalnya desktop, notebook, tablet,  iPhone, iPad, dll).

Title

Tag  <title> akan ditampilkan di bar browser paling atas. Bagaimana judul ini akan tampil tergantung pada halaman yang sedang dilihat .

Untuk tiap laman theme kecuali laman depan (front page), laman yang sedang dilihat akan menampilkan judul artikel atau post diikuti dengan separator | di kanan . Fungsi  wp_title() melakukan hal ini secara otomatis kemudian diikuti dengan nama blog dengan menggunakan fungsi  bloginfo() .

Di halaman depan, cara menampilkan judul situs dan deskripsinya berbeda dibandingkan dengan laman dengan susunan : judul situs, tanda pemisah, dan deskripsi situs. Makanya ada kondisional untuk penampilan judul.

Pertama variabel  $site_description dinyatakan untuk menyimpan deskripsi situs untuk digunakan nanti. Di PHP, variabel diawali dengan tanda dolar  “$”. Jadi  $site_description nilainya sama dengan nilai yang diambil fungsi  get_bloginfo( 'description', 'display' ); returns. Perhatikan tanda berhenti semi-colon (“;”) harus ada. Jika mendeklararikan variabel di PHP pastikan diakhiri dengan tanda titik koma atau semi kolon ” ; “.

Jadi kita punya kondisi sederhana yang kalau diucapkan dengan bahasa sehari-hari dibaca : “Kalau situs punya deskripsi dan (pengunjung) sedang ada di laman utama, laman depan atau  front page, tampilkan deskripsi situs.”

Akhirnya kita tambahkan nomor laman lama sebagai  “older post” .

 

Baris pertama menambahkan dukungan untuk XFN, dan baris kedua memberikan pranala untuk pingback.

Baris selanjutnya merupakan kondisional tambahan untuk mengaitkan file JavaScript yang memungkinkan versi lama Internet Explorer mengenali elemen baru HTML5 dengan emmanggil html5.js, dan itu berlaku untuk pengguna  IE 8 atau versi sebelumnya.

Untuk kondisi tersebut dibuat folder tambahan bernama js/ di folder theme wptutorial/dan menempatkan file  “html5.js” di folder js/. Silahkan unduh file html5.js atau ambil di folder theme yang dibuat dengan underscores.com .

Selanjutnya kita lihat fungsi :

Ini merupakan pengait atau hook yang dibutuhkan untuk memanggil fungsi-fungsi WordPress yang berkaitan dengan bagian header. Selanjutnya adalah mulai membuka bagian utama laman HTML dengan fungsi body_class () milik WordPress .


 
Kode diatas merupakan tag body untuk theme yang sedang dibuat.  Fungsi body_class() menambahkan class CSS kedalam body tag yang sudah disesuikan dengan style theme dengan berbagai kondisi .
Berikut ini contoh yang tampil di body tag yang secara deskriptif menambahkan informasi class di tag body laman web.

 
Single post menunjukkan kalau kita berada di laman single dimana content artikel ditayangkan . Post yang tampil berupa tampilan standar dengan aturan class  “post-format-standard” . Untuk tiap templat laman, class body akan berubah-ubah sesuai dengan penggunaannya apakah di laman arsip (archives.php), laman page, laman depan, laman hasil pencarian, dll.

Header Section

Saat akan diulas bagaimana bagian-bagian kepala halaman ditempatkan untuk posisi logo,  deskripsi situs, dan menu . Bagian ini sering disebut header section atau blok-blok khusus yang disediakan untuk judul, deskripsi, dan deretan menu.

Di file header.php terdapat tag  hgroup , di dalam tag ini kita akan tambahkan judul dan deskripsi . Sisipkan kode judul dan deskripsi di dalam tag hgroup sehingga menjadi sbb;

 

Dalam kode diatas digunakan kode templat WordPress  home_url(). Fungsi itu digunakan untuk mengambil  URL utama dari blog  WordPress.

Untuk memanggil nama blog dan deskripsi digunakan fungsi bloginfo(). Fungsi ini juga sebelumnya kita gunakan ketika mencetak tag title (jufa catat perlunya escaping dengan esc_attr() di atribut  “title” dari pranala pada judul situs).

Bloginfo()

Fungsi bloginfo() dapat digunakan untuk mengambil lebih dari  21 informasi berbeda tentang blog yang kita miliki. Informasi tersebut antara lain :

Memahami hal ini Anda akan mudah memahami bagaimana cara WordPress Theme bekerja .

Jadi tidak sulit sebenarnya, prinsipnya kita gunakan struktur HTML kemudian kita panggil tag templat WordPress yang ditulis dengan PHP dan kemudian ditampilkan di layar perambah menjadi laman web. Dengan menggunakan PHP laman statis HTML menjadi lebih dinamis dan  isi (content) maupun file layout css bisa dipanggil dari database atau folder direktori yang dapat digunakan terus menerus. Bayangkan kalau semua laman situs dibuat dengan html statis berapa banyak dibutuhkan untuk mengelola pranala tiap laman atau untuk melakukan updating. CMS seperti WordPress akhirnya menjadi solusi menampilkan website maupun blog lebih dinamis setiap waktu.

Selanjutnya, setelah tag  <nav>, tambahkan kode berikut :

 

dan kemudian kita tambahkan menu kustom yang telah kit abuat sebelumnya di tutorial Membuat Fungsi Theme :

 
Mudah kan , akhirnya bagian seksi <nav> akan menjadi sbb :

 
Jika kita buat banyak menu nav di  functions.php, kita dapat tambahkan juga dengan cara yang serupa diatas, di lokasi dimana kita inginkan menu tampil ( dan pastikan untuk mengubah  “primary” di  ‘theme_location’ => ‘primary’ untuk dicocokkan dengan nama menu tambahan).

Sekarang kita coba buka kembali file  functions.php dan menambahkan beberapa fungsi baru untuk mengambil CSS stylesheet dan beberapa script  JavaScript. Buka file functions.php  dan tambahkan fungsi berikut di bagian akhir file .

Kita gunakan fungsi WordPress (catatan nama wp_ berarti fungsi core WordPress bukan buatan kustom yang ada di theme)  wp_enqueue_style() dan  wp_enqueue_scripts() untuk mengambil file CSS stylesheet dan  JavaScript . Cara ini lebih praktis ketimbang melakukan kaitan langsung hard-coding ke file  header.php.

Di akhir fungsi kita tautkan atau kita hook fungsi theme wptutorial_scripts() ke fungsi WordPress  wp_enqueue_scripts(),  sehingga secara dinamis menambahkan pranala panggilan ke file stylesheet dan  scripts ke dalam bagian header.

Kita tinjau fungsi komentar berikut .

 

Disini kita mengambil script  comment-reply.js (asalny adari bundel aplikasi WordPress) yang memindahkan comment form dibawah komentar yang kita tanggapi ketika kita klik pranala  “reply” .
Catat bahwa kita hanya memanggil  comment-reply.js jika kita ada di laman single post atau page, komentar terbuka (tidak di close), dan rangkaian tanggapan komentar bertingkat dibolehkan. Jadi gak ada yang sia-sia karena kalau tidak diperlukan script tidak akan dipanggil .

Selanjutnya fungsi navigasi :

 

Disini ada dua pilihan, tapi ini pilihan jadi bisa dihapus atau dibuang kalau tak perlu, yaitu script navigasi  navigation.js, akan menyesuaikan menu navigasi utama menjadi menu yang  mobile-friendly jika perangkat terdeteksi menggunakan layar yang lebih kecil. Kedua script  key-board-image-navigation.js, menambah kemampuan navigasi dengan gambar menggunakan kunci panah kanan atau kiri di keyborad. Script ini hanya akan diambil di laman templat single, untuk laman-laman yang melampirkan gambar (image attachment pages).

Script selanjutnya adalah script yang memerlukan  jQuery. Catat bagaimana  “jquery” diteruskan sebagai parameter bersama dengan fungsi the wp_enqueue_script() . Cara ini mengatakan kepada WordPress bahwa script tergantung pada pustaka jQuery. Akibatnya, WordPress juga haru smengambil pustaka  jQuery. Theme tidak perlu punya pustaka jquery sendiri karena sudah disediakan WordPress berupa bundel berbagai pustaka JavaScript dan default script. Jika diinginkan memasukkan script yang menurut pengembang theme bagus dipakai, yang dilakukan hanya menambahkannnya ke fungsi wptutorial_scripts dan mengambilnya dengan cara yang sama. 

Tutorial Templat Header dicukupkan  sampai disini. Bagi yang ingin menggunakan script navigation.js dan keyboard-image-navigation.js, silahkan ditambahkan. Masukkan file tersebut di direktori js/ dan unduh di Github : navigation.js dan keyboard-image-navigation.js.

Bagian-bagian lainnya selanjutnya akan kita bahas.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *