Os cuento cómo utilizar el valor de un campo personalizado de WordPress para mostrar estrellas en la parte pública de la web, representando la valoración de un libro.
Este método se puede utilizar para mostrar cualquier tipo de información relativa a un post, y no utilizamos ningún plugin, solo código (y muy poco). También explico cómo crear un Custom Post Type, que son los metadatos de un post y cómo usar los hooks de WordPress (en concreto el filtro the_content).
Crear un Custom Post Type en WordPress
Uno de los primeros pasos consiste en crear un Custom Post Type (CPT) que nos permitirá organizar y gestionar de manera eficiente nuestros contenidos específicos.
Paso 1: Configurar el Plugin
/*
Plugin Name: Valoraciones
*/Crearemos un archivo de plugin llamado valoraciones.php dentro de una nueva carpeta ubicada en la ruta de plugins. Para simplificar el asunto, usaremos un snippet de código que nos facilitará la creación de este CPT.
Paso 2: Definir el Custom Post Type
function crear_cpt_libros() {
$labels = array(
'name' => 'Libros',
'singular_name' => 'Libro',
'menu_name' => 'Libros',
'name_admin_bar' => 'Libro',
'add_new' => 'Añadir nuevo',
'add_new_item' => 'Añadir nuevo libro',
'new_item' => 'Nuevo libro',
'edit_item' => 'Editar libro',
'view_item' => 'Ver libro',
'all_items' => 'Todos los libros',
'search_items' => 'Buscar libros',
'not_found' => 'No se encontraron libros',
'not_found_in_trash' => 'No hay libros en la papelera',
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'custom-fields'),
'menu_icon' => 'dashicons-book',
);
register_post_type('libros', $args);
}
add_action('init', 'crear_cpt_libros');Esta función registra el nuevo CPT «Libros», permitiéndonos gestionar nuestras entradas de libros a través del panel de administración de WordPress.
Agregar Campos Personalizados
El siguiente paso es añadir campos personalizados a nuestro CPT para almacenar información específica, como valoraciones de usuarios.
Paso 1: Añadir Soporte para Campos Personalizados
Para habilitar campos personalizados en nuestro CPT, añadimos 'supports' => array('custom-fields') dentro de los argumentos del CPT.
Paso 2: Crear y Almacenar Campos Personalizados
En el editor de Gutenberg, añadimos un campo personalizado llamado valoración y almacenamos un valor numérico.
Mostrar Campos Personalizados en el Frontend
Para mostrar los campos personalizados en el frontend utilizaremos PHP y shortcodes.
Opción 1: Crear un Shortcode
function mostrar_valoracion($atts) {
global $post;
$valoracion = get_post_meta($post->ID, 'valoración', true);
if ($valoracion) {
$output = '';
for ($i = 0; $i < $valoracion; $i++) {
$output .= '<img src="' . plugin_dir_url(__FILE__) . 'star.png" alt="Star" width="16" height="16">';
}
return $output;
}
return '';
}
add_shortcode('mostrar_valoracion', 'mostrar_valoracion');Usaremos el shortcode [mostrar_valoracion] para mostrar las estrellas en el contenido de nuestras entradas y paginas.
Opción 2: Usar el filtro the_content
Por otro lado, podemos utilizar el filtro the_content para interceptar y modificar el contenido del post. Esto se hace añadiendo un fragmento de código que añade la lógica de visualización de estrellas en base a la valoración guardada:
function agregar_valoracion_al_contenido($content) {
// Obtener la valoración del meta campo
$valoracion = get_post_meta(get_the_ID(), 'valoración', true);
// Verificar si la valoración está vacía o si el post no es del tipo 'libro'
if (empty($valoracion) || get_post_type() != 'libro') {
return $content;
}
// Generar HTML para mostrar estrellas
$estrellas = '';
for ($i = 0; $i < $valoracion; $i++) {
$estrellas .= '<img src="' . plugin_dir_url(__FILE__) . 'estrella.png" width="16px" style="display:inline;" alt="star">';
}
// Concatenar las estrellas al contenido original
$content .= '<div class="valoracion-estrellas">' . $estrellas . '</div>';
return $content;
}
add_filter('the_content', 'agregar_valoracion_al_contenido');Optimización y Buenas Prácticas
- Guardar Permalinks: Luego de crear un CPT, no olvides guardar los permalinks para evitar errores de página no encontrada.
- Condicionales en Funciones: Agrega verificaciones para asegurar que el código solo se ejecute en los tipos de contenido deseados.
- Uso de CSS: Opcionalmente, aplica estilos CSS para mejorar la apariencia de las valoraciones.
.star {
display: inline-block;
margin-right: 0.5em;
}Conclusión
Mostrar valores de campos personalizados en el frontend sin usar plugins es más sencillo de lo que parece y te permite mantener tu sitio web ligero y rápido. Hemos visto cómo crear un CPT, añadir y almacenar campos personalizados, y finalmente mostrar estos valores en el frontend utilizando PHP.
El mundo de WordPress ofrece muchas posibilidades y esperamos que este tutorial te haya inspirado a seguir explorando. ¡Déjanos un comentario con tus dudas o comparte cómo utilizas campos personalizados en tus proyectos!