✅Crea tu Sección de Podcasts con ACF y Código Personalizado en WordPress

Este conjunto de códigos PHP forma parte de un sistema de gestión de podcasts en WordPress, brindando herramientas robustas tanto para los administradores del sitio como para los visitantes.

Veamos algunas características clave y posibles casos de uso:

1. Reproductor de Audio en la Interfaz de Edición:
   • Los administradores pueden agregar fácilmente archivos MP3 a cada episodio de podcast directamente desde la interfaz de edición de WordPress, facilitando la gestión de contenido multimedia.
2. Tipo de Contenido Personalizado (CPT) para Podcasts:
   • Introduce un nuevo tipo de contenido llamado «Podcasts», permitiendo una organización y gestión dedicada para este tipo específico de contenido.
3. Campos Personalizados con Advanced Custom Fields (ACF):
   • Ofrece campos personalizados para cada episodio, como título, descripción, fecha de publicación, duración y lista de invitados, proporcionando una estructura detallada y organizada.
4. Presentación Estilizada de Podcasts:
   • Utiliza un shortcode para mostrar una presentación estilizada de todos los podcasts en el sitio.
   • Permite a los visitantes buscar podcasts, mejorando la experiencia de usuario.
5. Administración Eficiente en el Panel de Control:
   • Agrega columnas personalizadas en la página de administración de podcasts, lo que facilita a los administradores obtener una vista rápida de la información clave de cada episodio.
6. Ordenación y Búsqueda de Podcasts:
   • Permite ordenar los episodios por fecha de publicación y realizar búsquedas efectivas en función de varios criterios, facilitando la navegación y la localización de contenido específico.
7. Estilos Personalizados y Carga Dinámica de Font Awesome:
   • Mejora la presentación visual mediante estilos personalizados, proporcionando una apariencia atractiva y coherente.
   • Carga dinámicamente Font Awesome para la inclusión de iconos, mejorando la estética general del sitio.

En resumen, este código ofrece una solución integral para la gestión de podcasts en WordPress, desde la administración eficiente en el panel hasta la presentación estilizada y funcionalidades mejoradas para los visitantes. Es ideal para sitios web que deseen destacar y organizar contenido multimedia de manera efectiva.

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

<?php
// Función para agregar el reproductor de MP3 en la página de edición de podcast
function agregar_reproductor_mp3_en_editor() {
    global $post;

    // Verificar si el post es de tipo "podcast" y si estamos en el editor de un podcast específico
    if (is_admin() && $post && $post->post_type === 'podcast' && isset($_GET['post'])) {
        // Obtener la URL del archivo MP3
        $mp3_url = get_field('mp3_url', $post->ID);

        // Verificar si hay una URL válida
        if ($mp3_url) {
            // Mostrar el reproductor de MP3
            echo '<div id="mp3-player-container">';
            echo '<strong>Episodio en MP3:</strong>';
            echo '<audio controls style="width:100%;">';
            echo '<source src="' . esc_url($mp3_url) . '" type="audio/mpeg">';
            echo 'Tu navegador no soporta el elemento de audio.';
            echo '</audio>';
            echo '</div>';
        }
    }
}

// Agregar el reproductor de MP3 al formulario de edición de podcast
add_action('edit_form_after_title', 'agregar_reproductor_mp3_en_editor');

// Función para registrar el tipo de contenido personalizado (CPT) "Podcasts" y la taxonomía "Categoría de Podcast"
function register_podcasts_cpt_and_taxonomy() {
    // Etiquetas para el CPT "Podcasts"
    $labels = array(
        'name' => 'Podcasts',
        'singular_name' => 'Podcast',
        'menu_name' => 'Podcasts',
        'add_new' => 'Agregar Nuevo',
        'add_new_item' => 'Agregar Nuevo Podcast',
        'edit_item' => 'Editar Podcast',
        'new_item' => 'Nuevo Podcast',
        'view_item' => 'Ver Podcast',
        'view_items' => 'Ver Podcasts',
        'search_items' => 'Buscar Podcasts',
        'not_found' => 'No se encontraron podcasts',
        'not_found_in_trash' => 'No se encontraron podcasts en la papelera',
    );

    // Configuración para el CPT "Podcasts"
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'thumbnail'),
        'menu_icon' => 'dashicons-microphone',
        'rewrite' => array('slug' => 'podcasts'),
    );

    // Registrar el CPT "Podcasts"
    register_post_type('podcast', $args);


}
add_action('init', 'register_podcasts_cpt_and_taxonomy');

