Cara Membuat Template Kustom WordPress Secara Manual – Panduan

Jika Anda tidak puas dengan desain situs web Anda dan tema yang Anda pilih tidak menawarkan tingkat opsi penyesuaian yang diperlukan, mungkin sudah waktunya untuk mempertimbangkan untuk membuat template kustom Anda sendiri! Tergantung pada kebutuhan Anda, template WordPress ini dapat berupa template posting kustom atau template halaman atau tampilan kategori.

Salah satu hal yang menarik tentang WordPress adalah, tidak peduli bagaimana situs WordPress Anda dibuat, Anda selalu bebas untuk mengubah tata letak atau desain kapan saja. Ini dapat dilakukan dengan mengganti template yang sudah jadi atau dengan membuat template Anda sendiri. WordPress menawarkan sejumlah besar fleksibilitas dan memberi Anda kemampuan untuk membuat template Anda sendiri untuk apa pun.

Terlepas dari kenyataan bahwa membuat template Anda sendiri membuka banyak kemungkinan desain, sebagian besar pengguna WordPress mungkin akan menghindari tantangan karena mereka khawatir membuat Template Kustom WordPress Anda sendiri terlalu rumit. Dalam dua seri artikel ini, kami akan melihat kedua opsi yang terbuka untuk Anda. Pertama dalam artikel ini kita akan melihat bagaimana Anda dapat mengkodekan template WordPress kustom secara manual (yang menawarkan fleksibilitas tertinggi) dan selanjutnya kita akan memeriksa bagaimana Anda dapat menggunakan pembuat halaman populer untuk memikul beberapa pekerjaan berat yang diperlukan. saat membuat template kustom WordPress.

Pada artikel ini kita akan melihat cara membuat template khusus untuk halaman, postingan, dan bahkan kategori postingan. Mari kita mulai dengan terlebih dahulu melihat mengapa Anda mungkin menginginkan template khusus.

Catatan: Artikel ini mengasumsikan pengetahuan tentang HTML, CSS, dan PHP.

Kapan Anda Membutuhkan Template WordPress Kustom?

Mungkin Anda belum yakin mengapa Anda benar-benar perlu menggunakan template kustom WordPress. Cara termudah untuk menjelaskan ini adalah dengan sebuah contoh.

Bayangkan Anda memiliki situs web untuk bisnis Anda. Tema 'Dua Puluh Dua Puluh' diaktifkan dan semua halaman dan posting yang diperlukan telah dibuat dan diisi dengan konten (teks dan gambar), kutipan dan gambar unggulan.

Pengaturan Umum juga dikonfigurasi dan Anda telah membuat sejumlah perubahan melalui Penyesuai (seperti warna tautan, warna hamparan templat sampul, dll.)

Menu juga telah dibuat dengan 5 item: Beranda – Profil Perusahaan – Layanan – Tentang Kami – Hubungi Kami

Pada bagian Layanan terdapat submenu: Layanan 1 – Layanan 2 – Layanan 3.

Jadi, dari perspektif pengembang WordPress, Anda pada dasarnya memiliki:

• Empat halaman standar ( Beranda – Profil Perusahaan – Tentang Kami – Hubungi Kami )
• Satu halaman arsip ( Layanan )
• Tiga halaman posting ( Layanan 1 – Layanan 2 – Layanan 3 )

Secara default, ketiga halaman Posting Layanan akan memiliki tata letak yang sama. Satu-satunya pilihan yang saat ini Anda miliki untuk membedakan tata letak individual posting ini dengan memilih salah satu dari tiga template yang disediakan melalui pengaturan Post Attributes.

Jika kita memilih masing-masing template yang berbeda, kita akan melihat bahwa mereka terlihat seperti ini:

Template Bawaan

Template Lebar Penuh

Template Sampul

Jika Anda beruntung, salah satu gaya ini akan cocok untuk Anda dan Anda dapat memilih untuk menggunakannya untuk situs web Anda. Namun jika tidak, dan Anda merasa frustrasi karena elemen tertentu tidak terlihat 'seperti yang Anda inginkan' maka tidak perlu khawatir… di sinilah membangun Template WordPress kustom Anda sendiri secara manual.

