Panduan Tipe Post Khusus WordPress: Pembuatan, Tampilan dan Meta Box

WordPress dibangun untuk kustomisasi. Diciptakan sedemikian rupa sehingga setiap bagian dapat disesuaikan. Dalam tutorial ini kita akan menjelajahi salah satu fitur yang paling hebat pada Wordpress yang dikenal sebagai Custom Post Type dan bagaimana WordPress memiliki kelebihan dengan munculnya fitur indah ini.

Apa sebenarnya Custom Post Types itu?

Misalkan Anda ingin blog Anda untuk memiliki bagian terpisah khusus untuk Ulasan Film. Menggunakan Custom Post Types Anda dapat membuat tipe postingan baru seperti tipe Posts dan Pages, yang akan berisi kumpulan-kumpulan data berbeda. Itu akan memiliki menu administrasi yang baru, halaman  mengedit, taksonomi khusus dan banyak hal lain yang diperlukan untuk sebuah sistem penerbitan.

Custom Post Types adalah serangkaian pilihan administratif baru yang muncul bersama-sama dengan tipe post bawaan seperti Posts, Pages, Attachments dll. Custom Post Type dapat menyimpan jenis informasi apapun. Custom Post type memiliki editor khusus, pengunggah media dan menggunakan struktur tabel WordPress yang ada untuk mempermudah pengelolaan data. Keuntungan utama pembuatan custom post types menggunakan WordPress API adalah kompatibel dengan tema dan template yang ada. Custom Post Types juga SEO friendly karena permalinks yang dimilikinya.

Mengapa Menggunakan Custom Post Types?

Custom Post Types memungkinkan kita memiliki berbagai jenis tipe postingan. Yang memisahkan antara postingan reguler dari yang lain. Cukup sederhana!

Mari kita buat Plugin Custom Post Type

Di sini kita akan menciptakan plugin custom post type yang akan menampilkan ulasan film favorit. Mari kita mulai.

Langkah 1: Buat Direktori Plugin WordPress

Buka direktori Plugin WordPress Anda dan buat sebuah direktori baru bernama Movie-Reviews.

Langkah 2: Buat File PHP

Buka direktorinya dan buat sebuah file PHP yang bernama Movie-Reviews.php.

Langkah 3: Tambahkan Header

Buka file dan tambahkan header yang sesuai di bagian atas.

1

<?php

2

/*

3

Plugin Name: Movie Reviews

4

Plugin URI: https://wp.tutsplus.com/

5

Description: Declares a plugin that will create a custom post type displaying movie reviews.

6

Version: 1.0

7

Author: Soumitra Chakraborty

8

Author URI: http://wp.tutsplus.com/

9

License: GPLv2

10

*/

11

?>

Langkah 4: Daftarkan Fungsi Kustom

Sebelum penutupan perintah PHP, ketik baris kode berikut untuk menjalankan fungsi kustom yang disebut create_movie_review selama fase inisialisasi setiap kali sebuah halaman dihasilkan.

1

add_action( 'init', 'create_movie_review' );

Langkah 5: Implementasi fungsi

Berikan implementasi fungsi create_movie_review .

1

function create_movie_review() {

2

  register_post_type( 'movie_reviews',

3

		array(

4

			'labels' => array(

5

				'name' => 'Movie Reviews',

6

				'singular_name' => 'Movie Review',

7

				'add_new' => 'Add New',

8

				'add_new_item' => 'Add New Movie Review',

9

				'edit' => 'Edit',

10

				'edit_item' => 'Edit Movie Review',

11

				'new_item' => 'New Movie Review',

12

				'view' => 'View',

13

				'view_item' => 'View Movie Review',

14

				'search_items' => 'Search Movie Reviews',

15

				'not_found' => 'No Movie Reviews found',

16

				'not_found_in_trash' => 'No Movie Reviews found in Trash',

17

				'parent' => 'Parent Movie Review'

18

			),

19

20

			'public' => true,

21

			'menu_position' => 15,

22

			'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ),

23

			'taxonomies' => array( '' ),

24

			'menu_icon' => plugins_url( 'images/image.png', __FILE__ ),

25

			'has_archive' => true

26

		)

27

	);

28

}

