Vodič za WordPress Prilagođene Post Tipove: Izrada, Prikaz i Meta Boxovi

WordPress je izgrađen za prilagođavanje. Kreiran je na takav način da se svaki njegov dio može prilagođavati. U ovom tutorialu ćemo istraživati jednu od najmoćnijih WordPress značajki poznatu kao Custom Post Types (Prilagođeni Post Tipovi) i kako je WordPress dostigao novu razinu pomoću ove predivne značajke. 

Što su Zapravo Prilagođeni Post Tipovi?

Pretpostavimo da želite da vam blog ima dva odvojena dijela za Kritike Filmova. Koristeći Custom Post Types možete izraditi novi tip stavke kao što su Postovi i Stranice, koje sadrže različiti set podataka. Imati će novi administracijski izbornik, posvećene stranice za uređivanje, prilagođene taksonomije i mnoge druge korisne stavke potrebne za brzinsko objavljivanje.

Custom Post Types su novi set administrativnih opcija koje se pojavljuju zajedno sa zadanim post tipovima kao što su Postovi, Stranice, Privitci, itd. Custom Post Type može pohraniti bilo koji tip informacije. Ima ugrađeni editor, uploader za medije i koristi postojeću WordPress tabličnu strukturu za jednostavnost u upravljanju podacima. Glavna prednost izrade prilagođenih post tipova koristeći WordPress API je to što se dobro opskrbljuje sa postojećim temama i predlošcima. Custom Post Types su također podržavaju SEO zbog njihovih izvanrednih permalinkova.

Zašto Koristiti Custom Post Types?

Custom Post Types nam pomažu zadržati različite tipove postova u različitim poljima. Odvaja obične postove od drugih. Vrlo jednostavno!

Izradimo Custom Post Type Plugin

Ovdje ćemo izraditi custom post type plugin koji će prikazivati omiljene kritike filma. Krenimo.

1. korak: Izradite WordPress Plugin Direktorij

Otvorite svoj WordPress Plugin direktorij i izradite novi direktorij pod imenom Movie-Reviews.

2. korak: Izradite PHP Datoteku

Otvorite direktorij i izradite PHP datoteku pod imenom Movie-Reviews.php.

3. korak: Dodajte Zaglavlje

Otvorite datoteku i dodajte prikladno zaglavlje na vrhu.

1

2

<?php

3

/*

4

Plugin Name: Movie Reviews

5

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

6

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

7

Version: 1.0

8

Author: Soumitra Chakraborty

9

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

10

License: GPLv2

11

*/

12

?>

4. korak: Registrirajte Prilagođenu Funkciju

Prije zatvaranja PHP naredbe, upišite sljedeću liniju koda da izvršite prilagođenu funkciju nazvanu create_movie_review tijekom inicijalizacijske faze svaki puta kada je stranica generirana.

1

2

add_action( 'init', 'create_movie_review' );

5. korak: Implementacija Funkcije

Omogućite implementaciju create_movie_review funkcije.

1

2

function create_movie_review() {

3

  register_post_type( 'movie_reviews',

4

		array(

5

			'labels' => array(

6

				'name' => 'Movie Reviews',

7

				'singular_name' => 'Movie Review',

8

				'add_new' => 'Add New',

9

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

10

				'edit' => 'Edit',

11

				'edit_item' => 'Edit Movie Review',

12

				'new_item' => 'New Movie Review',

13

				'view' => 'View',

14

				'view_item' => 'View Movie Review',

15

				'search_items' => 'Search Movie Reviews',

16

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

17

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

18

				'parent' => 'Parent Movie Review'

19

			),

20

21

			'public' => true,

22

			'menu_position' => 15,

23

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

24

			'taxonomies' => array( '' ),

25

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

26

			'has_archive' => true

27

		)

28

	);

29

}

register_post_type funkcija za nas čini većinu posla. Čim je pozvana, priprema WordPress okruženje za novi prilagođeni post tip uključujući različite odjeljke u adminu. Ova funkcija uzima dva argumenta: prvi je unikatan name prilagođenog post tipa i drugi je niz koji demonstrira svojstva novog prilagođenog post tipa. Ovdje je još jedan niz koji sadrži različite etikete, koje indiciraju stringove teksta koje će biti prikazani u različitim odjeljcima prilagođenog post tipa. 'name' prikazuje ime prilagođenog post tipa u nadzornoj ploči, 'edit' i 'view' su prikazani u Edit i View gumbima zasebno. Mislim da je ostalo jasno samo po sebi.

