Cara menggunakan custom shortcode wordpress

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

Indonesian (Bahasa Indonesia) translation by Lukman Nulhakim (you can also view the original English article)

Di banyak situs klien yang saya buat, saya menemukan ada saat-saat ketika saya perlu memasukkan daftar pos pada halaman. Saya tidak berbicara tentang halaman arsip di sini, tetapi menambahkan daftar kustom ke halaman statis yang ada.

Sebagai contoh, saya mungkin ingin mendaftar beberapa posting di halaman 'About', atau situs mungkin memerlukan topik mendalam pada halaman, dengan daftar posting dan jenis posting kustom yang terkait dengan topik itu.

Salah satu cara untuk melakukan ini adalah dengan membuat template laman khusus untuk menyertakan konten halaman saat ini ditambah hasil query kustom kedua, tetapi jika Anda ingin lebih fleksibel tentang bagaimana Anda membuat daftar posting, atau hanya ingin melakukannya beberapa kali, shortcode akan menjadi solusi yang lebih sederhana.

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara membuat shortcode sederhana untuk mencantumkan semua postingan dari jenis posting kustom, dan kemudian saya akan memperluas itu untuk membuat shortcode dengan berbagai parameter yang pengguna dapat menentukan untuk daftar posting yang diinginkan.


Apa yang Anda butuhkan untuk melengkapi Tutorial Ini

Anda akan membutuhkan sumber daya berikut:

  • Instalasi pengembangan WordPress
  • Akses ke folder plugin Anda sehingga Anda dapat membuat dan mengunggah plugin shortcode

Anda akan menemukan semua kode untuk membuat plugin ini pada code download.


Memulai: Membuat Konten

Sebelum menyiapkan shortcode, Anda harus mendaftarkan jenis posting kustom dan dua taksonomi kustom, yang akan kita gunakan untuk menguji shortcode.

Kode untuk melakukan ini terkandung dalam plugin yang saya tulis pada shortcode, meskipun pada proyek live, saya akan merekomendasikan untuk memisahkan ini dari plugin shortcode itu sendiri.

Buat file baru di folder plugins Anda dan beri nama post-listing-shortcode.php.

Tambahkan kode di bawah ini ke file.

Catatan: Membuat jenis posting kustom dan taksonomi tidak terpaku pada pembelajaran dari tutorial ini. Jika Anda mau, Anda dapat menyalin kode ini dari file unduhan dan melewati tahap ini.

<?php
/*
Plugin Name: WPTutsPlus Post-listing shortcode
Plugin URI: https://rachelmccollin.co.uk
Description: This plugin provides a shortcode to list posts, with parameters. It also registers a couple of post types and tacxonomies to work with.
Version: 1.0
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk
License: GPLv2
*/
// register custom post type to work with
add_action( 'init', 'rmcc_create_post_type' );
function rmcc_create_post_type() {   // clothes custom post type
	// set up labels
	$labels = array(
		'name' =--> 'Clothes',
		'singular_name' => 'Clothing Item',
		'add_new' => 'Add New',
		'add_new_item' => 'Add New Clothing Item',
		'edit_item' => 'Edit Clothing Item',
		'new_item' => 'New Clothing Item',
		'all_items' => 'All Clothes',
		'view_item' => 'View Clothing Item',
		'search_items' => 'Search Clothes',
		'not_found' =>  'No Clothes Found',
		'not_found_in_trash' => 'No Clothes found in Trash',
		'parent_item_colon' => '',
		'menu_name' => 'Clothes',
	);
	register_post_type(
		'clothes',
		array(
			'labels' => $labels,
			'has_archive' => true,
			'public' => true,
			'hierarchical' => true,
			'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail','page-attributes' ),
			'taxonomies' => array( 'post_tag', 'category' ),
			'exclude_from_search' => true,
			'capability_type' => 'post',
		)
	);
}

