1. Code
  2. WordPress
  3. Plugin Development

Crea un shortcode para enumerar publicaciones con varios parámetros

Scroll to top

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

En muchos de los sitios de clientes que creo, hay ocasiones en las que necesito incluir una lista de publicaciones en una página. No estoy hablando de páginas de archivo aquí, sino de agregar una lista personalizada a una página estática existente.

Por ejemplo, es posible que desee enumerar algunas publicaciones en la página 'Acerca de', o el sitio puede requerir una página detallada para un tema, con una lista de publicaciones y tipos de publicaciones personalizadas relacionadas con ese tema.

Una forma de hacerlo es creando una plantilla de página personalizada para incluir el contenido de la página actual más los resultados de una segunda consulta personalizada, pero si deseas más flexibilidad sobre cómo enumeras las publicaciones, o simplemente deseas hacerlo unas cuantas veces, un shortcode será una solución más simple.

En este tutorial, te mostraré cómo crear un código abreviado simple para enumerar todas las publicaciones de un tipo de publicación personalizada, y luego lo ampliaré para crear un código abreviado con varios parámetros que los usuarios pueden especificar para enumerar las publicaciones como quieran.


Lo que necesitas para completar este tutorial

Necesitarás los siguientes recursos:

  • Una instalación de desarrollo de WordPress
  • Acceda a la carpeta de complementos para que puedas crear y cargar el complemento shortcode

Encontrarás todo el código para crear este complemento en la descarga del código.


Empezando: creando del contenido

Antes de configurar el shortcode, deberás registrar un tipo de publicación personalizada y dos taxonomías personalizadas, que usaremos para probar el shortcode.

El código para hacer esto está contenido en el complemento que escribí para el shortcode, aunque en un proyecto en vivo, recomendaría separarlo del complemento del shortcode.

Crea un nuevo archivo en tu carpeta de complementos y llámalo post-Listing-shortcode.php.

Agrega el siguiente código al archivo.

Nota: La creación de taxonomías y tipos de publicaciones personalizados no es fundamental para el aprendizaje de este tutorial. Si lo deseas, puedes copiar este código del archivo de descarga y omitir esta etapa.

1
<?php
2
/*

3
Plugin Name: WPTutsPlus Post-listing shortcode

4
Plugin URI: https://rachelmccollin.co.uk

5
Description: This plugin provides a shortcode to list posts, with parameters. It also registers a couple of post types and tacxonomies to work with.

6
Version: 1.0

7
Author: Rachel McCollin

8
Author URI: http://rachelmccollin.co.uk

9
License: GPLv2

10
*/
11
// register custom post type to work with

12
add_action( 'init', 'rmcc_create_post_type' );
13
function rmcc_create_post_type() { 	// clothes custom post type

14
	// set up labels

15
	$labels = array(
16
		'name' =--> 'Clothes',
17
		'singular_name' => 'Clothing Item',
18
		'add_new' => 'Add New',
19
		'add_new_item' => 'Add New Clothing Item',
20
		'edit_item' => 'Edit Clothing Item',
21
		'new_item' => 'New Clothing Item',
22
		'all_items' => 'All Clothes',
23
		'view_item' => 'View Clothing Item',
24
		'search_items' => 'Search Clothes',
25
		'not_found' =>  'No Clothes Found',
26
		'not_found_in_trash' => 'No Clothes found in Trash',
27
		'parent_item_colon' => '',
28
		'menu_name' => 'Clothes',
29
	);
30
	register_post_type(
31
		'clothes',
32
		array(
33
			'labels' => $labels,
34
			'has_archive' => true,
35
			'public' => true,
36
			'hierarchical' => true,
37
			'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail','page-attributes' ),
38
			'taxonomies' => array( 'post_tag', 'category' ),
39
			'exclude_from_search' => true,
40
			'capability_type' => 'post',
41
		)
42
	);
43
}
44
45
// register two taxonomies to go with the post type

