Isang Gabay sa WordPress Custom Post Types: Creation, Display at Meta Boxes

Ang WordPress ay dinisenyo para sa pag-customize. Ito ay ginawa sa paraan kung saan ang bawat isang parte ay maaaring i-customize. Sa tutorial na ito ay ating sisiyasatin ang isa sa pinakamabisang tampok ng WordPress na kilala bilang Custom Post Types at kung paanong ang WordPress ay nakaabot sa bagong lebel sa pagdating nitong kamangha-manghang tampok na ito.

Ano ba talaga ang Custom Post Types?

Ipagpalagay na nais mong ang iyong blog ay magkaroon ng hiwalay na seksyon para sa Movie Reviews. Sa paggamit ng Custom Post Types maaari kang gumawa ng bagong uri ng aytem tulad ng Posts and Pages, na maglalaman ng ibang pangkat ng datos. Ito ay magkakaroon ng bagong administration menu, dedicated editing pages, custom taxonomies at marami pang utilities na kinakailangan para sa ganap na paglilimbag.

Ang mga Custom Post Types ay isang bagong pangkat ng administrative options na lumalabas kasama ang mga default post types tulad ng Posts, Pages, Attachments etc. Ang Custom Post Type ay kayang mag-imbak ng anumang uri ng impormasyon. Ito ay may dedicated editor, media uploader, at gumagamit ng mga pangkasalukuyang WordPress table structure para sa madaling data management. Ang pinakapangunahing bentahe ng paggawa ng custom post types gamit ang WordPress API ay nag-e-equip ito ng sarili nang mahusay gamit ang kasalukuyang themes at templates. Ang mga Custom Post Types ay SEO friendly dahil sa mga mahusay na permalinks nito.

Bakit dapat gumamit ng Custom Post Types?

Ang Custom Post Types ay tumutulong sa atin upang mapanatili ang iba’t-ibang uri ng posts sa iba’t ibang buckets. Hinihiwalay nito ang ating mga regular posts mula sa iba. Simple lang!

Tayo ay gumawa ng Custom Post Type Plugin

Dito tayo ay gagawa ng custom post type plugin na magpapakita ng mga paboritong movie reviews. Tayo ay magsimula.

Hakbang 1: Gumawa ng WordPress Plugin Directory

Buksan ang iyong WordPress Plugin directory at gumawa ng bagong directory na pinamagatang Movie-Reviews.

Hakbang 2: Gumawa ng PHP File

Buksan ang directory at gumawa ng PHP file na pinamagatang Movie-Reviews.php.

Hakbang 3: Maglagay ng Header

Buksan ang file at maglagay ng angkop na header sa itaas.

<?php
/*
Plugin Name: Movie Reviews
Plugin URI: http://wp.tutsplus.com/
Description: Declares a plugin that will create a custom post type displaying movie reviews.
Version: 1.0
Author: Soumitra Chakraborty
Author URI: http://wp.tutsplus.com/
License: GPLv2
*/
?>

Hakbang 4: Irehistro ang Custom Function

Bago ang pagsara ng PHP command, i-type ang sumusunod na linya ng code upang ganapin ang custom function na pinamagatang create_movie_review sa initialization phase sa bawat beses na ang isang pahina ay ginawa.

add_action( 'init', 'create_movie_review' );

Hakbang 5: Function Implementation

Magtakda ng implementation ng create_movie_review function.

function create_movie_review() {
  register_post_type( 'movie_reviews',
		array(
			'labels' => array(
				'name' => 'Movie Reviews',
				'singular_name' => 'Movie Review',
				'add_new' => 'Add New',
				'add_new_item' => 'Add New Movie Review',
				'edit' => 'Edit',
				'edit_item' => 'Edit Movie Review',
				'new_item' => 'New Movie Review',
				'view' => 'View',
				'view_item' => 'View Movie Review',
				'search_items' => 'Search Movie Reviews',
				'not_found' => 'No Movie Reviews found',
				'not_found_in_trash' => 'No Movie Reviews found in Trash',
				'parent' => 'Parent Movie Review'
			),

			'public' => true,
			'menu_position' => 15,
			'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ),
			'taxonomies' => array( '' ),
			'menu_icon' => plugins_url( 'images/image.png', __FILE__ ),
			'has_archive' => true
		)
	);
}