Fungsi register_post_type melakukan sebagian besar pekerjaan untuk kita. begitu disebutnya register_post_type mempersiapkan lingkungan WordPress untuk tipe posting kustom baru termasuk bagian-bagian yang berbeda dalam admin. Fungsi ini mengambil dua argumen: yang pertama adalah name unik dari custom post type dan yang kedua merupakan sebuah aturan yang menunjukkan properti dari custom post type baru. Ini adalah susunan lain yang berisi label berbeda, yang menunjukkan rentetan teks yang akan ditampilkan dibagian yang  berbeda dari custom post type mis. 'Nama' menampilkan nama custom post type pada dasbor, 'edit' dan 'view' ditampilkan pada tombol Edit dan View masing-masing. Saya pikir selanjutnya cukup jelas.

Dalam argumen berikutnya:

• 'public' => true menentukan visibilitas custom post type baik dalam panel admin maupun front end.
• 'menu_position' => 15 menentukan posisi menu custom post type.
• 'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ) menentukan fitur dari custom post type yang akan ditampilkan.
• 'taxonomies' => array( '' ) menciptakan custom taxonomies. Di artikel ini, hal ini tidak didefinisikan.
• 'menu_icon' => plugins_url ('images/image.png', __FILE__ Auth.php) menampilkan ikon menu admin.
• 'has_archive' => true memungkinkan pengarsipan custom post type.

Silahkan kunjungi halaman WordPress Codex register_post_type untuk rincian lebih lanjut pada berbagai argumen yang digunakan dalam jenis posting kustom.

Langkah 6: Ikon untuk Tipe Post Custom 

Simpan gambar ikon 16 x 16 piksel dalam folder plugin Anda saat ini. Hal ini diperlukan untuk ikon jenis posting kustom pada dashboard.

Langkah 7: Aktifkan Plugin

Aktifkan plugin, Anda akan memiliki tipe posting kustom baru yang memiliki editor teks, penerbitan dan menampilkan kontrol gambar, kontrol komentar dan editor kustom.

Langkah 8: Menambah Item baru

Klik pilihan Add New untuk  ke editor jenis posting kustom. Sediakan judul film, review dan atur gambar yang terpilih.

Langkah 9: Publikasikan

Publikasikan posting dan klik View Movie Review untuk melihat review film yang dibuat.

Membuat Bidang Meta Box untuk jenis Posting Custom

Mekanisme meta box menggunakan bantuan dalam sistem meta box WordPressdan membantu menambah bidang yang secara khusus dibutuhkan untuk jenis posting kustom, tanpa memerlukan default field kustom dalam editor.

Langkah 1: Mendaftarkan fungsi kustom

Buka file Movie-Reviews.php dan tambahkan kode berikut sebelum tag akhir PHP. Fungsi akan digunakan ketika admin interface WordPress dikunjungi.

1

add_action( 'admin_init', 'my_admin' );

Langkah 2: Pelaksanaan fungsi kustom

Tambahkan pelaksanaan fungsi my_admin yang mendaftarkan  meta box dan menhubungkannya dengan jenis posting kustom  movie_reviews.

1

function my_admin() {

2

	add_meta_box( 'movie_review_meta_box',

3

		'Movie Review Details',

4

		'display_movie_review_meta_box',

5

		'movie_reviews', 'normal', 'high'

6

	);

7

}

Berikut add_meta_box adalah fungsi yang digunakan untuk menambah meta box untuk jenis posting kustom. Penjelasan mengenai atribut tertentu:

• movie_review_meta_box adalah atribut id HTML yang diperlukan
• Movie Review Details adalah teks yang terlihat dalam judul bagian kotak box
• display_movie_review_meta_box adalah callback yang menjadi isi meta box
• movie_reviews adalah nama dari jenis posting kustom dimana meta boc akan ditampilkan
• normal adalah bagian halaman dimana bagian edit layar seharusnya ditampilkan
• tinggi menunjukkan prioritas dalam konteks dimana box seharusnya berada

Langkah 3: Pelaksanaan fungsi display_movie_review_meta_box 