Mari kita mulai dan lihat apa yang bisa dicapai dengan template khusus.

Cara Membuat Template Posting WordPress Kustom Secara Manual

Apa yang akan kita lakukan dalam tutorial berikut adalah membuat tampilan posting tunggal yang sepenuhnya dipersonalisasi dan akan ditentukan di dalam file PHP-nya sendiri. Kami juga akan menambahkan opsi yang disebut 'Template Postingan Kustom Saya' ke menu drop down template di atribut postingan yang akan sesuai dengan tata letak postingan kustom dan menampilkan struktur unik kami.

Langkah Satu: Memperkenalkan Template kami ke WordPress

Untuk memulai, kita perlu membuat file PHP bernama sesuatu seperti: "my-custom-post.php" di folder root tema WordPress Anda (dalam contoh kita ini terletak di /themes/twentytwenty/).

Buka file dengan editor teks favorit Anda (seperti Sublime) dan tambahkan konten di bawah ini:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Baris ini * Template Name: My custom post template menentukan nama yang akan ditampilkan di menu drop-down template. Lihatlah tangkapan layar di bawah ini dan Anda akan melihat bagaimana ini akan muncul.

* Template Post Type: post adalah opsional dan menentukan jenis posting yang akan ditampilkan template sebagai opsi. Seperti yang telah kami definisikan sebagai 'posting', template ini tidak akan muncul di menu opsi template untuk halaman seperti yang dapat dilihat pada contoh di bawah ini.

Baris terakhir: get_header(); ?> get_header(); ?> mengambil konten header.

Pada titik ini, jika Anda memilih "Templat posting kustom saya" sebagai templat aktif untuk katakanlah posting 'Layanan 1' kami, hasilnya akan kosong. Ini seperti yang kami harapkan karena kami belum menambahkan struktur apa pun ke halaman. Anda akan melihat sesuatu seperti ini:

Menambahkan struktur ke Template Kustom WordPress kami

Meskipun sangat mungkin untuk membangun struktur halaman kita sepenuhnya dari awal, terkadang lebih mudah untuk mengambil struktur posting yang ada yang digunakan dalam template tema kita dan kemudian memodifikasinya.

Jika kita melihat hierarki template WordPress, kita dapat melihat bahwa, tergantung pada tema, template single post berasal dari file singular.php atau single.php yang terletak di dalam folder tema.

Untuk memperjelas lebih lanjut - ketika posting dan halaman menggunakan struktur yang sama, file singular.php digunakan, jika tidak (seperti dalam tema Astra yang populer misalnya) Anda akan melihat file single.php, page.php, archive.php yang dikodekan untuk menyediakan struktur yang berbeda untuk posting, halaman, dan tata letak blog masing-masing.

Dalam contoh ini, dengan menggunakan tema Twenty Twenty, kita dapat melihat file singular.php menggunakan fungsi get_template_part untuk mengambil layout yang diminta dari folder template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Apa yang dilakukan dengan cerdik oleh kode di atas adalah memeriksa apakah ada konten dalam kiriman dan jika demikian, mencetak konten menggunakan struktur yang ditentukan oleh templat yang dipilih. Ini berlaku dalam semua kasus terlepas dari apakah posting, halaman, atau arsip sedang digunakan.

Sekarang kita dapat melihat bagaimana tema kita menarik data tata letak dari template yang ada, sekarang kita siap untuk mulai membangun template kita sendiri. Untuk menentukan tampilan template kita, pertama-tama kita harus benar-benar mendesainnya. Anda mungkin ingin halaman posting Anda ditata dalam format berikut:

Setelah Anda memutuskan desain tata letak, Anda harus membuat kode ini menggunakan HTML, CSS, dan PHP. Artikel ini mengasumsikan Anda memiliki pengetahuan tentang bahasa ini dan dapat membuat tata letak yang diperlukan. Mengambil desain di atas kita akan menulis beberapa kode awal yang, ditambahkan ke file my-custom-post.php Anda akan terlihat seperti ini:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Ada fungsi pintasan yang disediakan oleh tema Twenty Twenty kami untuk meta pos dan data lain yang mungkin ingin kami terbitkan. Alih-alih menggunakan ini, kami akan menggunakan fungsi WordPress default sehingga template Anda akan bekerja pada tema apa pun. Salah satu yang akan kami kerjakan adalah sebagai berikut:

• the_title() – menggemakan judul postingan
• the_excerpt() – menggemakan kutipan postingan
• the_post_thumbnail() – menampilkan ukuran thumbnail postingan default. Anda dapat menggunakan opsi the_post_thumbnail() untuk menampilkan ukuran gambar unggulan tertentu
• the_content() – Menampilkan konten postingan

Jika kami menyimpan pembaruan kami dan sekarang melihat posting 'Layanan 1', kami akan melihat tata letak templat khusus yang diterapkan.

Cara Membuat Template Kategori Posting Kustom WordPress

Sekarang kita telah melihat betapa relatif mudahnya untuk membuat layout template postingan kita sendiri, kita dapat melanjutkan dan menerapkan prinsip serupa untuk membuat layout Category View kita sendiri.

Cara mudah untuk melakukannya adalah dengan langsung mengedit file index.php (terletak di folder root /themes/twentytwenty/ kami). Sementara mengedit file ini secara langsung baik-baik saja untuk tujuan tutorial, jika situs webnya aktif maka Anda mungkin ingin menggunakan tema anak untuk memastikan bahwa pembaruan apa pun tidak ditimpa saat Anda memperbarui tema berikutnya.

Jika kita melihat kode index.php kita akan melihat bahwa sebagian besar diisi dengan PHP kondisi "jika" yang menentukan output yang tersedia tergantung pada jenis konten. Misalnya kode berikut memeriksa apakah konten termasuk posting (itu adalah posting, halaman atau arsip) atau apakah itu halaman hasil pencarian dan menampilkan konten yang tepat sesuai dengan itu.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Jika Anda mengikuti tutorial ini menggunakan tema Twenty Twenty, cari kode berikut di file index.php Anda:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

Di template-parts/content.php kita dapat melihat bahwa konten diambil menggunakan fungsi 'get_template_part'.