// Función para registrar los campos ACF del grupo de campos "Campos del Podcast"
function register_acf_fields() {
    // Verificar si la función ACF está disponible
    if (function_exists('acf_add_local_field_group')) {
        // Definir el grupo de campos "Campos del Podcast"
        acf_add_local_field_group(array(
            'key' => 'group_podcast_fields',
            'title' => 'Campos del Podcast',
            'fields' => array(
				// Agregar campo de título visible
                array(
                    'key' => 'field_podcast_title',
                    'label' => 'Título del Episodio',
                    'name' => 'podcast_title',
                    'type' => 'text',
                ),
                // Definir campos ACF para el grupo
                array(
                    'key' => 'field_mp3_url',
                    'label' => 'URL del archivo MP3',
                    'name' => 'mp3_url',
                    'type' => 'file',
                    'return_format' => 'url',
                    'library' => 'audio',
                ),
                array(
                    'key' => 'field_episode_description',
                    'label' => 'Descripción del Episodio',
                    'name' => 'episode_description',
                    'type' => 'wysiwyg',
                    'tabs' => 'all',
                    'media_upload' => true,
                ),
                array(
                    'key' => 'field_publish_date',
                    'label' => 'Fecha de Publicación',
                    'name' => 'publish_date',
                    'type' => 'date_picker',
                    'display_format' => 'd/m/Y',
                    'return_format' => 'd/m/Y',
                ),
                array(
                    'key' => 'field_episode_duration',
                    'label' => 'Duración del Episodio',
                    'name' => 'episode_duration',
                    'type' => 'text',
                ),
                array(
                    'key' => 'field_guests',
                    'label' => 'Invitados',
                    'name' => 'guests',
                    'type' => 'text',
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'post_type',
                        'operator' => '==',
                        'value' => 'podcast',
                    ),
                ),
            ),
        ));
    }
}
add_action('acf/init', 'register_acf_fields');

// Shortcode para mostrar todos los podcasts en cajas individuales con funcionalidad de búsqueda
function mostrar_todos_los_podcasts($atts) {
    ob_start();

    // Obtener el término de búsqueda si se proporciona
    $search_term = isset($_GET['podcast_search']) ? sanitize_text_field($_GET['podcast_search']) : '';

    // Agregar formulario de búsqueda apuntando a la URL actual con el parámetro del shortcode
    echo '<form action="' . esc_url(home_url(add_query_arg(array('podcast_search' => $search_term)))) . '" method="get">';
    echo '<input type="text" name="podcast_search" id="podcast_search" value="' . esc_attr($search_term) . '">';
    echo '<input type="submit" value="Buscar Podcast">';
    echo '</form>';

    // Configurar la consulta principal de WordPress
    $args = array(
        'post_type' => 'podcast',
        'posts_per_page' => -1, // Mostrar todos los podcasts
    );

// Realizar la búsqueda en campos de ACF y en el título y contenido del post
if (!empty($search_term)) {
    $meta_query = array(
        'relation' => 'OR',
        array(
            'key' => 'podcast_title',
            'value' => $search_term,
            'compare' => 'LIKE',
        ),
		array(
            'key' => 'episode_description',
            'value' => $search_term,
            'compare' => 'LIKE',
        ),
        array(
            'key' => 'publish_date',
            'value' => $search_term,
            'compare' => 'LIKE',
        ),
        array(
            'key' => 'episode_duration',
            'value' => $search_term,
            'compare' => 'LIKE',
        ),
        array(
            'key' => 'guests',
            'value' => $search_term,
            'compare' => 'LIKE',
        ),
    );

    $args['meta_query'] = $meta_query;

   
}


    // Ejecutar la consulta
    $query = new WP_Query($args);

    // Mostrar resultados
    if ($query->have_posts()) {
        $count = 0;
        while ($query->have_posts()) {
            $query->the_post();

            echo '<div class="podcast-box">'; // Cada caja ocupa 100% del ancho en móvil
            echo '<p><b>' . esc_html(get_field('podcast_title')) . '</b></p>';
            echo '<div class="podcast-thumbnail">';
            // Agregar clase para estilos de imagen
            echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class' => 'rounded-image'));
            echo '</div>';

            // Agregar tabla con estilos
            echo '<table class="podcast-table">';
            echo '<tr><td class="small-text"><i class="fas fa-calendar-alt"></i><strong> Publicado:</strong></td><td class="small-text">' . esc_html(get_field('publish_date')) . '</td></tr>';
            echo '<tr><td class="small-text"><i class="fas fa-clock"></i><strong> Duración:</strong></td><td class="small-text">' . esc_html(get_field('episode_duration')) . '</td></tr>';
            echo '<tr><td class="small-text"><i class="fas fa-users"></i><strong> Invitados:</strong></td><td class="small-text">' . esc_html(get_field('guests')) . '</td></tr>';

            echo '</table>';

            // Agrega el reproductor de MP3
            $mp3_url = get_field('mp3_url');
            if ($mp3_url) {
                echo '<audio controls>';
                echo '<source src="' . esc_url($mp3_url) . '" type="audio/mpeg">';
                echo 'Tu navegador no soporta el elemento de audio.';
                echo '</audio>';
            }

            // Utilizar wp_kses_post para escapar y permitir contenido HTML
            $episode_description = get_field('episode_description');
            echo '<div class="podcast-description">' . wp_kses_post($episode_description ?: '') . '</div>';

            echo '</div>';

            $count++;

            // Agrega la clase clearfix para iniciar una nueva fila después de cada 3 elementos
            if ($count % 3 === 0) {
                echo '<div class="clearfix"></div>';
            }
        }

        // Restaurar datos originales de la consulta principal
        wp_reset_postdata();
    } else {
        echo '<p>No se encontraron podcasts con el término de búsqueda: "' . esc_html($search_term) . '".</p>';
    }

    return ob_get_clean();
}