U sljedećim argumentima:

• 'public' => true određuje vidljivost prilagođenog post tipa u admin kartici i front endu.
• 'menu_position' => 15 određuje poziciju izbornika prilagođenog post tipa.
• 'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ) određuje značajke prilagođenog post tipa koji će biti prikazan.
• 'taxonomies' => array( '' ) kreira prilagođene taksonomije. Ovdje nije definirano.
• 'menu_icon' => plugins_url( 'images/image.png', __FILE__ ) prikazuje ikonu admin izbornika.
• 'has_archive' => true omogućuje arhiviranje prilagođenog post tipa.

Molim posjetite WordPress Codex register_post_type stranicu za više detalja o različitim argumentima korištenim u prilagođenim post tipovima.

6. korak: Ikona za Custom Post Type

Spremite 16 x 16 px sliku ikone u svoju trenutnu plugin mapu. Ovo je potrebno za ikonu prilagođenog post tipa u kontrolnoj ploči.

7. korak: Aktivirajte Plugin

Aktivirajte plugin i to je to, imate novi prilagođeni post tip koji ima tekst editor, kontrole za objavljivanje i sadržaj, upravljanje komentarima i prilagođena polja za editiranje.

8. korak: Dodajte Novu Stavku

Kliknite na opciju Add New kako biste išli na editor prilagođenog post tipa. Dodajte naslov filma, kritiku i podesite sadržajnu sliku.

9. korak: Objavite

Objavite post i kliknite View Movie Review da vidite izrađenu kritiku filma u pretraživaču.e

Izrada Meta Box Polja za Custom Post Types

Meta box mehanizam koristi pomoć ugrađenu u WordPress meta box sistem i pomaže dodati polja potrebna posebno za prilagođene post tipove, bez potrebnih zadanih polja u editoru.

1. korak: Registracija Prilagođene Funkcije

Otvorite Movie-Reviews.php datoteku i dodajte sljedeći kod prije PHP završnog taga. Ovo registrira da se pozove funkcija kada je posjećeno WordPress admin sučelje.

1

2

add_action( 'admin_init', 'my_admin' );

2. korak: Implementacija Prilagođene Funkcije

Dodajte implementaciju my_admin funkcije koja registrira meta bok i povezuje ga sa movie_reviews prilagođenim post tipom.

1

2

function my_admin() {

3

	add_meta_box( 'movie_review_meta_box',

4

		'Movie Review Details',

5

		'display_movie_review_meta_box',

6

		'movie_reviews', 'normal', 'high'

7

	);

8

}

Ovdje je add_meta_box funkcija dodana za dodavanje meta boxova prilagođenim post tipovima. Objašnjenje dodijeljenih atributa:

• movie_review_meta_box je potreban HTML id atribut
• Movie Review Details je tekst vidljiv na zaglavlju meta box odjeljka
• display_movie_review_meta_box je povratni poziv koji renderira sadržaj meta boxa
• movie_reviews je ime prilagođenog post tipa gdje će biti prikazan meta box
• normal određuje dio stranice gdje bi trebao biti prikazan odjeljak za editiranje ekrana
• high određuje prioritet unutar konteksta gdje bi trebali biti prikazani prozori

3. korak: Implementacija display_movie_review_meta_box funkcije

1

2

<?php

3

function display_movie_review_meta_box( $movie_review ) {

4

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

5

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

6

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

7

	?>

8

	<table>

9

		<tr>

10

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

11

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

12

		</tr>

13

		<tr>

14

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

15

			<td>

16

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

17

				<?php

18

				// Generate all items of drop-down list

19

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

20

				?>

21

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

22

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

23

				</select>

24

			</td>

25

		</tr>

26

	</table>

27

	<?php

28

}

29

?>

Ovaj kod renderira sadržaj meta boxa. Ovdje smo upotrijebili varijablu koja sadrži informaciju svake od kritika filmova prikazanih u editoru. Koristeći ovaj objekt povukli smo post ID i upotrijebili ga da pretražimo bazu podataka da dobijemo povezano ime redatelja i ocjenu što zauzvrat renderira polja na ekranu. Kada je dodan novi unos, tada get_post_meta vraća prazan string koji rezultira prikazivanjem praznih polja u meta boxu.

4. korak: Registriranje Save Post Funkcije

1

2

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