46
add_action( 'init', 'rmcc_create_taxonomies', 0 );
47
function rmcc_create_taxonomies() {
48
	// color taxonomy

49
	$labels = array(
50
		'name'              => _x( 'Colors', 'taxonomy general name' ),
51
		'singular_name'     => _x( 'Color', 'taxonomy singular name' ),
52
		'search_items'      => __( 'Search Colors' ),
53
		'all_items'         => __( 'All Colors' ),
54
		'parent_item'       => __( 'Parent Color' ),
55
		'parent_item_colon' => __( 'Parent Color:' ),
56
		'edit_item'         => __( 'Edit Color' ),
57
		'update_item'       => __( 'Update Color' ),
58
		'add_new_item'      => __( 'Add New Color' ),
59
		'new_item_name'     => __( 'New Color' ),
60
		'menu_name'         => __( 'Colors' ),
61
	);
62
	register_taxonomy(
63
		'color',
64
		'clothes',
65
		array(
66
			'hierarchical' => true,
67
			'labels' => $labels,
68
			'query_var' => true,
69
			'rewrite' => true,
70
			'show_admin_column' => true
71
		)
72
	);
73
	// fabric taxonomy

74
	$labels = array(
75
		'name'              => _x( 'Fabrics', 'taxonomy general name' ),
76
		'singular_name'     => _x( 'Fabric', 'taxonomy singular name' ),
77
		'search_items'      => __( 'Search Fabrics' ),
78
		'all_items'         => __( 'All Fabric' ),
79
		'parent_item'       => __( 'Parent Fabric' ),
80
		'parent_item_colon' => __( 'Parent Fabric:' ),
81
		'edit_item'         => __( 'Edit Fabric' ),
82
		'update_item'       => __( 'Update Fabric' ),
83
		'add_new_item'      => __( 'Add New Fabric' ),
84
		'new_item_name'     => __( 'New Fabric' ),
85
		'menu_name'         => __( 'Fabrics' ),
86
	);
87
	register_taxonomy(
88
		'fabric',
89
		'clothes',
90
		array(
91
			'hierarchical' => true,
92
			'labels' => $labels,
93
			'query_var' => true,
94
			'rewrite' => true,
95
			'show_admin_column' => true
96
		)
97
	);
98
}
99
?>

Esto le informa a WordPress sobre el complemento y registra el tipo de publicación personalizada 'ropa' y las dos taxonomías, 'color' y 'tela'.

Guarda este complemento y actívalo a través de la página Complementos en WordPress.

Ahora que tienes tu tipo de publicación personalizada y taxonomías en su lugar, crea algunas publicaciones usándolas. En la captura de pantalla a continuación, puedes ver el contenido que he creado:

post-listing-shortcode-content-createdpost-listing-shortcode-content-createdpost-listing-shortcode-content-created

Creación de un shortcode de listado simple

Si solo deseas enumerar el contenido de una manera usando tu shortcode, puedes crear un shotcode muy simple que no use parámetros.

Abre tu archivo de complemento nuevamente y agrega lo siguiente:

1
// create shortcode to list all clothes which come in blue

2
add_shortcode( 'list-posts-basic', 'rmcc_post_listing_shortcode1' );
3
function rmcc_post_listing_shortcode1( $atts ) {
4
	ob_start();
5
	$query = new WP_Query( array(
6
		'post_type' => 'clothes',
7
		'color' => 'blue',
8
		'posts_per_page' => -1,
9
		'order' => 'ASC',
10
		'orderby' => 'title',
11
	) );
12
	if ( $query->have_posts() ) { ?>
13
		<ul class="clothes-listing">
14
			<?php while ( $query->have_posts() ) : $query->the_post(); ?>
15
			<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
16
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
17
			</li>
18
			<?php endwhile;
19
			wp_reset_postdata(); ?>
20
		</ul>
21
	<?php $myvariable = ob_get_clean();
22
	return $myvariable;
23
	}
24
}

Esto crea un shortcode simple, utilizando WP_Query para ejecutar una consulta personalizada en tu contenido y generar los resultados en una lista. Cuando escribo [list-posts-basic] en una página, los resultados son los que se muestran en esta captura de pantalla:

post-listing-shortcode-shortcode1-resultspost-listing-shortcode-shortcode1-resultspost-listing-shortcode-shortcode1-results

Agregando algunos parámetros para modificar la consulta