// Registra el shortcode
add_shortcode('mostrar_podcasts', 'mostrar_todos_los_podcasts');

// Agregar columnas personalizadas en la página de administración de podcasts
function agregar_columnas_podcast($columns) {
    // Insertar columnas personalizadas después de la columna del título
     
    $columns['thumbnail'] = 'Imagen';
    $columns['podcast_title'] = 'Episodio';
	$columns['episode_duration'] = 'Duración';
    $columns['publish_date'] = 'Fecha del';
    $columns['guests'] = 'Invitados';

    

    return $columns;
}
add_filter('manage_podcast_posts_columns', 'agregar_columnas_podcast');

// Mostrar contenido para las columnas personalizadas en la página de administración de podcasts
function mostrar_contenido_columnas_podcast($column_name, $post_id) {
    switch ($column_name) {
         case 'podcast_title':
            // Obtener la URL de edición del post actual
            $edit_url = get_edit_post_link($post_id);

            // Obtener el valor del campo personalizado 'podcast_title'
            $podcast_title = get_field('podcast_title', $post_id);

            // Mostrar el campo 'podcast_title' como un enlace
            echo '<a href="' . esc_url($edit_url) . '">' . esc_html($podcast_title) . '</a>';
            break;

        case 'publish_date':
            // Mostrar la fecha de publicación del podcast
            $publish_date = get_field('publish_date', $post_id);
            echo esc_html($publish_date);
            break;
			
		case 'episode_duration':
            // Mostrar la duración del podcast
            $episode_duration = get_field('episode_duration', $post_id);
            echo esc_html($episode_duration);
            break;

        case 'guests':
            // Mostrar los invitados del podcast
            $guests = get_field('guests', $post_id);
            echo esc_html($guests);
            break;

        case 'thumbnail':
            // Mostrar la imagen en miniatura del podcast
            echo get_the_post_thumbnail($post_id, array(50, 50));
            break;

        default:
            // Manejar otras columnas si es necesario
            break;
    }
}
add_action('manage_podcast_posts_custom_column', 'mostrar_contenido_columnas_podcast', 10, 2);

// Ordenar las columnas por fecha de publicación
function ordenar_columnas_por_fecha($columns) {
    $columns['publish_date'] = 'publish_date';
    return $columns;
}
add_filter('manage_edit-podcast_sortable_columns', 'ordenar_columnas_por_fecha');

// Función para agregar estilos CSS al head
function agregar_estilos_podcasts() {
    echo '<style>
       /* Eliminar márgenes predeterminados */
body,
h1, h2, h3, h4, h5, h6,
p,
figure {
    margin: 0;
}

/* Estilos para la clase podcast-box */
.podcast-box {
    width: 30%; /* Ancho del contenedor en escritorio (3 columnas) */
    float: left; /* Flotar a la izquierda para la disposición en columnas */
    margin-right: 33px !important; /* Espacio entre los elementos (ajustar según sea necesario) */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
}

/* Estilos para la clase podcast-box en dispositivos móviles */
@media (max-width: 768px) {
    .podcast-box {
        width: 100%; /* Ancho del contenedor en móviles (1 columna) */
        margin-right: 0; /* No hay margen derecho en móviles */
    }
}

/* Limpiar el flotador después de cada 3 elementos en escritorio */
.clearfix {
    clear: both;
}

/* Estilos para la imagen */
.podcast-thumbnail img {
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Sombra */
    width: 50%; /* Ajustar la imagen al ancho del contenedor */
    height: auto; 
}

/* Estilos para la tabla */
.podcast-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.podcast-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.small-text {
    font-size: 0.8em; /* Tamaño de fuente más pequeño */
}

/* Estilos para el formulario de búsqueda */
form {
    margin-bottom: 20px;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 5px;
    color: black;
    text-align: left;
}

input[type="text"] {
    width: 250px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid black;
}

input[type="submit"] {
    background-color: transparent;
    color: black;
    padding: 8px 15px;
    border: 1px solid black;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

input[type="submit"]:hover {
    background-color: #2980b9;
}

/* Estilos para los resultados de búsqueda */
.podcast-box p {
    margin-top: 0;
}

.podcast-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom:30px;
}

.podcast-table {
    width: 100%;
    margin-top: 10px;
	background-color: #f9f9f9;
}

.podcast-table td {
    padding: 5px;
}

.podcast-description {
    margin-top: 10px;
}



		</style>';
}

