Cara Membuat Template Halaman WordPress Kustom

Template halaman dalam tema WordPress membantu dalam menentukan tata letak halaman dalam sebuah situs web. Namun, mengubah template ini terkadang bisa menakutkan terutama untuk pemula. Untungnya, WordPress menawarkan beberapa fleksibilitas dalam hal templat halaman dengan memungkinkan Anda membuat templat halaman khusus di tema Anda.

Membuat templat halaman khusus untuk situs Anda memungkinkan Anda dengan mudah mengubah tata letak dan desain untuk situs Anda sesuai keinginan Anda. Ini juga memungkinkan Anda untuk menambahkan persyaratan khusus seperti menggunakan header yang berbeda untuk halaman yang berbeda. Perubahan ini sebenarnya dapat diterapkan di halaman yang berbeda atau satu halaman.

Dalam artikel ini, kita akan melihat apa itu templat halaman WordPress kustom, hierarki templat halaman default, serta cara membuat templat halaman WordPress kustom di tema Anda.

Daftar isi

Apa Itu Template Halaman WordPress Kustom

Hirarki Template Halaman WordPress

Membuat Template Halaman Kustom

• Cara membuat template kustom Global
• Membuat satu templat Halaman

Kesimpulan

Apa Itu Template Halaman WordPress Kustom

Templat halaman WordPress khusus adalah file templat yang memungkinkan Anda memiliki desain dan nuansa terpisah dari situs web Anda.

Sebagai contoh, jika Anda memiliki tema blog di situs Anda, Anda dapat membuat template khusus untuk situs Anda, yang tidak merender sidebar atau komentar. Anda juga dapat membuat templat untuk halaman di mana Anda memiliki templat yang merender konten dalam tata letak kotak dan lainnya dalam tata letak lebar penuh. Tidak ada batasan jumlah template halaman yang dapat Anda buat.

Render halaman dikendalikan oleh file page.php di WordPress. Oleh karena itu, file ini terbentuk sebagai basis default untuk merender konten halaman Anda dan terletak di dalam root file tema Anda seperti yang diilustrasikan di bawah ini.

Jika ada template halaman yang lebih spesifik, maka hierarki Template akan dimulai.

Hirarki Template Halaman WordPress

Hirarki templat halaman menentukan file templat mana yang dipilih WordPress saat menampilkan halaman, bergantung pada sifat permintaan yang dibuat serta keberadaannya di dalam tema.

Hirarki template WordPress default adalah sebagai berikut:

Template Halaman : WordPress memeriksa template yang ditetapkan ke halaman dan menggunakan template ini di dalam halaman

page-{slug}.php : Jika tidak ada template yang ditetapkan ke halaman, WordPress kemudian memeriksa template dengan slug ke halaman dan menerapkannya jika ditemukan.

Siput adalah bagian dalam URL halaman setelah nama domain dan dapat diedit. Di bawah ini adalah contoh ilustrasi tentang ini.

page-{id}.php : WordPress kemudian akan memeriksa keberadaan templat halaman dengan ID halaman ke halaman yang dirender jika tidak ada templat dengan slug yang ditemukan.

page.php : Jika tidak ada template dengan id halaman yang ditemukan, WordPress kemudian akan menggunakan template page.php standar untuk merender halaman.

singular.php : Dalam kasus di mana file page.php tidak ditemukan, WordPress akan menggunakan file singular.php terlepas dari jenis posting.

index.php : Jika tidak ada template di atas yang tersedia, default WordPress untuk merender halaman menggunakan file index.php.

Oleh karena itu, rendering halaman dalam lingkungan WordPress Anda dapat dilakukan oleh salah satu templat halaman di atas. Oleh karena itu terserah Anda untuk menentukan tingkat prioritas yang ingin Anda miliki.

Membuat Template Halaman Kustom

Membuat template halaman kustom dalam tema Anda cukup mudah. Namun Anda perlu menentukan apakah templat halaman akan untuk satu halaman atau halaman mana pun.

Dalam panduan ini kita akan melihat cara membuat template halaman global secara manual dalam tema Stax serta template halaman tunggal ke salah satu halaman kita.

Cara membuat template kustom Global

Terkadang Anda ingin membuat templat halaman yang dapat digunakan secara global di semua halaman dalam situs web Anda.

Untuk melakukannya, Anda harus terlebih dahulu mengidentifikasi editor teks yang akan digunakan untuk digunakan seperti Notepad, Notepad ++, teks luhur atau editor lain pilihan Anda.

Setelah ini selesai, Anda dapat mulai membuat file template dengan melakukan hal berikut:

Langkah 1: Buat file baru dan tambahkan kode berikut :

 <?php /* Template Name: PageWithNoFooter */ ?>

Sebaiknya gunakan nama template yang tidak digunakan dalam template halaman lain yang mungkin Anda miliki di situs web Anda, serta nama yang dapat dengan mudah Anda identifikasi dan hubungkan dengan halaman situs Anda.

Setelah ini selesai, simpan template halaman baru Anda dengan ekstensi .php. Dalam kasus kami di sini, kami akan memberi nama file template pagewithnofooter.php . Anda dapat menggunakan nama apa pun yang Anda inginkan, tetapi lebih disarankan untuk menggunakan nama yang mirip dengan nama template Anda.

Langkah 2: Tambahkan kode yang Anda inginkan ke file

Pada langkah ini, Anda dapat menambahkan kode pilihan Anda ke file baik itu dalam PHP atau PHP dan HTML.

