Cara Membuat Template Single-Post Khusus di WordPress
Diterbitkan: 2023-02-12Pernahkah Anda melihat halaman detail posting dengan tata letak yang sama sekali berbeda dari posting lain di situs yang sama? Itu mungkin karena menggunakan template khusus. Anda dapat menetapkan template khusus untuk masing-masing posting, memberi Anda peningkatan fleksibilitas atas tampilan situs Anda.
Tertarik mempelajari cara membuat template posting tunggal khusus? Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah membuatnya sendiri!
Manfaat Template Kustom
Sebelum kita mulai membuatnya, mari telusuri mengapa Anda memerlukan template khusus dan apa fungsinya.
Jika Anda ingin posting atau jenis posting tertentu menonjol dari konten Anda yang lain, Anda mungkin ingin mempertimbangkan untuk membuat template posting tunggal khusus. Templat ini hanya akan diterapkan ke kiriman yang Anda tetapkan, artinya dapat memiliki tata letak yang sama sekali berbeda dari kiriman standar Anda. Desain dan tata letak yang unik kemudian dapat meningkatkan keterlibatan pengguna untuk postingan tersebut.
Siap mengembangkannya sendiri? Membuat dan menggunakan templat kiriman khusus mirip dengan templat halaman khusus.
Cara Membuat Template Posting Kustom
Saya akan menggunakan tema Dua Puluh Tujuh Belas untuk contoh saya, tetapi prosesnya akan sama untuk semua tema.
Sebelum membuat custom post template, saya akan membuat child theme terlebih dahulu. Anda dapat bekerja di tema utama, tetapi karena Anda membuat template khusus, jika Anda memperbarui tema induk, template Anda akan hilang. Untuk alasan ini, sebaiknya pisahkan template kustom Anda dari tema utama.
Untuk templat khusus, Anda harus menentukan Nama Templat (nama templat) dan Jenis Posting Templat (di mana templat ini akan digunakan). Ini terlihat seperti ini:
[php] <?php /* Nama Template: Posting Lebar Penuh * Jenis Posting Template: post*/ /*Template untuk menampilkan posting tunggal lebar penuh. */ get_header(); ?> [/php]
Saat Anda menyimpan file, pertahankan agar nama file tetap relevan dengan nama template, seperti full-width-post.php . Jika Anda melihat posting dari panel admin, itu akan menampilkan template baru di dropdown bagian Post Attributes.
Template khusus kami sudah siap, tetapi belum berguna. Mari kita membuatnya sedikit lebih bermanfaat!
Catatan: Kami akan mengerjakan banyak file, jadi pantau terus nama file dan foldernya.
Inilah tata letak halaman posting blog saat ini dalam tema Twenty Seventeen. Saya senang dengan itu, jadi kami akan membiarkannya.
Sekarang, katakanlah Anda menginginkan tata letak lebar penuh untuk beberapa posting. Kami akan menempatkan judul posting di atas data meta. Data meta harus memiliki batas di bagian atas dan bawah, dan judul serta data meta harus rata tengah. Berikut gambar rangkanya:
Untuk membuat tata letak ini, Anda perlu menemukan file mana yang bertanggung jawab untuk menampilkan halaman detail posting. Di sebagian besar tema, single.php adalah filenya, kecuali ada template tertentu yang sudah ditentukan sebelumnya. Struktur kode bervariasi dari satu tema ke tema lainnya, jadi mungkin diperlukan sedikit pembelajaran untuk memahami cara kerja tema khusus Anda.
Setelah Anda menemukan file yang menampilkan halaman detail posting, Anda harus menemukan apakah suatu fungsi digunakan untuk memanggil file lain atau template dibuat secara langsung. Dalam contoh ini dengan tema Dua Puluh Tujuh Belas, ini adalah fungsi get_template_part.
Jalur get_template_part adalah bagian terpenting untuk diikuti di sini.
[php]
<div class="bungkus">
<div id="primer" class="area-konten">
<id utama="utama" class="situs-utama" role="main">
<?php /* Memulai Pengulangan */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // Jika komentar terbuka atau kami memiliki setidaknya satu komentar, muat template komentar. jika ( comments_open() || get_comments_number() ): comments_template(); berakhir jika; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' .__( 'Previous Post', 'twentyseventeen' ) .'</span><span aria-hidden="true" class="nav-subtitle">' .__( ' Sebelumnya', 'twentyseventeen' ) . '</span> <span class="nav-title""><span class="nav-title-icon-wrapper">' .twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) .'</ span>%judul</span>',
'next_text' => '<span class="teks-pembaca layar">' . __( 'Posting Berikutnya', 'dua puluh tujuh belas' ) . '</span><span aria-hidden="benar" class="nav-subtitle"">' . __( 'Berikutnya', 'dua puluh tujuh belas') . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . dua puluh tujuh belas_get_svg( array( 'icon' => 'panah-kanan' )) . '</span></span>',
) );
sementara; // Akhir putaran.
?>
[/php]Seperti yang Anda lihat, ini merujuk ke jalur:
[php] get_template_part( 'template-parts/post/content', get_post_format() ); [/php]
Jadi file content.php dipanggil di dalam single.ph untuk menampilkan halaman detail posting.
Sekarang setelah Anda mengetahui cara kerja file single.php , mari salin kode darinya dan tempelkan ke file full-width-post.php yang telah kita buat sebelumnya di tema anak. Karena ini akan menjadi template lebar penuh, kami akan menghapus sidebar.
Sekarang salin file content.php dari jalur yang disebutkan di atas. Anda dapat menempelkannya di direktori yang sama di mana file templat Anda ada, tetapi saya sarankan mengikuti struktur folder yang sama dengan tema induk.
Anda dapat menyimpan nama file apa adanya, tetapi jika Anda ingin mengubah sesuatu di templat default, itu akan menyebabkan konflik. Untuk menghindari masalah apa pun, saya sarankan untuk mengganti nama file dan menjaganya agar tetap relevan dengan nama template, seperti content-full-width.php .
File sudah ada, jadi sekarang mari kita ubah kode untuk menukar judul postingan dan data meta postingan.
[php]
<header class="entry-header">
<?php
jika ( is_single() ) {
judul( '
<h1 class="entry-title"">', '</h1>
' );
} elseif ( is_front_page() && is_home() ) {
judul( '
<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>
' );
} kalau tidak {
judul( '
<h2 class="judul-entri"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>
' );
}
jika ( 'posting' === get_post_type() ) {
gema '
<div class="entry-meta">';
jika ( is_single() ) {
dua puluh tujuh belas_posted_on();
} kalau tidak {
gema dua puluh tujuh belas_time_link();
dua puluh tujuh belas_edit_link();
};
echo '</div>
<!-- .entry-meta -->';
};
?>
</tajuk>
<!-- .entry-header-->
[/php]Untuk menggunakan template ini, edit postingan yang diinginkan dari admin WordPress dan tetapkan template dari menu dropdown.
Jika Anda memeriksa posting di ujung depan, itu masih belum lebar penuh, tetapi judul dan meta data telah bertukar tempat, jadi kami tahu bahwa posting tersebut menggunakan template khusus kami
Kita harus menambahkan beberapa CSS untuk membuatnya lebar penuh. WordPress otomatis menghasilkan kelas sesuai nama templat di bagian tubuh.
Gunakan kelas itu untuk menargetkan templat khusus ini. Anda dapat menambahkan CSS ke file style.css tema anak.
[css]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
mengapung: tidak ada;
lebar: otomatis;
}
.post-template-full-width-post .entry-header{
perataan teks: tengah;
margin-bawah:1.3em;
}
.post-template-full-width-post .entry-meta{
border-top:1px padat #ccc;
border-bottom:1px solid #ccc;
padding:15px 0;
}
[/css]Sekarang kami memiliki tata letak seperti yang kami inginkan. Posting apa pun yang menggunakan template ini akan memiliki gaya yang sama persis.
Anda dapat membuat template khusus sebanyak yang Anda inginkan untuk memenuhi kebutuhan Anda. Anda bahkan dapat membuat template berdasarkan kategori posting.
Bisakah Saya Menggunakan Plugin untuk Ini?
Jika Anda tidak nyaman dengan kode PHP, maka Anda dapat menggunakan beberapa plugin, tetapi harus saya akui, ada sangat sedikit plugin yang tersedia untuk membuat template posting kustom dan kebanyakan tidak terlalu berguna karena Anda harus membuat template secara manual.
Saya merasa plugin Post Custom Templates Lite sangat berguna. Ini adalah plugin gratis yang memungkinkan Anda membuat template posting tanpa pengkodean apa pun dalam antarmuka drag-and-drop yang bagus. Ini memiliki banyak opsi penyesuaian, jadi jika Anda ingin menyesuaikan template posting, secara umum plugin ini dapat membantu Anda.
Catatan: Versi gratisnya hanya memungkinkan Anda menyesuaikan templat pos biasa. Anda harus menggunakan versi pro untuk dapat membuat templat posting khusus dan mendapatkan beberapa fitur tambahan.
Kesimpulan
Apakah Anda bekerja secara manual atau menggunakan plugin untuk membuat template posting tunggal khusus, itu memungkinkan posting terpenting Anda menonjol dari yang lain. Untuk inspirasi, lihat situs Brian Dean; dia menggunakan template tertentu untuk postingan panduan definitifnya agar terlihat unik dari postingan lainnya.
Jadi, cobalah dan buat template posting tunggal unik Anda sendiri! Untuk mendapatkan hasil terbaik untuk setiap situs yang Anda buat, pilih platform hosting terkelola WP Engine sebagai sumber tunggal untuk hosting WordPress!