// Registra la función en el gancho wp_head
add_action('wp_head', 'agregar_estilos_podcasts');

// Función para cargar Font Awesome si no está cargado
function cargar_font_awesome_si_es_necesario() {
    // Verifica si Font Awesome está cargado
    if (!wp_style_is('font-awesome', 'enqueued')) {
        // Agrega Font Awesome al tema
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css', array(), '5.15.3', 'all');
    }
}

// Registra la función para cargar Font Awesome si es necesario
add_action('wp_enqueue_scripts', 'cargar_font_awesome_si_es_necesario');


Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Este código en PHP define varias funciones y acciones en WordPress para la gestión de un tipo de contenido personalizado (CPT) llamado «Podcasts» con campos personalizados utilizando Advanced Custom Fields (ACF). A continuación, se proporciona una explicación detallada y profesional de cada parte del código:

1. Función agregar_reproductor_mp3_en_editor:
   • Esta función agrega un reproductor de audio HTML5 en la página de edición de un podcast en el administrador de WordPress.
   • Se muestra el reproductor solo si el post es del tipo «podcast» y si se está editando un podcast específico.
   • El reproductor se genera a partir de la URL del archivo MP3 asociado al podcast.
2. Acción edit_form_after_title:
   • Agrega el reproductor de MP3 al formulario de edición de podcast después del título.
3. Función register_podcasts_cpt_and_taxonomy:
   • Registra un nuevo tipo de contenido personalizado (CPT) llamado «Podcasts».
   • También define una taxonomía llamada «Categoría de Podcast».
4. Acción init:
   • Llama a la función register_podcasts_cpt_and_taxonomy cuando WordPress se inicia.
5. Función register_acf_fields:
   • Registra los campos personalizados utilizando Advanced Custom Fields (ACF) para el grupo de campos «Campos del Podcast».
   • Los campos incluyen título del episodio, URL del archivo MP3, descripción del episodio, fecha de publicación, duración del episodio y lista de invitados.
   • Estos campos se mostrarán en la interfaz de edición de un podcast.
6. Acción acf/init:
   • Llama a la función register_acf_fields cuando se inicializa ACF.
7. Shortcode mostrar_todos_los_podcasts:
   • Define un shortcode que muestra todos los podcasts en cajas individuales con funcionalidad de búsqueda.
   • Utiliza WP_Query para obtener y mostrar los podcasts.
   • Los resultados se presentan en un diseño de cuadrícula, y se proporciona un formulario de búsqueda.
8. Acción init y add_shortcode:
   • Registra el shortcode mostrar_podcasts para que pueda ser utilizado en las páginas y entradas de WordPress.
9. Funciones para agregar y mostrar columnas personalizadas en la página de administración de podcasts:
   • agregar_columnas_podcast agrega columnas personalizadas como Imagen, Episodio, Duración, Fecha de Publicación e Invitados.
   • mostrar_contenido_columnas_podcast muestra el contenido correspondiente para cada columna personalizada.
10. Funciones para ordenar las columnas por fecha de publicación:

• ordenar_columnas_por_fecha permite ordenar los podcasts por la columna de fecha de publicación en la página de administración.

11. Función agregar_estilos_podcasts:

• Agrega estilos CSS directamente en el <head> del sitio para personalizar la apariencia de la presentación de podcasts.
• Incluye estilos para la disposición en cuadrícula, imágenes, tablas, formularios de búsqueda y resultados de búsqueda.

12. Acción wp_head:

• Registra la función agregar_estilos_podcasts para que los estilos se incluyan en la sección <head> de cada página.

13. Función cargar_font_awesome_si_es_necesario:

• Verifica si la hoja de estilo de Font Awesome está cargada; si no lo está, la carga.
• Font Awesome se utiliza para iconos en la presentación de podcasts.

14. Acción wp_enqueue_scripts:

• Registra la función cargar_font_awesome_si_es_necesario para que se ejecute en el momento adecuado durante el proceso de carga de scripts y estilos.

Este código en conjunto crea una experiencia completa para la gestión, presentación y estilo de podcasts en un sitio web de WordPress. Desde la creación del tipo de contenido hasta la presentación en la administración y la interfaz pública, se abordan aspectos clave para la gestión de podcasts.

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.