// register two taxonomies to go with the post type
add_action( 'init', 'rmcc_create_taxonomies', 0 );
function rmcc_create_taxonomies() {
	// color taxonomy
	$labels = array(
		'name'              => _x( 'Colors', 'taxonomy general name' ),
		'singular_name'     => _x( 'Color', 'taxonomy singular name' ),
		'search_items'      => __( 'Search Colors' ),
		'all_items'         => __( 'All Colors' ),
		'parent_item'       => __( 'Parent Color' ),
		'parent_item_colon' => __( 'Parent Color:' ),
		'edit_item'         => __( 'Edit Color' ),
		'update_item'       => __( 'Update Color' ),
		'add_new_item'      => __( 'Add New Color' ),
		'new_item_name'     => __( 'New Color' ),
		'menu_name'         => __( 'Colors' ),
	);
	register_taxonomy(
		'color',
		'clothes',
		array(
			'hierarchical' => true,
			'labels' => $labels,
			'query_var' => true,
			'rewrite' => true,
			'show_admin_column' => true
		)
	);
	// fabric taxonomy
	$labels = array(
		'name'              => _x( 'Fabrics', 'taxonomy general name' ),
		'singular_name'     => _x( 'Fabric', 'taxonomy singular name' ),
		'search_items'      => __( 'Search Fabrics' ),
		'all_items'         => __( 'All Fabric' ),
		'parent_item'       => __( 'Parent Fabric' ),
		'parent_item_colon' => __( 'Parent Fabric:' ),
		'edit_item'         => __( 'Edit Fabric' ),
		'update_item'       => __( 'Update Fabric' ),
		'add_new_item'      => __( 'Add New Fabric' ),
		'new_item_name'     => __( 'New Fabric' ),
		'menu_name'         => __( 'Fabrics' ),
	);
	register_taxonomy(
		'fabric',
		'clothes',
		array(
			'hierarchical' => true,
			'labels' => $labels,
			'query_var' => true,
			'rewrite' => true,
			'show_admin_column' => true
		)
	);
}
?>

Hal tersebut menunjukan WordPress tentang plugin dan mendaftarkan jenis tulisan kustom 'clothes' dan dua taksonomi, 'color' dan 'fabric'.

Simpan plugin ini dan aktifkan melalui halaman Plugins di WordPress.

Sekarang Anda memiliki jenis posting kustom dan taksonomi di tempat Anda, buat beberapa posting menggunakannya. Dalam screenshot di bawah ini Anda dapat melihat konten yang saya buat:

Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress

Membuat Daftar Shortcode Sederhana

Jika Anda hanya ingin mendaftarkan konten dalam satu cara menggunakan shortcode Anda, Anda dapat membuat shortcode yang sangat sederhana yang tidak menggunakan parameter.

Buka file plugin Anda lagi dan tambahkan yang berikut:

// create shortcode to list all clothes which come in blue
add_shortcode( 'list-posts-basic', 'rmcc_post_listing_shortcode1' );
function rmcc_post_listing_shortcode1( $atts ) {
	ob_start();
	$query = new WP_Query( array(
		'post_type' => 'clothes',
		'color' => 'blue',
		'posts_per_page' => -1,
		'order' => 'ASC',
		'orderby' => 'title',
	) );
	if ( $query->have_posts() ) { ?>
		<ul class="clothes-listing">
			<?php while ( $query->have_posts() ) : $query->the_post(); ?>
			<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</li>
			<?php endwhile;
			wp_reset_postdata(); ?>
		</ul>
	<?php $myvariable = ob_get_clean();
	return $myvariable;
	}
}

Kode ini membuat shortcode sederhana, menggunakan WP_Queryuntuk menjalankan query khusus pada konten Anda dan menampilkan hasilnya dalam daftar. Ketika saya mengetik [list-posts-basic] ke dalam halaman, hasilnya seperti yang ditunjukkan dalam screenshot ini:

Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress

Menambahkan Beberapa Parameter untuk Memodifikasi query

Shortcode akan jauh lebih bermanfaat jika pengguna dapat menambahkan parameter mereka sendiri, memilih misalnya:

  • Berapa banyak posting ke daftar
  • Jenis posting apa untuk query
  • Kategori untuk disertakan
  • Fabrics dan colors yang disertakan
  • Mengurutkan Parameter

