Creación de un plugin de tabla de precios receptiva para WordPress

Las tablas de precios son un componente clave de tu negocio que promueve tus productos y ayuda a los usuarios a elegir entre los diferentes servicios que tienes. La mayoría de los temas comerciales modernos de WordPress proporcionan tablas de precios incorporadas. También hay muchos plugins de tablas de precios gratuitos y comerciales para WordPress. Este tutorial tiene como objetivo proporcionar conocimientos a los desarrolladores de WordPress sobre la creación de un plugin desde cero que permita la personalización en diferentes proyectos.

Cada diseño web está tratando de lograr características de respuesta que permitan un mejor aspecto y sensación en cualquier tipo de dispositivo. Las tablas de precios creadas con este plugin funcionarán en todo tipo de dispositivos como móviles y tabletas también. Así que empecemos.

Puedes ver el diseño final de la tabla de precios en la siguiente pantalla.

Planeando el plugin de la tabla de precios

La planificación es la parte difícil de cualquier proyecto. Es mejor planificar cómo vamos a desarrollar la tabla de precios y qué técnicas vamos a usar antes de hacer cualquier codificación. Básicamente la tabla de precios tendrá los siguientes componentes:

• Tabla de precios - es una colección de diferentes tipos de paquetes disponibles para tu producto o servicio. Ya que estamos planeando crear múltiples tablas de precios, es mejor elegir un tipo de puesto personalizado llamado "pricing_tables".
• Paquete de precios - es una colección de características en tu producto que varía según los diferentes paquetes. Dado que las tablas de precios pueden contener varios paquetes, se utilizará un tipo de mensaje personalizado denominado pricing_packages.
• Características del paquete - son una colección de elementos únicos de tu producto o servicio. Las características se añadirán dinámicamente usando campos personalizados en el proceso de creación de un paquete de precios.
• Diseño de la tabla de precios - podemos elegir una plantilla de página o un atajo para mostrar las tablas de precios. Usaremos un atajo en este plugin.

Crear paquetes de precios

Vamos a usar un tipo de correo personalizado llamado "pricing_packages". Simplemente puedes generar código para crear un tipo de correo personalizado usando un generador de código en línea. El siguiente código crea el tipo de puesto personalizado para los paquetes usando las configuraciones predeterminadas:

1

add_action( 'init', 'wppt_register_cpt_pricing_packages' );

2

3

function wppt_register_cpt_pricing_packages() {

4

5

	$labels = array(

6

		'name' => _x( 'Pricing Packages', 'pricing_packages' ),

7

		'singular_name' => _x( 'Pricing Package', 'pricing_packages' ),

8

		'add_new' => _x( 'Add New', 'pricing_packages' ),

9

		'add_new_item' => _x( 'Add New Pricing Package', 'pricing_packages' ),

10

		'edit_item' => _x( 'Edit Pricing Package', 'pricing_packages' ),

11

		'new_item' => _x( 'New Pricing Package', 'pricing_packages' ),

12

		'view_item' => _x( 'View Pricing Package', 'pricing_packages' ),

13

		'search_items' => _x( 'Search Pricing Packages', 'pricing_packages' ),

14

		'not_found' => _x( 'No Pricing Packages found', 'pricing_packages' ),

15

		'not_found_in_trash' => _x( 'No Pricing Packages found in Trash', 'pricing_packages' ),

16

		'parent_item_colon' => _x( 'Parent Pricing Package:', 'pricing_packages' ),

17

		'menu_name' => _x( 'Pricing Packages', 'pricing_packages' ),

18

	);

19

20

	$args = array(

21

		'labels' => $labels,

22

		'hierarchical' => false,

23

		'description' => 'Pricing Packages',

24

		'supports' => array( 'title', 'editor' ),

25

		'public' => true,

26

		'show_ui' => true,

27

		'show_in_menu' => true,

28

		'show_in_nav_menus' => true,

29

		'publicly_queryable' => true,

30

		'exclude_from_search' => false,

31

		'has_archive' => true,

32

		'query_var' => true,

33

		'can_export' => true,

34

		'rewrite' => true,

35

		'capability_type' => 'post'

36

	);

37

38

	register_post_type( 'pricing_packages', $args );

39

}

Uso de campos personalizados para la información del paquete

