✅Insignias Personalizadas en las Entradas del Blog de WordPress (Sin Plugins)

Este código para WordPress tiene la finalidad de ofrecer a los creadores de contenido una manera sencilla de destacar y personalizar visualmente ciertas entradas en sus sitios web. En lugar de utilizar las opciones de formato estándar, como negrita o cursiva, este código permite agregar un «distintivo» único y llamativo a cada entrada.

En otra ocasión vimos como realizar lo mismo pero en los productos de Woocommerce.

¿Qué hace el código?

1. Añade Opciones Visuales en la Edición:
   • Al editar una entrada, se proporciona un área especial llamada «Distintivo Personalizado». Aquí, los creadores pueden seleccionar un color y escribir un texto breve que describa la entrada.
2. Muestra un Distintivo Personalizado:
   • En el sitio web, al visualizar una entrada, el código verifica si se ha personalizado un distintivo. Si es así, agrega un elemento distintivo colorido y con texto al principio del contenido de esa entrada.
3. Personalización Estilizada:
   • Además, el código incluye estilos visuales para hacer que este distintivo se vea atractivo. Los creadores pueden elegir el color del distintivo, y el código ajusta automáticamente su presentación para que se integre bien con el contenido.

Posibles Casos de Uso:

1. Destacar Ofertas Especiales:
   • Los sitios web que ofrecen promociones especiales pueden utilizar este código para agregar un distintivo colorido a las entradas que contienen ofertas exclusivas.
2. Etiquetar Contenido Importante:
   • Los creadores pueden etiquetar ciertas entradas como «Importante» o «Destacado» mediante un distintivo visual, ayudando a los visitantes a identificar rápidamente contenido relevante.
3. Organizar Contenido por Tema:
   • Si un sitio web tiene categorías específicas, el distintivo podría utilizarse para indicar visualmente la temática de una entrada, facilitando la navegación.
4. Noticias Urgentes o Actualizadas:
   • En sitios web de noticias, este código podría aplicarse para resaltar noticias importantes o actualizaciones críticas, permitiendo a los lectores identificar rápidamente la información clave.

En resumen, este código brinda a los creadores de contenido una forma simple pero efectiva de agregar un toque visual único a sus entradas, facilitando la destacación y organización del contenido en sus sitios web.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php

/**
 * Añadir campos personalizados para color y texto en la página de edición de entradas.
 */
function custom_add_post_custom_fields() {
    add_meta_box(
        'custom_badge_metabox',
        'Distintivo Personalizado',
        'custom_badge_metabox_content',
        'post',
        'side',
        'high'
    );
}

add_action('add_meta_boxes', 'custom_add_post_custom_fields');

/**
 * Contenido de la metabox de campos personalizados.
 */
function custom_badge_metabox_content($post) {
    $custom_badge_color = get_post_meta($post->ID, '_custom_badge_color', true);
    $custom_badge_text = get_post_meta($post->ID, '_custom_badge_text', true);
    ?>
    <div class="form-field">
        <label for="_custom_badge_color">Color de la Banda</label>
        <input type="text" id="_custom_badge_color" name="_custom_badge_color" placeholder="Ej: #ff0000" value="<?php echo esc_attr($custom_badge_color); ?>" />
        <p class="description">Inserta el color de la banda para el distintivo.</p>
    </div>

    <div class="form-field">
        <label for="_custom_badge_text">Texto de la Banda</label>
        <input type="text" id="_custom_badge_text" name="_custom_badge_text" placeholder="Ej: Oferta Especial" value="<?php echo esc_attr($custom_badge_text); ?>" />
        <p class="description">Inserta el texto de la banda para el distintivo.</p>
    </div>
    <?php
}

/**
 * Guardar los valores de los campos personalizados al guardar la entrada.
 */
function custom_save_post_custom_fields($post_id) {
    if (isset($_POST['_custom_badge_color'])) {
        $custom_badge_color = sanitize_text_field($_POST['_custom_badge_color']);
        update_post_meta($post_id, '_custom_badge_color', $custom_badge_color);
    }

    if (isset($_POST['_custom_badge_text'])) {
        $custom_badge_text = sanitize_text_field($_POST['_custom_badge_text']);
        update_post_meta($post_id, '_custom_badge_text', $custom_badge_text);
    }
}

