Revisando y ordenando mi lista de snippets, encontré este código que desarrollé hace unos meses para un cliente. Se trata de una funcionalidad personalizada para WordPress que permite a los editores resaltar los puntos clave de un artículo de manera automática. Este código fue diseñado para resolver un problema específico: facilitar a los lectores la identificación de las ideas principales de una entrada mediante un resumen dinámico generado a partir de texto en negrita dentro del contenido.
El objetivo de esta solución era proporcionar a los usuarios una herramienta intuitiva, integrada directamente en el editor de WordPress, que les permitiera activar o desactivar la visualización de puntos clave con solo marcar una casilla. Además, se buscaba que la presentación del resumen fuese atractiva y profesional, para mantener el interés del lector y optimizar la experiencia de navegación en el sitio web.
En este artículo, te explicaré en detalle cómo funciona este código, desde la integración en el editor de WordPress hasta la generación dinámica de los puntos clave. Si estás buscando formas de enriquecer la experiencia de tus lectores o clientes, este desarrollo podría ser justo lo que necesitas.
Detalles del Funcionamiento del Código
1. Creación de un Metabox en el Editor
Este código añade un metabox personalizado al editor de entradas de WordPress. El metabox incluye un checkbox que permite activar la funcionalidad de puntos clave. Este se muestra en la barra lateral del editor, asegurando una accesibilidad cómoda para el usuario.
2. Diseño de la Interfaz del Metabox
El metabox no solo se integra perfectamente en el flujo de trabajo de WordPress, sino que también está diseñado para ser visualmente intuitivo:
- Un título claro que indica la función: «Mostrar Puntos Clave del Artículo».
- Un checkbox con un mensaje explicativo que asegura que los editores comprendan cómo y cuándo usarlo.
3. Almacenamiento del Estado del Checkbox
Cuando se guarda o actualiza una entrada, el estado del checkbox se almacena como un metadato personalizado en la base de datos de WordPress. Esto asegura que los puntos clave solo se activen en las entradas donde el editor así lo desee.
4. Procesamiento del Contenido
Cuando un lector visualiza una entrada con esta funcionalidad activada, el contenido es procesado para:
- Buscar y extraer frases en negrita.
- Formatearlas correctamente, añadiendo puntos finales y asegurando que comiencen con mayúscula.
- Generar un bloque visual con los puntos clave destacados al final del artículo.
5. Diseño del Bloque de Resumen
El resumen incluye un encabezado, una lista numerada y estilos personalizados para destacar visualmente los puntos clave. El diseño fue pensado para ser moderno y minimalista, alineado con las tendencias actuales de diseño web.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// 1. Agregar un metabox en el editor de entradas
function agregar_checkbox_puntos_clave() {
add_meta_box(
'mostrar_puntos_clave_metabox', // ID único del metabox
'Mostrar Puntos Clave del Artículo', // Título del metabox
'mostrar_puntos_clave_callback', // Callback para mostrar el contenido del metabox
'post', // Tipo de post donde se mostrará
'side', // Contexto (side, normal, advanced)
'high' // Prioridad
);
}
add_action('add_meta_boxes', 'agregar_checkbox_puntos_clave');
// 2. Callback para el contenido del metabox
function mostrar_puntos_clave_callback($post) {
// Obtener el valor del metadato actual
$mostrar_puntos_clave = get_post_meta($post->ID, '_mostrar_puntos_clave', true);
?>
<div style="font-family: Arial, sans-serif; padding: 10px;">
<label for="mostrar_puntos_clave" style="display: flex; align-items: center; font-size: 14px; font-weight: bold; color: #333;">
<input type="checkbox" name="mostrar_puntos_clave" id="mostrar_puntos_clave" value="1" <?php checked($mostrar_puntos_clave, '1'); ?> style="margin-right: 8px; transform: scale(1.2);" />
Activar Puntos Clave del Artículo
</label>
<p style="margin-top: 10px; font-size: 12px; color: #666; font-style: italic;">
Marca esta casilla para mostrar los puntos clave destacados en esta entrada.
</p>
</div>
<?php
}
// 3. Guardar el valor del checkbox al guardar la entrada
function guardar_puntos_clave_checkbox($post_id) {
// Verificar que no sea un autoguardado
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
// Verificar permisos del usuario
if (!current_user_can('edit_post', $post_id)) {
return;
}
// Verificar el valor del checkbox
if (isset($_POST['mostrar_puntos_clave'])) {
update_post_meta($post_id, '_mostrar_puntos_clave', sanitize_text_field($_POST['mostrar_puntos_clave']));
} else {
delete_post_meta($post_id, '_mostrar_puntos_clave');
}
}
add_action('save_post', 'guardar_puntos_clave_checkbox');
// Modificar el contenido solo si el checkbox está activo
function agregar_puntos_clave_al_contenido($content) {
if (is_single() && in_the_loop() && is_main_query()) {
global $post;
// Verificar si los puntos clave están activados para esta entrada
$mostrar_puntos_clave = get_post_meta($post->ID, '_mostrar_puntos_clave', true);
if ($mostrar_puntos_clave === '1') {
// Extraer todas las negritas del contenido
preg_match_all('/<strong>(.*?)<\/strong>|<b>(.*?)<\/b>/', $content, $matches);
$bold_texts = array_merge($matches[1], $matches[2]);
$bold_texts = array_filter($bold_texts);
// Si hay textos en negrita, procesarlos para formato
if (!empty($bold_texts)) {
$processed_texts = array_map(function($text) {
// Capitalizar la primera letra y añadir un punto al final
$text = trim($text); // Eliminar espacios extra
$text = ucfirst(mb_strtolower($text)); // Primera letra en mayúscula
if (substr($text, -1) !== '.') { // Añadir punto si no tiene
$text .= '.';
}
return $text;
}, $bold_texts);
// Crear el bloque de puntos clave
$puntos_clave_html = '<div class="puntos-clave">';
$puntos_clave_html .= '<h3>Puntos Clave del Artículo</h3>';
$puntos_clave_html .= '<ul>';
$contador = 1;
foreach ($processed_texts as $text) {
$puntos_clave_html .= '<li>';
$puntos_clave_html .= '<span class="numero">' . $contador++ . '.</span> ';
$puntos_clave_html .= esc_html($text);
$puntos_clave_html .= '</li>';
}
$puntos_clave_html .= '</ul>';
$puntos_clave_html .= '</div>';
// Agregar los puntos clave al final del contenido
$content .= $puntos_clave_html;
// Agregar estilos personalizados
$content .= '<style>
.puntos-clave {
margin-top: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 12px;
background-color: #fdfdfd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.puntos-clave h3 {
margin-bottom: 15px;
font-size: 22px;
color: #2c3e50;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.puntos-clave ul {
list-style: none;
padding: 0;
margin: 0;
}
.puntos-clave ul li {
margin-bottom: 10px;
font-size: 16px;
color: #444;
display: flex;
align-items: center;
animation: fadeIn 0.3s ease-in-out;
}
.puntos-clave ul li .numero {
display: inline-block;
margin-right: 10px;
font-size: 18px;
font-weight: bold;
color: #3498db;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>';
}
}
}
return $content;
}
add_filter('the_content', 'agregar_puntos_clave_al_contenido');
Lenguaje del código: PHP (php)En conclusión, este snippet es un excelente ejemplo de cómo pequeños desarrollos personalizados pueden transformar la experiencia de usuario en un sitio web. Además de cumplir un propósito práctico, aporta valor estético y funcional tanto a los administradores como a los lectores. Si estás buscando formas de mejorar la presentación de contenido en WordPress, esta es una solución fácil de implementar y altamente efectiva.
Nos vemos en el siguiente tutorial. Un saludo.
Deja tus opiniones o dudas en los comentarios.