Utilizando campos personalizados para crear cuadros de revisión

Las revisiones son quizás uno de los mayores poderes de los blogs en términos de autoridad. Cuando se hace correctamente (con trabajo duro e información consistente), los blogs de revisión son posiblemente la categoría más rentable en la blogósfera. Pero cada blog tiene que ofrecer un diseño sólido en sus publicaciones, incluidas las revisiones. En este post, vamos a hablar sobre cómo crear el cuadro de revisión perfecto, ya que los cuadros de revisión son probablemente la primera parte que los lectores verifican antes de leer un comentario..

Lo que vamos a construir

Como ejemplo, vamos a crear un cuadro de revisión para una película..

Tomemos una de mis películas favoritas de todos los tiempos, The Pursuit of Happyness. Vamos a mostrar la siguiente información sobre la película:

Nombre: La búsqueda de la felicidad
Año: 2006
Director: Gabriele muccino
Escritor: Steve Conrad
Estrellas: Will Smith, Jaden Smith, Thandie Newton
Género: Biografia, drama
Tiempo de ejecución: 117 minutos
Storyline: Basado en una historia real sobre un hombre llamado Christopher Gardner. Gardner ha invertido mucho en un dispositivo conocido como "escáner de densidad ósea". El siente como si hubiera hecho estos dispositivos. Sin embargo, no venden porque son marginalmente mejores que la tecnología actual a un precio mucho más alto. Cuando Gardner intenta descubrir cómo venderlos, su esposa lo abandona y pierde su casa, su cuenta bancaria y sus tarjetas de crédito. Obligado a vivir en las calles con su hijo, Gardner ahora está desesperado por encontrar un trabajo estable; toma un trabajo como corredor de bolsa, pero antes de que pueda recibir un pago, debe pasar por 6 meses de entrenamiento y vender sus dispositivos..
(No olvidemos que necesitamos una imagen).

Importante: Esta información es prestada de The Internet Movie Database..

Paso 1 Preparando el Meta Box personalizado para completar los datos

Mantendremos los datos como valores de campo personalizados, pero agregar campos personalizados manualmente para cada revisión puede ser una molestia. Debido a eso, vamos a crear una meta caja personalizada para guardar nuestros datos como campos personalizados..

Primero, necesitamos usar el add_meta_box () función para construir el cuadro de meta y crear una función de devolución de llamada:

 función 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'); función wptuts_review_box_meta () // ¡Hola!

La función de devolución de llamada creará los campos de entrada para mantener nuestros datos. Creo que podemos usar un área de texto para el campo "argumento" y los campos de entrada de texto para todo lo demás:

 CARNÉ DE IDENTIDAD ); // extraer los miembros de la matriz de $ valores a sus propias variables (que se pueden ver a continuación, en el código HTML) extracto ($ valores, EXTR_SKIP); wp_nonce_field ('review_box_meta_action', 'review_box_meta_nonce'); ?>  Nombre de pelicula:  
  Año:  
  Director:  
  Escritor:  
  Estrellas:  
  Género:  
  Tiempo de ejecución:  
  Imagen:  
  Storyline: <?php echo $_wptuts_review_storyline[0]; ?>

Luego, necesitamos crear la función para hacer que WordPress guarde los valores de entrada como campos personalizados:

 función 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')) devolver; if (! current_user_can ('edit_post')) return; '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ; // crea los valores "predeterminados" para la matriz $ 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_stline '=>' ' // ¡Parélos! $ review_array = wp_parse_args ($ review_array, $ review_array_defaults); // Elementos HTML que están permitidos dentro de los campos $ allowed_html = array ('a' => array ('href' => array (), 'title' => array ()), 'em' => array (), 'strong' => array ()); // actualizar los campos de metadatos posteriores con los campos de entrada (si están configurados) foreach ($ review_array como $ 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 obtener más información sobre la creación de meta cajas personalizadas (y lo que realmente significan estas líneas de código), puede leer este fantástico artículo escrito por Christopher Davis y publicado en Wptuts+.

Paso 2 Construyendo la función para mostrar el cuadro de revisión

Ahora que hemos cubierto cómo conjunto la información, tenemos que aprender a obtener la información. Si ha trabajado con campos personalizados anteriormente, esto será fácil ya que solo vamos a buscar valores de campos personalizados.

WordPress tiene una función fácil de usar para obtener valores de campos personalizados:

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

Necesitamos cargar valores de campo personalizados en algún código HTML, por lo que sería prudente pensar en el HTML ahora. Estoy pensando algo como esto:

    Nombre: La búsqueda de la felicidad
 Año: 2006
 Director: Gabriele muccino
 Escritor: Steve Conrad
 Estrellas: Will Smith, Jaden Smith, Thandie Newton
 Género: Biografia, drama
 Tiempo de ejecución: 117 minutos
 Storyline: Basado en una historia real sobre un hombre llamado Christopher Gardner. Gardner ha invertido mucho en un dispositivo conocido como "escáner de densidad ósea". El siente como si hubiera hecho estos dispositivos. Sin embargo, no venden porque son marginalmente mejores que la tecnología actual a un precio mucho más alto. Cuando Gardner intenta descubrir cómo venderlos, su esposa lo abandona y pierde su casa, su cuenta bancaria y sus tarjetas de crédito. Obligado a vivir en las calles con su hijo, Gardner ahora está desesperado por encontrar un trabajo estable; toma un trabajo como corredor de bolsa, pero antes de que pueda recibir un pago, debe pasar por 6 meses de entrenamiento y vender sus dispositivos..

