Cómo construir un tema de WordPress con React

Creación de una estructura básica de temas de WordPress

Crear una estructura básica de tema de WordPress implica configurar una serie de archivos y directorios que WordPress utiliza para aplicar el estilo, la funcionalidad y el diseño del tema a un sitio web de WordPress.

1. En el entorno operativo de su sitio, visite la carpeta del sitio. Navegue hastawp-contenido/temas Catálogo.

2. Cree una nueva carpeta para el tema. El nombre de la carpeta debe ser único y descriptivo - por ejemplomi-tema-básico.

3. En la carpeta del tema, cree estos archivos básicos y déjelos en blanco:

Si no está utilizando React, también debe crear estos archivos a continuación.

• header.php  - Contiene la sección de cabecera del sitio.
• pie.php  - Contiene la sección de pie de página del sitio.
• barra lateral.php  - Para la sección de la barra lateral, si el tema incluye una barra lateral.

A continuación, abra elstyle.css Y añade lo siguiente al principio del documento:

/*
Nombre del tema: My Basic Theme
Tema URI: http://example.com/my-basic-theme/
Autor: Su Nombre
Autor URI: http://example.com
Descripción: Un tema básico de WordPress.
Versión: 1.0
Licencia: GNU General Public License v2 o posterior
URI de la licencia: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, fondo personalizado
Dominio de texto: my-basic-theme
*/My-Basic-Theme

Este fragmento de código es Archivo style.css del tema de WordPressLa sección del título de un tema contiene metadatos importantes como el nombre del tema, los detalles del autor, la versión y la licencia. Ayuda a WordPress a identificar y mostrar el tema en el panel de control, incluida la descripción del tema y las etiquetas de categoría.

Integración de React en WordPress

La integración de React en un tema de WordPress le permite utilizar la arquitectura basada en componentes de React para crear interfaces de usuario dinámicas e interactivas en su sitio web de WordPress. Para integrar React, utilizarás el móduloPaquete @wordpress/scripts.

Se trata de una colección de scripts reutilizables personalizados para el desarrollo de WordPress, que WordPress proporciona para simplificar la configuración y el proceso de compilación, especialmente cuando se integran flujos de trabajo de JavaScript modernos como React en temas y plugins de WordPress. El conjunto de herramientas encapsula tareas comunes para facilitar el desarrollo con JavaScript en el ecosistema de WordPress.

Ajuste su tema

Ahora que ya tiene la estructura básica de un tema de WordPress, puede modificarlo.

1. En el directorio del tema, pegue el siguiente código en el campo funciones.php Documentación:

<?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');

function.phpintegra React con tu tema de WordPress. Utilizawp_enqueue_script responder cantandowp_enqueue_style combina JavaScript y hojas de estilo en cascada ( CSS ) para añadirlo a su tema.

WordPresswp_enqueue_script La función tiene varios argumentos:

• Nombre del mango ( my-react-theme-app) que identifica unívocamente el script
• Ruta de acceso al archivo de script
• matriz de dependenciasarray('wp-element')Esto significa que el script depende de la envoltura React de WordPress.('wp-element').
• número de versión('1.0.0')
• colocaciónverdaderoEl script debe cargarse en el pie de página del documento HTML para mejorar el rendimiento de carga de la página.

debewp_enqueue_style La función toma los siguientes parámetros:

• nombre de la manijami-reacción-estilo-temáticoHoja de estilo de identificación única
• para devolver la hoja de estilos principal del tema ( style.cssget_stylesheet_uri() ) y asegúrese de aplicar el estilo del tema
• debeañadir_acción que conecta la función personalizada al elemento  'mi_reaccion_tema_scripts' a una operación específica ( wp_enqueue_scripts). Esto asegura que JavaScript y CSS se cargan correctamente cuando WordPress está listo para renderizar la página.

Este código garantiza que el archivo JavaScript compilado de la aplicación React (ubicado en /etc.) estará disponible para su uso.build/index.js in) y la hoja de estilos principal del tema se cargan con el tema.

directorio /buildNormalmente por el uso dewebpackcrear-react-app Estas herramientas compilan aplicaciones React empaquetando el código React en archivos JavaScript despojados y listos para la producción.

Esta configuración es esencial para integrar la funcionalidad de React en los temas de WordPress, lo que permite una experiencia de usuario dinámica y similar a la de una aplicación en los sitios web de WordPress.

2.A continuación, actualice index.phpEl contenido del archivo :

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1001>
    <div id="app"></div>
    <?php wp_footer(); ?>
</body>
</html>

index.php El código del archivo define la estructura HTML básica del tema de WordPress, incluidos los ganchos para que WordPress inserte las cabeceras (wp_header) y pies de página (wp_footer) necesarios, y un div con un ID app en el que se instala la aplicación React.

Configuración de React con @wordpress/scripts

1. Abra un terminal y navegue hasta el directorio del tema:cd wp-content/temas/mi-básico

cd wp-content/temas/mi-tema-básico

2. Inicializa un nuevo proyecto Node.js:

npm init -y

3. Instalación@wordpress/scriptsademás@wordpress/elemento::

npm install @wordpress/scripts @wordpress/elemento --save-dev

Atención:Suele tardar unos minutos, ten paciencia.

4. Modificacionespaquete.json que contenga el archivoiniciar unconstruya Guión:

"scripts": {
  "start": "wp-scripts start", "build": "wp-scripts build", {
  "build": "wp-scripts build"
},

El "@wordpress/scripts" se utiliza para iniciar el servidor de desarrollo de forma recargada en caliente para el desarrollo (launch) y para compilar la aplicación React en activos estáticos para la producción (build).

Creación de un elemento de reacción

1. Crear un archivo para los archivos fuente de React en el tema llamadosrcEl nuevo catálogo de la

2. Ensrc cree dos archivos nuevos:index.js responder cantandoApp.js.

3. Introduce el siguiente código enindex.js::

import { render } from '@wordpress/elemento' ;
import App from '. /App'; import { render } from '@wordpress/element'; import App from '.
render(, document.getElementById('app'))

código anteriorrender a través de (un hueco)@wordpress/elemento Funciones de importación de componentesAplicación . A continuaciónAplicación El componente se instala en el Modelo de Objetos del Documento (DOM).

4. A continuación, pegue este código en el campoApp.js Documentación:

import { Component } from '@wordpress/element';
exportar por defecto la clase App extends Component {
  render() {
    return (
      <div> 
        <h1>¡Hola, WordPress y React!</h1>
        {/* Tus componentes React irán aquí */}
      </div>
);
    }
}

Completar y activar el tema

Active el tema:

1. hacer uso denpm iniciarEjecute el servidor de desarrollo.
2. En el panel de control de WordPress, busque "Apariencia" > "Tema"Busca tu tema y haz clic en "Activar" para activar tu nuevo tema.
3. Asegúrese de que el proceso de compilación del proyecto React está configurado correctamente para dar salida al directorio de temas correcto para permitir que WordPress renderice los componentes React.
4. Visite el front-end del sitio WordPress para ver los cambios en tiempo real.

Desarrollo de componentes React para temas

A continuación, adopta un enfoque basado en componentes y amplía la configuración básica de React en tu tema de WordPress con componentes específicos como las cabeceras.

Creación del componente de cabecera

En el directorio src del tema, cree un nuevo archivo para el componente de cabecera. Nombre el archivo algo así como Header.js y añadir el código siguiente:

import { Component } from '@wordpress/element' ;
class Cabecera extends Componente {
    render() {
        const { toggleTheme, darkTheme } = this.props;
        const headerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE',
            color: darkTheme ? 'blanco' : '#333',
            padding: '10px 20px', display: 'flex', 'Flex', 'Flex', 'Flex'
            display: 'flex', justifyContent: 'space-base', 'space-base', 'space-base'
            
            alignItems: 'center',
        };
        return (
            <header style="{headerStyle}">
                <div>Mi tema WP</div>
                <button onclick="{toggleTheme}">{darkTheme ? Modo claro' : 'Modo oscuro'}</button>
            </header>
        );
    }
}
export default Cabecera.

Este código utiliza "@wordpress/element" para definir un componente de cabecera que ajusta dinámicamente el estilo de la cabecera basándose en la proposición darkTheme. Contiene un botón que alterna entre los temas claro y oscuro llamando al método toggleTheme pasado como prop.

Creación de componentes de pie de página

En el directorio src del tema, cree un nuevo archivo para el componente de pie de página. Dele un nombre, por ejemplo Pie de página.jsy, a continuación, añada el siguiente código:

import { Component } from '@wordpress/element' ;
class Pie de página extends Component {
    render() {
        const { darkTheme } = this.props;
        const footerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE', color: darkTheme ?
            color: darkTheme ? blanco' : '#333',
            
            textAlign: 'center',
        };
        return (
            

Este código define un componente de pie de página que muestra un pie de página con estilo dinámico basado en la propuesta darkTheme y muestra el año en curso.

Actualizar el archivo App.js

Para utilizar el nuevo encabezado y pie de página, sustituya el contenido del archivo App.js por el siguiente código:

import { Component } from '@wordpress/elemento' ;
import Header from '. /Header'; import { Component } from '@wordpress/element'; import Header from '.
import Footer from '. /Footer'; export default class App extends Component { {Wordpress/element}; import Header from '.
export default class App extends Component {
    state = {
        darkTheme: true, {
    }; toggleTheme = () => { darkTheme: true, }
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme, })); toggleTheme = ( => { this.setState(darkTheme: true, }
        }));
    };
    render() {
        const { darkTheme } = this.state; }; return (
        return (
            <div>
                <header darktheme="{darkTheme}" toggletheme="{this.toggleTheme}" />
                <main style="{{" padding: '20px', background: darktheme ? '#282c34' : '#f5f5f5', color: 'white' 'black' }}>               
                </main>
                <footer darktheme="{darkTheme}" />
            </div>
        );
    }
}

El proceso de compilación de desarrollo supervisa los cambios y recompila el código, que debería seguir activo. La última versión de la plantilla debería ser similar a esta:

Cómo trabajar con datos de WordPress en React

La integración del contenido de WordPress en una aplicación React tiende un puente sin fisuras entre las potentes capacidades de gestión de contenidos de WordPress y el diseño dinámico de la interfaz de usuario de React. Esto se puede lograr a través de la API REST de WordPress.

Para accederAPI REST de WordPresshabilítelo actualizando la configuración del permalink. En el panel de administración de WordPress, vaya a la sección"Ajustes"  > "Enlace permanente". SelecciónOpción "Nombre del puesto" o"Ordinario". cualquier opción distinta de las siguientes y, a continuación, guarde los cambios.

En el tema desrc, cree un archivo llamadoPuestos.js Nuevo archivo y añada el siguiente código:

import { Component } from '@wordpress/element' ;
class Posts extends Component {
    estado = {
        posts: [],
        isLoading: true,
        error: null,
    }; componentDidMount() {
    componentDidMount() {
        fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
            .then(respuesta => {
                if (!response.ok) {
                    throw new Error('Algo ha ido mal');
                }
                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) {
            if (error) { return <div>Error: {error.message}</div>;)
        }
        if (isLoading) {
            devuelva <div>Cargando...</div>;)
        }
        return (
            <div>
                {posts.map(post =&gt; (
                    <article key="{post.id}">
                        <h2 dangerouslysetinnerhtml="{{" __html: post.title.rendered }} />
                        <div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
                    </article>
                ))}
            </div>
        );
    }
}
export default Posts.

Dependiendo del nombre de despliegue de WP (es decir, la carpeta donde instalaste WP), la URL fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') puede ser ligeramente diferente. Alternativamente, puedes obtener el nombre de host de la web desde el panel DevKinsta y añadir el sufijo /wp-json/wp/v2/posts.

El componente Posts es un excelente ejemplo de esta integración, demostrando el proceso de obtención y gestión de datos de WordPress (específicamente posts) utilizando la API REST de WordPress.

Al iniciar una solicitud de red en el método del ciclo de vida del componente (componentDidMount), el componente puede obtener de manera eficiente las publicaciones del sitio web de WordPress y almacenarlas en su propio estado. Este enfoque destaca un patrón para integrar dinámicamente datos de WordPress, como páginas o tipos de post personalizados, en componentes React. Para utilizar el nuevo componente, sustituye el contenido del archivo App.js por el siguiente código:

import { Component } from '@wordpress/elemento' ;
import Header from '. /Header'; import { Component } from '@wordpress/element'; import Header from '.
import Footer from '. /Footer'; import Posts from '.
import Posts from '. /Posts'; // Importar el componente Posts

export default class App extends Component {
    state = {
        darkTheme: true, { estado = {
    }; }
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme, })); toggleTheme = ( => { this.setState(darkTheme: true, }
        }));
    };
    render() {
        const { darkTheme } = this.state; }; return (
        return (
            <div>
                <header darktheme="{darkTheme}" toggletheme="{this.toggleTheme}" />
                <main style="{{" padding: '20px', background: darktheme ? '#282c34' : '#f5f5f5', color: 'white' 'black' }}>
                    <posts /> {/* Renderizar el componente Posts */}
                </main>

                <footer darktheme="{darkTheme}" />
            </div>
        );
    }
}

Ya puede verse la última versión final del tema. Además de la cabecera y el pie de página, incluye un área de contenido dinámico para las entradas.

Uso de temas React WordPress en proyectos WordPress

Para integrar un tema basado en React en un proyecto de WordPress, primero tienes que convertir el código React en un formato compatible con WordPress utilizando un paquete como @wordpress/scripts. Esta herramienta simplifica el proceso de compilación al permitirte compilar tu aplicación React en un activo estático que WordPress puede lanzar.

Construir un tema es muy sencillo usando los comandos npm proporcionados por @wordpress/scripts. Ejecuta npm run build desde el directorio del tema para compilar tu código React en archivos JavaScript y CSS estáticos.

A continuación, estos activos compilados se colocan en los directorios adecuados del tema para garantizar que WordPress pueda cargar y renderizar correctamente los componentes React como parte del tema. Una vez completada la integración, puedes activar el tema de WordPress React como cualquier otro tema, aportando al instante una experiencia de usuario moderna y similar a la de una aplicación a tu sitio de WordPress.

resúmenes

Crear temas con las potentes capacidades de interfaz de usuario de React e integrarlos en WordPress da rienda suelta a la capacidad de crear experiencias web flexibles, muy interactivas y centradas en el usuario.