En 2025, WordPress sigue siendo el CMS más usado del mundo, pero también uno de los más subestimados por desarrolladores que no conocen su verdadero potencial.
Este artículo revela 10 trucos avanzados con WordPress que te permitirán llevar tus proyectos al siguiente nivel: desde integrar React sin plugins pesados, hasta consumir y exponer APIs en .NET o mejorar el rendimiento sin recurrir a soluciones costosas.1. Cargar React en WordPress sin usar plugins
¿Qué es?
Integrar una SPA en React dentro de WordPress, sin depender de plugins como WP React Starter o Headless frameworks complejos.
¿Por qué es importante en 2025?
Los sitios híbridos que combinan WordPress (para administración de contenido) y React (para experiencia de usuario moderna) están en auge.
Paso a paso:
1.Crea tu app React con Vite:
npm create vite@latest my-react-app --template react
-Compílala:
npm run build
-Copia la carpeta
Copia la carpeta /dist
dentro de tu tema (/wp-content/themes/tu-tema/react/
).
-En functions.php, agrega:
function cargar_react_app() {
echo '<div id="root"></div>';
echo '<script type="module" src="' . get_template_directory_uri() . '/react/assets/index.js"></script>';
}
add_action('wp_footer', 'cargar_react_app');
Buenas prácticas:
- Usa
wp_localize_script()
para pasar datos dinámicos de WordPress a React. - Minimiza el uso de jQuery si usas React.
2. Exponer APIs REST personalizadas desde WordPress
¿Qué es?
Crear endpoints REST para enviar o recibir datos desde apps externas.
Paso a paso:
add_action('rest_api_init', function () {
register_rest_route('miapi/v1', '/datos/', array(
'methods' => 'GET',
'callback' => 'obtener_mis_datos',
'permission_callback' => '__return_true'
));
});
function obtener_mis_datos() {
return [
'usuario' => 'admin',
'rol' => 'editor',
];
}
Puedes consumir este endpoint desde una app en .NET, Next.js o React Native.
3. Usar WordPress como headless con Next.js 15
WordPress + Next.js sigue siendo una combinación poderosa. Con Next.js 15 puedes usar app/
y fetch()
para SSR de contenido de WordPress:
export async function getServerSideProps() {
const res = await fetch('https://tusitio.com/wp-json/wp/v2/posts');
const posts = await res.json();
return { props: { posts } };
}
Agrega ISR y compresión Brotli para mejorar rendimiento.
4. Crear bloques personalizados con ACF + JSX
En 2025, ACF soporta JSX para bloques de Gutenberg.
import { InnerBlocks } from '@wordpress/block-editor';
const MiBloque = () => (
<div className="bloque-personalizado">
<h3>{acf.title}</h3>
<InnerBlocks />
</div>
);
Buenas prácticas:
- Usa
@wordpress/scripts
para compilar JSX. - Mantén cada bloque en su propio archivo.
5. Carga condicional de scripts (mejora rendimiento)
Evita cargar scripts en todas las páginas:
function mi_script_condicional() {
if (is_page('formulario')) {
wp_enqueue_script('formulario-js', get_template_directory_uri() . '/js/form.js', array(), null, true);
}
}
add_action('wp_enqueue_scripts', 'mi_script_condicional');
6. Crear CPTs avanzados sin plugins
function crear_cpt_proyectos() { register_post_type('proyectos', [ 'label' => 'Proyectos', 'public' => true, 'supports' => ['title', 'editor', 'thumbnail'], 'menu_icon' => 'dashicons-portfolio', ]); } add_action('init', 'crear_cpt_proyectos');
Útil para portafolios, tiendas o dashboards internos.
7.Hacer consultas SQL directas de forma segura
global $wpdb;
$usuarios = $wpdb->get_results(
$wpdb->prepare("SELECT user_login FROM $wpdb->users WHERE user_registered > %s", '2024-01-01')
);
Buenas prácticas:
- Siempre usar
prepare()
para evitar inyecciones SQL. - No exponer estas consultas por REST sin permisos.
8. Añadir seguridad con nonce personalizados
$nonce = wp_create_nonce('mi_nonce_seguro');
if (!wp_verify_nonce($_REQUEST['_wpnonce'], 'mi_nonce_seguro')) {
wp_die('¡No autorizado!');
}
Ideal para formularios o acciones AJAX protegidas.
9. Añadir campos a la REST API
add_action('rest_api_init', function () {
register_rest_field('post', 'mi_campo_extra', [
'get_callback' => function ($post) {
return get_post_meta($post['id'], 'mi_meta', true);
}
]);
});
Permite que tus frontends (React, Vue, etc.) accedan a campos personalizados.
10. WordPress + .NET: autenticación vía JWT
En proyectos híbridos, puedes autenticar WordPress desde un backend en .NET 9 usando JWT.
Flujo básico:
- En WordPress:
- Genera un token JWT cuando el usuario inicia sesión.
- En .NET:
- Decodifica y valida el token para autorizar peticiones.
Recurso oficial:
👉 JWT Authentication for WP REST API (plugin)
Errores comunes
- Usar demasiados plugins cuando puedes hacer una función simple.
- No cachear respuestas REST personalizadas.
- Mezclar jQuery y React sin control de dependencias.
Preguntas frecuentes
¿Puedo usar React y WordPress sin hacer Headless?
Sí. Puedes montar componentes React dentro de temas tradicionales usando shortcodes o wp_footer
.
¿Es seguro usar consultas SQL personalizadas?
Sí, siempre que uses $wpdb->prepare()
y no expongas esos datos públicamente sin protección.
Conclusión: lleva WordPress al siguiente nivel
Estos 10 trucos avanzados con WordPress reflejan años de experiencia en proyectos reales. No se trata solo de instalar plugins, sino de entender la arquitectura y extenderla con código limpio y moderno.