1

<?php

2

function display_movie_review_meta_box( $movie_review ) {

3

	// Retrieve current name of the Director and Movie Rating based on review ID

4

	$movie_director = esc_html( get_post_meta( $movie_review->ID, 'movie_director', true ) );

5

	$movie_rating = intval( get_post_meta( $movie_review->ID, 'movie_rating', true ) );

6

	?>

7

	<table>

8

		<tr>

9

			<td style="width: 100%">Movie Director</td>

10

			<td><input type="text" size="80" name="movie_review_director_name" value="<?php echo $movie_director; ?>" /></td>

11

		</tr>

12

		<tr>

13

			<td style="width: 150px">Movie Rating</td>

14

			<td>

15

				<select style="width: 100px" name="movie_review_rating">

16

				<?php

17

				// Generate all items of drop-down list

18

				for ( $rating = 5; $rating >= 1; $rating -- ) {

19

				?>

20

					<option value="<?php echo $rating; ?>" <?php echo selected( $rating, $movie_rating ); ?>>

21

					<?php echo $rating; ?> stars <?php } ?>

22

				</select>

23

			</td>

24

		</tr>

25

	</table>

26

	<?php

27

}

28

?>

Kode ini menjadikan isi meta box. Disini kita menggunakan variabel objek yang berisi informasi dari masing-masing ulasan film yang ditampilkan dalam editor. Menggunakan objek ini kami telah memperoleh post ID dan menggunakannya untuk query database untuk mendapatkan nama Direktur terkait dan Rating yang pada gilirannya menampilkan bidang pada layar. Ketika entri baru ditambahkan kemudian get_post_meta mengembalikan string kosong yang mengakibatkan tampilan bidang-bidang kosong di meta box.

Langkah 4: Mendaftarkan fungsi menyimpan posting

1

add_action( 'save_post', 'add_movie_review_fields', 10, 2 );

Fungsi ini digunakan ketika posting disimpan dalam database.

Langkah 5: Pelaksanaan fungsi add_movie_review_fields 

1

function add_movie_review_fields( $movie_review_id, $movie_review ) {

2

	// Check post type for movie reviews

3

	if ( $movie_review->post_type == 'movie_reviews' ) {

4

		// Store data in post meta table if present in post data

5

		if ( isset( $_POST['movie_review_director_name'] ) && $_POST['movie_review_director_name'] != '' ) {

6

			update_post_meta( $movie_review_id, 'movie_director', $_POST['movie_review_director_name'] );

7

		}

8

		if ( isset( $_POST['movie_review_rating'] ) && $_POST['movie_review_rating'] != '' ) {

9

			update_post_meta( $movie_review_id, 'movie_rating', $_POST['movie_review_rating'] );

10

		}

11

	}

12

}

Fungsi ini dijalankan ketika posting disimpan atau dihapus dari panel admin. Setelah memeriksa jenis data post yang diterima, jika merupakan jenis posting Custom, kemudian fungsi ini akan memeriksa lagi untuk melihat apakah unsur-unsur meta box telah ditetapkan nilai dan kemudian menyimpan nilai dalam bidang tersebut.

Langkah 6: Nonaktifkan opsi Default Kolom Kustom

Saat membuat jenis posting kustom, kami telah mendefinisikan fungsi create_movie_review. Hapus elemen custom-field dari supports array karena hal ini tidak lagi diperlukan. Sekarang jika Anda menyimpan file dan membuka editor Movie Review, Anda akan melihat dua kolom dalam meta box bernama Movie Author dan Movie Rating. Demikian pula Anda dapat menambahkan unsur-unsur lain juga.

Membuat Template kustom yang didedikasikan untuk jenis posting kustom

Cara yang tepat untuk menampilkan data jenis posting kustom adalah dengan menggunakan template kustom untuk masing-masing jenis posting kustom. Disini kita akan membuat sebuah template yang menampilkan semua ulasan film yang masuk menggunakan jenis posting kustom Movie Review.

Langkah 1: Mendaftarkan fungsi untuk memaksa Template khusus

