Templat Halaman Dinamis di WordPress, Bagian 1

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Templat halaman WordPress adalah cara yang hebat untuk sepenuhnya mengganti cara ditampilkannya halaman web tertentu. Anda bisa menggunakannya untuk menambahkan sejumlah besar fungsionalitas ke situs Anda.

Meskipun demikian ada satu keterbatasan, yakni templatnya 'statis'. Anda tidak bisa mengubahsuai atau mempengaruhi perilakunya dengan cara apapun. Anda hanya bisa memilih untuk mengaktifkan templat halaman atau tidak. Secara default, sebuah templat halaman akan membawa fungsi yang pasti, misalnya menampilkan peta situs, atau menghapus bilah samping untuk menampilkan halaman yang lebarnya penuh.

Dalam seri tutoriaal ini, saya akan menunjukkan cara Anda bisa memperluas templat halaman agar lebih fleksibel, meningkatkan fungsionalitasnya dengan hebat. Akan saya mulai dengan mengenalkan cara membuat halaman standar melalui tema anak, sebelum melanjutkan ke pendekatan yang lebih fleksibel yang saya akan membuat templat halaman dinamis untuk tujuan umum.

Terakhir, Ana akan saya tunjukkan tiga contoh dunia nyata templat halaman yang bekerja sepenuhnya. Saya juga akan membahas topik-topik tingkat lanjut seperti cara menugaskan templat halaman ke jenis kiriman tertentu.

Ingin Bisa Mengikuti?

Untuk bisa mengikuti seri tutorial ini, Anda membutuhkan situs WordPress dengan akses admin. Sampai saat ini cara termudah untuk melakukannya adalah dengan menggunakan local development environment. Editor teks khusus juga berguna tetapi tidak esensial.

Jika Anda kebetulan mengembangkan WordPress melalui server jarak jauh makan Anda harus bisa mengedit file tema melalui admin WordPress, atau mengedit file secara lokal dan menggunakan perangkat lunak FTP untuk mentransfernya kembali ke server. Untuk mudahnya, saya akan mengasumsikan bahwa Anda bekerja dengan WordPress secara lokal di sepanjang tutorial ini.

Untuk mengimplementasikan halaman kita, saya akan menggunakan tema anak yang berbasis pada tema induk Twenty Seventeen, yang (pada saat penulisan) adalah tema default terkini WordPress. Jadi jika Anda mengikuti tutorial ini, sebaiknya Anda sudah memasang ini sebelum melanjutkan.

Anda bisa menggunakan tema anak berdasarkan tema induk lainnya jika Anda menginginkannya, tetapi Anda harus memodifikasi beberapa kode untuk membuatnya bekerja dengan lancar pada tema tertentu Anda. Meskipun metode dasarnya kebanyakan sama untuk tema anak mana saja.

Templat-Templat WordPress

Sebelum belajar cara membuat templat halaman yang lebih fleksibel, mari melihat beberapa detail dasar.

WordPress menggunakan hirarki templat untuk menentukan templat mana yang me-render halaman yang dibuka. Templat yang digunakan untuk sebagian besar skenario adalah page.php, tetapi bisa berbeda jika Anda menampilkan halaman dengan ID atau slug tertentu. Meskipun demikian, jika Anad memilih templat halaman untuk halaman tertentu, ini akan selalu digunakan dalam preferensi, yang sangat memudahkan untuk mengubahsuai halaman apa saja dengan menggunakan templat.

Berikut adalah beberapa contoh umum templat halaman WordPress yang biasa digunakan:

Formulir Kontak
Portofolio
Tanya Jawab Umum (FAQ)
Halaman 404 Sesuaian
Halaman Login Sesuaian
Peta Situs
Halaman Lebar Penuh
Halaman Kiriman Blog
Halaman Widgetized
Dan banyak lagi...

Saya bisa melanjutkan daftar itu, tetapi intinya Anda memahami gagasannya. Templat halaman itu keren! Anda bisa menggunakannya untuk hampir semua kebutuhan.

Jika Anda telah menggunakan WordPress cukup lama, kemungkinan besar Anda telah menggunakan satu atau lebih contoh di atas. Sebagian besar tema mengandung templat halaman untuk melengkapi fungsionalitas tema, dan Anda bisa dengan mudah menambahkan milik Anda sendiri melalui tema anak. Saya akan menjelaskan cara melakukannya sebentar lagi.

Templat halaman sangat bermanfaat karena memberikan Anda kontrol penuh terhadap seluruh halaman. Anda bisa tidak memakai kepala teks, catatan kaki, dan/atau bilah samping jika Anda mau. Inilah salah satu alasan mengapa templat halaman lebar penuh sangat umum karena begitu mudah memanipulasi bilah samping melalui templat halaman.