El shortcode será mucho más útil si los usuarios pueden agregar sus propios parámetros, eligiendo por ejemplo:

  • Cuantas publicaciones listar
  • Qué tipo de publicación consultar
  • Categorías a incluir
  • Telas y colores a incluir
  • Parámetros de pedido

Para agregar esto al shortcode, utiliza la función shortcode_atts (), que te permite especificar algunos atributos predeterminados que los usuarios pueden anular.

Una vez más en tu archivo de complemento y debajo del código del primer shortcode, agrega lo siguiente:

1
// create shortcode with parameters so that the user can define what's queried - default is to list all blog posts

2
add_shortcode( 'list-posts', 'rmcc_post_listing_parameters_shortcode' );
3
function rmcc_post_listing_parameters_shortcode( $atts ) {
4
	ob_start();
5
6
	// define attributes and their defaults

7
	extract( shortcode_atts( array (
8
		'type' => 'post',
9
		'order' => 'date',
10
		'orderby' => 'title',
11
		'posts' => -1,
12
		'color' => '',
13
		'fabric' => '',
14
		'category' => '',
15
	), $atts ) );
16
17
	// define query parameters based on attributes

18
	$options = array(
19
		'post_type' => $type,
20
		'order' => $order,
21
		'orderby' => $orderby,
22
		'posts_per_page' => $posts,
23
		'color' => $color,
24
		'fabric' => $fabric,
25
		'category_name' => $category,
26
	);
27
	$query = new WP_Query( $options );
28
	// run the loop based on the query

29
	if ( $query->have_posts() ) { ?>
30
		<ul class="clothes-listing ">
31
			<ul class="clothes-listing ">
32
				<li id="post-<?php the_ID(); ?>">></li>
33
			</ul>
34
		</ul>
35
	<?php
36
		$myvariable = ob_get_clean();
37
		return $myvariable;
38
	}
39
}

Nota: El uso de ob_start () y ob_get_clean () garantiza que el bucle se genere en el lugar de tu página o publicación en el que haz agregado el shortcode. Si no los agregas, la lista se mostrará en la parte superior del contenido.

De forma predeterminada, esto enumera todas las publicaciones en orden descendente de fecha, por lo que si escribes [list-posts] en una página o publicación, el resultado es como en esta captura de pantalla:

post-listing-shortcode-shortcode2-results1post-listing-shortcode-shortcode2-results1post-listing-shortcode-shortcode2-results1

Sin embargo, si agregas algunos parámetros, las cosas se vuelven más interesantes. Por ejemplo, para enumerar toda la ropa que viene en color negro, escribo [list-posts type = "clothes" color = "black" orderby = "name" order = "ASC"]:

post-listing-shortcode-shortcode2-results2post-listing-shortcode-shortcode2-results2post-listing-shortcode-shortcode2-results2

O para enumerar toda la ropa en la categoría 'inteligente', escribo [list-posts type = "clothes" category = "smart" orderby = "name" order = "ASC"]:

post-listing-shortcode-shortcode2-results3post-listing-shortcode-shortcode2-results3post-listing-shortcode-shortcode2-results3

Si es necesario, puedes especificar más atributos con los que los usuarios pueden trabajar, pero debe incluir todos los disponibles en tu complemento, en la función extract(shortcode_atts)).

No tienes que especificar un valor predeterminado para todos ellos; por ejemplo, dejé los parámetros de categoría y taxonomía vacíos en el ejemplo. Los parámetros que puedes definir son cualquiera de los que se pueden especificar para WP_Query; para obtener una lista completa, consulta tu página del Codex.


Resumen

Poder insertar una lista de publicaciones en una página o publicación puede ser muy útil. Te ahorra tener que modificar tus archivos de plantilla o escribir una plantilla de página personalizada.

El shortcode que has aprendido a crear en este complemento podría usarse de muchas maneras y, por supuesto, podrías cambiar fácilmente lo que genera el shortcode; mi ejemplo genera una lista con viñetas con títulos de publicaciones incluidos en un enlace a su página, pero puedes reemplazar el código dentro del bucle con las etiquetas de la plantilla para mostrar el contenido, las imágenes destacadas o cualquier otra cosa.


Recursos

Algunos recursos útiles sobre los temas tratados anteriormente: