Este artículo práctico aprovecha la flexibilidad de WordPress y la potente interfaz de usuario (IU) de React para el desarrollo de temas. Demuestra cómo la integración de WordPress y React eleva tus proyectos de WordPress guiándote a través de los pasos necesarios para crear un tema.
Requisitos previos
Para seguir este artículo, debes tener lo siguiente:
- Un sitio WordPress. Kinsta ofrece múltiples opciones de configuración, incluido el desarrollo local con DevKinsta, un sencillo panel de control MyKinsta, o de forma programática a través de la API de Kinsta.
- Node.js y npm (Node Package Manager) o yarn instalados en tu ordenador
Crear una estructura básica de temas de WordPress
Crear una estructura básica de un tema de WordPress implica configurar una serie de archivos y directorios que WordPress utiliza para aplicar los estilos, funcionalidades y diseños de tu tema a un sitio de WordPress.
- En tu entorno DevKinsta, accede a la carpeta de tu sitio. Navega hasta el directorio wp-content/themes.
- Crea una nueva carpeta para tu tema. El nombre de la carpeta debe ser único y descriptivo — por ejemplo, my-basic-theme.
- En la carpeta del tema, crea estos archivos esenciales y déjalos vacíos:
- style.css — Este es el archivo principal de la hoja de estilos. También contiene la información de cabecera de tu tema.
- functions.php — Este archivo define las funciones, clases, acciones y filtros que utilizará tu tema.
- index.php — Este es el archivo principal de la plantilla. Es necesario para todos los temas.
Si no utilizas React, también debes crear los siguientes archivos. Pero con React crearíamos componentes para ellos más tarde.
- header.php — Contiene la sección de cabecera de tu sitio.
- footer.php — Contiene la sección de pie de página de tu sitio.
- sidebar.php — Para la sección de la barra lateral, si tu tema incluye barras laterales.
A continuación, abre style.css y añade lo siguiente al principio del archivo:
/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/Este fragmento de código es la sección de cabecera del archivo style.css de un tema de WordPress, que contiene metadatos esenciales como el nombre del tema, los datos del autor, la versión y la licencia. Ayuda a WordPress a reconocer y mostrar el tema en el panel de control, incluyendo su descripción y etiquetas para categorizarlo.
Integrar React en WordPress
Integrar React en un tema de WordPress te permite utilizar la arquitectura basada en componentes de React para crear interfaces de usuario dinámicas e interactivas en tu sitio de WordPress. Para integrar React, utilizarás el paquete @wordpress/scripts.
Se trata de una colección de scripts reutilizables adaptados al desarrollo de WordPress. WordPress lo proporciona para simplificar el proceso de configuración y construcción, especialmente cuando se integran flujos de trabajo modernos de JavaScript, como React, en temas y plugins de WordPress.
Este conjunto de herramientas envuelve tareas comunes, facilitando el desarrollo con JavaScript en el ecosistema de WordPress.
Adapta tu tema
Ahora que tienes una estructura básica de temas de WordPress, puedes adaptar tu tema.
- Dentro del directorio de tu tema, pega el siguiente código en el archivo functions.php:
<?php function my_react_theme_scripts() { wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true); wp_enqueue_style('my-react-theme-style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'my_react_theme_scripts');El archivo functions.php integra React con tu tema de WordPress. Utiliza las funciones
wp_enqueue_scriptywp_enqueue_stylepara añadir archivos JavaScript y hojas de estilo en cascada (CSS) a tu tema.La función
wp_enqueue_scriptde WordPress toma varios argumentos:- El nombre del manejador (
'my-react-theme-app'), que identifica de forma única el script - La ruta al archivo del script
- El array de dependencias,
array('wp-element'), que indica que el script depende del wrapper de WordPress para React('wp-element'). - El número de versión
('1.0.0') - La posición
true, que especifica que el script debe cargarse en el pie de página del documento HTML para mejorar el rendimiento de carga de la página
La función
wp_enqueue_styletoma los siguientes argumentos:- El nombre del manejador
'my-react-theme-style', que identifica unívocamente la hoja de estilos - La fuente
get_stylesheet_uri(), que devuelve la URL de la hoja de estilos principal del tema (style.css) y garantiza que se apliquen los estilos del tema
- El elemento
add_action, que hace hook (engancha) una función personalizada'my_react_theme_scripts'a una acción específica ('wp_enqueue_scripts'). Esto garantiza que tu JavaScript y CSS se carguen correctamente cuando WordPress se prepare para renderizar la página.
Este código garantiza que el archivo JavaScript compilado de tu aplicación React, ubicado en <tu-directorio-del-tema>/build/index.js, y la hoja de estilos principal de tu tema se carguen con tu tema.
El directorio /build suele proceder de la compilación de tu aplicación React mediante una herramienta como
create-react-appo webpack, que agrupa tu código React en un archivo JavaScript minificado y listo para producción.Esta configuración es esencial para integrar la funcionalidad React en tu tema de WordPress, permitiendo experiencias de usuario dinámicas, similares a las de una aplicación, dentro de un sitio de WordPress.
- El nombre del manejador (
- A continuación, actualiza el contenido del archivo index.php:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="app"></div> <?php wp_footer(); ?> </body> </html>El código del archivo index.php define la estructura HTML básica del tema de WordPress, incluyendo hooks para que WordPress inserte las cabeceras (
wp_head) y pies de página (wp_footer) necesarios y undivcon el IDappdonde se monta la aplicación React.
Montar React con @wordpress/scripts
- Abre tu terminal y navega hasta el directorio de tu tema:
cd wp-content/themes/my-basic-theme - Inicializa un nuevo proyecto Node.js:
npm init -y - Instala
@wordpress/scriptsy@wordpress/element:npm install @wordpress/scripts @wordpress/element --save-devTen en cuenta que este paso puede tardar unos minutos.
- Modifica tu archivo package.json para incluir un script
starty otrobuild:"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" },El
'@wordpress/scripts'se utiliza para iniciar un servidor de desarrollo con recarga en caliente (hot reloading) con fines de desarrollo (start) y para compilar la aplicación React en activos estáticos para producción (build).
Crear un proyecto React
- Crea un nuevo directorio llamado src para tus archivos fuente React dentro de tu tema.
- Dentro de la carpeta src, crea dos nuevos archivos: index.js y App.js.
- Coloca el siguiente código en index.js:
import { render } from '@wordpress/element'; import App from './App'; render(, document.getElementById('app'))El código anterior importa la función
renderde@wordpress/elementy el componenteApp. A continuación, monta el componenteAppen el Modelo de Objetos del Documento (DOM, Document Object Model). - A continuación, pega este código en el archivo App.js:
import { Component } from '@wordpress/element'; export default class App extends Component { render() { return ( <div> <h1>Hello, WordPress and React!</h1> {/* Your React components will go here */} </div> ); } }
Finaliza y activa tu tema
Para activar tu tema:
- Ejecuta el servidor de desarrollo con
npm start. - Activa tu nuevo tema en el panel de control de WordPress accediendo a Apariencia > Temas, localizando tu tema y haciendo clic en Activar.
- Asegúrate de que el proceso de construcción de tu proyecto React está correctamente configurado para dar salida al directorio correcto del tema, permitiendo que WordPress renderice tus componentes React.
- Visita el frontend de tu sitio WordPress para ver los cambios en directo.
Desarrollar componentes React para el tema
A continuación, sigue un enfoque basado en componentes para ampliar la configuración básica de React en tu tema de WordPress con componentes específicos, como un encabezado.
Crea el componente de cabecera
En el directorio src de tu tema, crea un nuevo archivo para el componente de cabecera. Dale un nombre, como Header.js, y añade el siguiente código:
import { Component } from '@wordpress/element';
class Header extends Component {
render() {
const { toggleTheme, darkTheme } = this.props;
const headerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '10px 20px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
};
return (
<header style={headerStyle}>
<div>My WP Theme</div>
<button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>
</header>
);
}
}
export default Header;Este código define un componente de cabecera utilizando '@wordpress/element' que estiliza dinámicamente la cabecera basándose en darkTheme prop. Incluye un botón para alternar entre los temas claro y oscuro invocando la función toggleTheme method passed as a prop.
Crear el componente pie de página
En el directorio src de tu tema, crea un nuevo archivo para el componente pie de página. Dale un nombre — por ejemplo, Footer.js — y añade el siguiente código:
import { Component } from '@wordpress/element';
class Footer extends Component {
render() {
const { darkTheme } = this.props;
const footerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '20px',
textAlign: 'center',
};
return (
<footer> style={footerStyle}>
© {new Date().getFullYear()} My WP Theme
</footer>
);
}
}
export default Footer;Este código define un componente de pie de página que muestra un pie de página con un estilo dinámico basado en la propiedad darkTheme y muestra el año actual.
Actualiza el archivo App.js
Para utilizar el nuevo encabezado y pie de página, sustituye el contenido del archivo App.js por el siguiente código:
import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}El proceso de construcción de desarrollo, que busca cambios y recompila tu código, debería seguir activo. Por tanto, tu última versión de la plantilla debería tener un aspecto similar a éste:
Cómo manejar los datos de WordPress en React
Integrar el contenido de WordPress en aplicaciones React ofrece un puente perfecto entre las sólidas capacidades de gestión de contenidos de WordPress y el diseño dinámico de la interfaz de usuario de React. Esto es posible con la API REST de WordPress.
Para acceder a la API REST de WordPress, habilítala actualizando la configuración del permalink. En el panel de administración de WordPress, ve a Ajustes > Enlaces permanentes. Selecciona la opción Nombre de la entrada o cualquier otra opción que no sea Simple y guarda los cambios.
En el directorio src de tu tema, crea un nuevo archivo llamado Posts.js y añade este código:
import { Component } from '@wordpress/element';
class Posts extends Component {
state = {
posts: [],
isLoading: true,
error: null,
};
componentDidMount() {
fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
.then(response => {
if (!response.ok) {
throw new Error('Something went wrong');
}
return response.json();
})
.then(posts => this.setState({ posts, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { posts, isLoading, error } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
</article>
))}
</div>
);
}
}
export default Posts;La URL fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') podría ser ligeramente diferente dependiendo del nombre de despliegue de WP — es decir, de la carpeta donde instalaste WP. Alternativamente, puedes tomar el nombre de host del sitio del panel de control de DevKinsta y añadir el sufijo /wp-json/wp/v2/posts.
El componente Posts es un excelente ejemplo de esta integración, que demuestra el proceso de obtención y gestión de datos de WordPress —concretamente, entradas — utilizando la API REST de WordPress.
Al iniciar una solicitud de red dentro del método del ciclo de vida del componente, componentDidMount, el componente recupera eficazmente las entradas de un sitio de WordPress y las almacena en su estado. Este método resalta un patrón para incorporar dinámicamente datos de WordPress, como páginas o tipos de post personalizados, en componentes React.
Para utilizar un nuevo componente, sustituye el contenido del archivo App.js por el siguiente código:
import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
import Posts from './Posts'; // Import the Posts component
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
<Posts /> {/* Render the Posts component */}
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}Ahora puedes comprobar la última y definitiva versión de tu tema. Además de la cabecera y el pie de página, consta de un área de contenido dinámico que presenta las entradas.
Utilizar el tema de WordPress basado en React en un proyecto de WordPress
La integración de un tema basado en React en un proyecto de WordPress comienza con la transformación del código React en un formato compatible con WordPress, aprovechando paquetes como @wordpress/scripts. Esta herramienta simplifica el proceso de construcción, permitiéndote compilar aplicaciones React en activos estáticos que WordPress puede poner en cola.
Construir el tema es sencillo con los comandos npm proporcionados por @wordpress/scripts. Ejecutar npm run build en el directorio del tema compila el código React en archivos JavaScript y CSS estáticos.
A continuación, coloca estos activos compilados en el directorio apropiado dentro del tema, asegurándote de que WordPress pueda cargar y renderizar correctamente los componentes React como parte del tema. Una vez integrado, puedes activar el tema React de WordPress como cualquier otro, aportando al instante una experiencia de usuario moderna, similar a la de una aplicación, al sitio de WordPress.
Resumen
Al crear e integrar un tema en WordPress utilizando las potentes capacidades de interfaz de usuario de React, puedes liberar el potencial para crear experiencias web flexibles, altamente interactivas y centradas en el usuario.
Si estás listo para poner en marcha tus temas de WordPress React, Kinsta ofrece un servicio de alojamiento administrado de WordPress con una infraestructura segura, edge caching y otras funciones que aumentan la velocidad y el rendimiento de tu sitio.
¿Estás pensando en crear un tema de WordPress con React? Por favor, comparte algunos consejos sobre por qué crees que es lo mejor y cómo hacerlo.
Deja una respuesta