Untuk melihat semua templat halaman yang saat ini tersedia, buka editor halaman WordPress dan akses drop down Template melalui meta box Page Templates. Pilih saja templat halaman yang Anda ingin tambahkan, dan sekalinya halamannya telah diperbarui, pembaruannya akan bisa dilihat di waktu berikutnya halaman itu dilihat.

Menambahkan Templat Halaman Melalui Tema Anak

Sebagaimana disebutkan di atas, kita akan menggunakan tema anak WordPress sesuaian untuk mengimplementasikan semua templat halaman di sepanjang tutorial ini. Saya akan memulai dengan tema anak dasar dan templat halaman, kemudian menambahkan lebih banyak kompleksitas sambil jalan.

Keseluruhan proses akan dibahas langkah demi langkah, jadi jangan khawatir jika Anda belum akrab dengan tema-tema anak dan/atau templat halaman. Anda akan akrab dengannya di akhir tutorial ini!

Ide dasar di balik tema anak adalah caranya memungkinkan Anda untuk mengubahsuai tampilan dan pesona tema Anda saat ini (disebut sebagai tema induk) dengan cara yang tidak akan dipengaruhi oleh pembaruan tema induk.

Jika kode ditambahkan langsung ke tema induk maka semua pengubahsuaian akan ditimpa dan hilang selama proses pembaruan terjadwal tema tersebut. Ini adalah poin penting karena tema yang dipelihara dengan baik akan diperbarui secara berkala. Untuk mengetahui lebih banyak tentang tema-tema anak, saya rekomendasikan Anda membaca dokumentasi resminya.

Menarik untuk dicatat bahwa secara teknis memungkinkan untuk mengunakan plugin WordPress untuk menambahkan templat halaman, tetapi akan jauh lebih sederhana jika menggunakan tema anak. Saya tidak ingin memperumit secara tidak perlu dengan kode-kode ekstra, jadi saya akan tetap pada tema anak untuk implementasi templat halaman kita.

Mari Kita Mulai!

OK, cukup teorinya—mari membuat templat awal halaman kita! Lokasinya nanti adalah di tema anak Twenty Seventeen sesuaian yang akan bertindak sebagai wadah templat halaman kita, jadi kita harus membuat tema anaknya terlebih dahulu.

Buka folder tema Anda dan buat folder baru bagi tema anak Anda. Menurut praktik terbaik WordPress, direkomendasikan Anda menamai folder tema anak persis dengan tema induk yang mendasarinya, ditambahi dengan '-child'. Karena folder tema induk kita bernama twentyseventeen, beri nama folder tema anak Anda twentyseventeen-child. Di dalam foldernya, buat file tunggal bernama style.css dan tambahkan blok komentar berikut di atas.

/*
 Theme Name:   Twenty Seventeen Child
 Description:  Twenty Seventeen Child Theme
 Author:       David Gwyer
 Template:     twentyseventeen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-seventeen-child
*/

Sekarang kita harus mereferensikan semua gaya dari tema induk Twenty Seventeen. Jika Anda pernah bekerja dengan tema anak sebelumnya, maka Anda mungkin terbiasa menambahkan pernyataan CSS @import langsung di bawah blok komentar. Ini tidak lagi dianggap praktik terbaik WordPress karena masalah kecepatan. Kita akan melakukan yang lebih efisien yakni mengantrikan gaya tema induk.

Di dalam folder root tema anak, buat file functions.php dan masukkan kode berikut untuk mengatur kontainer kelas kosong. Kelas ini akan kita gunakan untuk semua kode pengaturan.

<?php

/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {

    /**
     * Register hooks.
     */
    public function init() {
        // ...
    }
}

$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

Catatan: Statement PHP penutup tidaklah penting, tetapi bisa ditambahkan jika dikehendaki.

Sekarang tambahkan hook dan callback untuk mengantrikan gaya tema induk Twenty Seventeen, daripada mengimpornya langsng ke dalam file style.css. Lakukan ini dengan menambahkan dua metode kelas baru.

<?php

/**
 * Register hooks.
 */
public function init() {
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
}

/* Enqueue parent theme styles. */
public function enqueue_parent_theme_styles() {
  wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
}

Simpan perubahan Anda dan aktifkan tema anak. Sekarang Anda memiliki tema anak Twenty Seventeen anak yang berfungsi penuh tetapi sederhana. Untuk mengetes apakah ini bekerja dengan baik, tambahan sebaris CSS custom ke style.css.

1	* { color: red !important; }

Jika semuanya berjalan dengan baik, Anda akan melihat teks situs Anda kini berwarna merah menyala yang indah!

Jangan lupa untuk menghapus uji CSS sebelum melanjutkan. Sekarang tema anak sudah aktif, kita bisa mulai mengimplementasikan templat halaman pertama kita.

Menambahkan Templat Halaman Pertama Kita

Satu hal yang layak disebutkan adalah tentang lokasi Anda menyimpan templat halaman di dalam tema anak. Anda bisa menyimpan templat halaman secara langsung di dala folder root tema anak atau di folder tingkat atas. Tidak masalah mana yang Anda pilih; tiap lokasi bagus.

Tetapi jika Anda punya banyak templat halaman, Anda boleh memutuskan untuk menyimpannya dalam suatu folder untuk tujuan pengorganisasian. Nama folder tidaklah penting, tetapi harus berlokasi langsung di dalam folder root tema anak, jika tidak WordPress takkan mengenali templat halaman Anda. Untuk tutorial ini, saya akan menggunakan folder yang bernama page-templates.

Sekarang mari menambahkan templat halaman baru ke tema anak. Cara standar untuk melakukannya adalah dengan membuat salinan tema induk yakni file templat tema page.php dan memasukkannya ke tema anak. Anda bisa menamai filenya sesuka Anda, tetapi saya rekomendasikan untuk menyertakan sesuatu yang membuatnya dikenali sebagai templat halaman. Saya akan menggunakan test-page-template.php.

Begitu Anda selesai menyalin file page.php (dan mengganti namanya) ke folder page-templates, struktur tema anak akan terlihat seperti ini:

Buka test-page-template.php dan ganti blok komentar di bagian atas file dengan yang berikut ini.

<?php

/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

Langkah ini sangat penting karena blok komentar memberitahu WordPress untuk mengenali file sebagai templat halaman dan akan menambahkannya ke daftar templat halaman yang tersedia di layar editor halaman.

Kode templat halaman selengkapnya akan terlihat seperti ini.

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

get_header(); ?>

<div class="wrap">
    <div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

Mari mengetes templat halaman kita. Buka admin WordPress dan sunting halaman apa saja yang ada, atau buat halaman baru. Di layar editor halaman, pilih drop down Template dari meta box Page Attributes untuk menetapkan templat halaman kita ke halaman saat ini.

Dikarenakan kita sekedar menyalin file templat tema induk page.php, templat halaman sesuaian tidak melakukan apapun kecuali keluaran halaman saat ini, yang tidak terlalu berguna. Kita juga tidak butuh keluaran konten editor atau komentar, jadi hapus ini dari templat halaman while loop, dan tambahkan pesan sesuaian. Ubah konten while loop sebagaimana berikut.

1	<?php
2	while ( have_posts() ) : the_post();
3	echo "<p>This is our custom page template!</p>";
4	endwhile; // End of the loop.

Simpan ini dan tampilkan halamannya di front end.

Viewing the page template on the front-end

Catatan: Jika Anda tidak bisa melihat pesan sesuaian maka pastikan Anda telah memilih templat halaman sesuaian di editor halaman dan menyimpannya untuk memperbarui pengaturan.

Sekarang mari membuat templat halaman sesuaian kita sedikit lebih bermanfaat. Ubah pesan yang kita tambahkan di atas dengan kode berikut untuk membuat keluaran peta situs semua halaman yang diterbitkan.

<?php
while ( have_posts() ) : the_post();
	echo "<h2>Sitemap</h2>";
	echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
endwhile; // End of the loop.

Hasilnya adalah keluaran berikut.

Mudah saja mengetahui sebermanfaat apa templat halaman. Tetapi kita bisa melakukannya lebih baik lagi!

Kesimpulan

Sejauh ini, kita telah membuat tema anak dan menggunakannya untuk mengimplementasikan templat halaman standar. Pada tutorial berikutnya, akan saya tunjukkan Anda langkah demi langkah perluasannya, menunjukkan cara membuat templat halaman lebih fleksibel.

Secara khusus, kita akan membuat templat halaman dinamis untuk tujuan umum dengan menambahkan kontrol sesuaian ke layar editor halaman. Selanjutnya logika kontrol akan ditambahkan ke templat halaman agar kita bisa langsung mengubahsuai cara render templat halaman.

WordPress memiliki perekonomian yang sangat aktif. Terdapat berbagai tema, plugin, pustaka dan banyak produk lain yang membantu Anda membangun situs dan proyek Anda. Sifat sumber terbuka platform ini juga menjadikannya opsi hebat yang dengannya Anda bisa memperbaiki keahlian pemrograman Anda. Apapun kondisinya, Anda bisa melihat apa yang tersedia di Envato Marketplace.

Ini adalah tutorial pertama saya (berbaik hatilah!), jadi jangan ragu memberikan umpan balik yang mungkin ada dalam pikiran Anda di umpan komentar di bawah ini. Saya akan melakukan yang terbaik untuk menjawab semua pertanyaan.