El nombre del paquete, el precio y el vínculo de compra son los componentes más importantes de un paquete de precios. Así que usaremos una meta casilla para añadir estos campos. También requerimos múltiples características para un paquete. Vamos a utilizar otro meta-cuadro para añadir y eliminar características dinámicamente como se muestra en el código de abajo.

1

add_action( 'add_meta_boxes', 'wppt_pricing_packages_meta_boxes' );

2

3

function wppt_pricing_packages_meta_boxes() {

4

5

	add_meta_box( "pricing-package-info", "Pricing Package Info", 'wppt_generate_pricing_package_info', "pricing_packages", "normal", "high" );

6

	add_meta_box( "pricing-features-info", "Pricing Features", 'wppt_generate_pricing_features_info', "pricing_packages", "normal", "high" );

7

8

}

Las meta-cajas para los campos de los paquetes se añaden usando la acción add_meta_boxes. Puedes usar una meta caja en lugar de dos. He usado dos meta cajas para aclarar las cosas.

1

function wppt_generate_pricing_package_info() {

2

	global $post;

3

4

	$package_price = get_post_meta( $post->ID, "_package_price", true );

5

	$package_buy_link = get_post_meta( $post->ID, "_package_buy_link", true );

6

7

	$html = '<input type="hidden" name="pricing_package_box_nonce" value="' . wp_create_nonce( basename( __FILE__ ) ) . '" />';

8

9

	$html .= '<table class="form-table">';

10

11

	$html .= '<tr>';

12

	$html .= '	<th><label for="Price">Package Price *</label></th>';

13

	$html .= '	<td>';

14

	$html .= '		<input name="package_price" id="package_price" type="text" value="' . $package_price . '" />';

15

	$html .= '	</td>';

16

	$html .= '</tr>';

17

18

	$html .= '<tr>';

19

	$html .= '	<th><label for="Buy Now">Buy Now Link *</label></th>';

20

	$html .= '  <td>';

21

	$html .= '      <input name="package_buy_link" id="package_buy_link" type="text" value="' . $package_buy_link . '" />';

22

	$html .= '	</td>';

23

	$html .= '</tr>';

24

25

	$html .= '</tr>';

26

	$html .= '</table>';

27

28

	echo $html;

29

}

La primera meta caja contendrá campos para el precio y el enlace de compra. Esos 2 campos se guardarán en la tabla post_meta usando las claves _package_price y _package_buy_link respectivamente.

1

function wppt_generate_pricing_features_info() {

2

3

	global $post;

4

5

	$package_features = get_post_meta( $post->ID, "_package_features", true );

6

	$package_features = ( $package_features == '' ) ? array() : json_decode( $package_features );

7

8

9

10

	$html .= '<table class="form-table">';

11

12

	$html .= '<tr><th><label for="Price">Add Package Features</label></th>';

13

	$html .= '	<td>

14

	$html .= '      <input name="package_feature" id="package_feature" type="text"  />';

15

	$html .= '      <input type="button" id="add_features" value="Add Features" />';

16

	$html .= '  </td></tr>';

17

18

	$html .= '<tr><td>';

19

	$html .= '    <ul id="package_features_box" name="package_features_box" >';

20

	foreach ($package_features as $package_feature) {

21

		$html .= '<li><input type="hidden" name="package_features[]" value="' . $package_feature . '" />' . $package_feature . '';

22

		$html .= '<a href="javascript:void(0);">Delete</a></li>';

23

	}

24

	$html .= '</ul></td></tr>';

25

26

	$html .= '</table>';

27

28

	echo $html;

29

}

El código anterior contiene el HTML de los campos de características del paquete. Un paquete contendrá muchas características, por lo que las características se añadirán dinámicamente a una lista no ordenada con campos ocultos usando jQuery. Las características se almacenarán en la tabla post_meta con la clave _package_features. Se usará una cadena con formato JSON para mantener múltiples características.

Validación de la creación del paquete

El precio del paquete y el enlace de compra es obligatorio para cada paquete. Así que necesitamos un código de validación antes de crear los paquetes. Usaremos el código de jQuery para la validación como se muestra a continuación.

1

jQuery(document).ready(function($) {

2

3

	$("#post-body-content").prepend('<div id="pricing_error" class="error" style="display:none" ></div>');

4

5

	$('#post').submit(function() {

6

7

		if ( $("#post_type").val() =='pricing_packages' ) {

8

			return wppt_validate_pricing_packages();

9

		}

10

		else if ( $("#post_type").val() =='pricing_tables' ) {

11

			return wppt_validate_pricing_tables();

12

		}

13

14

	});

15

16

});

