Template page pada wordpress

membuat tema wordpress

Apa itu template page?

Template page adalah jenis template file tertentu yang dapat diterapkan ke halaman atau kelompok halaman tertentu.

Karena template page adalah jenis templat file tertentu, berikut adalah beberapa fitur pembeda template page dengan yang lainnya:

  • Template page digunakan untuk mengubah tampilan dan nuansa halaman tertentu.
  • Template page dapat diterapkan ke satu halaman, bagian halaman, atau kelas halaman.
  • Template page umumnya memiliki tingkat spesifik yang lebih tinggi, menargetkan satu halaman atau sekelompok halaman. 
    Misalnya, template page bernama  page-about.php lebih spesifik dari pada template file page.php karena hanya akan mempengaruhi halaman dengan slug “about”.
  • Jika template page memiliki nama template custom, pengguna WordPress dapat mengedit halaman dengan kendali penuh atas template apa yang akan digunakan untuk merender halamannya.

Kegunaan template page

Template page digunakan untuk menampilkan konten dinamis pada sebuah halaman, misalnya halaman personal, portofolio, acara dan yang lainnya, atau mungkin Anda ingin memutuskan tampilannya terlihat berbeda dengan cara tertentu.

Misalnya, Anda dapat membuat template page untuk:

  • lebar penuh
  • satu kolom
  • dua kolom
  • tiga kolom
  • tanpa sidebar
  • dua kolom dengan sidebar di sebelah kanan
  • dua kolom dengan sidebar di kiri
  • dll

Hierarki template page

Seperti yang kita pelajari sebelumnya di  Template Hierarki, template file page digunakan untuk membuat halaman static (page post-type). Perhatikan bahwa tidak seperti jenis posting lainnya, page khusus pada WordPress menggunakan jalur berikut:

  1. custom template file – Template halaman yang ditetapkan ke halaman. 
  2. page-{slug}.php – Digunakan jika slug halaman adalah blog-travel misalnya, jadi halaman akan terlihat seperti page-blog-travel.php.
  3. page-{id}.php – Digunakan jika ID halaman 15 misalnya, jadi halaman akan terlihat seperti page-15.php.
  4. page.php
  5. singular.php
  6. index.php
Informasi: ada juga template yang ditentukan WordPress bernama  paged.php. Ini  tidak  digunakan untuk jenis posting halaman melainkan untuk menampilkan beberapa halaman arsip.

Template page & kontrol pengguna

Jika Anda berencana membuat template page khusus untuk tema Anda, Anda harus memutuskan beberapa hal sebelum membuatnya:

  • Apakah template page untuk satu halaman tertentu atau untuk semua halaman manapun
  • Tipe kontrol pengguna apa yang akan disediakan untuk template tersebut

Setiap template page custom yang telah dibuat memiliki nama template dan dapat dipilih oleh pengguna saat mereka membuat atau mengedit halaman. Pengguna dapat memilih di Pages> Add New> Attributes> (Nama Template) . 

Sebagai contoh, jika Anda ingin memiliki template khusus untuk halaman “about” misalnya, mungkin tidak tepat untuk menamai template page itu “Template About” karena akan tersedia secara global untuk semua halaman.

Sebagai solusinya, buat template sekali pakai  dan WordPress akan merender template page tersebut setiap kali pengguna mengunjungi halaman tersebut.

Membuat template page custom global

Jika Anda berencana membuat sebuah template halaman untuk diterapkan ke suatu halaman atau kelompok halaman tertentu maka anda bisa membuat template page custom global.

Metode cepat dan aman untuk membuat template page custom global dengan membuat salinan  page.php dan membuat file baru. Silakan edit struktur halaman HTML anda sesuai dengan kebutuhan Anda.

Buat file baru dan beri nama page_full.php, lalu tulis komentar PHP dibagian atas file dan jangan lupa beri nama template tersebut. Untuk nama template sendiri bebas.

Tips: Sebaiknya pilih nama yang mendeskripsikan fungsi template karena namanya terlihat oleh pengguna WordPress saat mereka mengedit halaman. Misalnya, Anda bisa memberi nama template Anda seperti Homepage, Blog, Portofolio dll
<?php
/**
* Template Name: Full Width 
*
* @package Hendky
* @subpackage Hendky
* @since Hendky 1.0
*/
Penting: Jangan gunakan page- sebagai nama awalan file, karena WordPress akan menafsirkan nama file seperti ini sebagai template khusus page-{slug}.php. Silakan baca kembali template hierarki.