Alih-alih menggunakan fungsi khusus tema ini untuk menentukan tata letak halaman kategori posting kami, kami akan menggunakan fungsi WordPress default untuk setiap elemen sebagai gantinya. Ini berarti kita akan mengubah kode di atas menjadi berikut:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Jika Anda bermata elang, Anda akan melihat bahwa kami mereferensikan file bernama my-custom-category-view.php yang sekarang perlu kami buat dan tambahkan ke folder tema kami (pendekatan alternatif adalah menambahkan info ini secara langsung ke file index.php kami tetapi menyimpannya sebagai file terpisah jauh lebih rapi.

Buat file my-custom-category-view.php dan tambahkan kode berikut:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Anda akan melihat bahwa kami dapat menggunakan format yang lebih canggih dari fungsi the_title() untuk menentukan judul posting. Tautan ke halaman posting tunggal telah dibuat menggunakan fungsi get_permalink() .

Untuk menyelesaikannya, Anda sekarang perlu menambahkan beberapa gaya tambahan ke file style.css Anda:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Mari kita lihat apa yang telah kita capai sejauh ini:

Bagus!

Seperti yang Anda lihat, masih ada beberapa masalah terkait penyesuaian gambar karena proporsinya berbeda. Kami dapat dengan mudah memperbaikinya dengan menambahkan beberapa baris lagi ke CSS kami untuk memangkas tengah gambar dan memberikan dimensi tetap:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

Dengan cara ini tentu saja, kami masih menggunakan gambar asli yang belum tentu optimal dari perspektif kinerja. Praktik terbaik di sini adalah menggunakan ukuran gambar WordPress. Jika Anda ingin membuat tata letak halaman baru Anda responsif, lihat juga panduan ekstensif ini untuk informasi lebih lanjut.

Dan hanya itu, dilakukan dengan baik! Anda sekarang telah berhasil membuat tata letak dan desain pribadi Anda sendiri untuk tampilan kategori posting.

Cara Membuat Template Halaman Kustom WordPress

Sejauh ini kami telah membuat tata letak khusus untuk halaman posting kami dan juga tata letak khusus untuk hasil kategori. Anda akan dapat menerapkan metode yang digunakan saat membuat template khusus untuk halaman serta prinsip yang sama persis berlaku.

Sebelum kita mengakhiri artikel ini, mari kita lihat sekilas template halaman yang sedikit lebih kompleks. Dalam contoh ini kami akan menarik halaman posting kami ke dalam template kami sehingga kami dapat menampilkannya seperti yang terlihat di halaman kategori tetapi dengan manfaat tambahan dari kemampuan edit yang ditawarkan oleh halaman (bukan halaman kategori) .

Tujuan kami adalah membuat halaman 'Layanan' ikhtisar yang mencantumkan tiga layanan bisnis kami (dalam contoh ini, Layanan 1, Layanan 2 dan Layanan 3). Daripada secara manual harus menambahkan ini ke halaman kami, mereka akan ditarik secara dinamis ke halaman. Meskipun dalam praktiknya Anda mungkin tidak perlu khawatir dengan hal ini, prinsip pengkodean berguna untuk memahami dan menunjukkan lebih lanjut fleksibilitas yang ditawarkan oleh WordPress.

Untuk memulai, buat file baru di dalam folder tema Anda dan beri nama seperti my-services-template.php . Setelah ini selesai, sekarang kita akan menambahkan beberapa komentar deklarasi yang diperlukan seperti yang kita lakukan sebelumnya dengan template posting tunggal. Kita juga akan menggunakan fungsi get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

Fungsi get_template_part() pada dasarnya adalah mekanisme yang memungkinkan kita memuat potongan kode yang dapat digunakan kembali. Dalam contoh ini, ia akan mengambil konten template-parts/content-cat_services.php . Dalam file ini kita akan memasukkan beberapa kode yang akan menampilkan posting kategori 'Layanan'.

Singkatnya, apa yang akan dilakukan kode dalam file ini adalah:

• Beri judul pada halaman kategori.
• Query posting kategori tertentu dari database.
• Ulangi posting dan tampilkan tata letak untuk masing-masing.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Kami akan memeriksa kueri lebih teliti di artikel mendatang. Yang perlu Anda ketahui untuk keperluan artikel ini adalah $args = array( 'cat'=>4, 'orderby' => 'title' ); sedang mengambil kategori posting dengan Nomor ID 4 (ID=4). Nomor kategori ini yang berhubungan dengan kategori 'Layanan' kami.

Jadi, bagaimana Anda bisa melihat ID untuk setiap kategori? Hal ini cukup sederhana sebenarnya. Buka Menu Posting > Kategori dan buka kategori apa saja untuk diedit. ID ada di URL halaman edit kategori seperti yang ditunjukkan di bawah ini:

Untuk melihat template baru kita, kita perlu pergi ke Pages dan membuat halaman baru. Di area edit halaman Anda tidak perlu memasukkan konten apa pun. Sebagai gantinya, cukup pilih opsi 'Templat kategori kiriman saya' di bawah menu tarik-turun Atribut Halaman.

Terakhir, buka menu dan tambahkan item "Layanan" untuk halaman baru kami untuk menggantikan item kategori Layanan saat ini. Menu sekarang akan terlihat seperti ini

Mari kita lihat apa yang kami lakukan:

Metode di atas menunjukkan cara membuat templat halaman kustom WordPress yang menarik kategori tertentu (dalam contoh ini 'Layanan' kami). Jika Anda memilih template yang sama untuk halaman kategori lain, Anda akan melihat lagi posting kategori Layanan karena kami secara khusus meminta ini dengan ID kategori (ID=4). Jadi, jika Anda menginginkan templat halaman baru yang menarik kategori berbeda, Anda perlu membuat file templat terpisah untuk melakukannya (dan memperbarui ID Kategori yang sesuai).

Kesimpulan

Mampu membuat template kustom Anda sendiri untuk situs WordPress Anda memberi Anda kendali penuh atas tampilan situs web Anda. Membuat templat khusus untuk tampilan tunggal atau kategori, jenis posting Anda sepadan dengan usaha. Tentu saja tidak hanya memungkinkan kontrol penuh atas elemen desain situs Anda, tetapi juga memungkinkan Anda dengan cepat mereplikasi tata letak tertentu untuk halaman mendatang.

Lihat juga

• Cara Membuat Template Kustom WordPress Menggunakan Pembuat Halaman – Panduan