Necesitamos añadir un elemento div en la pantalla de creación del post para mostrar los errores. La pantalla de creación del post contiene un formulario con el ID del post. Tampoco cambia para los tipos de puestos personalizados. Así que he usado el evento de envío del formulario #post para la validación.

Dado que estamos utilizando diferentes tipos de posts personalizados, es necesario filtrar el tipo de post usando el código que se muestra a continuación. El formulario de creación de post contiene un campo oculto con el ID post_type.

1

		if ( $("#post_type").val() =='pricing_packages') {

2

			return wppt_validate_pricing_packages();

3

		}

4

		else if ( $("#post_type").val() =='pricing_tables' ) {

5

			return wppt_validate_pricing_tables();

6

		}

Una vez completado el filtrado, llamamos a una función de validación específica según el tipo de post, como se muestra a continuación.

1

var wppt_validate_pricing_packages = function() {

2

	var err = 0;

3

	$("#pricing_error").html("");

4

	$("#pricing_error").hide();

5

6

	if ( $("#title").val() == '' ) {

7

		$("#pricing_error").append( "<p>Please enter Package Name.</p>" );

8

		err++;

9

	}

10

	if ( $("#package_price").val() == '' ) {

11

		$("#pricing_error").append( "<p>Please enter Package Price.</p>" );

12

		err++;

13

	}

14

	if ( $("#package_buy_link").val() == '' ) {

15

		$("#pricing_error").append( "<p>Please enter Package Buy Link.</p>" );

16

		err++;

17

	}

18

19

	if ( err > 0 ) {

20

		$("#publish").removeClass( "button-primary-disabled" );

21

		$("#ajax-loading").hide();

22

		$("#pricing_error").show();

23

		return false;

24

	}

25

	else {

26

		return true;

27

	}

28

};

Primero aclaramos cualquier error existente establecido previamente dentro del elemento "pricing_error". Luego podemos validar cada campo y agregar el mensaje de error al contenedor pricing_error. Finalmente, mostramos los errores usando la función $("#pricing_error").show().

Guardar la información del paquete

Ahora hemos completado todas las creaciones de campo y las validaciones de los paquetes. Pasemos a guardar la información en la base de datos. Usaremos la acción save_post que se ejecuta justo después de que el post se guarda en la base de datos.

1

add_action( 'save_post', 'wppt_save_pricing_packages' );

2

3

function wppt_save_pricing_packages( $post_id ) {

4

5

	if ( ! wp_verify_nonce( $_POST['pricing_package_box_nonce'], basename( __FILE__ ) ) ) {

6

		return $post_id;

7

	}

8

9

	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {

10

		return $post_id;

11

	}

12

13

	if ( 'pricing_packages' == $_POST['post_type'] && current_user_can( 'edit_post', $post_id ) ) {

14

		$package_price = ( isset( $_POST['package_price'] ) ? $_POST['package_price'] : '' );

15

		$package_buy_link = ( isset( $_POST['package_buy_link'] ) ? $_POST['package_buy_link'] : '' );

16

17

		$package_features = ( isset( $_POST['package_features'] ) ? $_POST['package_features'] : array() );

18

		$package_features = json_encode( $package_features );

19

20

		update_post_meta( $post_id, "_package_price", $package_price );

21

		update_post_meta( $post_id, "_package_buy_link", $package_buy_link );

22

		update_post_meta( $post_id, "_package_features", $package_features );

23

	}

24

	else {

25

		return $post_id;

26

	}

27

}

Primero hacemos algunas validaciones para comprobar si el valor nonce generado en el formulario coincide con el valor nonce recibido en $_POST. Luego tenemos que asegurarnos de si es un guardado automático o manual. Luego tenemos que comprobar el tipo de correo antes de guardar. De lo contrario, este código se ejecutará en cada tipo de correo. El precio del paquete y el enlace de compra se guardarán directamente en la tabla post_meta usando la función update_post_meta. Las características se guardarán como una cadena codificada JSON. Ahora hemos terminado de crear paquetes. Pasemos a la creación de tablas de precios.

Crear tablas de precios