add_action('save_post', 'custom_save_post_custom_fields');

/**
 * Mostrar el distintivo personalizado al principio del contenido en la entrada individual y en el bucle de entradas.
 */
function custom_display_custom_badge($content) {
    $custom_badge_color = get_post_meta(get_the_ID(), '_custom_badge_color', true);
    $custom_badge_text = get_post_meta(get_the_ID(), '_custom_badge_text', true);

    if (!empty($custom_badge_color) && !empty($custom_badge_text)) {
        $badge_content = '<div class="custom-badge-container"><span class="custom-badge" style="background-color:' . esc_attr($custom_badge_color) . ';">' . esc_html($custom_badge_text) . '</span></div>';

        // Agregar la insignia al principio del contenido
        $content = $badge_content . $content;
    }

    return $content;
}

add_filter('the_content', 'custom_display_custom_badge', 10);
add_filter('the_excerpt', 'custom_display_custom_badge', 10);

/**
 * Agregar el estilo CSS al encabezado del documento.
 */
function custom_add_custom_badge_styles() {
    $custom_badge_color = get_post_meta(get_the_ID(), '_custom_badge_color', true);

    if (!empty($custom_badge_color)) {
        ?>
        <style>
            .custom-badge-container {
                margin-bottom: 20px; /* Ajusta el margen inferior según tus necesidades */
            }

            .custom-badge {
                display: inline-block;
                background-color: <?php echo esc_attr($custom_badge_color); ?>;
                color: #fff;
                padding: 5px 10px;
                border-radius: 5px;
                font-size: 14px;
                margin-bottom: 10px; /* Ajusta el margen inferior de la insignia según tus necesidades */
            }
        </style>
        <?php
    }
}

add_action('wp_head', 'custom_add_custom_badge_styles');Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. Añadir Campos Personalizados (Metabox):
   • Función: custom_add_post_custom_fields
   • Acción: Se ejecuta cuando se añaden las metaboxes (add_meta_boxes).
   • Propósito: Añade una metabox llamada «Distintivo Personalizado» en el panel de edición de entradas. Esta metabox contiene campos para el color y el texto del distintivo.
2. Contenido de la Metabox de Campos Personalizados:
   • Función: custom_badge_metabox_content
   • Parámetros: $post (objeto de la entrada actual).
   • Propósito: Define el contenido de la metabox. Muestra campos de entrada para el color y el texto del distintivo, prellenados con los valores actuales si existen.
3. Guardar los Valores de los Campos Personalizados:
   • Función: custom_save_post_custom_fields
   • Acción: Se ejecuta cuando se guarda una entrada (save_post).
   • Propósito: Guarda los valores de los campos personalizados en la base de datos cuando se guarda una entrada.
4. Mostrar el Distintivo Personalizado en el Contenido de la Entrada:
   • Función: custom_display_custom_badge
   • Parámetros: $content (contenido de la entrada).
   • Propósito: Añade un distintivo personalizado al principio del contenido de la entrada, si se han proporcionado valores para el color y el texto del distintivo.
5. Agregar Estilos CSS al Encabezado del Documento:
   • Función: custom_add_custom_badge_styles
   • Acción: Se ejecuta cuando se carga el encabezado del documento (wp_head).
   • Propósito: Agrega estilos CSS al encabezado del documento basados en el color del distintivo personalizado. Estos estilos se aplicarán si se ha proporcionado un color para el distintivo.

Flujo de Ejecución:

1. Al editar una entrada, se muestra una metabox que permite ingresar el color y el texto del distintivo.
2. Al guardar la entrada, los valores ingresados se guardan como campos personalizados asociados a esa entrada.
3. Al mostrar la entrada en la página, el distintivo personalizado se agrega al principio del contenido, si se proporcionaron valores.
4. Se aplican estilos CSS al encabezado del documento, basados en el color del distintivo, para mejorar la presentación visual del distintivo.

En resumen, este código proporciona una forma de personalizar visualmente las entradas mediante la adición de un distintivo con color y texto, todo gestionado a través de campos personalizados.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.