Crea Campos Personalizados en WordPress Sin Plugins ni ACF

Guía experta: Crea campos personalizados en WordPress 100% nativos, sin ACF. Optimiza el rendimiento, gana control total y domina las Meta Boxes con código PHP. ¡Aprende ya!

Crear Campos Personalizados (ACF) sin Plugin: Guía Completa con Código

En el vasto universo de WordPress, la flexibilidad es una de sus mayores fortalezas. Gran parte de esta flexibilidad proviene de la capacidad de extender su funcionalidad central, y los campos personalizados son un pilar fundamental en este aspecto. 

Tradicionalmente, muchos desarrolladores, incluso expertos en WordPress, recurren a plugins como Advanced Custom Fields (ACF) para gestionar estos campos. 

Si bien ACF es una herramienta fantástica que simplifica enormemente el proceso, introducir una dependencia de plugin para algo que WordPress puede manejar de forma nativa puede tener sus desventajas, desde una ligera sobrecarga de rendimiento hasta una menor autonomía sobre el código.

 Esta guía detallada se adentra en el corazón de WordPress para mostrarte cómo implementar campos personalizados de manera nativa, proporcionando un control total y optimización.

Este tutorial de WordPress está diseñado para aquellos con sólidas nociones de PHP y una comprensión básica de la arquitectura de WordPress. 

No solo aprenderás a crear, mostrar y guardar tus propios campos personalizados, sino que también comprenderás las razones detrás de cada decisión de codificación. Nuestro objetivo es que, al finalizar, seas capaz de implementar soluciones personalizadas más robustas y eficientes, sin la necesidad de intermediarios.

Desmitificando los Campos Personalizados en WordPress: La Ruta Nativa

Por Qué Optar por un Enfoque Nativo para Campos Personalizados

Antes de sumergirnos en el código, es crucial entender por qué un experto en WordPress podría elegir desarrollar campos personalizados sin depender de plugins. La razón principal es el control y la optimización. Cada plugin que instalas agrega código a tu sitio, lo que puede incrementar el tiempo de carga y el consumo de recursos. Aunque plugins como ACF están altamente optimizados, el uso de código nativo te permite tener un control granular sobre cada aspecto, desde la estructura HTML de los campos hasta la lógica de guardado y validación. Esto se traduce en una base de código más ligera, más rápida y más fácil de depurar, especialmente en proyectos de gran escala o donde el rendimiento es crítico. Además, te profundiza en el funcionamiento interno de WordPress, mejorando tus habilidades como desarrollador.

El Ecosistema de WordPress para Campos Personalizados: Meta Boxes

En WordPress, los campos personalizados que vemos en el editor de entradas o páginas están encapsulados dentro de lo que se conoce como "Meta Boxes". Un meta box es una sección en la pantalla de edición de un post (o cualquier tipo de post personalizado) que contiene elementos de interfaz de usuario para introducir información adicional. El núcleo de WordPress nos proporciona una API robusta para registrar y gestionar estos meta boxes. Entender esto es el primer paso para dominar la creación de campos personalizados sin plugins.

Registrando Nuestro Primer Meta Box

El punto de entrada para crear un meta box es la función `add_meta_box()`. Esta función se engancha a la acción `add_meta_boxes`. Es esencial ejecutar esta función dentro del hook adecuado para asegurar que el meta box se muestre en el lugar correcto y en el momento oportuno. La idea es definir un contenedor para nuestros futuros campos.

/**
 * Agrega un meta box personalizado para campos adicionales.
 *
 * @param string $post_type El tipo de post actual.
 */
function myplugin_add_custom_meta_box( $post_type ) {
    // Para asegurarnos de que el meta box solo aparece en 'post' y 'page'
    $post_types = array( 'post', 'page' );
    if ( in_array( $post_type, $post_types ) ) {
        add_meta_box(
            'myplugin_custom_fields_meta_box', // ID único del meta box
            __( 'Información Adicional del Contenido', 'textdomain' ), // Título del meta box
            'myplugin_render_custom_meta_box',  // Función de callback que genera el HTML del meta box
            $post_type,                         // Pantalla donde aparecerá el meta box (post, page, custom post type)
            'advanced',                         // Contexto (donde aparecerá: 'normal', 'side', 'advanced')
            'high'                              // Prioridad (donde aparecerá dentro del contexto: 'high', 'core', 'default', 'low')
        );
    }
}
add_action( 'add_meta_boxes', 'myplugin_add_custom_meta_box' );

En el código anterior, hemos utilizado el hook `add_meta_boxes` para llamar a nuestra función `myplugin_add_custom_meta_box`. Dentro de esta, `add_meta_box` toma varios parámetros clave: un ID único, un título visible, la función de callback que contendrá el HTML de nuestros campos, el tipo de post donde queremos que aparezca (por ejemplo, 'post', 'page' o un tipo de post personalizado), el contexto (donde se ubicará en la pantalla de edición, como 'normal' o 'side'), y su prioridad dentro de ese contexto.