Ang register_post_type function ay ginagawa ang karamihan ng trabaho para sa atin. Sa oras na ito ay tinatawag hinahanda nito ang WordPress environoment para sa new custom post type kasama ang iba’t-ibang seksyon sa admin. Ang function na ito ay kumukuha ng dalawang argumento: ang una ay isang natatanging pamagat ng custom post type at ang pangalawa ay tanghal na nagpapakita ng mga katangian ng bagong custom post type. Dito ito ay ibang tanghal na naglalaman ng iba’t ibang tatak, na nagpapakitang ang text strings na idi-display sa iba’t-ibang seksyon ng custom post type katulad ng ‘name’ ay nagpapakita ng custom post type name sa dashboard, ang ‘edit’ at ‘view’ naman ay ipinapakita sa Edit at View buttons. Sa tingin ko ang iba ay maliwanag na.

Sa mga sumusunod na argumento:

• 'public' => true tinitiyak ang visibility ng custom post type sa admin panel at sa front end.
• 'menu_position' => 15 tinitiyak ang menu position ng custom post type.
• 'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ) tinitiyak ang mga tampok ng custom post type na idi-display.
• 'taxonomies' => array( '' ) gumagawa ng mga custom taxonomies. Dito ito ay hindi naka-define.
• 'menu_icon' => plugins_url( 'images/image.png', __FILE__ ) pinapakita ang admin menu icon.
• 'has_archive' => true pinahihintulutan ang pagdokumento ng custom post type.

Maaaring puntahan ang WordPress Codex register_post_type page para sa dagdag na detalye sa mga iba’t-ibang argumentong gamit sa mga custom post types.

Hakbang 6: Icon para sa Custom Post Type

Mag-save ng 16x16 pixel icon image sa iyong kasalukuyang plugin folder. Ito ay kinakailangan para sa custom post type icon sa dashboard.

Hakbang 7: Paganahin ang Plugin

Paganahin ang plugin at iyon na, ikaw ay mayroon nang bagong custom post type na may text editor, publishing at featured image controls, comment control at ang custom fields editor.

Hakbang 8: Magdagdag ng Bagong Item

Pindutin ang Add New option upang pumunta sa custom post type editor. Maglagay ng movie title, isang review at magtakda ng tampok na image.

Hakbang 9: Mag-publish

I-publish ang post at pindutin ang View Movie Review upang makita ang nagawang movie review sa browser.

Paggawa ng Meta Box Fields para sa Custom Post Types

Ang meta box mechanism ay ginagamit ang tulong ng built in na WordPress meta box system at tumutulong na magdagdag ng fields required lalo na para sa mga custom post types, na hindi kinakailangan ang default custom fields sa editor.

Hakbang 1: Pagrehistro ng Custom Function

Buksan ang Movie-Reviews.php file at idagdag ang sumusunod na code bago ang PHP end tag. Ito ay nagrerehistro ng function na matatawag kapag ang WordPress admin interface ay pinuntahan.

add_action( 'admin_init', 'my_admin' );

Hakbang 2: Implementation ng Custom Function

Magdagdag ng implementation ng my_admin function na nagrerehistro ng meta box at inuugnay ito sa movie_reviews custom post type.

function my_admin() {
	add_meta_box( 'movie_review_meta_box',
		'Movie Review Details',
		'display_movie_review_meta_box',
		'movie_reviews', 'normal', 'high'
	);
}

Dito ang add_meta_box ay ang function na ginagamit upang magdagdagdag ng mga meta boxes sa custom post types. Paliwanag ng nakatakdang katangian:

• movie_review_meta_box ay ang kinakailangan na HTML id attribute
• Movie Review Details ay ang tekstong nakikita sa pamagat ng meta box section
• display_movie_review_meta_box ay ang callback na nagbibigay ng nilalaman ng meta box
• movie_review say ang tawag sa custom post type kung saan ang meta box ay naka-display
• normal tumutuokoy ng parte ng pahina kung saan ang edit screen section ay dapat ipakita
• high tumutukoy ng prayoridad sa konteksto kung saan ang mga boxes ay dapat makita