Untuk menambahkan hal ini ke shortcode, Anda dapat memanfaatkan fungsi shortcode_atts(), yang memungkinkan Anda untuk menentukan beberapa atribut default yang dapat diganti oleh user.

Sekali lagi di file plugin Anda dan di bawah kode untuk shortcode pertama, tambahkan yang berikut:

// create shortcode with parameters so that the user can define what's queried - default is to list all blog posts
add_shortcode( 'list-posts', 'rmcc_post_listing_parameters_shortcode' );
function rmcc_post_listing_parameters_shortcode( $atts ) {
	ob_start();

	// define attributes and their defaults
	extract( shortcode_atts( array (
		'type' => 'post',
		'order' => 'date',
		'orderby' => 'title',
		'posts' => -1,
		'color' => '',
		'fabric' => '',
		'category' => '',
	), $atts ) );

	// define query parameters based on attributes
	$options = array(
		'post_type' => $type,
		'order' => $order,
		'orderby' => $orderby,
		'posts_per_page' => $posts,
		'color' => $color,
		'fabric' => $fabric,
		'category_name' => $category,
	);
	$query = new WP_Query( $options );
	// run the loop based on the query
	if ( $query->have_posts() ) { ?>
		<ul class="clothes-listing ">
			<ul class="clothes-listing ">
				<li id="post-<?php the_ID(); ?>">></li>
			</ul>
		</ul>
	<?php
		$myvariable = ob_get_clean();
		return $myvariable;
	}
}

Catatan: Penggunaan ob_start() dan ob_get_clean() memastikan bahwa loop adalah output di tempat di halaman Anda atau posting yang telah Anda tambahkan shortcode. Jika Anda tidak menambahkan ini, daftar akan ditampilkan di bagian atas konten.

Secara default kode ini mencantumkan semua posting dalam urutan urutan menurun, jadi jika Anda mengetik [list-posts] ke dalam satu halaman atau posting, hasilnya adalah seperti pada screenshoot ini:

Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress

Namun, jika Anda menambahkan beberapa parameter, hal-hal menjadi lebih menarik. Misalnya, untuk mencantumkan semua pakaian yang berwarna hitam, saya mengetik [list-posts type="clothes" color="black" orderby="name" order="ASC"]:

Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress

Atau untuk mencantumkan semua pakaian dalam kategori 'smart' yang saya ketik [list-posts type="clothes" category="smart" orderby="name" order="ASC"]:

Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress
Cara menggunakan custom shortcode wordpress

Jika perlu, Anda dapat menentukan lebih banyak atribut yang dapat digunakan oleh pengguna, tetapi Anda harus menyertakan semua yang tersedia di plugin Anda, dalam fungsi extract( shortcode_atts)).

Anda tidak perlu menentukan default untuk semua - misalnya saya sudah meninggalkan kategori dan parameter taksonomi kosong dalam contoh. Parameter yang dapat Anda definisikan adalah salah satu dari yang dapat ditentukan untuk WP_Query - untuk daftar lengkap, lihat Codex page.


Ringkasan

Mampu memasukkan daftar posting ke halaman atau posting bisa sangat berguna. Hal ini dapat menghemat Anda tanpa harus memodifikasi file template Anda atau menulis template halaman kustom.

Shortcode yang telah Anda pelajari tentang cara membuat menggunakan plugin ini dapat digunakan dengan banyak cara, dan tentu saja Anda dapat dengan mudah mengubah apa yang dihasilkan oleh shortcode - contoh saya menampilkan daftar bullet dengan judul posting yang diapit dalam tautan ke laman mereka, tetapi Anda bisa mengganti kode di dalam loop dengan tag template untuk menampilkan konten, menampilkan gambar, atau apa pun.


Resources

Beberapa sumber yang bermanfaat tentang topik yang dibahas di atas:

  • API Shortcode
  • Shortcode Atribut
  • Parameter WP_Query