Utilizar Campos Personalizados para Crear una Sección de Valoraciones

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las opiniones, reseñas o valoraciones de clientes son quizá uno de los recursos más poderosos de los que dispone un blog para respaldar su reputación. Si se implementan correctamente (con duro trabajo e información consistente), los blogs de valoraciones son sin duda una de las categorías más rentables de la blogosfera. Pero todo blog debe ofrecer un sólido diseño en sus entradas, incluído el diseño de las reseñas. En este artículo hablaremos sobre cómo crear una sección para perfecta para esas valoraciones, ya probablemente sea la sección que los usuarios consultarán en primer lugar, incluso antes de leer detalladamente una opinión.

Lo Que Vamos a Crear

Como ejemplo, vamos a crear una sección para la reseña de una película.

Usaremos como ejemplo una de mis películas favoritas, The Pursuit of Happyness. Vamos a mostrar la siguiente información sobre la película:

Nombre: The Pursuit of Happyness
Año: 2006
Director: Gabriele Muccino
Guionista: Steve Conrad
Actores: Will Smith, Jaden Smith, Thandie Newton
Género: Biográfica, Drama
Duración: 117 minutos
Argumento: Basada en una historia real sobre un hombre llamado Christopher Gardner. Gardner ha invertido mucho en un dispositivo conocido como un "analizador de la densidad ósea". Y siente que ha creado el mismo estos dispositivos. Sin embargo, no son comercializados al ser mejores que la tecnología existente en ese momento y cuyo precio es bastante superior. Cuando Gardner intenta averiguar cómo poder venderlos, su esposa lo abandona, pierde su casa, su cuenta bancaria y sus tarjetas de crédito. Forzado a vivir en la calle con su hijo, Gardner se encuentra ahora desesperado e intentando encontrar un trabajo estable; empieza a trabajar como corredor de bolsa, pero antes de recibir su primer sueldo debe formarse durante 6 meses y vender sus dispositivos.
(no nos olvidemos de que necesitamos una imagen).

Importante: Esta información está extraída de The Internet Movie Database (IMDb).

Paso 1: Preparar el Campo Meta Personalizado que Contendrá la Información

Vamos a almacenar los datos como valores de campos personalizados, pero añadir manualmente los campos personalizados de cada reseña sería una labor muy tediosa. Por eso, vamos a crear una sencilla caja meta personalizada para guardar nuestra información como campos personalizados.

Primero, necesitamos usar la función add_meta_box() para crear la caja meta y también crear una función callback:


function wptuts_review_box_add_meta() {
  add_meta_box( 'review-box', 'The Review Box', 'wptuts_review_box_meta', 'post', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'wptuts_review_box_add_meta' );

function wptuts_review_box_meta() {
	// Hi there!
}

La función callback creará el campo de entrada que contendrá nuestros datos. Creo que podemos usar una área de texto para el campo del "argumento" y campos de entrada de texto para todo lo demás:


<?php
function wptuts_review_box_meta($post) {
    global $post;
    // get the custom field values (if they exist) as an array
    $values = get_post_custom( $post->ID );
    // extract the members of the $values array to their own variables (which you can see below, in the HTML code)
    extract( $values, EXTR_SKIP );
    wp_nonce_field( 'review_box_meta_action', 'review_box_meta_nonce' );
?>
    <p>
        <label for="review_name">Movie Name:</label>
        <input type="text" name="_wptuts_review_name" id="review_name" value="<?php echo $_wptuts_review_name[0]; ?>" />
    </p>
    <p>
        <label for="review_year">Year:</label>
        <input type="text" name="_wptuts_review_year" id="review_year" value="<?php echo $_wptuts_review_year[0]; ?>" />
    </p>
    <p>
        <label for="review_director">Director:</label>
        <input type="text" name="_wptuts_review_director" id="review_director" value="<?php echo $_wptuts_review_director[0]; ?>" />
    </p>
    <p>
        <label for="review_writer">Writer:</label>
        <input type="text" name="_wptuts_review_writer" id="review_writer" value="<?php echo $_wptuts_review_writer[0]; ?>" />
    </p>
    <p>
        <label for="review_stars">Stars:</label>
        <input type="text" name="_wptuts_review_stars" id="review_stars" value="<?php echo $_wptuts_review_stars[0]; ?>" />
    </p>
    <p>
        <label for="review_genre">Genre:</label>
        <input type="text" name="_wptuts_review_genre" id="review_genre" value="<?php echo $_wptuts_review_genre[0]; ?>" />
    </p>
    <p>
        <label for="review_runtime">Runtime:</label>
        <input type="text" name="_wptuts_review_runtime" id="review_runtime" value="<?php echo $_wptuts_review_runtime[0]; ?>" />
    </p>
    <p>
        <label for="review_image">Image:</label>
        <input type="text" name="_wptuts_review_image" id="review_image" value="<?php echo $_wptuts_review_image[0]; ?>" />
    </p>
    <p>
        <label for="review_storyline">Storyline:</label>
        <textarea name="_wptuts_review_storyline" id="review_storyline" cols="30" rows="10"><?php echo $_wptuts_review_storyline[0]; ?></textarea>
    </p>
<?php
}
?>

Después, necesitamos crear la función que conseguirá que WordPress guarde los valores de entrada como campos personalizados:


function wptuts_review_box_save_meta( $post_id ) {
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if( !isset( $_POST['review_box_meta_nonce'] ) || !wp_verify_nonce( $_POST['review_box_meta_nonce'], 'review_box_meta_action' ) ) return;
    if( !current_user_can( 'edit_post' ) ) return;
    // create an array of our custom fields
    $review_array = array(
        '_wptuts_review_name',
        '_wptuts_review_year',
        '_wptuts_review_director',
        '_wptuts_review_writer',
        '_wptuts_review_stars',
        '_wptuts_review_genre',
        '_wptuts_review_runtime',
        '_wptuts_review_image',
        '_wptuts_review_storyline'
    );
	// create the "default" values for the array
    $review_array_defaults = array(
        '_wptuts_review_name' => 'None',
        '_wptuts_review_year' => 'None',
        '_wptuts_review_director' => 'None',
        '_wptuts_review_writer' => 'None',
        '_wptuts_review_stars' => 'None',
        '_wptuts_review_genre' => 'None',
        '_wptuts_review_runtime' => 'None',
        '_wptuts_review_image' => 'None',
        '_wptuts_review_storyline' => 'None'
    );
	// parse 'em!
	$review_array = wp_parse_args($review_array, $review_array_defaults);
    // HTML elements that are allowed inside the fields
    $allowed_html = array(
        'a' => array(
            'href' => array(),
            'title' => array()
        ),
        'em' => array(),
        'strong' => array()
    );
    // update the post meta fields with input fields (if they're set)
    foreach($review_array as $item) {
        if( isset( $_POST[$item] ) )
            update_post_meta( $post_id, $item, wp_kses($_POST[$item], $allowed_html) );
    }
}
add_action( 'save_post', 'wptuts_review_box_save_meta' );

¡Hecho!

Para saber más sobre cómo crear cajas meta personalizadas (y qué significan realmente estas líneas de código), puedes consultar este fantástico artículo de Christopher Davis publicado en Tuts+.

Paso 2 Crear la Función que Muestra la Sección de la Reseña

Ahora que ya hemos visto cómo configurar la información, tenemos que aprender cómo obtenerla. Si has trabajado con campos personalizados con anterioridad, esto te resultará sencillo, pues sólo vamos a extraer valores de campo personalizado.

WordPress tiene un función muy sencilla para obtener los valores de los campos personalizados:

1
2	$meta_values = get_post_meta($post_id, $key, $single);

Tenemos que cargar los valores de los campos personalizados dentro de código HTML, así que es buena empezar a pensar ahora en ese código. Estoy pensando en usar algo parecido a esto:


<div class="review-box">
	<img src="http://ourwebsite.com/uploads/the-pursuit-of-happyness.jpg" alt="The Pursuit of Happyness (2006)" class="review-box-image" />
	<ul class="review-box-list">
		<li><strong>Name:</strong> The Pursuit of Happyness</li>
		<li><strong>Year:</strong> 2006</li>
		<li><strong>Director:</strong> Gabriele Muccino</li>
		<li><strong>Writer:</strong> Steve Conrad</li>
		<li><strong>Stars:</strong> Will Smith, Jaden Smith, Thandie Newton</li>
		<li><strong>Genre:</strong> Biography, Drama</li>
		<li><strong>Runtime:</strong> 117 minutes</li>
		<li><strong>Storyline:</strong> Based on a true story about a man named Christopher Gardner. Gardner has invested heavily in a device known as a "Bone Density scanner". He feels like he has made these devices. However, they do not sell as they are marginally better than the current technology at a much higher price. As Gardner tries to figure out how to sell them, his wife leaves him, he loses his house, his bank account, and credit cards. Forced to live out in the streets with his son, Gardner is now desperate to find a steady job; he takes on a job as a stockbroker, but before he can receive pay, he needs to go through 6 months of training, and to sell his devices.</li>
	</ul>
</div>

Y si lo unimos todo, ¡ya tenemos nuestra función preparada!


function wptuts_review_box() {
    global $post;
    // get the custom field values as an array
    $values = get_post_custom( $post->ID );
    // extract the members of the $values array to their own variables (which you can see below, in the HTML code)
    extract( $values, EXTR_SKIP );
    // if there's no image link in the "review_image" custom field, try to get the featured image
    if($_wptuts_review_image == '') {
        if(has_post_thumbnail()) {
            $get_wptuts_review_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
            $_wptuts_review_image = $get_wptuts_review_image[0];
        } else {
            $_wptuts_review_image = 'http://placehold.it/150x200&text=No+Image';
        }
    }
	// escape the output, just in case
	$allowed_html = array(
		'a' => array(
			'href' => array(),
			'title' => array()
		),
		'em' => array(),
		'strong' => array()
	);
	$_wptuts_review_name_output = wp_kses($_wptuts_review_name[0], $allowed_html);
	$_wptuts_review_year_output = wp_kses($_wptuts_review_year[0], $allowed_html);
	$_wptuts_review_director_output = wp_kses($_wptuts_review_director[0], $allowed_html);
	$_wptuts_review_writer_output = wp_kses($_wptuts_review_writer[0], $allowed_html);
	$_wptuts_review_stars_output = wp_kses($_wptuts_review_stars[0], $allowed_html);
	$_wptuts_review_genre_output = wp_kses($_wptuts_review_genre[0], $allowed_html);
	$_wptuts_review_runtime_output = wp_kses($_wptuts_review_runtime[0], $allowed_html);
	$_wptuts_review_storyline_output = wp_kses($_wptuts_review_storyline[0], $allowed_html);
	$_wptuts_review_image_output = wp_kses($_wptuts_review_image[0], $allowed_html);
    $output = '<div class="review-box">
        <img src="'.$_wptuts_review_image_output.'" alt="'.$_wptuts_review_name_output.' ('.$_wptuts_review_year_output.')" class="review-box-image" />
        <ul class="review-box-list">
            <li><strong>Name:</strong> '.$_wptuts_review_name_output.'</li>
            <li><strong>Year:</strong> '.$_wptuts_review_year_output.'</li>
            <li><strong>Director:</strong> '.$_wptuts_review_director_output.'</li>
            <li><strong>Writer:</strong> '.$_wptuts_review_writer_output.'</li>
            <li><strong>Stars:</strong> '.$_wptuts_review_stars_output.'</li>
            <li><strong>Genre:</strong> '.$_wptuts_review_genre_output.'</li>
            <li><strong>Runtime:</strong> '.$_wptuts_review_runtime_output.'</li>
            <li><strong>Storyline:</strong> '.$_wptuts_review_storyline_output.'</li>
        </ul>
    </div>';
    return $output;
}

El CSS

Evidentemente, puedes aplicar el estilo que más te guste a tu caja de reseñas. Pero si quieres, puedes usar los nuestros libremente:


.review-box {width:550px;border:1px solid #DDD;border-radius:5px;margin:10px;}
.review-box-image {float:right;width:150px;border:10px solid #fff;border-width:0 0 10px 10px;margin:10px 10px 0 0;}
.review-box-list {margin:10px;padding:0;list-style:none;}
.review-box-list li {margin-bottom:5px;padding-top:5px;border-top:1px solid #EEE;}
.review-box-list li:first-child {border-top:0;}
.review-box-list li strong {display:inline-block;width:75px;}

Si quieres flotar la caja de las reseñas hacia la izquierda o hacia la derecha, no olvides añadir la declaración float:left; (o float:right;) para .review-box. Podrías incluso centrarla cambiando la declaración margin:10px; por margin:10px auto;.

Paso 3 Crear el Shortcode para Replicar la Función

Ya sabemos cómo configurar la información, sabemos cómo obtener la información… ¡Es el momento de presentarla! :)

Siempre podemos añadir la sección al final (o al principio) de nuestro artículo automáticamente de la siguiente manera:


function wptuts_review_box_add($content) {
	$review_box = wptuts_review_box();
	// show the box at the end of the post:
	return $content.$review_box;
	// show the box at the beginning of the post:
	// return $review_box.$content;
} add_action('the_content','wptuts_review_box_add');

Pero, ¿qué pasa si queremos incluirla entre el contenido del artículo? Aquí es donde entra en juego mi parte favorita: ¡los shortcodes!

Este paso es incluso más sencillo que el anterior, debido a que ya hemos realizado todo el trabajo necesario para cargar la sección de la reseña. Todo lo que tenemos que hacer es invocar la función en forma de shortcode tal y como puedes ver aquí abajo:

1
2	add_shortcode('reviewbox','wptuts_review_box');

Aquí tienes lo que obtendrás si has seguido los pasos anteriores tal y como están escritos:

Resumiendo

Estas cajas de reseñas podrían usarse para miles de tipos de valoraciones, como por ejemplo, reseñas de software, de sitios web, de libros, de programas de televisión, etc. O, si eres creativo, podrías incluso usarlas en blogs estándar, simplemente por diversión.

Algunos Artículos de Consulta

Para entender el código en su totalidad e incluso mejorarlo, te aconsejo la lectura de otros artículos de Tuts+.

Cómo Crear Cajas Meta Personalizadas de WordPress (Deberías leer este artículo si quieres aprender cuál es el concepto de las cajas meta personalizadas).
Cómo Integrar el Cargador de Medios de WordPress en las Opciones del Tema y del Plugin (Esto podría ser útil en el caso de que quieras permitir a los autores subir las imágenes de las reseñas directamente por sí mismos.)
Sanitización de Datos y Validación Con WordPress (un gran artículo sobre la sanitización de datos. Recuerda: ¡No puedes confiar ni en ti mismo sobre de esto!)

¿Hay algo que que quieras mejorar o tienes alguna sugerencia? Comparte tus pensamientos con todos nosotros a través de un comentario.