Creando el Contenido de Nuestros Campos

Una vez que el meta box está registrado, necesitamos una función de callback que genere el HTML de los campos que queremos mostrar. Esta función es la que pasamos como tercer argumento a `add_meta_box()`. Aquí es donde definiremos nuestros campos de entrada, como textos, selectores, casillas de verificación, etc. Es fundamental incluir un 'nonce' (número usado una vez) para proteger la seguridad de los datos al guardar. Este es un paso crítico en cualquier desarrollo seguro en WordPress.

/**
 * Función de callback que renderiza el HTML para el meta box personalizado.
 *
 * @param WP_Post $post El objeto WP_Post actual.
 */
function myplugin_render_custom_meta_box( $post ) {
    // Agrega un campo nonce para verificación de seguridad.
    // Es crucial para protegerse contra ataques CSRF.
    wp_nonce_field( 'myplugin_save_custom_meta_box_data', 'myplugin_custom_nonce' );

    // Obtiene el valor actual del campo, si existe.
    $custom_field_value = get_post_meta( $post->ID, '_myplugin_custom_field', true );
    ?>
    <p>
        <label for="myplugin_custom_field_id"><strong>Título Alternativo:</strong></label><br />
        <input type="text" id="myplugin_custom_field_id" name="myplugin_custom_field"
               value="<?php echo esc_attr( $custom_field_value ); ?>" class="large-text" />
        <em><small>Introduce un título alternativo para este contenido. Será usado en la cabecera.</small></em>
    </p>
    <?php
}

En este ejemplo, `wp_nonce_field()` genera un campo oculto con un valor único que se valida al guardar el post. Esto previene ataques de falsificación de solicitudes entre sitios (CSRF). 

Luego, `get_post_meta()` recupera cualquier valor previamente guardado para nuestro campo, asegurando que se muestre en el formulario. `esc_attr()` es fundamental para la seguridad, ya que escapa cualquier carácter potencialmente malicioso en el valor del campo antes de renderizarlo en el HTML.

 Esto es un principio básico que todo experto en WordPress debe aplicar.

Persistiendo los Datos: Guardando los Campos Personalizados

La creación de los campos es solo la mitad de la batalla; la otra mitad es asegurarnos de que los datos se guarden correctamente cuando el usuario publica o actualiza el post. Esto se logra enganchándose al hook `save_post`. Dentro de esta función, realizaremos varias comprobaciones de seguridad y validación antes de actualizar la base de datos.

/**
 * Guarda los datos del meta box personalizado cuando se guarda el post.
 *
 * @param int     $post_id El ID del post.
 * @param WP_Post $post    El objeto WP_Post.
 */
function myplugin_save_custom_meta_box_data( $post_id, $post ) {
    // 1. Verifica si el nonce es válido.
    if ( ! isset( $_POST['myplugin_custom_nonce'] ) || ! wp_verify_nonce( $_POST['myplugin_custom_nonce'], 'myplugin_save_custom_meta_box_data' ) ) {
        return $post_id;
    }

    // 2. Verifica si el usuario actual tiene permiso para editar el post.
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }

    // 3. Verifica si es un autosave o una revisión. Si lo es, no hagas nada.
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }
    if ( wp_is_post_revision( $post_id ) ) {
        return $post_id;
    }

    // 4. Procesa y guarda el valor del campo personalizado.
    if ( isset( $_POST['myplugin_custom_field'] ) ) {
        $new_value = sanitize_text_field( $_POST['myplugin_custom_field'] ); // Saneamos la entrada
        update_post_meta( $post_id, '_myplugin_custom_field', $new_value );
    } else {
        delete_post_meta( $post_id, '_myplugin_custom_field' ); // Si el campo no se envió, lo borramos
    }
}
add_action( 'save_post', 'myplugin_save_custom_meta_box_data', 10, 2 );

La función `myplugin_save_custom_meta_box_data` se ejecuta cada vez que un post es guardado o actualizado. Es crucial seguir un orden específico de comprobaciones: primero, la verificación del nonce para asegurar la legitimidad de la solicitud. Luego, se verifica que el usuario tenga los permisos adecuados (`current_user_can`). 

Finalmente, se descartan las llamadas de autosave y las revisiones para evitar guardar datos incompletos o redundantes. Solo después de estas comprobaciones de seguridad y contexto, se procede a sanitizar el valor recibido de `$_POST` (con `sanitize_text_field()` para texto simple) y se guarda en la base de datos utilizando `update_post_meta()`. 

Esta función creará el meta dato si no existe, o lo actualizará si ya lo hace. La clave `_myplugin_custom_field` se usa con un prefijo de guion bajo (`_`) para indicar que es un campo "oculto" o interno de WordPress, lo que lo excluye de la interfaz de campos personalizados por defecto, pero aún es accesible programáticamente.