Untuk tujuan ilustrasi, dalam kasus kami di sini, kami akan menggunakan konten file sidebar.php kanan default di dalam file pagewithnofooter.php tetapi menyesuaikannya dan menambahkan kode untuk membuat teks sambutan HTML khusus serta menonaktifkan footer. Jika Anda menggunakan tema WordPress lain, Anda juga dapat menyalin konten halaman.php di dalam tema atau templat halaman lain yang ditentukan tema yang mungkin ada di tema Anda.

Kode kami karenanya akan menjadi sebagai berikut:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Langkah 3: Unggah templat halaman ke file tema Anda .

Dengan bantuan program FTP seperti Filezilla atau melalui panel hosting Anda, unggah file kustom Anda ke root file tema Anda. Dalam kasus kami di sini, ini akan berada di dalam jalur direktori berikut:

i) wp-konten > Tema > Stax

ii) Direkomendasikan: wp-content > Themes > stax-child

Ini berlaku saat menggunakan tema anak di dalam situs Anda, dan stax-child adalah tema anak Anda.

Sebaiknya gunakan tema anak saat menyesuaikan templat halaman atau penyesuaian file lainnya dalam tema Anda untuk menghindari kehilangan penyesuaian selama pembaruan tema.

Langkah 4: Buat halaman baru dan tetapkan template "PageWithNoFooter" untuk itu

Untuk mencapai ini, navigasikan ke bagian Halaman > Tambahkan Baru di dalam dasbor WordPress Anda dan buat halaman Anda.

Setelah Anda membuat halaman, tetapkan template "PageWithNoFooter" ke dalamnya dan simpan perubahan Anda.

Di bawah ini adalah contoh ilustrasinya:

Sekarang, setelah melihat pratinjau halaman di front-end, halaman kami tidak akan memiliki footer yang dirender dalam halaman Anda. Anda juga akan memiliki HTML khusus yang kami tambahkan.

Di bawah ini adalah tangkapan layar tentang ini:

Anda dapat menggunakan template di dalam halaman mana pun yang Anda ingin tata letaknya diterapkan atau halaman mana pun yang tidak ingin Anda buat footernya.

Membuat satu templat Halaman

Templat halaman khusus untuk satu halaman lebih spesifik halaman. Seperti yang disebutkan sebelumnya, templat ini dipertimbangkan untuk dipilih jika tidak ada "templat halaman" yang ditetapkan ke halaman.

Adapun template ini, Anda dapat menargetkan halaman dengan slug atau ID halaman. Penting juga untuk mempertimbangkan prospek masa depan situs web Anda saat menentukan apakah akan menggunakan slug halaman atau ID. Misalnya, jika Anda bermaksud memigrasikan situs Anda ke domain lain, maka menggunakan ID halaman tidak akan sesuai saat membuat file template Anda. Sebaliknya, menggunakan siput akan dianggap sebagai pilihan yang lebih baik. Jika di sisi lain situs Anda dikelola oleh banyak orang dan Anda merasa ada kemungkinan mereka dapat mengubah siput halaman, maka akan jauh lebih baik untuk menggunakan ID halaman saat membuat templat halaman.

Dalam kasus kami di sini, kami akan membuat templat halaman khusus untuk halaman kontak kami dan menonaktifkan footer dari halaman tersebut. Untuk membuat template seperti itu, Anda perlu melakukan hal berikut:

Langkah 1: Salin konten halaman.php

Pada langkah ini, Anda harus terlebih dahulu menemukan page.php di dalam file tema Anda.

Setelah Anda menemukan file, pilih untuk mengeditnya dan salin isinya.

Langkah 2: Buat template baru ke halaman

Di dalam root file tema Anda, buat templat halaman ke halaman kontak. Anda dapat menggunakan file page-{id}.php atau page-{slug}.php. Dalam kasus kami di sini, kami akan menggunakan slug, jadi kami akan memberi nama template kami sebagai page-contact.php karena "kontak" adalah slug halaman kami seperti yang terlihat di bawah ini:

Di bawah ini juga merupakan ilustrasi lokasi file:

Langkah 3: Tempel konten file page.php

Anda sekarang perlu menempelkan konten file page.php yang kami salin pada langkah 1 di atas ke file page-contact.php baru kami. Setelah melakukan ini, Anda kemudian dapat menyesuaikan file untuk memasukkan perubahan kode yang Anda inginkan dan menyimpan perubahan Anda. Dalam kasus kami, kami akan menonaktifkan footer di halaman kontak sehingga kode akhir kami akan terbaca sebagai:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

Setelah melihat pratinjau halaman kontak Anda, Anda akan menyadari bahwa halaman tersebut tidak menyertakan footer.

Di bawah ini adalah perbandingan tangkapan layar pada halaman awalnya dan setelah template baru diterapkan.

Halaman Kontak Dengan Footer

Halaman Kontak tanpa Footer

Kesimpulan

Membuat templat halaman khusus untuk situs web Anda relatif mudah. Dalam panduan ini kami secara khusus melihat cara membuat template kustom secara manual dalam tema WordPress Anda. Kami telah menggunakan Tema Stax gratis sebagai kasus penggunaan di sini. Namun Anda dapat menerapkan teknik yang sama di semua tema WordPress lain yang mengikuti standar pengkodean WordPress. Namun ada cara lain Anda juga dapat membuat templat halaman khusus seperti menggunakan pembuat halaman seperti Elementor.

Kami berharap artikel ini memberikan wawasan yang diperlukan tentang bagaimana Anda dapat membuat template halaman kustom secara manual. Jangan ragu untuk berkomentar di bawah jika ada pertanyaan atau saran.