Hakbang 3: Pag-implement ng display_movie_review_meta_box Function

<?php
function display_movie_review_meta_box( $movie_review ) {
	// Retrieve current name of the Director and Movie Rating based on review ID
	$movie_director = esc_html( get_post_meta( $movie_review->ID, 'movie_director', true ) );
	$movie_rating = intval( get_post_meta( $movie_review->ID, 'movie_rating', true ) );
	?>
	<table>
		<tr>
			<td style="width: 100%">Movie Director</td>
			<td><input type="text" size="80" name="movie_review_director_name" value="<?php echo $movie_director; ?>" /></td>
		</tr>
		<tr>
			<td style="width: 150px">Movie Rating</td>
			<td>
				<select style="width: 100px" name="movie_review_rating">
				<?php
				// Generate all items of drop-down list
				for ( $rating = 5; $rating >= 1; $rating -- ) {
				?>
					<option value="<?php echo $rating; ?>" <?php echo selected( $rating, $movie_rating ); ?>>
					<?php echo $rating; ?> stars <?php } ?>
				</select>
			</td>
		</tr>
	</table>
	<?php
}
?>

Ang code na ito ay nagbibigay ng nilalaman ng meta box. Dito tayo ay gumamit ng object variable na naglalaman ng impormasyon ng bawat isa sa mga movie reviews na naka-display sa editor. Gamit ang object na ito ating nabawi ang post ID at ginamit iyon upang tanungin ang database upang makuha ang nakaugnay na Director’s name at Rating na siyang magbibigay ng fields sa screen. Kapag ang isang bagong entry ay idinagdag ang get_post_meta ay nagbabalik ng empty string na nagreresulta sa pagdi-display ng empty fields sa meta box.

Hakbang 4: Pagrehistro sa Save Post Function

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

Ang function na ito ay tinatawag kapag ang mga posts ay nai-save sa database.

Hakbang 5: Pag-implement ng add_movie_review_fields Function

function add_movie_review_fields( $movie_review_id, $movie_review ) {
	// Check post type for movie reviews
	if ( $movie_review->post_type == 'movie_reviews' ) {
		// Store data in post meta table if present in post data
		if ( isset( $_POST['movie_review_director_name'] ) && $_POST['movie_review_director_name'] != '' ) {
			update_post_meta( $movie_review_id, 'movie_director', $_POST['movie_review_director_name'] );
		}
		if ( isset( $_POST['movie_review_rating'] ) && $_POST['movie_review_rating'] != '' ) {
			update_post_meta( $movie_review_id, 'movie_rating', $_POST['movie_review_rating'] );
		}
	}
}

Ang function ay pinapagana kapag ang mga posts ay naka-save o binura mula sa admin panel. Dito matapos magsuri para sa uri ng natanggap na post data, kung ito ay isang Custom Post Type ito ay magsusuri muli upang makita kung ang meta box elements ay natalagahan ng halaga at sa wakas ay inilalagay ang halaga sa mga fields na iyon.

Hakbang 6: Pag-disable ng Default Custom Fields Option

Habang ginagawa ang custom post type tayo ay nakapag-tukoy ng isang function create_movie_review. Tanggalin ang [custom-fields] element mula sa [supports] array dahil ito ay hindi na kinakailangan. Tanggalin ang custom-fields element mula sa supports array dahil ito ay hindi na kinakailangan. Ngayon kapag iyong na-save ang file at binuksan ang Movie Reviews editor, iyong mapapansin ang dalawang fields sa meta box na pinamagatang Movie Author at Movie Rating. Kagaya nito ikaw ay maaaring magdagdag rin ng ibang mga elemento.

Paggawa ng isang Custom Template para sa Custom Post Types

Ang tamang paraan ng pag-display ng custom post type data ay sa paggamit ng custom templates para sa bawat isa sa mga custom post types. Dito tayo ay gagawa ng template na nagdi-display ng lahat ng Movie Reviews na inilagay gamit ang Movie Review Custom Post Type.