Las tablas de precios van a ser otro tipo de publicación personalizada en nuestro plugin. La creación de un tipo de mensaje personalizado y su almacenamiento en la base de datos es muy similar al código explicado anteriormente. Así que no voy a hacerla aburrida explicando lo mismo. Puedes encontrar la creación de posts personalizados y el código de guardado para las tablas de precios en los archivos del plugin.

Las tablas de precios contienen paquetes de precios. Por lo tanto, las meta cajas utilizadas para las tablas de precios van a ser diferentes de las que usamos para los paquetes de precios. Echemos un vistazo a la creación de la meta caja para las tablas de precios.

1

add_action( 'add_meta_boxes', 'wppt_pricing_tables_meta_boxes' );

2

3

function wppt_pricing_tables_meta_boxes() {

4

5

	add_meta_box( "pricing-table-info", "Pricing Table Info", 'wppt_generate_pricing_table_info', "pricing_tables", "normal", "high" );

6

}

7

8

function wppt_generate_pricing_table_info() {

9

	global $post;

10

11

	$table_packages = get_post_meta( $post->ID, "_table_packages", true );

12

	$table_packages = ( $table_packages == '' ) ? array() : json_decode( $table_packages );

13

14

	$query = new WP_Query( array(

15

		'post_type' => 'pricing_packages',

16

		'post_status' => 'publish',

17

		'posts_per_page' => -1,

18

		'orderby' => 'post_date',

19

		'order' => 'ASC'

20

	) );

21

22

	$html = '<input type="hidden" name="pricing_table_box_nonce" value="' . wp_create_nonce( basename( __FILE__ ) ) . '" />';

23

24

	$html .= '<table class="form-table">';

25

	$html .= '<tr><th>Package Status</th>';

26

	$html .= '    <td>Package Name</td></tr>';

27

28

	while ( $query->have_posts() ) : $query->the_post();

29

		$checked_status = ( in_array( $query->post->ID, $table_packages ) ) ? "checked" : "";

30

31

		$html .= '<tr><th><input type="checkbox" name="pricing_table_packages[]" ' . $checked_status . ' value="' . $query->post->ID . '" /></th>';

32

		$html .= '    <td>' . $query->post->post_title . '</td></tr>';

33

34

	endwhile;

35

36

	$html .= '</table>';

37

38

	echo $html;

39

}

Podemos añadir una meta caja personalizada para las tablas de precios utilizando un código similar al utilizado en la sección anterior. Los paquetes de una tabla específica van a ser almacenados en la tabla post_meta como una cadena codificada JSON. Así que obtenemos los paquetes para la tabla actual usando la función get_post_meta. Luego obtenemos todos los paquetes de precios publicados usando una consulta personalizada como se muestra a continuación.

1

$query = new WP_Query( array(

2

	'post_type' => 'pricing_packages',

3

	'post_status' => 'publish',

4

	'posts_per_page' => -1,

5

	'orderby' => 'post_date',

6

	'order' => 'ASC'

7

) );

Podemos seleccionar los paquetes usando el tipo de correo personalizado de pricing_packages. Puede elegir otras condiciones para la consulta según tu preferencia.

Luego usamos el resultado generado por WP_Query para mostrar todos los paquetes de precios con casillas de verificación frente a ellos. Mientras hacemos un bucle, comprobamos si el paquete ya está asignado a la mesa y asignamos una marca a la casilla de verificación. Puedes añadir o eliminar paquetes dinámicamente seleccionando / deseleccionando las casillas de verificación y pulsando el botón de actualización.

Validación de la creación de la tabla de precios

Vamos a validar el nombre de la tabla de precios como hicimos antes con los paquetes de precios. El siguiente código jQuery será usado para la validación:

1

var wppt_validate_pricing_tables = function() {

2

	var err = 0;

3

	$("#pricing_error").html("");

4

	$("#pricing_error").hide();

5

6

	if ( $("#title").val() == '' ) {

7

		$("#pricing_error").append( "<p>Please enter Pricing Table Name.</p>" );

8

		err++;

9

	}

10

	if ( err > 0 ) {

11

		$("#publish").removeClass( "button-primary-disabled" );

12

		$("#ajax-loading").hide();

13

		$("#pricing_error").show();

14

		return false;

15

	}

16

	else {

17

		return true;

18

	}

19

};

El código anterior está incluido en el archivo pricing_admin.js de la carpeta js del plugin.

Generar ID de la tabla de precios