Buka file Movie-Reviews.php dan tambahkan kode berikut sebelum tag akhir PHP. Fungsi akan digunakan ketika admin interface WordPress dikunjungi.

1

add_filter( 'template_include', 'include_template_function', 1 );

Langkah 2: Pelaksanaan fungsi

1

function include_template_function( $template_path ) {

2

	if ( get_post_type() == 'movie_reviews' ) {

3

		if ( is_single() ) {

4

			// checks if the file exists in the theme first,

5

			// otherwise serve the file from the plugin

6

			if ( $theme_file = locate_template( array ( 'single-movie_reviews.php' ) ) ) {

7

				$template_path = $theme_file;

8

			} else {

9

				$template_path = plugin_dir_path( __FILE__ ) . '/single-movie_reviews.php';

10

			}

11

		}

12

	}

13

	return $template_path;

14

}

Berikut kode  untuk mencari template seperti single-(post-type-name).php pada  direktori tema. Jika tidak ditemukan kemudian lihatlah ke direktori plugin untuk template, yang kami Sediakan sebagai bagian dari plugin. Template_include hook digunakan untuk mengubah perilaku default dan menerapkan template spesifik.

Langkah 3: Membuat File Single Page Template

Setelah menyimpan file plugin yang terbuka sebelumnya, buat file PHP yang lain bernama single-movie_reviews.php dan letakkan kode berikut di dalamnya.

1

<?php

2

 /*Template Name: New Template

3

 */

4

5

get_header(); ?>

6

<div id="primary">

7

	<div id="content" role="main">

8

	<?php

9

	$mypost = array( 'post_type' => 'movie_reviews', );

10

	$loop = new WP_Query( $mypost );

11

	?>

12

	<?php while ( $loop->have_posts() ) : $loop->the_post();?>

13

		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

14

			<header class="entry-header">

15

16

				<!-- Display featured image in right-aligned floating div -->

17

				<div style="float: right; margin: 10px">

18

					<?php the_post_thumbnail( array( 100, 100 ) ); ?>

19

				</div>

20

21

				<!-- Display Title and Author Name -->

22

				<strong>Title: </strong><?php the_title(); ?><br />

23

				<strong>Director: </strong>

24

				<?php echo esc_html( get_post_meta( get_the_ID(), 'movie_director', true ) ); ?>

25

				<br />

26

27

				<!-- Display yellow stars based on rating -->

28

				<strong>Rating: </strong>

29

				<?php

30

				$nb_stars = intval( get_post_meta( get_the_ID(), 'movie_rating', true ) );

31

				for ( $star_counter = 1; $star_counter <= 5; $star_counter++ ) {

32

					if ( $star_counter <= $nb_stars ) {

33

						echo '<img src="' . plugins_url( 'Movie-Reviews/images/icon.png' ) . '" />';

34

					} else {

35

						echo '<img src="' . plugins_url( 'Movie-Reviews/images/grey.png' ). '" />';

36

					}

37

				}

38

				?>

39

			</header>

40

41

			<!-- Display movie review contents -->

42

			<div class="entry-content"><?php the_content(); ?></div>

43

		</article>

44

45

	<?php endwhile; ?>

46

	</div>

47

</div>

48

<?php wp_reset_query(); ?>

49

<?php get_footer(); ?>

Di sini kita telah membuat halaman template sederhana menggunakan loop. Fungsi query_posts mengambil custom post type dan menampilkannya menggunakan loop. Tentu saja itu hanya loop dasar dan Anda dapat mengubahnya sesuai yang Anda inginkan. Anda juga dapat menggunakan CSS untuk mengatur tampilan agar sesuai.

Langkah 4: Gambar

Anda perlu untuk menyimpan dua gambar ikon bintang 32 x 32 piksel dalam folder plugin Anda. Namai mereka masing-masing icon.png dan grey.png. Itu saja, sekarang ulasan film ditampilkan pada satu halaman, diurutkan berdasarkan tanggal.

Dalam tutorial berikutnya saya akan menbahas lebih banyak fitur dari Custom Post Types seperti membuat halaman arsip, menciptakan taksonomi khusus, kolom khusus, dll. Silahkan memberikan saran berharga Anda.