Ova funkcija se poziva kada je post pohranjen u bazu podataka.

5. korak: Implementacija add_movie_review_fields funkcije

1

2

function add_movie_review_fields( $movie_review_id, $movie_review ) {

3

	// Check post type for movie reviews

4

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

5

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

6

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

7

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

8

		}

9

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

10

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

11

		}

12

	}

13

}

Ova funkcija je izvršena kada su postovi pohranjeni ili izbrisani iz admin kartice. Ovdje nakon povjeravanja za tip zaprimljenog post podatka, ako je Custom Post Type, tada provjerava ponovo da vidi jesu li meta box elementima dodijeljene vrijednosti i zatim konačno pohranjuje vrijednosti u ta polja.

6. korak: Onemogućivanje Opcije Zadanog Prilagođenog Polja

Kod izrade prilagođenog post tipa definirali smo funkciju create_movie_review. Uklonite custom_fields element iz supports polja jer ovo više nije potrebno. Sada, ako spremite datoteku i otvorite Movie Reviews editor, primijetiti ćete dva polja u meta boxu nazvana Movie Author i Movie Rating. Na sličan način možete dodati i druge elemente.

Izrada Prilagođenog Predloška Ugrađenog u Prilagođene Post Tipove

Pravilan način prikazivanja custom post type podataka je upotreba prilagođenih predložaka za svaki od prilagođenih post tipova. Ovdje ćemo kreirati predložak koji prikazuje sve Movie Reviews unesene koristeći Move Review Custom Post Type.

1. korak: Registracija Funkcije za Forsiranje Ugrađenog Predloška

Otvorite Movie-Reviews.php datoteku i dodajte sljedeći kod prije PHP završnog taga. Ovo registrira funkciju da bude pozvana kada je posjećeno WordPress admin sučelje.

1

2

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

2. korak: Implementacija funkcije

1

2

function include_template_function( $template_path ) {

3

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

4

		if ( is_single() ) {

5

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

6

			// otherwise serve the file from the plugin

7

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

8

				$template_path = $theme_file;

9

			} else {

10

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

11

			}

12

		}

13

	}

14

	return $template_path;

15

}

Ovdje kod traži predložak poput single-(post-type-name).php u trenutnom direktoriju teme. Ako nije pronađen, tada traži predložak u plugin direktoriju, koji dostavljamo kao dio plugina. Za promjenu zadanog ponašanja i pojačanje specifičnog predloška korišten je template include.

3. korak: Izrada Datoteke za Predložak Jedne Stranice

Nakon pohranjene prethodno otvorene plugin datoteke, izradite još jednu PHP datoteku nazvanu single-movie_reviews.php i u nju smjestite sljedeći kod.

1

2

<?php

3

 /*Template Name: New Template

4

 */

5

6

get_header(); ?>

7

<div id="primary">

8

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

9

	<?php

10

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

11

	$loop = new WP_Query( $mypost );

12

	?>

13

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

14

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

15

			<header class="entry-header">

16

17

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

18

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

19

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

20

				</div>

21

22

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

23

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

24

				<strong>Director: </strong>

25

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

26

				<br />

27

28

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

29

				<strong>Rating: </strong>

30

				<?php

31

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

32

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

33

					if ( $star_counter <= $nb_stars ) {

34

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

35

					} else {

36

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

37

					}

38

				}

39

				?>

40

			</header>

41

42

			<!-- Display movie review contents -->

43

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

44

		</article>

45

46

	<?php endwhile; ?>

47

	</div>

48

</div>

49

<?php wp_reset_query(); ?>

50

<?php get_footer(); ?>

Ovdje smo izradili predložak za osnovnu stranicu koristeći loop. query_posts funkcija dohvaća custom post type elemente i prikazuje ih koristeći loop. Naravno to je samo osnovni loop i možete se igrati njime kako god želite. Možete također upotrijebiti prikladne CSS stilove kako biste prema njima formatirali elemente.

4. korak: Slike

U svoju plugin datoteku morate pohraniti dvije ikone zvjezdica dimenzija 32 x 32 px. Nazovite ih icon.png i grey.png. To je sve, sada će filmske kritike biti prikazane na jednoj stranici sortirane po datumu.

U sljedećem tutorialu ću obraditi više značajki Prilagođenih Post Tipova poput izrade stranice arhive, izrade prilagođenih taksonomija, prilagođenih stupaca, itd. Molim vas da ostavite svoje cijenjene prijedloge.