Hakbang 1: Magrehistro ng Function upang Mapwersa ang Dedicated Template

Buksan ang Movie-Reviews.php file at idagdag ang sumusunod na code bago ang PHP end tag. Ito ay nagrerehistro ng function na matatawag kapag ang WordPress admin interface ay pinuntahan.

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

Hakbang 2: Pag-implement ng Function

function include_template_function( $template_path ) {
	if ( get_post_type() == 'movie_reviews' ) {
		if ( is_single() ) {
			// checks if the file exists in the theme first,
			// otherwise serve the file from the plugin
			if ( $theme_file = locate_template( array ( 'single-movie_reviews.php' ) ) ) {
				$template_path = $theme_file;
			} else {
				$template_path = plugin_dir_path( __FILE__ ) . '/single-movie_reviews.php';
			}
		}
	}
	return $template_path;
}

Dito ang code ay naghahanap ng template tulad ng single-(post-type-name).php sa kasalukuyang theme directory. Kapag hindi ito nahanap ito ay naghahanap sa plugin directory para sa template, na aming binibigay bilang parte ng plugin. Ang template_include hook ay ginamit upang palitan ang default behavior at magtalaga ng tiyak na template.

Hakbang 3: Gumawa ng Single Page Template File

Matapos i-save ang unang binuksang plugin file, gumawa ng isa pang PHP file na pinamagatang single-movie_reviews.php at ilagay ang sumusunod na code dito.

<?php
 /*Template Name: New Template
 */

get_header(); ?>
<div id="primary">
	<div id="content" role="main">
	<?php
	$mypost = array( 'post_type' => 'movie_reviews', );
	$loop = new WP_Query( $mypost );
	?>
	<?php while ( $loop->have_posts() ) : $loop->the_post();?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<header class="entry-header">

				<!-- Display featured image in right-aligned floating div -->
				<div style="float: right; margin: 10px">
					<?php the_post_thumbnail( array( 100, 100 ) ); ?>
				</div>

				<!-- Display Title and Author Name -->
				<strong>Title: </strong><?php the_title(); ?><br />
				<strong>Director: </strong>
				<?php echo esc_html( get_post_meta( get_the_ID(), 'movie_director', true ) ); ?>
				<br />

				<!-- Display yellow stars based on rating -->
				<strong>Rating: </strong>
				<?php
				$nb_stars = intval( get_post_meta( get_the_ID(), 'movie_rating', true ) );
				for ( $star_counter = 1; $star_counter <= 5; $star_counter++ ) {
					if ( $star_counter <= $nb_stars ) {
						echo '<img src="' . plugins_url( 'Movie-Reviews/images/icon.png' ) . '" />';
					} else {
						echo '<img src="' . plugins_url( 'Movie-Reviews/images/grey.png' ). '" />';
					}
				}
				?>
			</header>

			<!-- Display movie review contents -->
			<div class="entry-content"><?php the_content(); ?></div>
		</article>

	<?php endwhile; ?>
	</div>
</div>
<?php wp_reset_query(); ?>
<?php get_footer(); ?>

Dito tayo ay nakagawa ng basic page template gamit ang loop. Ang query_posts function ay binabawi ang mga custom post type elements at dini-display ang mga ito gamit ang loop. Siyempre ito ay isa lamang basic loop at maaari mo itong laruin sa abot ng iyong nais. Maaari mo rin gamitin ang angkop na CSS styles upang i-format ang elements nang ayon.

Hakbang 4: Mga Images

Kailangan mong mag-save ng dalawang larawan ng star icons 32x32 pixels sa iyong plugin folder. Pamagatan silang icon.png at grey.png nang magkasunod. Iyon lang, at ngayon ang movie reviews ay naka-display sa iisang pahina na nakabukod ayon sa petsa.

Sa aking susunod na tutorial ay aking tatalakayin ang iba pang features ng Custom Post Types tulad ng paggawa ng archived page, paggawa ng custom taxonomies, custom columns at iba pa. Huwag mag-alinlangang mamahagi ng inyong mga mahalagang mungkahi.