Silakan buka dashboard admin lalu klik Pages> Add New> Attributes> (Full Width) Anda akan melihat template yang baru Anda buat. Di sinilah pengguna dapat mengakses template halaman global.

contoh dari template page custom
Informasi: Daftar pilihan template memiliki lebar maksimum 250px, sehingga nama yang lebih panjang mungkin terpotong.

Membuat template page custom untuk satu halaman tertentu

Seperti yang sudah dijelaskan di postingan template hierarki, Anda dapat membuat template untuk suatu halaman tertentu yang sesuai dengan page-{slug}.php.

Untuk membuat template tersebut silakan salin file page.php dan buat file baru, lalu edit struktur halaman HTML anda sesuai dengan kebutuhan Anda.

Sebagai contoh: buat file bernama page-about.php:

Informasi: page-about.php about disini berarti slug.
<?php get_header(); ?>

<h1>About</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus nesciunt</p>

<?php get_footer(); ?>

Silakan buka dashboard admin lalu klik Pages> Add New> Lalu buat halaman. Jangan lupa berikan url sesuai dengan slug pada file. Pada contoh ini slugnya adalah about

Sebagai contoh url saya terlihat seperti ini: http://localhost/coding/testing/about

http:// = skema
localhost = domain
coding = path
hendky = nama tema
about = slug atau url (pada halaman atau page)

Membuat template page custom global untuk tipe post tertentu

Secara default, template page custom global akan tersedia untuk jenis posting “halaman”. Akan tetapi Anda bisa menerapkannya pada jenis posting tertentu.

Metode cepat dan aman untuk membuat template page custom global dengan membuat salinan  page.php atau single.php dan membuat file baru. Silakan edit struktur halaman HTML anda sesuai dengan kebutuhan Anda.

Buat file baru dan beri nama page_full.php misalkan, lalu tulis komentar PHP dibagian atas file, jangan lupa beri nama template dan jenis post type. Untuk nama template sendiri bebas.

Tips: Sebaiknya pilih nama yang mendeskripsikan fungsi template karena namanya terlihat oleh pengguna WordPress saat mereka mengedit halaman. Misalnya, Anda bisa memberi nama template Anda seperti Homepage, Blog, Portofolio dll
<?php
/**
* Template Name: Full Width
* Template Post Type: post, page, event 
*
* @package Hendky
* @subpackage Hendky
* @since Hendky 1.0
*/

Untuk membuat template page custom global agar didukung di jenis posting tertentu, tinggal masukan Template Post Type yang akan di dukung, sebagai contoh diatas Template Post Type: post, page, event

Penting: Jangan gunakan page- sebagai nama awalan file, karena WordPress akan menafsirkan nama file seperti ini sebagai template khusus page-{slug}.php. Silakan baca kembali template hierarki.

Silakan buka dashboard admin lalu klik Posts> Add New> Attributes> (Full Width) Anda akan melihat template yang baru Anda buat. Di sinilah pengguna dapat mengakses template halaman global.

template page custom global posts
Informasi: Daftar pilihan template memiliki lebar maksimum 250px, sehingga nama yang lebih panjang mungkin terpotong.

Mengidentifikasi template page

Jika template Anda menggunakan fungsi body_class() tersebut, WordPress akan mencetak kelas dalam tag body untuk nama kelas jenis posting (page), ID halaman ( page-id-{ID}), dan template halaman yang digunakan. 

Secara default  page.php, diberi nama kelas page-template-default:

<body class="page page-id-15 page-template-default">
Informasi: Template khusus ( page-{slug}.php atau  page-{ID}.php) juga mendapatkan kelas  page-template-default 

Saat menggunakan template halaman kustom, kelas  page-template akan mencetak bersama dengan kelas yang menamai template tertentu. Misalnya, jika file template halaman kustom Anda dinamai sebagai berikut:

<?php
/* Template Name: Full Width */

Kemudian rendering HTML yang dihasilkan akan seperti berikut:

<body class="page page-id-15 page-template page-template-full-width-php">

Perhatikan page-template-full-width-php kelas yang diterapkan ke tag body.

Leave a Reply

Your email address will not be published. Required fields are marked *