Membuat Halaman Single untuk Custom Post-Type

Membuat Halaman Single untuk Custom Post Type – Kemarin kita sudah berhasil membuat halaman home atau front page untuk tema semi toko online kita maka step selanjutnya kita butuh sebuah halaman untuk menamplikan detail dari produk-produk yang kita pajang di halaman depan dengan cara menambahkan halaman single didalam tema semi toko online.

klik Tutorial Membuat Semi Toko Online untuk melihat seluruh tutorial ini

Seperti yang kita tau halaman single pada wordpress secara umum diwakili oleh file single.php, dimana secara proses dimulai ketika meng-klik judul atau readmore pada artikel maka wordpress memanggil file single.php sebagai template yang bertugas menampilkan satu artikel penuh tanpa ada readmore lagi. karena single.php adalah bentuk umum maka tentu terdapat bentuk khususnya seperti :

attachment.php
single-{$posttype}.php
single-post.php

Yang perlu di perhatikan saat ini adalah single-$posttype.php karena dalam kasus kita ini akan menggunakan single khusus Custom Type tersebut. maksud dari $posttype tersebut adalah bisa kita ganti dengan nama custom post type yang sudah kita buat di tutorial sebelumnya.

untuk lebih detail tentang template hierarchy wordpress kalian bisa check di https://developer.wordpress.org/themes/basics/template-hierarchy/

Membuat Single Post-Type pada Theme WordPress

Baik langsung saja kita buat :

pertama : buat sebuah file single-onphpid_products.php di dalam folder theme, letakkan sejajar dengan single.php

Kedua : pastekan kode berikut ke dalam single-onphpid_products.php

Kemudian Save, kemudian bisa kalian coba meng-klik salah satu produk yang sudah kalian buat untuk melihat apakah kodenya berjalan.

Jika Muncul Error Seperti dibawah .

Kalian jangan panik dulu, error diatas memiliki maksud memberitahu kita bahwa fungsi stOnline_category() belum dibuat.

Untuk membuat fungsi stOnline_category() kalian bisa membuka file functions.php dan memasukan kode dibawah di baris paling bawah :

// mendapatkan category product
function stOnline_category($id)
{
	$category = get_the_terms( $id , 'product_category'); // return array|false|wp_error
	if ($category) {
		$list = '';
		foreach ($category as $cat) {
			$url = 'product-category/' . $cat->slug;
			$list .= '<a href="'. home_url($url) .'">'. $cat->name .'</a>';
			$list .= ', ';
		}
		return rtrim($list, ', ');
	}
	return ;
}
// mendapatkan tags product
function stOnline_tags($id)
{
	$tags = get_the_terms( $id , 'product_tags'); // return array|false|wp_error
	if ($tags) {
		$list = '';
		foreach ($tags as $tag) {
			$url = 'product-tags/' . $tag->slug;
			$list .= '<a href="'. home_url($url) .'">'. $tag->name .'</a>';
			$list .= ', ';
		}
		return rtrim($list, ', ');
	}
	return ;
}

// mendapatkan category product

function stOnline_category($id)

{

$category = get_the_terms( $id , 'product_category'); // return array|false|wp_error

if ($category) {

$list = '';

foreach ($category as $cat) {

$url = 'product-category/' . $cat->slug;

$list .= '<a href="'. home_url($url) .'">'. $cat->name .'</a>';

$list .= ', ';

}

return rtrim($list, ', ');

}

return ;

}

// mendapatkan tags product

function stOnline_tags($id)

{

$tags = get_the_terms( $id , 'product_tags'); // return array|false|wp_error

if ($tags) {

$list = '';

foreach ($tags as $tag) {

$url = 'product-tags/' . $tag->slug;

$list .= '<a href="'. home_url($url) .'">'. $tag->name .'</a>';

$list .= ', ';

}

return rtrim($list, ', ');

}

return ;

}

Jika sudah dapat kalian pastikan apakah error yang tadi masih muncul atau tidak… dan seharusnya tidak.

Baik sampai disini tutorial membuat halaman single untuk custom post-type sudah selesai. sebagai sentuhan terakhir pada tutorial ini kalian bisa menambahkan CSS berikut untuk memanipulasi tampilan di halaman single-onphpid_products.php :

.site-product .entry-title {
	margin-top: 10px;
}
span.best-seller {
    font-size: 14px;
    border: 1px solid #ddd;
    padding: 2px 4px;
}
h2.single-price {
    font-size: 20px;
    margin-top: 12px;
}

.site-product .entry-title {

margin-top: 10px;

}

span.best-seller {

font-size: 14px;

border: 1px solid #ddd;

padding: 2px 4px;

}

h2.single-price {

font-size: 20px;

margin-top: 12px;

}

Sampai Disini dulu tutorial membuat Semi Toko Online dengan wordpress, source kode bisa kalian unduh di https://github.com/wichaksono/final-semi-toko-online

terimaksih.. jangan lupa Like FP ONPHPID Tutorial dan Subscriber ONPHPID Youtube Channel untuk info berikutnya.

Sekian dan selamat Mencoba…