Y si los ponemos juntos, tendremos nuestra función lista.!

 function wptuts_review_box () global $ post; // obtener los valores de campo personalizados como una matriz $ valores = get_post_custom ($ post-> ID); // extraer los miembros de la matriz de $ valores a sus propias variables (que se pueden ver a continuación, en el código HTML) extracto ($ valores, EXTR_SKIP); // si no hay un enlace de imagen en el campo personalizado "review_image", intente obtener la imagen mostrada if ($ _ wptuts_review_image == ") if (has_post_thumbnail ()) $ get_wptuts_review_image ; $ _wptuts_review_image = $ get_wptuts_review_image [0]; else $ _wptuts_review_image = 'http://placehold.it/150x200&text=No+Image'; // escape de la salida, solo en el caso de $ allowed_html = array ('a '=> array (' href '=> array (),' title '=> array ()),' em '=> array (),' strong '=> array ()); $ _wptuts_review_name_output = wp_kses ($ _ wptuts_review_name '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' 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 = '   Nombre: '. $ _ wptuts_review_name_output.'
 Año: '. $ _ wptuts_review_year_output.'
 Director: '. $ _ wptuts_review_director_output.'
 Escritor: '. $ _ wptuts_review_writer_output.'
 Estrellas: '. $ _ wptuts_review_stars_output.'
 Género: '. $ _ wptuts_review_genre_output.'
 Tiempo de ejecución: '. $ _ wptuts_review_runtime_output.'
 Storyline: '. $ _ wptuts_review_storyline_output.'
 
 
'; devuelve $ output;

El CSS

Por supuesto, puede diseñar su cuadro de revisión de la forma que desee. Si no te apetece, puedes usar el nuestro:

 .revision-box ancho: 550px; borde: 1px #DD sólido; borde-radio: 5px; margen: 10px; .review-box-image float: right; ancho: 150px; border: 10px solid #fff; border- ancho: 0 0 10px 10px; margen: 10px 10px 0 0; .review-box-list margen: 10px; relleno: 0; estilo de lista: ninguno; .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 ; ancho: 75px;

Si desea hacer flotar el cuadro de revisión hacia la izquierda o hacia la derecha, no olvide agregar el flotador izquierdo; (o flotar derecho;) declaración para .caja de revisión. Incluso puedes centrarlo cambiando el margen: 10px; declaración en margen: 10px auto;.

Paso 3 Creando el Shortcode para hacer eco de la función

Sabemos cómo configurar la información, sabemos cómo obtener la información ... Ahora es el momento de que espectáculo la informacion :)

Siempre podemos agregar el cuadro automáticamente al final (o al principio) de la publicación de esta manera:

 función wptuts_review_box_add ($ content) $ review_box = wptuts_review_box (); // muestra el recuadro al final de la publicación: return $ content. $ review_box; // muestra el recuadro al comienzo de la publicación: // return $ review_box. $ content;  add_action ('the_content', 'wptuts_review_box_add');

Pero que tal si queremos incluir la caja. dentro ¿el cargo? Ahí es donde mi parte favorita es útil: los códigos cortos!

Este paso sería incluso más fácil que el anterior, ya que realmente hicimos todo el trabajo para cargar el cuadro de revisión. Todo lo que tenemos que hacer es llamar a la función como un shortcode como este:

 add_shortcode ('reviewbox', 'wptuts_review_box');

Esto es lo que tendrás si sigues los pasos anteriores exactamente como están escritos:

Terminando

Estas casillas de revisión podrían usarse para cargas de diferentes revisiones como software, sitios web, libros, programas de televisión, etc. O, si puede ser creativo, incluso puede usarlos en blogs regulares solo para divertirse.!

Algunos artículos para revisar

Para comprender completamente el código e incluso para mejorarlo, debes leer algunos otros artículos de Wptuts +:

Cómo crear cajas personalizadas de WordPress Write / Meta (Debería leer este artículo si desea conocer el concepto de meta cajas personalizadas.)
Cómo integrar WordPress Media Uploader en las opciones de temas y complementos (esto podría ser útil si quieres permitir que tus autores carguen las imágenes de la revisión directamente).
Desinfección y validación de datos con WordPress (Un gran artículo sobre la desinfección de datos. Recuerde: ¡Ni siquiera puede confiar en sí mismo sobre esto!)

¿Hay algo que te gustaría mejorar o tienes una idea? Comparte tus pensamientos con nosotros comentando a continuación.

Código