Necesitamos una clave única para las tablas de precios para incluirlas en el atajo. Así que usaremos el ID de la tabla de precios como la clave. Una vez creada la tabla, podemos mostrar el ID de la tabla de precios en la vista de lista mediante una columna personalizada. WordPress proporciona una técnica sencilla para incluir columnas personalizadas en la vista de listado como se muestra a continuación:

1

add_filter( 'manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns' );

2

3

function wppt_edit_pricing_tables_columns( $columns ) {

4

5

	$columns = array(

6

		'cb' => '<input type="checkbox" />',

7

		'ID' => __( 'Pricing Table ID' ),

8

		'title' => __( 'Pricing Table Name' ),

9

		'date' => __( 'Date' )

10

	);

11

12

	return $columns;

13

}

Podemos utilizar el filtro manage_edit-{Custom Post Type}_columns para personalizar las columnas que se muestran en la vista de lista. Como puedes ver, he asignado una columna personalizada llamada Pricing Table ID para utilizar el ID del post.

1

add_action( 'manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2 );

2

3

function wppt_manage_pricing_tables_columns( $column, $post_id ) {

4

	global $post;

5

6

	switch ( $column ) {

7

8

		case 'ID' :

9

10

			$pricing_id = $post_id;

11

12

			if ( empty( $pricing_id ) )

13

				echo __( 'Unknown' );

14

15

			else

16

				printf( $pricing_id );

17

18

			break;

19

20

		default :

21

			break;

22

	}

23

}

24

25

add_filter( 'manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns' );

26

27

function wppt_pricing_tables_sortable_columns( $columns ) {

28

29

	$columns['ID'] = 'ID';

30

31

	return $columns;

32

}

A continuación, podemos asignar los valores a la columna mediante una sentencia switch en la acción manage_{Custom Post Type}_posts_custom_column. Finalmente usamos el filtro manage_edit-{Custom Post Type}_sortable_columns para hacer la columna ordenable. Después de crear una tabla de precios puedes ver el número en la vista de lista.

Incluyendo los scripts y estilos de los plugins

Usamos un archivo JavaScript personalizado para validar las funciones del área de administración. Así que primero vamos a ver cómo se incluyen los archivos de script en el área de administración de WordPress.

1

function wppt_pricing_admin_scripts() {

2

3

	wp_register_script( 'pricing-admin', plugins_url( 'js/pricing_admin.js', __FILE__ ), array( 'jquery' ) );

4

	wp_enqueue_script( 'pricing-admin' );

5

}

6

7

add_action( 'admin_enqueue_scripts', 'wppt_pricing_admin_scripts' );

admin_enqueue_scripts es un gancho que puede ser usado para incluir todos los archivos CSS y Script en el área de administración de WordPress. Primero tenemos que registrar el script usando la función wp_register_script con una clave única y una ruta al archivo. Luego podemos usar la función wp_enqueue_script para incluir los archivos.

Ahora echemos un vistazo a la inclusión de los estilos y scripts del front end usando el código de abajo:

1

function wppt_pricing_front_scripts() {

2

3

	wp_register_style( 'pricing-base', plugins_url( 'css/base.css', __FILE__ ) );

4

	wp_enqueue_style( 'pricing-base' );

5

6

	wp_register_style( 'pricing-layout', plugins_url( 'css/layout.css', __FILE__ ) );

7

	wp_enqueue_style( 'pricing-layout' );

8

9

	wp_register_style( 'pricing-fluid-skeleton', plugins_url( 'css/fluid_skeleton.css', __FILE__ ) );

10

	wp_enqueue_style( 'pricing-fluid-skeleton' );

11

12

	wp_register_style( 'pricing-table', plugins_url( 'css/pricing_table.css', __FILE__ ) );

13

	wp_enqueue_style( 'pricing-table' );

14

}

15

16

add_action( 'wp_enqueue_scripts', 'wppt_pricing_front_scripts' );

Al principio del tutorial mencioné que crearemos una tabla de precios de respuesta. Es más fácil trabajar con un marco de trabajo CSS existente para proporcionar la funcionalidad de respuesta. Así que he elegido a Skeleton como el marco de trabajo del CSS. Los primeros tres archivos CSS serán los archivos CSS del marco de trabajo Skeleton, luego hemos incluido un estilo personalizado para nuestra tabla de precios en el archivo pricing_table.css.

Ahora todos los datos necesarios para la tabla de precios están listos y podemos pasar a la creación del diseño de la tabla de precios

Diseño de la tabla de precios

El diseño de una tabla de precios que responda a las necesidades de los clientes es una tarea que consume mucho tiempo y requiere conocimientos avanzados de HTML y CSS. Por lo tanto, explicar el diseño está fuera del alcance de este tutorial. Usaré una tabla de precios de respuesta que he creado para Webdesigntuts+. Si estás interesado puedes aprender sobre la parte de diseño leyendo el tutorial Responsive Pricing Tables Using :target for Small Screens. El siguiente código contiene el código HTML para una tabla de precios con dos paquetes:

1

		<div class="container">

2

			<div id='pricing_plan1' class="four columns">

3

				<dl class='plans' >

4

					<dd class="plan_title">

5

						Basic

6

					</dd>

7

					<dd class="plan_price">

8

						$9.99

9

					</dd>

10

				</dl>

11

				<dl class='plan' id="one">

12

					<dt class='plan_more'>View<a href="#one" class="more_icon"></a><a href="#"

13

class="less_icon"></a></dt>

14

					<dd class="plan_features">

15

						<div class="feature_desc"><span class="highlight">1GB</span> Storage</div>

16

					</dd>

17

					<dd class="plan_features">

18

						<div class="feature_desc"><span class="highlight">5GB</span> Bandwidth</div>

19

					</dd>

20

					<dd class="plan_features">

21

						<div class="feature_desc"><span class="highlight">2</span> Domains</div>

22

					</dd>

23

					<dd class="plan_features">

24

						<div class="feature_desc"><span class="highlight">3</span> Databases</div>

25

					</dd>

26

					<dd class="plan_features">

27

						<div class="feature_desc"><span class="highlight">1</span> FTP Account</div>

28

					</dd>

29

					<dd class="plan_features">

30

						<div class="feature_desc"><span class="highlight">25</span> Email Accounts</div>

31

					</dd>

32

					<dd class="plan_buy">

33

						<a href='' class='buy' >Buy Now</a>

34

					</dd>

35

				</dl>

36

			</div>

37

			<div id='pricing_plan2' class="four columns">

38

				<dl class='plans'>

39

					<dt class="plan_title">

40

						Standard

41

					</dt>

42

					<dd class="plan_price">

43

						$19.99

44

					</dd>

45

				</dl>

46

				<dl class='plan' id="two">

47

					<dt class='plan_more'>View<a href="#two" class="more_icon"></a><a href="#"

48

					class="less_icon"></a></dt>

49

					<dd class="plan_features">

50

						<div class="feature_desc"><span class="highlight">10GB</span> Storage</div>

51

					</dd>

52

					<dd class="plan_features">

53

						<div class="feature_desc"><span class="highlight">50GB</span> Bandwidth</div>

54

					</dd>

55

					<dd class="plan_features">

56

						<div class="feature_desc"><span class="highlight">10</span> Domains</div>

57

					</dd>

58

					<dd class="plan_features">

59

						<div class="feature_desc"><span class="highlight">25</span> Databases</div>

60

					</dd>

61

					<dd class="plan_features">

62

						<div class="feature_desc"><span class="highlight">10</span> FTP Account</div>

63

					</dd>

64

					<dd class="plan_features">

65

						<div class="feature_desc"><span class="highlight">100</span> Email Accounts</div>

66

					</dd>

67

					<dd class="plan_buy">

68

						<a href='' class="buy">Buy Now</a>

69

					</dd>

70

				</dl>

71

			</div>

72

		</div>

Ahora tenemos que elegir un método para incluir el código de la tabla de precios en WordPress. Podemos incluir este código en un código corto o crear una plantilla de página específica. Voy a usar un código abreviado. También puedes probar el método de la plantilla de página.

Creación de un código corto de precios

Los códigos cortos son una forma fácil de añadir funcionalidad dinámica a tus mensajes y páginas. Usaré un atajo llamado wppt_show_pricing para insertar una tabla de precios. Tenemos que pasar el ID de la tabla de precios como el parámetro abreviado utilizando la tecla pricing_id. Implementamos el código corto.

1

add_shortcode( "wppt_show_pricing", "wppt_generate_pricing_table" );

2

3

function wppt_generate_pricing_table( $atts ) {

4

	global $post;

5

6

	extract( shortcode_atts( array(

7

		'pricing_id' => '0',

8

	), $atts ) );

9

	// Remaining Code

10

}

He definido un atajo llamado wppt_show_pricing usando la función add_shortcode de WordPress. Los atributos de los códigos cortos se pasarán automáticamente a la función. Primero extraemos el array de códigos cortos y el ID de la tabla de precios se asignará a la variable "pricing_id". El resto del código se explicará en las siguientes secciones.

1

	global $post;

2

	$table_packages = get_post_meta( $pricing_id, "_table_packages", true );

3

	$table_packages = ( $table_packages == '' ) ? array() : json_decode( $table_packages );

Luego obtenemos la identificación de la tabla de precios asignada al código corto y todos los paquetes incluidos en la tabla de precios de la tabla post_meta.

1

$html = '<div class="container">';

2

3

	$pricing_index = 0;

4

	foreach ( $table_packages as $table_package ) {

5

		$pricing_index++;

6

7

		$plan_title = get_the_title( $table_package );

8

9

		$package_price = get_post_meta( $table_package, "_package_price", true );

10

		$package_buy_link = get_post_meta( $table_package, "_package_buy_link", true );

11

12

		$package_features = get_post_meta( $table_package, "_package_features", true );

13

		$package_features = ( $package_features == '' ) ? array() : json_decode( $package_features );

14

15

		$html .= '<div id="pricing_plan' . $pricing_index . '" class="four columns">';

16

		$html .= '<dl class="plans">

17

					<dd class="plan_title">

18

					' . $plan_title . '

19

					</dd>

20

					<dd class="plan_price">

21

						$' . $package_price . '

22

					</dd>

23

				</dl>';

24

		$html .= '<dl class="plan" id="pr' . $pricing_index . '">

25

					<dt class="plan_more">View<a href="#pr' . $pricing_index . '" class="more_icon"></a>

26

						<a href="#" class="less_icon"></a>

27

					</dt>';

28

29

		foreach ( $package_features as $package_feature ) {

30

31

			$html .= '<dd class="plan_features">

32

						<div class="feature_desc"><span class="highlight">' . $package_feature . '</span></div>

33

					</dd>';

34

		}

35

36

		$html .= '<dd class="plan_buy">

37

					<a href="' . $package_price . '" class="buy" >Buy Now</a>

38

				</dd>

39

			</dl>';

40

		$html .= '</div>';

41

	}

42

	$html .= '</div>';

43

44

	echo  $html;

Mientras recorremos cada paquete generado en el código anterior, obtenemos las características y detalles de los paquetes usando la función get_post_meta. Luego incluimos el código HTML con datos dinámicos para mostrar la tabla de precios. Finalmente devolvemos el código HTML generado para ser mostrado dentro de las páginas que contienen el código corto.

Ahora hemos completado el desarrollo de nuestro plugin de tabla de precios para WordPress. Puedes revisar el código fuente y añadir tu propia funcionalidad personalizada según tus preferencias.

Guías para el uso de la tabla de precios

Cualquier persona con conocimientos básicos de trabajo con WordPress podrá crear tablas de precios usando este plugin. Proveeré los pasos para facilitar a los usuarios sin mucha experiencia en WordPress.

• Haz clic en la sección Paquetes de precios en el menú de la izquierda y crea un paquete con nombre, precio, enlace de compra y características. Continúa este proceso hasta que crees todos tus paquetes.
• Luego has clic en las Tablas de Precios en el menú de la izquierda para añadir una nueva tabla de precios. En la parte inferior de la pantalla aparecerá una lista de paquetes de precios. Selecciona los paquetes que deseas y guarda la Tabla de Precios con un nombre específico.
• Ve a la lista de tablas de precios y encuentra el ID de la tabla de precios de la tabla recién creada.
• Luego has clic en la sección Páginas para añadir una nueva página. Introduce el código corto [wppt_show_pricing pricing id='ID' /] dentro del editor de la página. Reemplaza el ID por el ID de la tabla de precios real.
• Guarda la página y visualízala en un navegador. Obtendrás tu tabla de precios de respuesta.

Espero que hayas aprendido a utilizar los tipos de correo personalizados y las meta cajas para crear una tabla de precios. Haznos saber si tienes tu propia forma de crear dicho plugin a través de los comentarios que aparecen a continuación.