Buat Template Halaman Kustom dalam Tema WordPress

Salah satu nilai jual terpenting WordPress adalah ide tema. Satu tema menambah nilai besar pada desain dan fungsionalitas situs web. Namun, ada situs web yang memiliki desain berbeda pada halaman yang berbeda.

Sayangnya, beberapa tema WordPress membatasi pengguna untuk mengubah tata letak dan fungsionalitas untuk halaman berbeda dalam hierarki. Template halaman kustom WordPress memungkinkan pengguna untuk mengintegrasikan persyaratan kustom seperti sidebar kanan/kiri pada halaman tertentu, fungsionalitas ajakan bertindak tambahan, atau mungkin header unik untuk halaman arahan tertentu. Mari selami lebih jauh untuk melihat bagaimana template halaman kustom WordPress menampilkan berbagai jenis konten.

Template halaman WordPress kustom dapat digunakan untuk beberapa tujuan. Beberapa ide meliputi:

• Tampilkan postingan terbaru dari setiap kategori
• Sematkan Google Map atau skrip apa pun
• Daftar semua penulis.
• Gambar yang baru saja diunggah
• Halaman desain khusus untuk portofolio
• halaman kontak

Tampilan semua halaman dan posting yang dibuat di situs WordPress ditangani oleh file template bernama page.php . Membuat atau mengedit template halaman kustom di WordPress membutuhkan pengetahuan dasar tentang HTML, CSS, dan PHP.

Cukup buka editor teks apa saja dan rekatkan kode berikut di dalamnya.

 <?php /* Nama Template: HalamanTanpa Sidebar */ ?>

Baris kode di atas memberi tahu WordPress bahwa itu adalah file template bernama PageWithoutSidebar . Anda dapat menggunakan nama apa pun yang Anda inginkan. Sekarang simpan file ini sebagai PageWithoutSidebar.php . Sekali lagi Anda dapat menggunakan nama lain untuk file tersebut. Tapi jangan lupa untuk menjaga ekstensi sebagai .php

Sekarang, kita akan menguji file template yang baru kita buat.

Masuk ke panel hosting Anda. Dalam contoh ini, saya menggunakan Cloudways – Hosting WordPress terkelola tercepat. Cloudways mendukung aplikasi WordPress dengan opsi penyedia untuk AWS, DigitalOcean, GCP, Linode, dan Vultr. Arahkan ke folder /wp-content/themes . Buka folder tema Anda saat ini dan unggah file PageWithoutSidebar.php di sana.

Buka Panel Admin WordPress > Halaman > Tambah Baru . Anda dapat melihat template halaman kustom baru yang tercantum di sisi kanan.

Buat halaman baru dan atur templatnya ke PageWithoutSidebar. Setelah selesai, Publikasikan .

Buka halaman yang baru dibuat. Karena belum ada elemen desain dalam template, halaman kosong seperti gambar di bawah akan ditampilkan.

Ini menunjukkan bahwa template halaman kustom di WordPress berhasil diimplementasikan, sehingga Anda dapat membuat tema WordPress responsif kustom

Sekarang saatnya menambahkan beberapa baris kode untuk menampilkan konten halaman.

Untuk demo ini, saya akan membahas bagaimana Anda dapat menyesuaikan template halaman Twenty Sixteen default.

Tampilan default halaman dihasilkan oleh file page.php yang terletak di folder /wp-contents/themes/YOUR THEME/ . Buka page.php dan salin kode ini.

 <?php get_header(); ?>

<div class="content-area">
                <main class="site-main" role="main">
                                <?php
                                // Mulai perulangan.
                                while ( have_posts() ): the_post();

                                                // Sertakan templat konten halaman.
                                                get_template_part( 'template-parts/content', 'halaman' );

                                                // Jika komentar terbuka atau kami memiliki setidaknya satu komentar, muat template komentar.
                                                if ( comments_open() || get_comments_number() ) {
                                                                komentar_templat();
                                                }

                                                // Akhir dari perulangan.
                                sementara;
                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Rekatkan kode ini ke PageWithoutSidebar.php tepat di bawah baris kode ini.

 <?php /* Nama Template: HalamanTanpa Sidebar */ ?>

Simpan itu!

File PageWithoutSidebar.php lengkap Anda akan terlihat seperti di bawah ini.

 <?php /* Nama Template: HalamanTanpa Sidebar */ ?>

<?php get_header(); ?>

<div class="content-area">

                <main class="site-main" role="main">

                                <?php

                                // Mulai perulangan.
                                while ( have_posts() ): the_post();

                                                // Sertakan templat konten halaman.
                                                get_template_part( 'template-bagian/konten', 'halaman');

                                                // Jika komentar terbuka atau kami memiliki setidaknya satu komentar, muat template komentar.
                                                if ( comments_open() || get_comments_number() ) {

                                                                komentar_templat();

                                                }

                                                // Akhir dari perulangan.
                                sementara;

                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Kembali ke halaman Anda dan segarkan. Anda akan mengamati semuanya bekerja seperti pada tema default WordPress Twenty Sixteen.

Sekarang mari kita sesuaikan. Seperti yang Anda lihat ada sidebar di sisi kanan. Saya akan menghapusnya dari halaman ini saja. Semua halaman lainnya akan memiliki tampilan default dari tema Twenty Sixteen.

Buka file PageWithoutSidebar.php file. Gulir ke bawah hingga akhir file dan hapus :

 <?php get_sidebar(); ?>

Ini adalah baris kode yang mendapatkan sidebar pada halaman. Setelah menghapus garis, simpan . Buka URL halaman dan bilah sisi tidak ada lagi!

Seperti yang Anda lihat, bilah sisi telah berhasil dihapus dari halaman ini. Namun, perataan teksnya tidak bagus. Ada ruang kosong di sisi kanan. Cara mengatasinya adalah dengan membenarkan dan memperluas teks untuk mengisi layar.

Kembali ke PageWithoutSidebar.php dan temukan:

 <div class="content-area">

Cukup ubah " content-area " menjadi " site-content-fullwidth " dan selesai. Refresh halaman dan konten lebar penuh.

Masih penasaran mengapa saya membuat template halaman kustom padahal saya bisa mengedit file page.php dengan mudah? Cukup jelas bahwa jika file page.php diedit, semua halaman di situs web akan menunjukkan perubahan. Untuk menerapkan tampilan yang disesuaikan pada halaman tertentu, template halaman kustom di WordPress sangat berguna. Anda juga dapat menentukan peran pengguna khusus di WordPress untuk menetapkan hak istimewa yang berbeda kepada pengguna.

Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya dengan memposting di bagian komentar di bawah.