<?xml version="1.0" encoding="UTF-8" standalone="no"?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" version="2.0">

<channel>
	<title>Ayuda WordPress</title>
	<atom:link href="https://ayudawp.com/feed/" rel="self" type="application/rss+xml"/>
	<link>https://ayudawp.com</link>
	<description>Recursos, temas, plugins, tutoriales en español</description>
	<lastBuildDate>Thu, 23 Apr 2026 09:01:30 +0000</lastBuildDate>
	<language>es</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://ayudawp.com/wp-content/uploads/2021/05/ayudawp135.jpg</url>
	<title>Ayuda WordPress</title>
	<link>https://ayudawp.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<xhtml:meta content="noindex" name="robots" xmlns:xhtml="http://www.w3.org/1999/xhtml"/><item>
		<title>Divi 5 o Elementor 4 ¿qué maquetador es mejor, ha cambiado algo?</title>
		<link>https://ayudawp.com/divi-5-elementor-4/</link>
					<comments>https://ayudawp.com/divi-5-elementor-4/#comments</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Thu, 23 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Análisis]]></category>
		<category><![CDATA[Plugins WordPress]]></category>
		<category><![CDATA[Temas WordPress]]></category>
		<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Divi]]></category>
		<category><![CDATA[Elementor]]></category>
		<category><![CDATA[Principiante]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158939</guid>

					<description><![CDATA[Si estás dudando qué maquetador elegir entre Elementor o Divi, aquí tienes una comparativa de las últimas versiones, pues ambos se han renovado completamente.]]></description>
										<content:encoded><![CDATA[<p>Febrero y marzo de 2026 fueron dos meses intensos para los que trabajamos con WordPress. Divi 5 salió el 26 de febrero y Elementor 4 apenas un mes después, el 30 de marzo.</p>
<p><strong>Los dos maquetadores más usados del ecosistema WordPress han renovado su arquitectura casi a la vez</strong>, y eso no pasa todos los días.</p>
<p>No estamos hablando de actualizaciones al uso, con un puñado de funciones nuevas y un par de correcciones, <strong>tanto Elementor como Divi han reescrito buena parte de su base de código</strong>.</p>
<p>Elementor ha apostado por lo que llaman el «<strong>editor atómico</strong>«, con un enfoque CSS-first. Divi, por su parte, ha tirado la casa por la ventana con una <strong>reescritura completa de Divi Builder desde cero</strong>, tras más de tres años de desarrollo (llevo siguiendo todo el proceso, desde la <a href="https://ayudawp.com/divi-5-alpha-demo/">primera demo de Divi 5</a> hasta la <a href="https://ayudawp.com/divi-5-alpha-publica/">alpha pública</a>).</p>
<p>Así que si llevas tiempo <strong>preguntándote cuál elegir, o si te estás planteando cambiar de uno a otro</strong>, este es el mejor momento para comparar, vamos a ello.</p>
<h2>Migración y retrocompatibilidad</h2>
<p>Los dos se han tomado la retrocompatibilidad en serio, pero con estrategias diferentes.</p>
<h3>Migrar de Elementor 3 a Elementor 4</h3>
<p>Permite usar elementos de v3 y v4 en la misma página. <strong>No necesitas migrar nada</strong>, los widgets antiguos siguen funcionando tal cual, puedes ir adoptando los elementos atómicos gradualmente. Es lo más seguro y menos agresivo.</p>
<h3>Migrar de Divi 4 a Divi 5</h3>
<p>Divi 5 incluye un migrador que <strong>convierte todos los módulos de Divi 4</strong> al nuevo formato. El proceso es rápido, pero conviene probarlo primero en staging (tengo una <a href="https://ayudawp.com/migracion-divi-5/">guía detallada del proceso de migración a Divi 5</a> con lo que me he encontrado).</p>
<p>También hay un modo de compatibilidad hacia atrás para módulos de terceros que todavía no se han adaptado.</p>
<p>Elegant Themes mantiene compatibilidad con Divi 4 durante al menos seis meses después del lanzamiento, con actualizaciones de seguridad. Pasado ese periodo las rutas de actualización convergerán y todos los sitios recibirán el aviso de actualización a Divi 5.</p>
<hr>
<p>Si tienes un sitio complejo con muchos plugins de terceros la migración a <strong>Divi 5 requiere más precaución</strong>. Con Elementor 4 la transición es más progresiva y con menos riesgo, pero en contrapartida mantiene demasiada compatibilidad con código antiguo.</p>
<h2>Arquitectura y rendimiento</h2>
<p>Este es el punto donde los dos han metido más trabajo, y donde el cambio respecto a las versiones anteriores es más evidente.</p>
<h3>Elementor 4</h3>
<p>Elementor ha introducido lo que llaman el «<strong>Atomic Editor</strong>» para pasar de un sistema basado en widgets con estilos inline a un <strong>enfoque basado en CSS</strong> donde los estilos se gestionan a través de clases y variables reutilizables.</p>
<p>Esto genera un <strong>DOM más limpio y menos código repetido</strong>. Según datos de Elementor <strong>la reducción de código CSS puede llegar al 70 %</strong> en páginas que usan íntegramente los elementos <em>atómicos</em> frente al sistema antiguo de la v3.</p>
<p><strong>Elementor 4 y la versión 3 coexisten en la misma página</strong>, no tienes que migrar todo de golpe, puedes ir adoptando los nuevos elementos atómicos poco a poco mientras mantienes los widgets de v3 funcionando.</p>
<p>Lo malo es que la mejora en estas situaciones sería limitada, <strong>arrastrando problemas de las versiones 3.x</strong>.</p>
<div class="ast-oembed-container " style="height: 100%;"><iframe title="Elementor 4.0 full walkthrough (Atomic Editor explained) with Roi &#x2728;" width="1600" height="900" src="https://www.youtube.com/embed/obdVGjOyVtE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<p> </p>
<h3>Divi 5</h3>
<p>La gente de Elegant Themes ha ido más lejos en cuanto a reescritura, pues es un <strong>maquetador completamente nuevo, desarrollado con React</strong> y una arquitectura moderna desde la misma base.</p>
<p>Y aquí viene lo gordo, porque <strong>Divi 5 ha eliminado los shortcodes</strong> que lastraban el rendimiento de Divi 4 y ahora usa un formato de almacenamiento basado en <strong>HTML5, alineado con el sistema de bloques de WordPress</strong>.</p>
<p><strong>Este cambio es enorme</strong>, pues ya no hay procesamiento de shortcodes en cada carga de página, el CSS se genera de forma limpia, los scripts no esenciales se cargan en diferido y el peso base de cada página se ha reducido de forma considerable.</p>
<p>Si desactivas Divi 5 ya no te quedas con un montón de shortcodes ilegibles en el contenido como pasaba antes.</p>
<p>Hice <a href="https://ayudawp.com/divi-5-core-web-vitals-divi-4/">mis propias pruebas de rendimiento comparando Divi 5 con Divi 4</a> cuando todavía estaba en fase alpha, con dos sitios idénticos en el mismo servidor, y ya entonces la mejora apuntaba maneras.</p>
<p>Ahora, con la versión final, los datos son todavía mejores. Según pruebas recientes (WP All Import, Oxygen), <strong>Divi 5 iguala o supera a Elementor en varias métricas clave</strong>:</p>
<ul>
<li><strong>Mejor FCP</strong> (First Contentful Paint)</li>
<li><strong>Mejor Speed Index</strong></li>
<li><strong>Menos peticiones HTTP</strong></li>
<li><strong>Puntuaciones de Lighthouse superiores</strong> tanto en móvil como en escritorio.</li>
</ul>
<p>Elementor puede tener un tamaño de página ligeramente menor en algunas situaciones, pero <strong>Divi 5 genera menos peticiones al servidor y un CSS más limpio que Elementor</strong>.</p>
<p>El salto de rendimiento de Divi 5 frente a Divi 4 ha sido tremendo. Si probaste Divi 4 y te pareció lento, <strong>Divi 5 es otro producto</strong>.</p>
<p>Frente a Elementor 4, la diferencia ya no es que Divi vaya por detrás, <strong>van bastante igualados</strong>, con Divi llevando ventaja en varias métricas.</p>
<div class="ast-oembed-container " style="height: 100%;"><iframe title="Divi 5 Official! &#x1f389; (Beta Ends Today)" width="1600" height="900" src="https://www.youtube.com/embed/BXSpybFcf_I?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<p> </p>
<table>
<thead>
<tr>
<th>Aspecto</th>
<th>Elementor 4</th>
<th>Divi 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enfoque de arquitectura</td>
<td>CSS-first («Atomic Editor»)</td>
<td>Reescritura completa en React + HTML5 (sin shortcodes)</td>
</tr>
<tr>
<td>Peso de CSS/JS</td>
<td>Reducción hasta -70 % con elementos <em>atómicos</em> frente a las v3.x</td>
<td>CSS limpio, scripts diferidos, peso base muy reducido frente Divi 4</td>
</tr>
<tr>
<td>Core Web Vitals (Lighthouse)</td>
<td>Buenos, mejora clara frente a v3</td>
<td>Iguales o superiores a Elementor 4 en FCP y Speed Index</td>
</tr>
<tr>
<td>Peticiones HTTP</td>
<td>Menos que Divi 4, pero más que Divi 5 en tests comparativos</td>
<td>Significativamente menos que Elementor en mis propias pruebas</td>
</tr>
<tr>
<td>Almacenamiento de contenido</td>
<td>Estructura propietaria</td>
<td>HTML5 / block-based (contenido limpio al desactivar)</td>
</tr>
<tr>
<td>Convivencia con versión anterior</td>
<td>v3 y v4 en la misma página</td>
<td>Migrador automático + modo compatibilidad para Divi 4</td>
</tr>
</tbody>
</table>
<h2>Sistema de diseño</h2>
<p>Aquí es donde estos cambios marcan un antes y un después para los dos maquetadores porque ambos <strong>han adoptado conceptos que vienen del mundo del diseño de interfaces</strong> (Figma, Sketch) y que hasta ahora eran territorio exclusivo de herramientas de desarrollo.</p>
<h3>Elementor 4</h3>
<p>Trae tres novedades gordas en este apartado:</p>
<ul>
<li><strong>Variables</strong>: puedes definir valores globales para colores, tipografías y espaciados. Cambias un valor y se actualiza en todo el sitio. Funcionan como design tokens.</li>
<li><strong>Clases CSS</strong>: puedes crear clases reutilizables y asignarlas a cualquier elemento. Nada de ir widget por widget cambiando estilos, que era una pesadilla.</li>
<li><strong>Sincronización con estilos globales</strong>: las nuevas variables y clases se sincronizan automáticamente con los colores y fuentes globales de v3, lo que facilita la transición.</li>
</ul>
<h3>Divi 5</h3>
<p>En esto ha ido un paso más allá con un sistema de presets bastante completo:</p>
<ul>
<li><strong>Variables de diseño</strong>: similares a las de Elementor, permiten definir valores globales para colores, tipografías, tamaños y espaciados.</li>
<li><strong>Preajustes anidados y apilables</strong>: puedes crear presets a nivel de módulo y a nivel de grupo de opciones (por ejemplo, un preset solo para bordes) y anidarlos. Aplicas un preset de módulo y los presets de opciones se aplican automáticamente.</li>
<li><strong>Inspector</strong>: inspirado directamente en Figma. Clic derecho en cualquier sección y ves un panel con todos los estilos aplicados (colores, fuentes, medios, presets). Puedes editar todo desde ahí, incluso hacer cambios en lote. Esto es una pasada para cuando importas layouts y necesitas adaptar la paleta de colores de golpe.</li>
</ul>
<table>
<thead>
<tr>
<th>Función</th>
<th>Elementor 4</th>
<th>Divi 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tokens de diseño / variables globales</td>
<td>Sí (colores, tipografía, espaciado)</td>
<td>Sí (colores, tipografía, tamaños, espaciado)</td>
</tr>
<tr>
<td>Clases CSS reutilizables</td>
<td>Sí</td>
<td>Sí (integradas en presets)</td>
</tr>
<tr>
<td>Presets anidados/apilables</td>
<td>No</td>
<td>Sí (a nivel de módulo y de grupo de opciones)</td>
</tr>
<tr>
<td>Inspector visual tipo Figma</td>
<td>No</td>
<td>Sí (edición en lote desde un solo panel)</td>
</tr>
<tr>
<td>Retrocompatibilidad con estilos antiguos</td>
<td>Sincronización automática v3 → v4</td>
<td>Migrador integrado</td>
</tr>
</tbody>
</table>
<p>En este apartado <strong>Divi 5 lleva ventaja</strong> porque el sistema de preajustes anidados y el inspector son herramientas que ahorran mucho tiempo, sobre todo cuando trabajas con plantillas importadas o gestionas varios sitios con la misma identidad visual.</p>
<h2>Editor y experiencia de uso</h2>
<p>El día a día con un maquetador se juega aquí, no en la lista de funcionalidades.</p>
<h3>Elementor 4</h3>
<p>Mantiene la estructura de editor que ya conocemos: panel lateral izquierdo con los ajustes del elemento seleccionado y edición visual en el lienzo. Las novedades más visibles son:</p>
<ul>
<li><strong>Edición inline mucho más fluida</strong> (puedes editar textos directamente en el lienzo).</li>
<li><strong>La pestaña de estilo se ha unificado</strong> para los elementos atómicos, lo que simplifica la navegación.</li>
<li><strong>Pro Interactions</strong>: animaciones al hacer scroll, efectos al pasar el cursor y transformaciones personalizadas sin necesidad de plugins de terceros.</li>
<li><strong>Selección múltiple de elementos</strong>: seleccionas varios a la vez y les aplicas cambios en bloque.</li>
</ul>
<h3>Divi 5</h3>
<p>Aquí también ha renovado la experiencia de edición de arriba abajo:</p>
<ul>
<li><strong>El maquetador visual es mucho más rápido</strong> que en Divi 4. El editor de backend, que era muuuy lento con páginas complejas, ha mejorado de forma impresionante.</li>
<li><strong>Paneles acoplables</strong>: puedes anclar los paneles de ajustes a la barra lateral o dejarlos flotantes, y gestionar varios paneles abiertos a la vez.</li>
<li><strong>Menú contextual con clic derecho para todo</strong> (añadir, copiar, pegar, inspeccionar), que agiliza mucho el flujo de trabajo.</li>
<li>El <strong>Command Center</strong> (similar a la paleta de comandos de VS Code) para acceder a cualquier función del maquetador escribiendo su nombre.</li>
<li>La <strong>vista de capas</strong> para gestionar la estructura sin tocar el lienzo.</li>
<li><strong>Siete puntos de ruptura</strong> adaptables (responsive) personalizables (Divi 4 tenía tres fijos).</li>
</ul>
<p>Si quieres ver los cambios de Divi 5 con más detalle tengo una <a href="https://ayudawp.com/cambios-divi-5-guia-visual/">guía visual completa de los cambios de Divi 5</a> que te puede servir de referencia.</p>
<p>En el caso de que vengas de Divi 4 la mejora de rendimiento del editor es lo primero que vas a notar, si vienes de Elementor, el inspector y los paneles acoplables te van a llamar la atención.</p>
<p>Los dos editores son buenos actualmente pero <strong>Divi ha dado un salto más grande porque partía de más atrás</strong>.</p>
<h2>Componentes y modularidad</h2>
<p>Los dos maquetadores han apostado fuerte por los <strong>componentes reutilizables</strong>, aunque con enfoques distintos.</p>
<h3>Elementor 4 Components</h3>
<p>Sustituyen a los antiguos widgets globales. La diferencia es que los componentes sincronizan estructura y estilos (los widgets globales solo sincronizaban estilos), y además <strong>permiten personalización controlada en cada necesidad</strong>.</p>
<p>Es decir, puedes tener un componente de tarjeta de producto que se sincroniza en todo el sitio, pero cambiar el texto o la imagen en cada lugar donde lo uses sin romper la sincronización global.</p>
<p>También <strong>los formularios se han modularizado</strong>, ahora los Atomic Forms descomponen los formularios en elementos individuales (etiqueta, campo, botón de envío) que puedes organizar libremente en el lienzo.</p>
<h3>Divi 5 Nested Modules</h3>
<p>Permiten meter <strong>módulos dentro de otros módulos sin límites</strong>, lo que abre muchas posibilidades, como poder poner un botón dentro de un menú, un formulario dentro de una tarjeta, o <strong>construir estructuras de menú complejas sin necesidad de plugins</strong> adicionales.</p>
<p>Los controles de Flexbox y CSS Grid se aplican a cualquier contenedor, lo que da <strong>una flexibilidad de maquetación que antes no existía</strong> en Divi.</p>
<table>
<thead>
<tr>
<th>Capacidad</th>
<th>Elementor 4</th>
<th>Divi 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Componentes reutilizables</td>
<td>Components (sincronizan estructura + estilos)</td>
<td>Global Modules + Divi Cloud</td>
</tr>
<tr>
<td>Personalización por instancia</td>
<td>Sí (Component Properties)</td>
<td>Parcial</td>
</tr>
<tr>
<td>Módulos anidados</td>
<td>Limitado (dentro de contenedores)</td>
<td>Sí, sin límite de profundidad</td>
</tr>
<tr>
<td>Formularios modulares</td>
<td>Atomic Forms (campos como elementos independientes)</td>
<td>Módulo de formulario clásico (mejoras en camino)</td>
</tr>
<tr>
<td>CSS Grid nativo</td>
<td>No (Flexbox)</td>
<td>Sí</td>
</tr>
<tr>
<td>Breakpoints responsive</td>
<td>Personalizables</td>
<td>7 breakpoints personalizables</td>
</tr>
</tbody>
</table>
<p>Ambas ideas <strong>resuelven los problemas de manera muy eficiente</strong>.</p>
<p>Elementor con sus Components apuesta por la consistencia a escala (perfecto para agencias que gestionan muchos sitios), mientras que Divi con los Nested Modules apuesta por la flexibilidad creativa (perfecto para diseñadores que quieren control total sobre la estructura).</p>
<h2>Integración con IA</h2>
<p>Aquí es donde las diferencias se ponen interesantes porque los dos <strong>han ido por caminos bastante distintos</strong>.</p>
<h3>Elementor AI</h3>
<p>Tiene como dos capas, o <strong>dos modos de usar IA</strong>. Por un lado está la IA base, que está integrada directamente en el editor. Genera textos, imágenes, código CSS personalizado y diseños de secciones completas.</p>
<p>Funciona con un <strong>sistema de créditos</strong>. Un prompt de texto o código cuesta 1 crédito, una imagen 33 créditos, un contenedor con layout 40 créditos.</p>
<p>Los planes específicos de IA van desde unos 44 €/año (24.000 créditos) hasta 176 €/año (100.000 créditos). Con el plan Elementor One (desde 168 €/año en precio de lanzamiento) los créditos se comparten entre IA, optimización de imágenes y otras funciones.</p>
<p>La segunda capa es <strong>Angie</strong>, un agente de <strong>IA que va más allá</strong> de generar texto o imágenes, pues entiende la estructura de tu sitio WordPress (tema, plugins, campos personalizados) y puede crear widgets personalizados, snippets de código y extensiones funcionales a partir de instrucciones en lenguaje natural.</p>
<p>Todo se prueba en un entorno de pruebas antes de tocar tu sitio en producción. Usa el <a href="https://ayudawp.com/mcp-wordpress/" target="_blank" rel="noopener ugc">Model Context Protocol (MCP)</a> para heredar automáticamente el contexto de tu instalación.</p>
<p>Ahora bien, la realidad de Angie a día de hoy es que según pruebas de empresas como Crocoblock, que basan su negocio en gran medida en Elementor, es que <strong>al agente todavía falla bastante</strong>.</p>
<p>Tiende a generar HTML en crudo en lugar de usar los widgets de Elementor, y hay muchos prompts complejos que simplemente no funcionan.</p>
<p>Es un <strong>concepto prometedor pero todavía está muy verde</strong>. Lo que sí funciona bien de Elementor AI es la generación de imágenes y el CSS personalizado, que conoce la estructura de los módulos de Elementor.</p>
<div class="ast-oembed-container " style="height: 100%;"><iframe title="Introducing Elementor AI" width="1600" height="900" src="https://www.youtube.com/embed/_P_4SHBQtiQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<p> </p>
<h3>Divi AI</h3>
<p>El maquetador Divi toma un <strong>enfoque diferente pues todo está integrado directamente en el maquetador</strong>, sin plugins separados. Desde cualquier campo de texto, imagen o código puedes invocar la IA.</p>
<p>Sus capacidades son estas:</p>
<ul>
<li>Generación y reescritura de textos (títulos, párrafos, posts enteros).</li>
<li>Generación de imágenes.</li>
<li>Código CSS personalizado, entrenado específicamente con la base de código de los módulos de Divi.</li>
<li>Generación de layouts completos: le describes tu negocio y una cadena de agentes crea el esqueleto de la página, construye la estructura, rellena con texto e imágenes y personaliza los estilos.</li>
</ul>
<p>Divi acaba de empezar a desarrollar su propio <strong>AI Agent</strong> (aparece en los registros de cambio de las versiones 5.1 y 5.2), pero está en fases muy tempranas, todavía no es funcional del todo.</p>
<div class="ast-oembed-container " style="height: 100%;"><iframe loading="lazy" title="Introducing Divi AI For Divi 5!" width="1600" height="900" src="https://www.youtube.com/embed/uRvQk1sROvE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<p> </p>
<table>
<thead>
<tr>
<th>Inteligencia Artificial</th>
<th>Elementor AI</th>
<th>Divi AI</th>
</tr>
</thead>
<tbody>
<tr>
<td>Generación de texto</td>
<td>Sí (por créditos)</td>
<td>Sí (ilimitada con Divi Pro)</td>
</tr>
<tr>
<td>Generación de imágenes</td>
<td>Sí (33 créditos/imagen)</td>
<td>Sí (ilimitada con Divi Pro)</td>
</tr>
<tr>
<td>CSS personalizado</td>
<td>Sí, con conocimiento de los módulos</td>
<td>Sí, entrenado en código Divi</td>
</tr>
<tr>
<td>Generación de layouts completos</td>
<td>Sí (AI Site Planner gratuito)</td>
<td>Sí (Quick Sites + agentes encadenados)</td>
</tr>
<tr>
<td>Agente IA autónomo</td>
<td>Angie (gratuito, beta, muy verde)</td>
<td>AI Agent (en desarrollo temprano)</td>
</tr>
<tr>
<td>Modelo de cobro</td>
<td>Por créditos (desde 44 €/año)</td>
<td>Ilimitado con Divi Pro (255 €/año)</td>
</tr>
</tbody>
</table>
<p>La diferencia grande en precios:, sobre todo porque <strong>Divi AI es ilimitado</strong> si tienes Divi Pro (unos 255 €/año) o el bundle Lifetime + Pro Services (unos 273 € de pago único + 195 €/año de servicios). <strong>Con Divi AI hay créditos, no hay topes, mientras que en Elementor AI pagas por uso</strong>.</p>
<p>¿Qué sale mejor?, pues depende:</p>
<ul>
<li><strong>Si usas mucho la IA</strong> diseñando <strong>el modelo de Divi es más predecible en costes</strong>.</li>
<li>Si utilizas la IA <strong>para maquetar de forma puntual</strong> el sistema de créditos de <strong>Elementor puede salir más económico</strong>.</li>
</ul>
<h2>WooCommerce</h2>
<p>Los dos maquetadores ofrecen compatibilidad completa con WooCommerce, pero con diferencias.</p>
<h3>Elementor Pro</h3>
<p>La versión 4 ya incluye módulos específicos para WooCommerce:</p>
<ul>
<li>Páginas de producto</li>
<li>Listados de tienda</li>
<li>Carrito y pago personalizables visualmente.</li>
</ul>
<p>Pero ojo, <strong>el WooCommerce Builder de Elementor completo requiere adicionalmente el plan Advanced Solo</strong> (unos 77 €/año) o superior. Con Elementor 4 estos módulos se benefician del nuevo sistema <em>atómico</em> y del rendimiento mejorado.</p>
<h3>Divi 5</h3>
<p>En esto ha completado la migración de todos los módulos de WooCommerce a la nueva arquitectura:</p>
<ul>
<li>Galería de producto</li>
<li>Módulos de checkout y carrito</li>
<li>Módulos de pago</li>
</ul>
<p>Funciona con <strong>cualquier plan de Divi, sin restricciones</strong> por nivel de suscripción.</p>
<p>El Loop Builder de Divi permite crear listados de productos con consultas personalizadas, filtros avanzados y diseños de cuadrícula flexibles.</p>
<p>En funcionalidad pura de WooCommerce <strong>están bastante igualados</strong>.</p>
<p>La diferencia es que <strong>en Elementor necesitas un plan medio-alto para acceder al builder completo de WooCommerce</strong>, mientras que <strong>en Divi viene incluido en todos los planes</strong>.</p>
<h2>Ecosistema y escalabilidad</h2>
<p><strong>Elementor</strong> tiene una ventaja obvia, porque con <strong>más de 12 millones de instalaciones</strong> activas, gracias a la acertada estrategia de ofrecer una version (capada) en WordPress.org, <strong>su ecosistema de plugins y extensiones de terceros es enorme</strong>.</p>
<p>Hay <strong>cientos de addons</strong> disponibles (JetElements, Essential Addons, Premium Addons…) que amplían las funcionalidades del maquetador. La versión 4 mantiene retrocompatibilidad con los addons de v3 así que el ecosistema existente sigue funcionando.</p>
<p>Además, <strong>Elementor se está convirtiendo en una plataforma</strong> más que en un simple plugin, porque ofrece hosting propio (Elementor Cloud), integración con herramientas de accesibilidad (Ally), optimización de imágenes, envío de emails transaccionales y gestión centralizada de sitios, todo dentro de su plan One.</p>
<p><strong>Divi</strong> tiene su propio marketplace con plugins y módulos de terceros, aunque <strong>más reducido que el de Elementor</strong>, pues cometieron el error, a mi modo de ver, de no ofrecer versión limitada en WordPress.org.</p>
<p>La transición a Divi 5 ha sido un reto para los desarrolladores de terceros, ya que la reescritura completa del maquetador requiere adaptar los plugins. Muchos ya tienen versiones compatibles, pero otros siguen en desarrollo.</p>
<p>Si dependes mucho de plugins de terceros para Divi, <strong>conviene comprobar la compatibilidad antes de migrar</strong>.</p>
<p>Divi <strong>incluye en su paquete base Divi Cloud</strong> (almacenamiento de assets en la nube), <strong>Divi Dash</strong> (gestión de múltiples sitios) y las extensiones <strong>DonDivi</strong> (que Elegant Themes ha adquirido recientemente, incluyendo <strong>DiviMenus</strong>). También tienes <strong>Bloom</strong> (formularios de suscripción) y <strong>Monarch</strong> (botones sociales) <strong>sin coste adicional</strong>.</p>
<h2>Modelo de precios</h2>
<p>Aquí <strong>las diferencias son grandes y merece la pena verlas con calma</strong>. Los precios de Elementor están en euros directamente, los de Divi están en dólares (los paso a euros aproximados al cambio actual).</p>
<table>
<thead>
<tr>
<th>Plan</th>
<th>Elementor Pro</th>
<th>Divi (Elegant Themes)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Entrada</td>
<td>Essential: 54 €/año, 1 sitio</td>
<td>Aual: ~82 €/año, sitios ilimitados</td>
</tr>
<tr>
<td>Intermedio</td>
<td>Advanced Solo: 77 €/año, 1 sitio (WooCommerce + Popups)</td>
<td>—</td>
</tr>
<tr>
<td>Multi-sitio</td>
<td>Advanced: 91 €/año, 3 sitios</td>
<td>(todos los planes incluyen sitios ilimitados)</td>
</tr>
<tr>
<td>Agencia</td>
<td>Expert: 183 €/año, 25 sitios / Agency: 367 €/año, 1.000 sitios</td>
<td>Divi Lifetime: ~229 € pago único, sitios ilimitados para siempre</td>
</tr>
<tr>
<td>Todo incluido con IA</td>
<td>One: desde 168 €/año (25.000 créditos mensuales compartidos)</td>
<td>Divi Pro: ~255 €/año (IA ilimitada + Cloud + VIP Support)</td>
</tr>
<tr>
<td>Lifetime + IA</td>
<td>No disponible</td>
<td>~273 € (pago único) + ~195 €/año servicios Pro</td>
</tr>
</tbody>
</table>
<p>Un par de cosas a tener en cuenta:</p>
<p><strong>Elementor no ofrece licencia ilimitada</strong>. Eso significa que si dejas de pagar dejas de recibir actualizaciones y soporte. <strong>Divi sí la ofrece, y a 229 € con sitios ilimitados</strong> es difícil de batir para quién trabaja con muchos sitios.</p>
<p>En cuanto a <strong>Elementor Free</strong>, que existe y que a veces se presenta como una ventaja, la realidad es que cada vez se queda más corto. Le faltan el Theme Builder, los formularios, los popups, el WooCommerce Builder y la mayoría de widgets Pro. Es más un <strong>gancho comercial para vender la versión de pago</strong> que un producto usable en producción.</p>
<p><strong>Divi no tiene versión gratuita</strong>, pero ofrece una demo para probar y 30 días de garantía de devolución.</p>
<p>La comparación directa <strong>depende mucho del tipo de uso que le vayas a dar</strong>:</p>
<ul>
<li><strong>Para un solo sitio con WooCommerce</strong>, Elementor Advanced Solo (77 €) sale más barato que Divi anual (82 €), pero Divi incluye sitios ilimitados.</li>
<li><strong>Para agencias</strong>, el lifetime de Divi a 229 € con sitios ilimitados es muy difícil de superar frente a los 367 €/año de Elementor Agency.</li>
<li><strong>Si la IA ilimitada te interesa</strong>, los 255 €/año de Divi Pro son más predecibles que el sistema de créditos de Elementor.</li>
</ul>
<h2>Entonces, ¿cuál es mejor actualmente, Divi o Elementor?</h2>
<p>No hay un ganador absoluto pero sí perfiles claros para cada uno dependiendo de tus prioridades. Siento no mojarme más, pero es la realidad.</p>
<p><strong>Elementor te viene mejor si:</strong></p>
<ul>
<li>Necesitas un <strong>ecosistema de plugins de terceros grande</strong> y maduro.</li>
<li>Valoras una <strong>transición gradual</strong> sin migraciones bruscas.</li>
<li>Buscas una <strong>plataforma todo-en-uno</strong> (maquetador + hosting + IA + accesibilidad + email).</li>
<li>Tu flujo de trabajo se basa en <strong>componentes reutilizables sincronizados</strong> a escala.</li>
<li>Gestionas <strong>pocos sitios</strong> y no necesitas licencias ilimitadas.</li>
</ul>
<p><strong>Divi te viene mejor si:</strong></p>
<ul>
<li>Gestionas <strong>muchos sitios</strong> y necesitas una licencia que cubra todos sin límite.</li>
<li>Quieres un <strong>pago único</strong> (lifetime) y olvidarte de renovaciones anuales del maquetador.</li>
<li><strong>Usas mucho la IA</strong> y prefieres un modelo de uso ilimitado sin créditos.</li>
<li>Valoras el inspector y el sistema de preajustes anidados para <strong>gestionar sistemas de diseño</strong>.</li>
<li>Necesitas <strong>flexibilidad máxima de maquetación</strong> con módulos anidados y CSS Grid nativo.</li>
</ul>
<p>Los dos están en un momento de transición, y es algo que también debes valorar.</p>
<p>Elementor 4 es más maduro en su nueva arquitectura (lleva más de un año con las funciones atómicas en alpha y beta). Divi 5 acaba de salir de beta y todavía está puliendo detalles, pero el ritmo de actualizaciones es alto (cada dos semanas).</p>
<p><strong>Si estás empezando</strong> un proyecto nuevo hoy, <strong>cualquiera de los dos es una buena elección</strong>.</p>
<p>Si ya tienes sitios en uno de ellos, la migración al otro rara vez compensa el esfuerzo. Lo que sí conviene es actualizar a las nuevas versiones y aprovechar las mejoras de rendimiento y las nuevas herramientas de diseño que ambos traen.</p>
<p>Si quieres más información, demos o capturas aquí tienes las webs oficiales de ambos:</p>
<ul>
<li><a href="https://ayudawp.com/recomiendo/elementor/" data-eafl-id="87355" data-eafl-parsed="1" class="eafl-link eafl-link-text eafl-link-cloaked" target="_blank" rel="nofollow noopener noreferrer sponsored">Elementor Pro 4</a></li>
<li><a href="https://ayudawp.com/recomiendo/divi/" data-eafl-id="80136" data-eafl-parsed="1" class="eafl-link eafl-link-text eafl-link-cloaked" target="_blank" rel="nofollow noopener noreferrer">Divi 5</a></li>
</ul>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/divi-5-elementor-4/feed/</wfw:commentRss>
			<slash:comments>5</slash:comments>
		
		
			</item>
		<item>
		<title>¿Se pueden ocultar bloques WordPress según el tamaño de pantalla o dispositivo? Pero sin plugins, por favor</title>
		<link>https://ayudawp.com/ocultar-bloques-por-dispositivo/</link>
					<comments>https://ayudawp.com/ocultar-bloques-por-dispositivo/#respond</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Wed, 22 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Avanzado]]></category>
		<category><![CDATA[Editor de WordPress]]></category>
		<category><![CDATA[Experto]]></category>
		<category><![CDATA[Principiante]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158766</guid>

					<description><![CDATA[Ocultar un bloque en móvil y que se siga viendo en escritorio era una de esas cosas que WordPress debería haber tenido desde hace años. Hasta ahora necesitabas un plugin como Block Options, o andarte]]></description>
										<content:encoded><![CDATA[<p><strong>Ocultar un bloque en móvil y que se siga viendo en escritorio</strong> era una de esas cosas que WordPress debería haber tenido desde hace años. Hasta ahora necesitabas un <a href="https://ayudawp.com/opciones-visibilidad-bloques/" target="_blank" rel="noopener ugc">plugin como Block Options</a>, o andarte con clases CSS a mano, para conseguir algo tan básico, pero <strong>WordPress incorpora la visibilidad por tipo de dispositivo desde la versión 7.0</strong>.</p>
<p>La nueva funcionalidad se llama <strong>Block Visibility</strong> y permite <strong>ocultar cualquier bloque por tipo de dispositivo</strong> (escritorio, tablet o móvil) directamente desde el editor, sin instalar nada. También <strong>mantiene la opción de ocultar un bloque por completo</strong>, que ya existía desde WordPress 6.9, eso no cambia, pero ahora todo se gestiona desde el mismo sitio.</p>
<p>Te cuento cómo funciona, y también la parte técnica qué necesitas saber si desarrollas temas o plugins.</p>
<h2>Cómo ocultar un bloque por dispositivo</h2>
<p>Selecciona el bloque que quieras ocultar y abre el menú de opciones (los tres puntos de la barra de herramientas o clic derecho). Verás una opción nueva, <strong>Ocultar</strong> (Hide en inglés), con el atajo de teclado <code>⇧⌘H</code> en Mac.</p>
<p><a href="https://ayudawp.com/?attachment_id=158770" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158770 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/menu-ocultar-bloque-wordpress-1200x767.jpg" alt="menu ocultar bloque wordpress" width="1200" height="767" srcset="https://ayudawp.com/wp-content/uploads/2026/04/menu-ocultar-bloque-wordpress-1200x767.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/menu-ocultar-bloque-wordpress-768x491.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/menu-ocultar-bloque-wordpress-1536x982.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/menu-ocultar-bloque-wordpress.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>Al pulsar en ese enlace del menú se abre una pequeña <strong>ventana emergente con las opciones de visibilidad</strong>:</p>
<ul>
<li><strong>Omitir del contenido publicado</strong>: oculta el bloque por completo. No se procesa en el HTML de la página, así que nadie lo ve en ningún dispositivo. Es lo mismo que hacía <code>blockVisibility: false</code> en WordPress 6.9.</li>
<li><strong>Ocultar en escritorio</strong>: oculta el bloque en pantallas de escritorio.</li>
<li><strong>Ocultar en tableta</strong>: oculta el bloque en tabletas.</li>
<li><strong>Ocultar en móvil</strong>: oculta el bloque en móviles.</li>
</ul>
<p><a href="https://ayudawp.com/?attachment_id=158771" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158771 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/ocultar-bloque-wordpress-por-dispositivo-1200x767.jpg" alt="ocultar bloque wordpress por dispositivo" width="1200" height="767" srcset="https://ayudawp.com/wp-content/uploads/2026/04/ocultar-bloque-wordpress-por-dispositivo-1200x767.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/ocultar-bloque-wordpress-por-dispositivo-768x491.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/ocultar-bloque-wordpress-por-dispositivo-1536x982.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/ocultar-bloque-wordpress-por-dispositivo.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>Puedes marcar las combinaciones que necesites. Por ejemplo, si quieres que un bloque solo se vea en móvil, marcas «Ocultar en escritorio» y «Ocultar en tableta».</p>
<h3>Indicadores en la vista de lista</h3>
<p>Cuando un bloque tiene reglas de visibilidad activas la vista de lista del editor muestra iconos junto al nombre del bloque indicando <strong>en qué dispositivos está oculto</strong>. Viene bien para no perder la pista de qué has ocultado y dónde.</p>
<p><a href="https://ayudawp.com/?attachment_id=158773" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158773 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/indicador-bloque-wordpress-oculto-en-dispositivos-1200x767.jpg" alt="indicador bloque wordpress oculto en dispositivos" width="1200" height="767" srcset="https://ayudawp.com/wp-content/uploads/2026/04/indicador-bloque-wordpress-oculto-en-dispositivos-1200x767.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/indicador-bloque-wordpress-oculto-en-dispositivos-768x491.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/indicador-bloque-wordpress-oculto-en-dispositivos-1536x982.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/indicador-bloque-wordpress-oculto-en-dispositivos.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<h2>Vista previa en el editor de bloques</h2>
<p>Por ir terminando, la comprobación de esta funcionalidad es sencilla, solo tienes que cambiar a la vista previa integrada en el editor de WordPress de un dispositivo que hayas ocultado para <strong>comprobar que no se ve</strong>, y a más, por supuesto, puedes comprobar en la web que no se verá si cambias el tamaño de pantalla.</p>

<a href="https://ayudawp.com/ocultar-bloques-por-dispositivo/bloque-visible-en-escritorio/" rel="nofollow"><img width="1200" height="767" src="https://ayudawp.com/wp-content/uploads/2026/04/bloque-visible-en-escritorio-1200x767.jpg" class="attachment-medium size-medium" alt="bloque visible en escritorio" srcset="https://ayudawp.com/wp-content/uploads/2026/04/bloque-visible-en-escritorio-1200x767.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-visible-en-escritorio-768x491.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-visible-en-escritorio-1536x982.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-visible-en-escritorio.jpg 1920w" sizes="(max-width: 1200px) 100vw, 1200px" decoding="async" fetchpriority="high"></a>
<a href="https://ayudawp.com/ocultar-bloques-por-dispositivo/bloque-oculto-en-tableta/" rel="nofollow"><img width="1200" height="767" src="https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-tableta-1200x767.jpg" class="attachment-medium size-medium" alt="bloque oculto en tableta" srcset="https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-tableta-1200x767.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-tableta-768x491.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-tableta-1536x982.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-tableta.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>
<a href="https://ayudawp.com/ocultar-bloques-por-dispositivo/bloque-oculto-en-movil/" rel="nofollow"><img width="1200" height="767" src="https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-movil-1200x767.jpg" class="attachment-medium size-medium" alt="bloque oculto en movil" srcset="https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-movil-1200x767.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-movil-768x491.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-movil-1536x982.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/bloque-oculto-en-movil.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>

<p> </p>
<h2>Las tripas: CSS en vez de no renderizar</h2>
<p>Aquí hay una diferencia importante que conviene tener clara y es que cuando marcas <strong>«Omit from published content»</strong> el bloque directamente no se incluye en el HTML de la página. No existe en el DOM, no se carga, no aparece en ningún sitio. Esto es lo que ya hacía WordPress 6.9 con <code>blockVisibility: false</code> y sigue funcionando exactamente igual.</p>
<p>Cuando ocultas por dispositivo (desktop, tablet, mobile), la cosa cambia: el bloque <strong>sí se renderiza en el DOM</strong>. Lo que hace WordPress es aplicar reglas CSS con media queries para ponerle un <code>display: none</code> en los viewports que hayas seleccionado. El contenido está ahí, simplemente no se ve.</p>
<p>Esto tiene implicaciones prácticas. Si ocultas una imagen pesada en móvil con esta funcionalidad, el navegador del móvil sigue descargando la imagen aunque no la muestre. Para casos donde el rendimiento es lo que te preocupa, la opción de «Omitir del contenido publicado» o el enfoque clásico con <code>render_block</code> y <code>wp_is_mobile()</code> siguen siendo mejor opción.</p>
<h2>La estructura técnica: metadatos del bloque</h2>
<p>La visibilidad se guarda en los metadatos del bloque, dentro de la clave <code>blockVisibility</code>. La estructura ha cambiado respecto a WordPress 6.9, que solo admitía un booleano.</p>
<p>Ocultar un bloque por completo sigue siendo igual:</p>
<pre>{
  "metadata": {
    "blockVisibility": false
  }
}</pre>
<p>La novedad es que ahora <code>blockVisibility</code> también puede ser un objeto con una clave <code>viewport</code>:</p>
<pre>{
  "metadata": {
    "blockVisibility": {
      "viewport": {
        "mobile": false,
        "tablet": true,
        "desktop": true
      }
    }
  }
}</pre>
<p>En este ejemplo, <code>mobile: false</code> significa que el bloque no se muestra en móvil. Los valores <code>true</code> o la ausencia de la clave significan que sí se muestra.</p>
<p>La clave <code>viewport</code> está anidada a propósito dentro de <code>blockVisibility</code>. La idea es que en futuras versiones se puedan añadir más criterios de visibilidad al mismo nivel (por ejemplo, por rol de usuario o por franjas horarias), sin romper la estructura actual.</p>
<p>En el markup serializado del bloque, queda así:</p>
<pre>&lt;!-- wp:paragraph {"metadata":{"blockVisibility":{"viewport":{"mobile":false}}}} --&gt;
&lt;p&gt;Este párrafo no se ve en móvil.&lt;/p&gt;
&lt;!-- /wp:paragraph --&gt;</pre>
<h3>Los breakpoints actuales</h3>
<p>WordPress 7.0 usa tres breakpoints fijos:</p>
<ul>
<li><strong>Móvil</strong>: pantallas de hasta 480px de ancho.</li>
<li><strong>Tableta</strong>: de 480px a 782px.</li>
<li><strong>Escritorio</strong>: más de 782px.</li>
</ul>
<p>Estos valores están definidos tanto en PHP (<code>lib/block-supports/block-visibility.php</code>) como en JavaScript (<code>packages/block-editor/src/components/block-visibility/constants.js</code>) y, al menos de momento, no se pueden cambiar ni desde <code>theme.json</code> ni desde ningún filtro.</p>
<p>El punto de corte de 782px te sonará si has trabajado con el admin de WordPress, que usa ese mismo valor para su diseño responsive. El de 480px coincide con los breakpoints de los estilos base de Gutenberg. No son valores especialmente estándar fuera de WordPress (muchos frameworks usan 768px para tablet), pero son coherentes con el resto del ecosistema.</p>
<h2>Qué necesitas saber si desarrollas temas o plugins</h2>
<p>Si tu tema o plugin genera, transforma o analiza markup de bloques en el servidor, ojo: el campo <code>blockVisibility</code> en los metadatos del bloque ahora puede ser dos cosas distintas. Hasta WordPress 6.9 era siempre un booleano (<code>false</code>). Desde WordPress 7.0 puede ser un booleano o un objeto con la estructura de <code>viewport</code> que acabamos de ver.</p>
<p>Si tu código asume que <code>blockVisibility</code> siempre es un valor escalar, va a petarte cuando se encuentre con un objeto. Revisa y adapta.</p>
<p>Si tus bloques no tocan el markup en el servidor, no tienes que hacer nada. La visibilidad por viewport es un block support que se aplica automáticamente. No hace falta declarar nada en el <code>block.json</code> de tus bloques.</p>
<p>Lo mismo se aplica a patrones y bloques reutilizables, de manera que si ya tienen reglas de visibilidad guardadas funcionan sin tocar nada.</p>
<h2>Adiós a los plugins de visibilidad por dispositivo</h2>
<p>Plugins como Block Visibility, EditorsKit o Conditional Blocks han hecho un trabajo estupendo cubriendo esta carencia durante años, pero si lo único que necesitabas era ocultar bloques por tipo de pantalla, a partir de WordPress 7.0 ya no necesitas ninguno de ellos para esta funcionalidad.</p>
<p>Ahora bien, si usas características más avanzadas de esos plugins (visibilidad por perfil de usuario, por fechas, por geolocalización, por parámetros de URL), esas cosas siguen sin estar por defecto en WordPress y vas a seguir necesitándolos. WordPress 7.0 solo cubre el caso de visibilidad por <code>viewport</code>, que es el más común y el que más gente pedía.</p>
<p>Y un detalle para quienes vengan de EditorsKit es que si lo desactivas las clases CSS que el plugin añadía a los bloques ocultos siguen estando en tu contenido. Los bloques volverán a mostrarse porque el CSS que los ocultaba ya no se carga.</p>
<p>La funcionalidad nativa de WordPress 7.0 usa un sistema diferente (metadatos del bloque, no clases CSS), así que no hay migración automática. Si tienes bloques ocultos con EditorsKit y quieres pasar al sistema nativo tendrás que reconfigurar la visibilidad bloque a bloque.</p>
<h2>Lo que falta y lo que viene en WordPress 7.1</h2>
<p>La funcionalidad de WordPress 7.0 es intencionalmente limitada. Se lanzó con lo mínimo para que funcione bien, y el plan es ampliarla en la próxima versión mayor.</p>
<p>Para WordPress 7.1 está previsto:</p>
<ul>
<li><strong>Breakpoints configurables desde theme.json</strong>: que cada tema pueda definir sus propios puntos de corte y etiquetas de viewport, en lugar de estar limitado a los tres valores fijos actuales.</li>
<li><strong>Control por tipo de bloque</strong>: que los temas puedan activar o desactivar la visibilidad por viewport para bloques concretos, igual que ya se hace con otros block supports como color o tipografía.</li>
<li><strong>Integración con el style engine</strong>: ahora mismo la propiedad CSS <code>display</code> necesita un workaround con el filtro KSES para funcionar. En 7.1 debería gestionarse de forma nativa.</li>
</ul>
<p>También hay debate abierto sobre si usar media queries de viewport es el enfoque correcto o si container queries serían más apropiadas para bloques individuales. Y sobre el formato de las media queries, que ahora usan la sintaxis moderna de rangos (<code>width &lt;= 480px</code>) en lugar del clásico <code>max-width</code>.</p>
<p>Si te interesa seguir el desarrollo, el <a href="https://github.com/WordPress/gutenberg/issues/75707" target="_blank" rel="nofollow noopener">issue #75707 en GitHub</a> es donde se está coordinando todo lo de WordPress 7.1. Y la <a href="https://make.wordpress.org/core/2026/03/15/block-visibility-in-wordpress-7-0/" target="_blank" rel="nofollow noopener">nota oficial de desarrollo de WordPress 7.0</a> tiene los detalles técnicos de lo que ya está funcionando.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/ocultar-bloques-por-dispositivo/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Tus propias noticias personalizadas como widget de escritorio en WordPress</title>
		<link>https://ayudawp.com/noticias-personalizadas-widget-escritorio-wordpress/</link>
					<comments>https://ayudawp.com/noticias-personalizadas-widget-escritorio-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Tue, 21 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Plugins WordPress]]></category>
		<category><![CDATA[Programación en WordPress]]></category>
		<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Avanzado]]></category>
		<category><![CDATA[Functions]]></category>
		<category><![CDATA[Principiante]]></category>
		<category><![CDATA[RSS]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158955</guid>

					<description><![CDATA[Si haces webs para clientes, un widget con tus noticias o las de su sector es un detalle de branding que se agradece mucho. El cliente entra al escritorio y ve información relevante en vez del blog de WordPress.org, que probablemente no le dice nada.]]></description>
										<content:encoded><![CDATA[<p>El escritorio de WordPress te recibe con un <strong>widget</strong> de «<strong>Eventos y noticias de WordPress</strong>» que, seamos sinceros, <strong>a la mayoría de usuarios les importa entre poco y nada</strong>.</p>
<p>Si gestionas webs para clientes es todavía peor, porque les estás mostrando <strong>información que no les aporta nada y ocupa un espacio que podría ser útil</strong>.</p>
<p>La buena noticia es que <strong>puedes cambiarlo por tus propias fuentes de noticias</strong>, ya sea con un poco de código o con un plugin que te lo deja todo listo. Aquí tienes las dos opciones.</p>
<p>Pero antes…</p>
<h2>¿Y para qué quiero noticias personalizadas en el escritorio de WordPress?</h2>
<p>Si haces webs para clientes, un widget con tus noticias o las de su sector es un <strong>detalle de branding</strong> que se agradece mucho. El cliente entra al escritorio y ve información relevante en vez del blog de WordPress.org, que probablemente no le dice nada.</p>
<p>También viene bien si tienes un equipo de redactores o editores y quieres que vean <strong>novedades del proyecto</strong>, <strong>fuentes de referencia del sector</strong> o <strong>avisos internos</strong> nada más acceder. Y si simplemente quieres tener a mano tus <strong>blogs favoritos sin salir de WordPress</strong>, pues también.</p>
<p>Casos típicos donde encaja bien:</p>
<ul>
<li><strong>Agencias y freelances</strong> que entregan proyectos a clientes y quieren dejar el <strong>escritorio personalizado</strong>.</li>
<li><strong>Medios y blogs</strong> con varios redactores, para compartir <strong>fuentes de información comunes</strong>.</li>
<li><strong>Intranets o sitios corporativos</strong> donde el escritorio es la primera pantalla que ven los usuarios.</li>
<li><strong>Tu propio WordPress</strong>, para tener <strong>las noticias que te interesan a un clic</strong>.</li>
</ul>
<p>Si aún tienes interés, vamos a las opciones…</p>
<h2>Opción rápida: código de funciones</h2>
<p>Si solo necesitas mostrar un par de feeds RSS en el escritorio y quieres algo ligero, con un snippet te sobra. Puedes añadirlo a tu <a href="https://ayudawp.com/crea-un-plugin-para-liberar-el-fichero-functions-php/" target="_blank" rel="noopener ugc">plugin de personalizaciones</a>, al <code>functions.php</code> de tu tema hijo o donde tú prefieras.</p>
<pre>&lt;?php
/**
 * Widget de escritorio con noticias RSS personalizadas.
 *
 * Sustituye el widget por defecto de WordPress por uno con tus feeds.
 * Quita la primera línea si vas a añadir el código al functions.php o
 * a un plugin de fragmentos de código. Déjala si lo subes como mu-plugin
 *
 * Personaliza los feeds en el array $feeds (url y título).
 * Ajusta $items_per_feed y $max_items a tu gusto.
 */

// Registra el widget personalizado y quita el de WordPress
add_action( 'wp_dashboard_setup', 'ayudawp_custom_news_widget_setup' );

function ayudawp_custom_news_widget_setup() {
    // Quita el widget por defecto de noticias y eventos de WordPress
    remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );

    // Añade el widget personalizado
    wp_add_dashboard_widget(
        'ayudawp_custom_news',
        'Últimas noticias',  // Cambia el título a lo que quieras
        'ayudawp_custom_news_widget_output'
    );
}

function ayudawp_custom_news_widget_output() {
    // === PERSONALIZA AQUÍ ===
    // Añade o quita feeds a tu gusto
    $feeds = array(
        array(
            'url'   =&gt; 'https://ayudawp.com/feed/',
            'title' =&gt; 'Ayuda WordPress',
        ),
        array(
            'url'   =&gt; 'https://es.wordpress.org/news/feed/',
            'title' =&gt; 'WordPress España',
        ),
    );

    $items_per_feed = 3;  // Elementos por feed
    $max_items      = 8;  // Máximo total de elementos
    // === FIN DE PERSONALIZACIÓN ===

    include_once ABSPATH . WPINC . '/feed.php';

    $all_items = array();

    foreach ( $feeds as $feed_data ) {
        $rss = fetch_feed( $feed_data['url'] );

        if ( is_wp_error( $rss ) ) {
            continue;
        }

        $feed_items = $rss-&gt;get_items( 0, $items_per_feed );

        foreach ( $feed_items as $item ) {
            $all_items[] = array(
                'title'  =&gt; esc_html( $item-&gt;get_title() ),
                'link'   =&gt; esc_url( $item-&gt;get_permalink() ),
                'date'   =&gt; $item-&gt;get_date( 'U' ),
                'source' =&gt; esc_html( $feed_data['title'] ),
            );
        }
    }

    if ( empty( $all_items ) ) {
        echo '&lt;p&gt;' . esc_html__( 'No hay noticias disponibles.', 'ayudawp' ) . '&lt;/p&gt;';
        return;
    }

    // Ordena por fecha (más recientes primero)
    usort( $all_items, function ( $a, $b ) {
        return $b['date'] - $a['date'];
    } );

    // Limita al máximo configurado
    $all_items = array_slice( $all_items, 0, $max_items );

    echo '&lt;div class="rss-widget"&gt;&lt;ul&gt;';

    foreach ( $all_items as $item ) {
        printf(
            '&lt;li&gt;&lt;a href="%s" target="_blank" rel="noopener"&gt;%s&lt;/a&gt; &lt;span class="rss-date"&gt;%s&lt;/span&gt; &lt;cite&gt;%s&lt;/cite&gt;&lt;/li&gt;',
            esc_url( $item['link'] ),
            esc_html( $item['title'] ),
            esc_html( date_i18n( get_option( 'date_format' ), $item['date'] ) ),
            esc_html( $item['source'] )
        );
    }

    echo '&lt;/ul&gt;&lt;/div&gt;';
}</pre>
<p>[imagen del widget de noticias personalizado en el escritorio de WordPress]</p>
<p>Este código <strong>hace tres cosas</strong>:</p>
<ol>
<li>Quita el widget de noticias de WordPress por defecto</li>
<li>Añade uno nuevo con los feeds RSS que tú elijas</li>
<li>Los muestra ordenados por fecha.</li>
</ol>
<p>Lo que tienes que tocar está al principio de la función <code>ayudawp_custom_news_widget_output()</code>, el array <code>$feeds</code> con las URLs y nombres de tus feeds, <code>$items_per_feed</code> para cuántos elementos quieres de cada feed, y <code>$max_items</code> para el total que se muestra en el widget. También puedes cambiar el título del widget en la línea de <code>wp_add_dashboard_widget()</code>.</p>
<p>A diferencia del <code>wp_widget_rss_output()</code> que trae WordPress de serie, este código añade varios feeds y los mezcla ordenados por fecha, así ves las noticias más recientes de todas tus fuentes juntas.</p>
<p>Si quieres volver a mostrar el widget original de WordPress, solo tienes que quitar la línea del <code>remove_meta_box()</code>.</p>
<h2>Opción completa: plugin</h2>
<p>Si necesitas más control, o si gestionas sitios para clientes y quieres <strong>que el escritorio muestre información útil sin tocar código</strong>, el plugin <a href="https://es.wordpress.org/plugins/periscopio/" target="_blank" rel="nofollow noopener">Periscopio</a> te lo pone fácil.</p>
<p>Es un <strong>plugin gratuito que sustituye el widget de noticias por defecto por uno totalmente configurable</strong> desde una página de ajustes. Lo que te ofrece resumido, es esto:</p>
<ul>
<li>Feeds RSS ilimitados, con validación de URL antes de añadirlos y ordenados por fecha.</li>
<li>Sección de eventos de la comunidad WordPress con localidad personalizable (los saca de la API de WordPress.org).</li>
<li>Enlaces configurables en el pie del widget, tanto en la sección de eventos como en la de noticias.</li>
<li>Título del widget editable.</li>
<li>Caché configurable (de 1 a 72 horas) con opción de vaciarla manualmente.</li>
<li>Posibilidad de ocultar el widget original de WordPress o dejarlo junto al tuyo.</li>
</ul>
<h3>Instalación y configuración</h3>
<p>Lo instalas como cualquier otro plugin desde el directorio de WordPress.org. Una vez activado, ve a <strong>Ajustes &gt; Periscopio</strong> y ahí tienes todo.</p>
<p><a href="https://ayudawp.com/?attachment_id=158961" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158961 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/periscopio-wordpress-ajustes-1200x733.jpg" alt="periscopio wordpress ajustes" width="1200" height="733" srcset="https://ayudawp.com/wp-content/uploads/2026/04/periscopio-wordpress-ajustes-1200x733.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/periscopio-wordpress-ajustes-768x469.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/periscopio-wordpress-ajustes-1536x938.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/periscopio-wordpress-ajustes.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>La página de ajustes está dividida en secciones al estilo clásico de WordPress. En la parte de feeds <strong>puedes añadir las URLs que quieras</strong>, y el plugin las valida antes de guardarlas para evitar errores.</p>
<p>También puedes configurar <strong>cuántos elementos quieres por feed</strong> y el máximo total.</p>
<p>Periscopio viene con <strong>cinco feeds preconfigurados</strong> (WordPress.org, el blog de Matt Mullenweg, Make WordPress, WordPress España y Ayuda WordPress), pero <strong>puedes cambiarlos todos desde el minuto cero</strong>.</p>
<h3>¿Qué tal queda?</h3>
<p><a href="https://ayudawp.com/?attachment_id=158960" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158960 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/widget-escritorio-wordpress-noticias-personalizadas-1200x678.jpg" alt="widget escritorio wordpress noticias personalizadas" width="1200" height="678" srcset="https://ayudawp.com/wp-content/uploads/2026/04/widget-escritorio-wordpress-noticias-personalizadas-1200x678.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/widget-escritorio-wordpress-noticias-personalizadas-768x434.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/widget-escritorio-wordpress-noticias-personalizadas-1536x867.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/widget-escritorio-wordpress-noticias-personalizadas.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>El widget <strong>queda integrado con el estilo nativo de WordPress</strong>, así que no desentona, pero con algún detalle que, aunque está mal que lo diga yo, <strong>mejora al widget que trae WordPress por defecto</strong>.</p>
<p>Los eventos aparecen arriba con información de WordCamps y quedadas cercanas a tu localidad, que puedes modificar, y debajo las noticias de tus feeds mezcladas y ordenadas por fecha.</p>
<h2>¿Cuándo usar cada opción?</h2>
<p>Si es para ti, para un proyecto concreto o simplemente quieres un par de feeds sin complicarte, el código te vale de sobra.</p>
<p>Si <strong>gestionas varios sitios, trabajas con clientes o necesitas la parte de eventos y una gestión de feeds más cómoda</strong> (con validación, caché y ajustes visuales), Periscopio te ahorra tiempo y te ofrece mucha más personalización a golpe de clic.</p>
<hr>
<p>Para seguir enredando con códigos de este tipo relacionados con el mismo asunto, con los widgets de escritorio, también puedes probar como <a href="https://ayudawp.com/crea-tus-propios-widgets-para-el-escritorio-de-wordpress/" target="_blank" rel="noopener ugc">crear widgets de escritorio con contenido propio</a> (no RSS) o <a href="https://ayudawp.com/widget-escritorio-soporte/" target="_blank" rel="noopener ugc">añadir un formulario de soporte para tus clientes</a>, tienes más ideas en el blog.</p>
<p>Y si lo que quieres es <a href="https://ayudawp.com/quitar-widgets-por-defecto-en-el-escritorio/" target="_blank" rel="noopener ugc">directamente limpiar el escritorio de cajas que no uses</a>, también puedes hacerlo con un par de líneas de código.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/noticias-personalizadas-widget-escritorio-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>¡¿WordPress es una mentira?!</title>
		<link>https://ayudawp.com/wordpress-es-una-mentira/</link>
					<comments>https://ayudawp.com/wordpress-es-una-mentira/#comments</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Mon, 20 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Opinión]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Automattic]]></category>
		<category><![CDATA[Matt Mullenweg]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=159056</guid>

					<description><![CDATA[Entiendo tu frustración después de 15 años, yo llevo algunos más y también me frustro con WordPress a menudo.]]></description>
										<content:encoded><![CDATA[<p>Querido Marcin…</p>
<p>Llevo unos días viendo circular <a href="https://marcindudek.dev/blog/wordpress-manifesto/" target="_blank" rel="nofollow noopener">tu manifiesto contra WordPress</a>, eso que empezó como un tuit largo, luego ampliaste en tu blog y que hasta Matt Mullenweg te ofreció quedar por Zoom, como dijo, «<em>aunque no sea para responder, solo para entender de dónde sacas estas conclusiones</em>». <strong>Un exitazo</strong>.</p>
<p>Esta respuesta seguro que no llega tan lejos, está escrita por un bloguero hispano, y no solemos captar la atención del mundo anglo, por lo que sea, pero alguien la leerá.</p>
<p>Así que voy a tomarte aparte un momento, como un colega que lleva solo unos pocos más años que tú en esto, porque <strong>tu manifiesto tiene cosas con parte de razón, otras que son medias verdades y unas cuantas que son directamente falsas</strong>. Mezclarlas todas con el mismo volumen no es una llamada de atención, es ruido, o eso me ha parecido.</p>
<p><img loading="lazy" decoding="async" class="sombra alignnone wp-image-159064 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/WordPress-is-a-lie-1200x1211.jpg" alt="" width="1200" height="1211" srcset="https://ayudawp.com/wp-content/uploads/2026/04/WordPress-is-a-lie-1200x1211.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/WordPress-is-a-lie-150x150.jpg 150w, https://ayudawp.com/wp-content/uploads/2026/04/WordPress-is-a-lie-768x775.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/WordPress-is-a-lie.jpg 1310w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<h2>En lo que sí tienes razón</h2>
<p>Vamos a empezar por <strong>lo que suscribo del todo</strong>, ¿te parece?</p>
<ul>
<li>La interfaz para <strong>desactivar comentarios</strong> en todo el sitio es un lío absurdo repartido por media docena de pantallas, tienes razón.  Yo mismo he compartido <a href="https://ayudawp.com/desactivar-funcionalidades-wordpress/" target="_blank" rel="noopener">como quitar estas mierdas</a>, pero sí, es un jaleo.</li>
<li>El <code>/wp-admin/options.php</code> existe desde siempre, es súper útil, y no hay un solo enlace visible en el escritorio. Ahora, también te digo que <a href="https://ayudawp.com/accede-a-todas-las-opciones-de-wordpress/" target="_blank" rel="noopener">esa pantalla de opciones al completo una burrada</a>, y el 90% de los usuarios no deberían tocar ahí.</li>
<li>El <a href="https://ayudawp.com/modo-recuperacion-wordpress/" target="_blank" rel="noopener">modo de recuperación</a> mandando el <strong>aviso solo al email del admin principal</strong> cuando un sitio tiene varios administradores es un fallo de diseño de libro. Como todo en WordPress <a href="https://ayudawp.com/errores-modo-recuperacion-wordpress/" target="_blank" rel="noopener">se puede personalizar con un sencillo filtro</a>, pero razón tienes.</li>
<li>Y sí, también, <strong>contribuir al core puede ser frustrante y lento</strong>.</li>
</ul>
<p><strong>Todo eso lo firmo contigo</strong>, son críticas lógicas, más que lógicas, <strong>tienes más razón que un santo</strong>.</p>
<h2>Las medias verdades</h2>
<p>Aquí empezamos a tener un problema tú y yo (dialéctico, por supuesto).</p>
<p>Dices que en una instalación limpia «<em>XML-RPC está abierto de par en par</em>» y «<em>en cuanto publicas, los bots empiezan a hacer fuerza bruta contra wp-login</em>», y <strong>estás mezclando dos cosas que no son lo mismo</strong>.</p>
<p><strong>XML-RPC</strong> es un puerta abierta a posibles ataques, correcto, pero los ataques a <code>wp-login.php</code> son otro, y cualquier hosting decente (<a href="https://ayudawp.com/hosting-wordpress/" target="_blank" rel="noopener ugc">SiteGround</a>, Kinsta, Cloudways) los frena de serie, y si tu hosting no lo hace tampoco necesitas un plugin de seguridad de 80 euros al año con mil opciones que no vas a tocar. Con uno pequeño y enfocado basta, y para eso tienes este gratuito, <a href="https://es.wordpress.org/plugins/vigilante/" target="_blank" rel="noopener ugc">Vigilante</a>, que hace eso y mucho más.</p>
<p>Luego dices que «<em>necesitas un plugin para <code>meta titles</code>, <code>descriptions</code>, <code>meta tags</code> básicas, en 2026, no hay excusa, el SEO debería ser nativo</em>».</p>
<p>Marcin, querido amigo, <strong>WordPress tiene mapas del sitio nativos desde la versión 5.5</strong>, tiene <code>wp_robots</code>, tiene <strong>canonical automático</strong>, las <code>title tags</code> los gestiona el tema con <code>title-tag</code> desde hace una década. Lo que no tiene es un panel tipo Yoast, y eso es otra cosa muy distinta a «<strong>no tiene SEO</strong>».</p>
<p><strong>Los huecos que deja el core se tapan con plugins pequeños y enfocados, no con un stack de diez suscripciones anuales</strong> como pintas tú. Yo mismo tengo compartidos gratis tres que ejemplifican justo lo contrario de lo que denuncias:</p>
<ul>
<li><a href="https://github.com/fernandotellado/open-graph-tags-wordpress" target="_blank" rel="nofollow noopener">Automatic Open Graph Tags</a>, un sencillo código (o plugin si lo prefieres) que <strong>añade Open Graph y Twitter Cards sin configuración</strong>. Cero ajustes, cero suscripciones, gratis del todo.</li>
<li><a href="https://es.wordpress.org/plugins/native-sitemap-customizer/" target="_blank" rel="noopener ugc">Native Sitemap Customizer</a>, que te deja <strong>personalizar el mapa del sitio que ya trae WordPress</strong>, sin instalar otro plugin que reinvente la rueda.</li>
<li><a href="https://es.wordpress.org/plugins/noindexer/" target="_blank" rel="noopener ugc">NoIndexer</a>, para <strong>marcar <code>noindex</code> selectivo</strong> en contenidos concretos.</li>
</ul>
<p>Los tres son gratis, los tres hacen una sola cosa y la hacen bien, los tres son <strong>gratis y disponibles para quien quiera utilizarlos</strong>, ninguno tiene versión pro, ni suscripción, ni muro de pago. Así que lo de «<em>WordPress te obliga a un stack de plugins de pago para tener SEO</em>» <strong>es falso</strong>. Hay ecosistema de sobra, y encima gratis, pero hay que buscarlo.</p>
<p>Otra que (casi) me ha dolido leer: «<em>…el hosting es barato porque WordPress funciona en PHP antiguo y en servidores compartidos cutres</em>». Esto es <strong>falso de principio a fin</strong>.</p>
<p>El core admite PHP 8.3, el mínimo recomendado lo suben con cada versión, y <strong>si tu hosting te deja tirado en PHP 7.2 el problema es tu hosting no WordPress</strong>. Echarle la culpa al CMS de que el hosting barato sea malo es como culpar al coche de que la gasolina sea de garrafa.</p>
<p>Y, aunque ya te he dicho antes que te suscribo la mayor en esto de contribuir al core, la anécdota del «<em>cogí un bug de la lista de good first bugs, mandé mi PR y nadie me contestó</em>» es ¿cómo decirte?.</p>
<p>Vale, contribuir al core es lento, a veces una putada, eso lo he suscrito, lo firmo si quieres, pero tu anécdota no demuestra que sea imposible, lo que demuestra es que con una experiencia, la tuya, te desanimaste y escribiste un manifiesto. Que es perfectamente legítimo, no digo que no lo sea, solo faltaría, pero no es lo mismo.</p>
<p>Yo mismo he mandado reportes en varias ocasiones y el baile de cambio de sitios donde informar llega a ser hasta molesto, pero bueno, luego me acuerdo de que <strong>todos somos voluntarios</strong> (por si se te había olvidado) y se me pasa y a otra cosa.</p>
<h2>Así se critica WordPress</h2>
<p>Aquí viene la parte que más me gusta de todo esto, porque mientras tras escribir tu manifiesto, <a href="https://profiles.wordpress.org/nickhamze/" target="_blank" rel="nofollow noopener">Nick Hamze</a> leyó lo mismo que hemos leído todos y pensó otra cosa…</p>
<p>De todos los puntos de tu manifiesto <strong>lo del modo de recuperación</strong> era el único con un fallo concreto y en el que se podía aportar algo funcional. Así que en vez de escribir otra réplica, Nick hizo algo distinto, <a href="https://gist.github.com/nickhamze/74380ca440577800d6c38e1280374fa3" target="_blank" rel="nofollow noopener">cogió el bug, escribió el parche</a>, lo acompañó de cuatro tests unitarios, investigó los tickets de Trac relacionados (el #51267, el #47192, el #47352, el #47939) y lo publicó en <strong>un gist listo para que alguien lo lleve al core</strong>.</p>
<p>Incluye hasta el razonamiento de por qué el parche es defendible pese al ticket que se cerró como «<em>invalid</em>» en 2020, y sugiere cómo plantearlo en Trac si hay reticencias.</p>
<p><strong>Eso es contribuir</strong>. Eso, en un rato de sábado por la mañana, vale más que todo tu manifiesto junto, y que este post mío. Desmonta tu queja principal, la de «<em>no se puede aportar a core, el pipeline está cerrado</em>», mejor que cualquier argumento que yo te pueda dar. Nick no ha pedido permiso, no ha esperado a que alguien le conteste en Slack, no ha escrito sobre lo roto que está el sistema, ha escrito el código, <strong>ha hecho WordPress</strong>.</p>
<h2>Lo que no se puede rebatir, solo discutir</h2>
<p>Queda <strong>la parte grande de tu manifiesto</strong>, la de Automattic, WP Engine, la GPL como «estafa», la «comunidad» como ficción. Aquí <strong>no hay hechos que rebatir, hay una visión, una opinión</strong>. Y las opiniones se debaten, no se discuten ni desmontan.</p>
<p>Mi visión rápida es que sí, hay tensiones, y sí, Automattic es una empresa que extrae valor. Otro sí es que <strong>el caso WP Engine es feo y ha dejado mal sabor a mucha gente, yo mismo llevo un año criticando estas posturas</strong>.</p>
<p>Ahora bien, llamar a todo esto «<em>un estanque con un solo pez grande</em>» ignora que <strong>hay miles de desarrolladores ganándose la vida con WordPress sin que Automattic se les haya comido nada</strong>, cientos de plugins pequeños honestos, comunidades locales que sí funcionan, yo mismo he ayudado a organizar unas cuantas y te aseguro que <strong>la gente no va a WordCamp Logroño o la Meetup de Sevilla porque Automattic les obligue</strong>.</p>
<p>Tu retrato es cinematográfico, queda muy bien, pero no cuadra con lo que yo veo cada día.</p>
<p>Y la teoría de que «<em>nadie en el poder quiere que core sea bueno porque se cargaría a los desarrolladores de plugins</em>» es, con todo el cariño, una tontería que mejora las de Automattic, que las tiene, convirtiéndola en villana cuando <strong>la realidad es mucho más aburrida</strong>, y es que el core va lento porque tiene <strong>20 años de deuda técnica, millones de sitios que no pueden romper, y un equipo humano limitado</strong>.</p>
<p>Ni conspiración ni colapso, solo software viejo.</p>
<h2>Querido Marcin, para cerrar</h2>
<p>Entiendo tu <strong>frustración después de 15 años</strong>, yo llevo algunos más y también me frustro con WordPress a menudo.</p>
<p>Pero también te digo que escribir un manifiesto con más pasión que datos, mezclar bugs reales con teorías sobre el pez grande que se come a los pequeños y llamar «<em>colapso hasta en el calendario</em>» a un CMS que mueve el 43% de la web no es una llamada a las armas, más parece un hilo de X buscando ruido. Algo ya lo sabes tú, porque cuando Mullenweg te respondió ofreciéndote sentaros a hablarlo, tu primera reacción fue dudar de si iba en serio.</p>
<p><strong>WordPress tiene problemas</strong>, varios, y algunos de los que señalas son reales, pero se arreglan como hizo Nick Hamze, con un <code>.diff</code> y cuatro tests unitarios, o compartiendo plugins gratis y tutoriales a diario desde hace 20 años, como este humilde bloguero español, no con un manifiesto en Twitter.</p>
<p>Un abrazo desde España, de un veterano a otro. Ya me perdonarás los puntillos de ironía, pero seguro que si coincidimos en persona entenderás que soy un poco capullo, es mi particular sentido del (cuestionable) humor.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/wordpress-es-una-mentira/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
		<item>
		<title>«Esta entrada usa plugins que no son compatibles con la colaboración en tiempo real»</title>
		<link>https://ayudawp.com/plugins-incompatibles-colaboracion-tiempo-real/</link>
					<comments>https://ayudawp.com/plugins-incompatibles-colaboracion-tiempo-real/#respond</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Thu, 16 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Programación en WordPress]]></category>
		<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Avanzado]]></category>
		<category><![CDATA[Colaboración en tiempo real]]></category>
		<category><![CDATA[Editor de WordPress]]></category>
		<category><![CDATA[Experto]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158832</guid>

					<description><![CDATA[Desde WordPress 7.0 está disponible la colaboración en tiempo real en el editor de bloques para que dos o más personas pueden editar la misma entrada a la vez, al estilo Google Docs. Peeeero … es posible que que te hayas topado con un mensaje que corta de raíz la experiencia.]]></description>
										<content:encoded><![CDATA[<p>Desde WordPress 7.0 está disponible una de las novedades más anunciadas de los últimos años, la <strong>colaboración en tiempo real en el editor de bloques</strong>. Con esta funcionalidad dos o más personas pueden editar la misma entrada a la vez, al estilo Google Docs, viendo los cambios del otro al momento. Hasta aquí bien, peeeero … es posible que que te hayas topado con un mensaje que corta de raíz la experiencia.</p>
<p>Al abrir una entrada que otro usuario ya está editando, en lugar de entrar en modo colaborativo, WordPress te muestra el aviso «<strong>Esta entrada ya está siendo editada</strong>» de siempre, pero con un cambio, este mensaje añadido:</p>
<blockquote><p><em>«Debido a que esta entrada usa <strong>plugins que no son compatibles con la colaboración en tiempo real</strong> solo una persona puede editarla al mismo tiempo.»</em></p></blockquote>
<p>Te da dos opciones, o «<strong>Tomar posesión</strong>» o «<strong>Salir del editor</strong>«, o sea, el bloqueo de siempre. Y lo más frustrante es que no te dice qué plugin es el incompatible, ni un nombre, ni una pista, te toca adivinarlo.</p>
<p><a href="https://ayudawp.com/?attachment_id=158844" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158844 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/aviso-plugin-incompatible-colaboracion-en-tiempo-real-wordpress-1200x675.jpg" alt="aviso plugin incompatible colaboracion en tiempo real wordpress" width="1200" height="675" srcset="https://ayudawp.com/wp-content/uploads/2026/04/aviso-plugin-incompatible-colaboracion-en-tiempo-real-wordpress-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/aviso-plugin-incompatible-colaboracion-en-tiempo-real-wordpress-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/aviso-plugin-incompatible-colaboracion-en-tiempo-real-wordpress-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/aviso-plugin-incompatible-colaboracion-en-tiempo-real-wordpress.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>En este artículo te explico <strong>por qué sale este aviso, cómo encontrar el plugin que lo provoca, qué hacer si no eres desarrollador, y cómo corregir la incompatibilidad</strong> si mantienes plugins propios, con ejemplo real incluido.</p>
<p>Pero no adelantemos acontecimientos, que igual no sabes qué leches es esto de la colaboración en tiempo real. Te lo cuento.</p>
<h2>Qué es la colaboración en tiempo real de WordPress</h2>
<p>Hasta ahora, cuando alguien estaba editando una entrada en WordPress, el resto de usuarios quedaban bloqueados. Podías tomar posesión del post o irte, pero editar a la vez no era posible. Desde WordPress 7.0 esto cambia.</p>
<p><strong>La colaboración en tiempo real (RTC) permite que dos o más personas editen el mismo contenido a la vez</strong>. Ves el cursor del otro usuario, sus cambios aparecen en tu pantalla al momento y el sistema se encarga de que no haya conflictos. Por debajo usa <a href="https://yjs.dev/" target="_blank" rel="nofollow noopener">Yjs</a>, una librería del tipo <code>CRDT</code> (Conflict-free Replicated Data Type) que resuelve los conflictos de edición sin perder datos.</p>
<p>Por defecto, WordPress usa <code>HTTP polling</code> como transporte, lo que significa que los clientes envían y reciben cambios a través de peticiones HTTP normales. No es lo más rápido del mundo, pero funciona en cualquier hosting sin necesidad de WebSockets ni configuración especial. Los proveedores de hosting que quieran ofrecer una experiencia mejor pueden sustituir el transporte por WebSockets usando el filtro <code>sync.providers</code>.</p>
<p>Desde las primeras betas de WordPress 7.0, la funcionalidad se ha podido activar manualmente desde <code>Ajustes &gt; Escritura</code>, marcando la casilla ahí incluida, que por defecto se decidió que estuviese inactiva por defecto, ya que en realidad es muy poca gente quien va a usar esta herramienta y consume recursos.</p>
<p>También hay una constante, <code>WP_ALLOW_COLLABORATION</code> que puedes añadir en <code>wp-config.php</code> y permite activar o desactivar la funcionalidad si pasar por los ajustes, así:</p>
<pre>define( 'WP_ALLOW_COLLABORATION', true );</pre>
<h3>Cómo funcionan las tripas de la sincronización en la RTC</h3>
<p>La sincronización, como te acabo de comentar, se basa en Yjs, una librería de CRDT que <strong>permite que varios clientes editen el mismo documento</strong> sin coordinación central. Cada cambio se codifica como una operación CRDT que se puede aplicar en cualquier orden y siempre lleva al mismo resultado.</p>
<p>El proveedor de transporte mediante <code>HTTP polling</code> hace que los clientes envíen y reciban actualizaciones a través de la REST API de WordPress. Los datos CRDT se almacenan en <code>post_meta</code> en un tipo de contenido interno llamado <code>wp_sync_storage</code> (uno por documento). Las actualizaciones se agrupan en lotes y se compactan periódicamente.</p>
<p>WordPress 7.0 limita inicialmente la colaboración a dos usuarios simultáneos para proteger a los hosting. El equipo de desarrollo ha mencionado varias veces que será configurable desde el wp-config, pero a fecha de hoy todavía no se ha documentado el nombre concreto de esa constante. Los proveedores de hosting también pueden sustituir el transporte HTTP por WebSockets usando el filtro <code>sync.providers</code> para una latencia menor y mejor rendimiento con más usuarios.</p>
<p>Todo lo que pasa por los data stores de WordPress (<code>core/editor</code>, <code>core/block-editor</code>) se sincroniza automáticamente. Eso incluye los atributos de los bloques, el título, el extracto y el post meta registrado con <code>show_in_rest</code>. Lo que no pasa por esos data stores (meta boxes clásicas, handlers de <code>save_post</code>, scripts que modifican el DOM directamente) no se sincroniza.</p>
<p>Lo sé, es un poco técnico, pero es que este artículo es tanto para usuarios como para desarrolladores. No voy a hacer preguntas ni cuenta como nota para examen alguno. Seguimos…</p>
<h2>Por qué sale el aviso de plugins no compatibles</h2>
<p><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158843 size-full" src="https://ayudawp.com/wp-content/uploads/2026/04/entrada-siendo-editada-colaboracion-en-tiempo-real-wordpress.jpg" alt="entrada siendo editada colaboracion en tiempo real wordpress" width="1014" height="700" srcset="https://ayudawp.com/wp-content/uploads/2026/04/entrada-siendo-editada-colaboracion-en-tiempo-real-wordpress.jpg 1014w, https://ayudawp.com/wp-content/uploads/2026/04/entrada-siendo-editada-colaboracion-en-tiempo-real-wordpress-768x530.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/entrada-siendo-editada-colaboracion-en-tiempo-real-wordpress-260x180.jpg 260w" sizes="auto, (max-width: 1014px) 100vw, 1014px"></p>
<p><strong>La colaboración en tiempo real sincroniza el estado del editor a través de los almacenamientos de datos</strong> de WordPress y Yjs. Todo lo que pasa por ahí (atributos de bloques, post meta registrado con <code>show_in_rest</code>) se sincroniza automáticamente entre los usuarios conectados.</p>
<p>Pero <strong>las cajas meta clásicas no pasan por ahí</strong>. Una caja meta clásica (registrada con <code>add_meta_box()</code>) procesa HTML directamente y guarda sus datos a través de un gancho de <code>save_post</code>. Ese flujo no tiene nada que ver con el almacenamiento de datos de Gutenberg, así que <strong>los cambios que hagas en una caja meta clásica no se sincronizan</strong> con el otro usuario. Si los dos editáis a la vez, <strong>uno puede machacar los cambios del otro</strong> sin darse cuenta.</p>
<p>Para evitar eso, <strong>WordPress toma una decisión radical</strong>, y es que <strong>si detecta que hay cajas meta clásicas registradas en el editor desactiva la colaboración</strong> entera y te muestra el aviso. No intenta sincronizar unas cosas sí y otras no, simplemente la apaga.</p>
<h2>Cómo encontrar el plugin culpable</h2>
<p>Esta es la parte que a todo el mundo le interesa, seas usuario o desarrollador. WordPress no te dice qué plugin es, así que te toca investigar. Hay varias formas de hacerlo, de más fácil a más técnica.</p>
<h3>Descarte por desactivación (el más fiable)</h3>
<p>La forma más rápida y segura de identificar el plugin que bloquea la colaboración es esta:</p>
<ol>
<li>Asegúrate de que la colaboración en tiempo real está activada en <code>Ajustes &gt; Escritura</code>.</li>
<li>Desactiva todos los plugins.</li>
<li>Abre una entrada con dos usuarios a la vez y comprueba que la colaboración funciona (deberías ver el cursor del otro usuario).</li>
<li>Ve activando los plugins uno a uno.</li>
<li>Después de activar cada plugin, vuelve a abrir la entrada con los dos usuarios.</li>
<li>Cuando la colaboración deje de funcionar y te vuelva a salir el aviso, ese es el plugin problemático.</li>
</ol>
<p>Es el método clásico de descarte. Lleva un rato, pero <strong>no falla</strong>, es gratis y tiene cero curva de aprendizaje, es para todos los públicos.</p>
<h3>Mirar la parte inferior del editor</h3>
<p>Fíjate en la captura del aviso, en la parte inferior de la pantalla del editor se ve el texto «<strong>Cajas meta</strong>» con un desplegable.</p>
<p><a href="https://ayudawp.com/?attachment_id=158850" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158850 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/cajas-meta-editor-bloques-wordpress-1200x675.jpg" alt="cajas meta editor bloques wordpress" width="1200" height="675" srcset="https://ayudawp.com/wp-content/uploads/2026/04/cajas-meta-editor-bloques-wordpress-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/cajas-meta-editor-bloques-wordpress-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/cajas-meta-editor-bloques-wordpress-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/cajas-meta-editor-bloques-wordpress.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>Si algún plugin ha registrado cajas meta en ese contenido las verás listadas ahí. Eso ya te da una pista de cuáles son los candidatos, pero <strong>no es definitivo, porque a veces tampoco el editor las coloca ahí abajo</strong>.</p>
<h3>Buscar en el código (para desarrolladores)</h3>
<p>Si tienes acceso por SSH o FTP a tu servidor, un grep rápido te da la lista de todos los plugins que registran meta boxes:</p>
<pre>grep -r "add_meta_box" wp-content/plugins/ --include="*.php" -l</pre>
<blockquote><p><strong>Nota importante</strong>: No todos los plugins que registran cajas meta causan el problema. Solo los que las registran en tipos de contenido donde quieras usar la colaboración. Un plugin que solo registra cajas meta en una pantalla de ajustes o en un tipo de contenido personalizado que no uses para colaborar no va a interferir.</p></blockquote>
<h3>Query Monitor</h3>
<p>Esa joya de plugin por el que nunca estaremos suficientemente agradecidos, <a href="https://ayudawp.com/query-monitor/" target="_blank" rel="noopener ugc">Query Monitor</a>, te <strong>muestra las cajas meta registradas y qué componente las ha registrado</strong>. Con eso puedes identificar rápidamente qué plugin está añadiendo cajas meta al editor.</p>
<h2>Qué hacer si no eres desarrollador</h2>
<p>Si has identificado el plugin que causa el problema y no tienes ni idea de programación tienes dos opciones, ambas igual de válidas, pero mejor siempre la primera.</p>
<h3>Contactar con el desarrollador del plugin</h3>
<p>Esta es la mejor opción. Ve al repositorio del plugin en WordPress.org, busca el foro de soporte y abre un hilo explicando el problema. Algo así:</p>
<p style="padding-left: 40px;"><em>«He activado la colaboración en tiempo real de WordPress 7.0 y el editor me muestra el aviso ‘Debido a que esta entrada usa plugins que no son compatibles con la colaboración en tiempo real solo una persona puede editarla al mismo tiempo’. He comprobado por descarte que el plugin que lo provoca es el vuestro. ¿Tenéis previsto hacerlo compatible?»</em></p>
<p>Si el desarrollador del plugin lee español, puedes enlazarle este artículo directamente, que más abajo tiene la explicación técnica y el código necesario para hacer la corrección. Si solo lee inglés, la <a href="https://make.wordpress.org/core/2026/03/10/real-time-collaboration-in-the-block-editor/" target="_blank" rel="nofollow noopener">nota oficial de desarrollo</a> y el documento de <a href="https://github.com/Automattic/vip-real-time-collaboration/blob/trunk/docs/COMMON_ISSUES.md" target="_blank" rel="nofollow noopener">problemas comunes de VIP</a> tienen toda la información que necesita.</p>
<h3>Decidir qué prefieres: el plugin o la colaboración</h3>
<p>Mientras el desarrollador actualiza el plugin (si lo hace) tienes que elegir. Si la funcionalidad que aporta el plugin no es imprescindible para ti, desactívalo y disfruta de la colaboración en tiempo real. Si el plugin te hace más falta que la colaboración déjalo activo y sigue editando como siempre, con el bloqueo de edición compartida de siempre.</p>
<p>No es la situación ideal, pero es la realidad de una versión mayor que cambia algo tan de base como el modelo de edición de WordPress. Con el tiempo, la mayoría de plugins se irán adaptando.</p>
<h2>Los cuatro problemas de compatibilidad más comunes (para desarrolladores)</h2>
<p>A partir de aquí el artículo se pone más técnico. Si desarrollas o mantienes plugins de WordPress, esto te interesa. La <a href="https://make.wordpress.org/core/2026/03/10/real-time-collaboration-in-the-block-editor/" target="_blank" rel="nofollow noopener">dev note oficial</a> y la <a href="https://github.com/Automattic/vip-real-time-collaboration/blob/trunk/docs/COMMON_ISSUES.md" target="_blank" rel="nofollow noopener">documentación de WordPress VIP</a> identifican cuatro patrones que causan problemas con la colaboración en tiempo real.</p>
<h3>Cajas meta clásicas (el caso más frecuente)</h3>
<p>Si tu plugin registra una meta box con <code>add_meta_box()</code> y guarda datos con un gancho de <code>save_post</code>, WordPress desactiva la colaboración para ese tipo de post. Da igual que la meta box sea pequeña o que solo tenga un checkbox. Si está ahí, la colaboración se apaga.</p>
<p>La solución es migrar la funcionalidad a un panel en el sidebar del editor de bloques (usando <code>PluginDocumentSettingPanel</code>) y asegurarte de que el post meta esté registrado con <code>show_in_rest =&gt; true</code>. La meta box clásica puedes mantenerla como fallback para el editor clásico.</p>
<h3>Inputs no controlados que no reflejan cambios externos</h3>
<p>Esto afecta a plugins que ya tienen interfaz en el editor de bloques, pero la han construido usando <code>defaultValue</code> en lugar de <code>value</code> en los inputs. Un input con <code>defaultValue</code> solo responde a lo que escribe el usuario local, no a los cambios que llegan de otros clientes.</p>
<p>La solución: usa siempre inputs controlados con <code>value</code>, derivando ese valor del data store de WordPress con <code>useSelect</code>.</p>
<h3>Estado local con useState que desconecta del data store</h3>
<p>Otro error habitual: copiar el valor del data store a un <code>useState</code> local. En el momento que haces eso, tu componente se desconecta del estado compartido. Las actualizaciones de otros usuarios llegan al data store, pero tu componente sigue mostrando la copia local que hizo al montarse.</p>
<p>La regla: no copies datos compartidos a <code>useState</code>. Lee siempre directamente del data store.</p>
<h3>Bloques con efectos secundarios al insertarse</h3>
<p>Si tienes un bloque personalizado que abre un modal automáticamente cuando se inserta, ese modal se abrirá para todos los usuarios conectados, porque el contenido del bloque se sincroniza de inmediato.</p>
<p>La solución: en lugar de abrir el modal automáticamente, muestra un placeholder con un botón que abra el modal al hacer clic. Así el efecto es local y voluntario.</p>
<h2>Ejemplo práctico: Adaptando el plugin AI Share &amp; Summarize</h2>
<p>Vamos a verlo con un caso real, mi plugin <a href="https://es.wordpress.org/plugins/ai-share-summarize/" target="_blank" rel="nofollow noopener">AI Share &amp; Summarize</a>, que tiene una caja meta en la barra lateral del editor que permite ocultar los botones de compartir en entradas o páginas individuales. Es una casilla sencilla, pero esa caja meta clásica es suficiente para que WordPress desactive la colaboración en tiempo real en todos los tipos de contenido donde esté registrada. Pequeñita pero potente ¿no?</p>
<p>Vamos a ver el código actual, entender por qué falla y hacer las modificaciones necesarias paso a paso.</p>
<h3>El código actual y por qué causa el problema</h3>
<p>El archivo <code>includes/class-meta-box.php</code> del plugin hace tres cosas: registra el post meta con <code>register_post_meta()</code> y <code>show_in_rest =&gt; true</code> (esto está bien hecho), registra una caja meta clásica con <code>add_meta_box()</code> (esto causa el problema) y guarda los datos desde un gancho de <code>save_post</code> (necesario para el editor clásico, pero innecesario en el de bloques).</p>
<p>La buena noticia es que la parte más complicada ya está resuelta, porque el meta está correctamente registrado para la REST API. Solo necesitamos cuatro cambios.</p>
<h3>Paso 1: Añadir revisions_enabled al registro del meta</h3>
<p>La nota para desarrolladores de WordPress 7.0 recomienda que el post meta registrado para la colaboración tenga <code>revisions_enabled =&gt; true</code>. Esto hace que los cambios en el meta se registren en el historial de revisiones, algo que viene muy bien cuando hay varios editores trabajando a la vez.</p>
<p>En el método <code>ayudawp_register_meta()</code>, añade el parámetro:</p>
<pre>public function ayudawp_register_meta() {
    $post_types = get_post_types( array( 'public' =&gt; true ), 'names' );

    foreach ( $post_types as $post_type ) {
        register_post_meta( $post_type, self::META_KEY, array(
            'show_in_rest'      =&gt; true,
            'single'            =&gt; true,
            'type'              =&gt; 'boolean',
            'default'           =&gt; false,
            'revisions_enabled' =&gt; true, // Track changes in revision history.
            'auth_callback'     =&gt; function() {
                return current_user_can( 'edit_posts' );
            },
        ) );
    }
}</pre>
<h3>Paso 2: Registrar la meta box solo en el editor clásico</h3>
<p>Este es el cambio clave. Necesitamos que <code>add_meta_box()</code> solo se ejecute cuando estemos en el editor clásico. Cuando el editor de bloques esté activo, no registramos la meta box, y eso permite que la colaboración funcione.</p>
<p>Modifica el método <code>ayudawp_add_meta_box()</code>:</p>
<pre>public function ayudawp_add_meta_box() {
    $post_types = get_post_types( array( 'public' =&gt; true ), 'names' );

    foreach ( $post_types as $post_type ) {
        // Skip if the block editor is active for this post type.
        if ( function_exists( 'use_block_editor_for_post_type' )
            &amp;&amp; use_block_editor_for_post_type( $post_type )
        ) {
            continue;
        }

        add_meta_box(
            'ayudawp_aiss_exclude_metabox',
            __( 'AI Share &amp; Summarize', 'ai-share-summarize' ),
            array( $this, 'ayudawp_render_meta_box' ),
            $post_type,
            'side',
            'default'
        );
    }
}</pre>
<p>Con este cambio, los usuarios del editor clásico siguen teniendo la meta box de siempre. Los que usen el editor de bloques no la verán, y la colaboración no se desactivará.</p>
<h3>Paso 3: Crear un panel en la barra lateral del editor de bloques</h3>
<p>Ahora necesitamos que los usuarios del editor de bloques puedan seguir ocultando los botones en entradas individuales. Para eso toca crear un panel en la barra lateral del editor usando <code>PluginDocumentSettingPanel</code>.</p>
<p>Creamos (bueno, yo en este ejemplo, que el plugin es mío) un nuevo archivo <code>assets/js/editor-sidebar.js</code>:</p>
<pre>/**
 * AI Share &amp; Summarize - Block Editor Sidebar Panel
 *
 * Replaces the classic meta box in the block editor with a sidebar panel
 * compatible with WordPress 7.0 real-time collaboration.
 */
( function () {
    var el              = wp.element.createElement;
    var registerPlugin  = wp.plugins.registerPlugin;
    var PluginDocPanel  = wp.editor.PluginDocumentSettingPanel
                          || wp.editPost.PluginDocumentSettingPanel;
    var CheckboxControl = wp.components.CheckboxControl;
    var useSelect       = wp.data.useSelect;
    var useDispatch     = wp.data.useDispatch;
    var __              = wp.i18n.__;

    /**
     * Sidebar panel component
     *
     * Reads the exclusion meta value directly from the data store
     * using a controlled input. This keeps the panel in sync across
     * all connected editors during real-time collaboration.
     */
    function AissExcludePanel() {
        // Always read from the data store, never from local state.
        var isExcluded = useSelect( function ( select ) {
            var meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
            return meta &amp;&amp; meta._ayudawp_aiss_exclude ? true : false;
        }, [] );

        var editPost = useDispatch( 'core/editor' ).editPost;

        return el(
            PluginDocPanel,
            {
                name: 'aiss-exclude-panel',
                title: 'AI Share &amp; Summarize',
                icon: 'share',
            },
            el( CheckboxControl, {
                label: __( 'Hide share buttons on this content', 'ai-share-summarize' ),
                checked: isExcluded,
                onChange: function ( value ) {
                    editPost( { meta: { _ayudawp_aiss_exclude: value } } );
                },
                help: __(
                    'Check this box to prevent the share and AI buttons from appearing on this specific content.',
                    'ai-share-summarize'
                ),
            } )
        );
    }

    registerPlugin( 'aiss-exclude-panel', {
        render: AissExcludePanel,
        icon: 'share',
    } );
} )();</pre>
<p>Hay varios detalles importantes en este código. El valor del <code>checkbox</code> se lee siempre del data store con <code>useSelect</code>, nunca se copia a un <code>useState</code> local. El <code>input</code> usa <code>checked</code> (controlado), no <code>defaultChecked</code>. Y los cambios se escriben directamente al data store con <code>editPost</code>. Esos tres puntos son los que garantizan que el panel funcione correctamente cuando varios usuarios editan a la vez.</p>
<p>El archivo no necesita JSX ni siquiera proceso de <code>build</code>. Usa <code>wp.element.createElement</code> directamente, así que funciona tal cual.</p>
<h3>Paso 4: Encolar el script en el editor de bloques</h3>
<p>Ahora hay que decirle a WordPress que cargue ese script cuando se abra el editor de bloques. Añade el gancho en el constructor de la clase y el nuevo método:</p>
<p>En el constructor:</p>
<pre>public function __construct() {
    add_action( 'add_meta_boxes', array( $this, 'ayudawp_add_meta_box' ) );
    add_action( 'save_post', array( $this, 'ayudawp_save_meta_box' ), 10, 2 );
    add_action( 'init', array( $this, 'ayudawp_register_meta' ) );
    add_action( 'enqueue_block_editor_assets', array( $this, 'ayudawp_enqueue_editor_sidebar' ) );
}</pre>
<p>Y el nuevo método:</p>
<pre>public function ayudawp_enqueue_editor_sidebar() {
    wp_enqueue_script(
        'ayudawp-aiss-editor-sidebar',
        AYUDAWP_AISS_PLUGIN_URL . 'assets/js/editor-sidebar.js',
        array( 'wp-plugins', 'wp-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n' ),
        AYUDAWP_AISS_VERSION,
        true
    );
}</pre>
<p>El gancho <code>enqueue_block_editor_assets</code> se dispara solo cuando se carga el editor de bloques, así que el script no se carga en ningún otro sitio.</p>
<h3>El archivo completo modificado</h3>
<p>Para que no tengas que ir juntando piezas, abajo tienes el archivo <code>includes/class-meta-box.php</code> completo con todos los cambios aplicados, para que veas el resultado final por si te sirve para tu plugin. Puedes descargarlo directamente desde el enlace que he puesto al final del artículo.</p>
<h3>Qué pasa con los datos existentes</h3>
<p>Las entradas que ya tenían la casilla marcado con la caja meta clásica siguen funcionando con el panel nuevo sin tocar nada. Ambos sistemas leen y escriben en la misma clave de meta (<code>_ayudawp_aiss_exclude</code>). El editor clásico guarda el valor como string <code>'1'</code> y el editor de bloques lo guarda como booleano <code>true</code>, pero la función <code>ayudawp_is_post_excluded()</code> hace un <code>cast</code> a booleano con <code>(bool)</code>, así que las dos representaciones funcionan bien. No hay que migrar datos.</p>
<h3>Probar la colaboración</h3>
<p>Con los cambios hechos, los pasos para comprobar que todo funciona:</p>
<ol>
<li>Asegúrate de tener WordPress 7.0 instalado y la colaboración activada en los ajustes de escritura</li>
<li>Abre una entrada en el editor de bloques con dos usuarios distintos. Si todo va bien verás el cursor del otro usuario en el editor y podréis editar a la vez sin que salte el aviso</li>
<li>Revisa que el panel «AI Share &amp; Summarize» (o el tuyo, claro) aparece en la barra lateral de la pestaña «Entrada» (no confundir con la pestaña «Bloque»)</li>
<li>Marca y desmarca la casilla desde ambas sesiones y comprueba que el cambio se refleja en la otra</li>
</ol>
<h2>Resumen de los cambios para desarrolladores</h2>
<p>Para que quede claro qué archivos se tocan y qué cambia en cada uno:</p>
<p>En <code>includes/class-meta-box.php</code> se hacen cuatro modificaciones: se añade <code>revisions_enabled =&gt; true</code> al <code>register_post_meta()</code>, se condiciona <code>add_meta_box()</code> para que solo se registre en el editor clásico, se añade el gancho <code>enqueue_block_editor_assets</code> en el constructor, y se añade el método <code>ayudawp_enqueue_editor_sidebar()</code> para encolar el script.</p>
<p>Se crea un archivo nuevo, <code>assets/js/editor-sidebar.js</code>, con el panel del sidebar para el editor de bloques.</p>
<p>No se toca nada más. El handler de <code>save_post</code> se mantiene porque sigue siendo necesario para el editor clásico. La función <code>ayudawp_is_post_excluded()</code> también se mantiene porque lee de la misma clave de meta sea cual sea el editor que la haya guardado.</p>
<h2>Resumen de comprobación de compatibilidad de RTC para plugins</h2>
<p>Si mantienes plugins de WordPress y quieres que sean compatibles con la colaboración en tiempo real de WordPress 7.0, repasa estos puntos.</p>
<h3>Cajas meta</h3>
<p>Comprueba si tu plugin registra meta boxes con <code>add_meta_box()</code>. Si lo hace, tienes dos opciones: eliminar la meta box y sustituirla por un panel en el sidebar del editor de bloques, o mantener la meta box solo para el editor clásico y crear el panel en paralelo (como en el ejemplo de arriba). Para cualquiera de las dos opciones, el post meta tiene que estar registrado con <code>register_post_meta()</code> y <code>show_in_rest =&gt; true</code>.</p>
<h3>Componentes JavaScript</h3>
<p>Revisa que todos tus componentes que leen datos compartidos (meta, atributos de bloques) los lean directamente del data store con <code>useSelect</code>. No copies esos valores a <code>useState</code>. Usa inputs controlados (<code>value</code> y <code>checked</code>), no inputs no controlados (<code>defaultValue</code> y <code>defaultChecked</code>).</p>
<h3>Efectos secundarios</h3>
<p>Si alguno de tus bloques ejecuta código automáticamente al insertarse (abrir un modal, hacer una petición HTTP, disparar un evento), ten en cuenta que ese efecto se ejecutará en todas las sesiones conectadas. Convierte esos disparadores automáticos en acciones manuales para que solo afecten al usuario que los inicia.</p>
<h3>Revisiones</h3>
<p>Añade <code>revisions_enabled =&gt; true</code> a los post meta que modifiques desde el editor. Así el historial de revisiones recoge los cambios en el meta y no solo en el contenido de la entrada.</p>
<h2>Cómo desactivar la colaboración desde un plugin</h2>
<p>Puede que tengas un plugin donde la colaboración cause problemas que no puedes resolver de momento, o que quieras desactivarla durante un despliegue gradual. Hay una forma limpia de hacerlo sin tocar nada de WordPress.</p>
<p>El filtro <code>sync.providers</code> controla qué proveedores de sincronización están activos. Si devuelves un array vacío la colaboración se desactiva:</p>
<pre>import { addFilter } from '@wordpress/hooks';

addFilter( 'sync.providers', 'my-plugin/disable-collab', () =&gt; [] );</pre>
<p>Esto es temporal y limpio. No afecta a ninguna otra funcionalidad del editor.</p>
<h2>Documentación y recursos</h2>
<p>Los enlaces a la documentación oficial para profundizar en todo lo que hemos visto:</p>
<ul>
<li><a href="https://make.wordpress.org/core/2026/03/10/real-time-collaboration-in-the-block-editor/" target="_blank" rel="nofollow noopener">Nota oficial de desarrollo de la colaboración en tiempo real</a> – La referencia principal. Cubre las meta boxes, el filtro sync.providers y los problemas comunes para plugins.</li>
<li><a href="https://make.wordpress.org/test/2026/03/11/its-time-to-test-real-time-collaboration/" target="_blank" rel="nofollow noopener">Guía para probar la colaboración en tiempo real</a> – Escenarios de prueba detallados y cómo configurar tu entorno.</li>
<li><a href="https://make.wordpress.org/core/2025/12/16/real-time-collaboration-early-user-feedback/" target="_blank" rel="nofollow noopener">Feedback temprano de usuarios de VIP</a> – Lecciones aprendidas de los primeros usuarios en producción.</li>
<li><a href="https://github.com/Automattic/vip-real-time-collaboration/blob/trunk/docs/COMMON_ISSUES.md" target="_blank" rel="nofollow noopener">COMMON_ISSUES.md del repositorio de VIP</a> – Ejemplos detallados de código con los anti-patrones más frecuentes y sus correcciones.</li>
<li><a href="https://developer.wordpress.org/block-editor/how-to-guides/metabox/" target="_blank" rel="nofollow noopener">Guía de migración de meta boxes</a> en el Block Editor Handbook.</li>
<li><a href="https://github.com/WordPress/gutenberg/issues/52593" target="_blank" rel="nofollow noopener">Issue de seguimiento #52593</a> en el repositorio de Gutenberg.</li>
<li><a href="https://ayudawp.com/wp-content/uploads/2026/04/class-meta-box.php_.zip" rel="nofollow ">Clase meta box</a> de Ai Share &amp; Summarize usada en el ejemplo.</li>
</ul>
<p>Si te ha saltado el aviso de plugins no compatibles y has conseguido identificar cuál era el culpable (o si eres desarrollador y has adaptado tu plugin), cuéntamelo en los comentarios.</p>
<p>Saber qué plugins dan problemas con la colaboración en tiempo real nos viene bien a todos, y si tienes dudas con la migración de cajas meta también te puedo echar una mano por ahí.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/plugins-incompatibles-colaboracion-tiempo-real/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Ya puedes crear bloques de WordPress solo con PHP, sin JavaScript, así se hace con la nueva API de WordPress 7.x</title>
		<link>https://ayudawp.com/crear-bloques-wordpress-php/</link>
					<comments>https://ayudawp.com/crear-bloques-wordpress-php/#respond</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Wed, 15 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Programación en WordPress]]></category>
		<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[AI Share & Summarize]]></category>
		<category><![CDATA[Avanzado]]></category>
		<category><![CDATA[Block Bindings]]></category>
		<category><![CDATA[Bloques]]></category>
		<category><![CDATA[Experto]]></category>
		<category><![CDATA[PHP]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158712</guid>

					<description><![CDATA[Si llevas años desarrollando con WordPress y en su día dejaste de crear bloques porque lo de montar un entorno con Node.js, React y Webpack te parecía demasiado para lo que necesitabas, tengo una noticia que te va a gustar mucho: WordPress 7.0 permite crear bloques personalizados usando solo PHP. Ni una línea de JavaScript.]]></description>
										<content:encoded><![CDATA[<p>Si llevas años desarrollando con WordPress y en su día dejaste de crear bloques porque lo de montar un entorno con Node.js, React y Webpack te parecía demasiado para lo que necesitabas, tengo una noticia que te va a gustar mucho: <strong>WordPress 7.0 permite crear bloques personalizados usando solo PHP</strong>. Ni una línea de JavaScript. Ni un <code>npm install</code>. Nada de compilar.</p>
<p>La funcionalidad se llama <strong>PHP-only block registration</strong> y llega gracias al flag <code>autoRegister</code> en la función <code>register_block_type()</code>. Registras tu bloque con PHP, defines los atributos, escribes el callback de renderizado y WordPress se encarga del resto: el bloque aparece en el insertador del editor y genera automáticamente los controles en el panel lateral para que el usuario pueda configurarlo.</p>
<p>¿Es un sustituto de los bloques JavaScript completos? Pues no, y tampoco pretende serlo.</p>
<p>Está pensado para <strong>bloques que solo necesitan renderizado del lado del servidor, los típicos que muestran datos dinámicos</strong> (últimas entradas, cajas de autor, alertas, widgets de datos) y que <strong>no requieren edición en tiempo real dentro del editor</strong>.</p>
<p>Para estos casos, que son la mayoría de los que necesita un desarrollador PHP en su día a día, <strong>es una solución limpia y sin complicaciones</strong>.</p>
<p>En esta guía tienes todo lo necesario para <strong>empezar a crear tus propios bloques <code>PHP-only</code></strong>, desde la referencia técnica completa, explicada como yo la he entendido, hasta <strong>tres ejemplos prácticos que van de menos a más</strong>:</p>
<ol>
<li>Un bloque creado desde cero</li>
<li>Migración de un shortcode clásico a bloque</li>
<li>Integración real de un bloque en un plugin ya publicado en WordPress.org.</li>
</ol>
<blockquote><p><strong>Requisitos para seguir este tutorial:</strong> Todos los códigos de esta guía necesitan que tengas instalado ya WordPress 7.0 o superior, disponible desde el 9 de abril de 2026. Si quieres probarlo antes de esa fecha puedes instalar la última beta de WordPress 7.0 con el plugin <a href="https://es.wordpress.org/plugins/wordpress-beta-tester/" target="_blank" rel="nofollow noopener">WordPress Beta Tester</a> o el <a href="https://es.wordpress.org/plugins/gutenberg/" target="_blank" rel="nofollow noopener">plugin Gutenberg</a> en un sitio de pruebas. En versiones anteriores de WordPress el flag <code>autoRegister</code> (a continuación lo explico) se ignora y los bloques no aparecerán en el editor.</p></blockquote>
<h2>Cómo funciona <code>autoRegister</code></h2>
<p>Lo que tienes a continuación <strong>es la referencia técnica que necesitas como desarrollador PHP para trabajar con esta API</strong>. Lo he preparado para que no tengas que ir a buscar en la documentación en inglés cada vez que quieras consultar algo, y por si te sirve mi manera de explicar las cosas.</p>
<h3>La estructura básica</h3>
<p>Un bloque <code>PHP-only</code> se registra con <code>register_block_type()</code> en el hook <code>init</code>, como cualquier otro bloque, pero con dos requisitos obligatorios:</p>
<ul>
<li>El flag <code>autoRegister</code> a <code>true</code> dentro de <code>supports</code></li>
<li>Un <code>render_callback</code> que devuelva el HTML del bloque</li>
</ul>
<p><strong>Demostración</strong>, como diría el Malaguita…</p>
<pre>add_action( 'init', 'ayudawp_register_my_block' );

function ayudawp_register_my_block() {
    register_block_type(
        'mi-plugin/mi-bloque',
        array(
            'title'           =&gt; 'Mi bloque',
            'icon'            =&gt; 'admin-generic',
            'category'        =&gt; 'widgets',
            'description'     =&gt; 'Descripción del bloque.',
            'keywords'        =&gt; array( 'ejemplo', 'php' ),
            'attributes'      =&gt; array(
                // Aquí van los atributos
            ),
            'render_callback' =&gt; 'ayudawp_render_my_block',
            'supports'        =&gt; array(
                'autoRegister' =&gt; true,
            ),
        )
    );
}

function ayudawp_render_my_block( $attributes ) {
    $wrapper = get_block_wrapper_attributes();
    return sprintf( '&lt;div %s&gt;Contenido del bloque&lt;/div&gt;', $wrapper );
}</pre>
<p>Cuando WordPress detecta el flag <code>autoRegister</code> registra automáticamente el bloque en el editor del lado del cliente a través de un global JavaScript (<code>autoRegisterBlocks</code>) y utiliza <code>ServerSideRender</code> para la previsualización.</p>
<p>O sea, cada vez que el usuario cambia un atributo en el panel lateral el editor hace una llamada a la API REST de WordPress, ejecuta tu <code>render_callback</code> en PHP y muestra el resultado. Sencillo, limpio, eficaz, como es PHP.</p>
<h3>Tipos de atributos y controles automáticos</h3>
<p>La gracia de <code>autoRegister</code> es que WordPress genera automáticamente los controles del Inspector (panel lateral del editor) a partir de los atributos que definas. Pero no todos los tipos generan controles, solo los que WordPress sabe representar como campo de formulario.</p>
<p>Estos son los tipos admitidos y el control que genera cada uno:</p>
<table>
<thead>
<tr>
<th>Tipo de atributo</th>
<th>Control generado</th>
<th>Ejemplo de uso</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>string</code></td>
<td><code>TextControl</code> (campo de texto)</td>
<td>Títulos, URLs, textos libres</td>
</tr>
<tr>
<td><code>string</code> con <code>enum</code></td>
<td><code>SelectControl</code> (desplegable)</td>
<td>Elegir entre opciones predefinidas</td>
</tr>
<tr>
<td><code>integer</code></td>
<td><code>NumberControl</code> (campo numérico)</td>
<td>Cantidad de elementos, anchos</td>
</tr>
<tr>
<td><code>boolean</code></td>
<td><code>ToggleControl</code> (interruptor)</td>
<td>Activar/desactivar funcionalidades</td>
</tr>
</tbody>
</table>
<p>Los atributos que no encajen en estos tipos (arrays, objetos) o los que tengan el rol <code>local</code> no generan ningún control en el panel.</p>
<p>Un detalle importante es que <strong>definas siempre un valor <code>default</code> para cada atributo</strong>. Si no lo haces el bloque puede no renderizar nada la primera vez que lo insertes, porque los atributos llegarán vacíos al <code>callback</code>.</p>
<p>Así se definen los atributos en la práctica, cubriendo los cuatro tipos:</p>
<pre>'attributes' =&gt; array(
    // String → TextControl
    'titulo' =&gt; array(
        'type'    =&gt; 'string',
        'default' =&gt; 'Título por defecto',
    ),
    // String con enum → SelectControl
    'tamano' =&gt; array(
        'type'    =&gt; 'string',
        'enum'    =&gt; array( 'pequeno', 'mediano', 'grande' ),
        'default' =&gt; 'mediano',
    ),
    // Integer → NumberControl
    'cantidad' =&gt; array(
        'type'    =&gt; 'integer',
        'default' =&gt; 5,
    ),
    // Boolean → ToggleControl
    'mostrar_fecha' =&gt; array(
        'type'    =&gt; 'boolean',
        'default' =&gt; true,
    ),
),</pre>
<h3>Los <code>supports</code> nativos funcionan igual</h3>
<p>Además de <code>autoRegister</code>, puedes activar los mismos <code>supports</code> que en cualquier bloque (color, espaciado, tipografía, bordes). <strong>WordPress aplicará los estilos heredados del tema activo</strong> sin que tengas que escribir CSS propio.</p>
<pre>'supports' =&gt; array(
    'autoRegister' =&gt; true,
    'color'        =&gt; array(
        'background' =&gt; true,
        'text'       =&gt; true,
    ),
    'spacing'      =&gt; array(
        'margin'  =&gt; true,
        'padding' =&gt; true,
    ),
    'typography'   =&gt; array(
        'fontSize' =&gt; true,
    ),
),</pre>
<p>Cuando activas estos <code>supports</code> WordPress añade los controles correspondientes en el panel lateral (selector de color, controles de márgenes, etc.) y aplica las clases y estilos inline automáticamente. Para que funcionen correctamente en el HTML de salida, usa siempre <code>get_block_wrapper_attributes()</code> en tu <code>callback</code> de renderizado.</p>
<h3>Cargar CSS y JavaScript</h3>
<p>Si tu bloque necesita estilos propios o algún script, lo habitual es registrarlos en el hook <code>init</code> y con <code>enqueue</code> desde el <code>callback</code>. De esta forma solo se cargan en las páginas donde esté disponible el bloque.</p>
<pre>add_action( 'init', 'ayudawp_register_block_assets' );

function ayudawp_register_block_assets() {
    wp_register_style(
        'ayudawp-mi-bloque-style',
        plugins_url( 'assets/css/mi-bloque.css', __FILE__ ),
        array(),
        '1.0.0'
    );
}

function ayudawp_render_my_block( $attributes ) {
    // Solo se encola cuando se renderiza el bloque
    wp_enqueue_style( 'ayudawp-mi-bloque-style' );

    $wrapper = get_block_wrapper_attributes();
    return sprintf( '&lt;div %s&gt;...&lt;/div&gt;', $wrapper );
}</pre>
<h2>Ejemplo 1: Bloque de caja de información autor (desde cero)</h2>
<p>Vamos con el primer ejemplo práctico, que es un bloque muy práctico que muestra la información de un autor de WordPress (avatar, nombre, biografía y enlace a su web). Lo vamos a crear como <a href="https://ayudawp.com/que-son-los-mu-plugins-de-wordpress/" target="_blank" rel="noopener ugc">mu-plugin</a> para que sea fácil de probar.</p>
<p>Este bloque tiene un detalle interesante, y es que el selector de autor se genera dinámicamente a partir de los usuarios de WordPress mediante un <code>enum</code> construido con <code>get_users()</code>. Es un buen ejemplo de <strong>cómo aprovechar toda la potencia de PHP dentro de la definición del bloque</strong>.</p>
<p>Crea el archivo dentro de <code>/wp-content/mu-plugins/ayudawp-author-box-block.php</code> con el siguiente contenido:</p>
<pre>&lt;?php
/**
* Plugin Name: Bloque de caja de autor (PHP)
* Plugin URI: https://servicios.ayudawp.com
* Description: Bloque de caja de autor registrado solo con PHP. Requiere WordPress 7.0 o superior o la última versión del plugin Gutenberg.
* Version: 1.0.0
* Author: Fernando Tellado
* Author URI: https://ayudawp.com
* License: GPL-2.0-or-later
* Requires PHP: 7.4
*/

// Prevent direct file access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action( 'init', 'ayudawp_register_author_box_block' );

/**
 * Register the author box PHP-only block.
 *
 * Generates the user list dynamically for the author selector.
 */
function ayudawp_register_author_box_block() {

    // Build the list of users for the selector
    $users    = get_users( array( 'fields' =&gt; array( 'ID', 'display_name' ) ) );
    $user_ids = array();

    foreach ( $users as $user ) {
        $user_ids[] = (string) $user-&gt;ID;
    }

    // If no users, fallback to avoid empty enum
    if ( empty( $user_ids ) ) {
        $user_ids = array( '1' );
    }

    register_block_type(
        'ayudawp/author-box',
        array(
            'title'           =&gt; __( 'Caja de autor', 'ayudawp' ),
            'icon'            =&gt; 'admin-users',
            'category'        =&gt; 'theme',
            'description'     =&gt; __( 'Muestra información del autor: avatar, nombre, biografía y sitio web.', 'ayudawp' ),
            'keywords'        =&gt; array( 'author', 'bio', 'avatar' ),
            'attributes'      =&gt; array(
                'user_id'      =&gt; array(
                    'type'    =&gt; 'string',
                    'enum'    =&gt; $user_ids,
                    'default' =&gt; $user_ids[0],
                ),
                'avatar_size'  =&gt; array(
                    'type'    =&gt; 'integer',
                    'default' =&gt; 96,
                ),
                'show_bio'     =&gt; array(
                    'type'    =&gt; 'boolean',
                    'default' =&gt; true,
                ),
                'show_website' =&gt; array(
                    'type'    =&gt; 'boolean',
                    'default' =&gt; true,
                ),
            ),
            'render_callback' =&gt; 'ayudawp_render_author_box_block',
            'supports'        =&gt; array(
                'autoRegister' =&gt; true,
                'color'        =&gt; array(
                    'background' =&gt; true,
                    'text'       =&gt; true,
                ),
                'spacing'      =&gt; array(
                    'padding' =&gt; true,
                    'margin'  =&gt; true,
                ),
            ),
        )
    );
}

/**
 * Render callback for the author box block.
 *
 * @param array $attributes Block attributes.
 * @return string Block HTML output.
 */
function ayudawp_render_author_box_block( $attributes ) {

    $user_id      = absint( $attributes['user_id'] ?? 1 );
    $avatar_size  = absint( $attributes['avatar_size'] ?? 96 );
    $show_bio     = (bool) ( $attributes['show_bio'] ?? true );
    $show_website = (bool) ( $attributes['show_website'] ?? true );

    $user = get_userdata( $user_id );

    if ( ! $user ) {
        return '';
    }

    $wrapper = get_block_wrapper_attributes(
        array(
            'style' =&gt; 'display:flex;gap:1.5em;align-items:flex-start;',
        )
    );

    $output  = sprintf( '&lt;div %s&gt;', $wrapper );
    $output .= get_avatar( $user_id, $avatar_size );
    $output .= '&lt;div&gt;';
    $output .= sprintf(
        '&lt;strong style="font-size:1.2em;"&gt;%s&lt;/strong&gt;',
        esc_html( $user-&gt;display_name )
    );

    if ( $show_bio &amp;&amp; $user-&gt;description ) {
        $output .= sprintf(
            '&lt;p style="margin-top:0.5em;"&gt;%s&lt;/p&gt;',
            esc_html( $user-&gt;description )
        );
    }

    if ( $show_website &amp;&amp; $user-&gt;user_url ) {
        $output .= sprintf(
            '&lt;p&gt;&lt;a href="%s" target="_blank" rel="noopener noreferrer"&gt;%s&lt;/a&gt;&lt;/p&gt;',
            esc_url( $user-&gt;user_url ),
            esc_html( $user-&gt;user_url )
        );
    }

    $output .= '&lt;/div&gt;&lt;/div&gt;';

    return $output;
}</pre>
<p>Una vez guardado el archivo ve al editor de WordPress, busca «Caja de autor» en el insertador de bloques y deberías tenerlo disponible para insertarlo, hazlo.</p>
<p><a href="https://ayudawp.com/?attachment_id=158719" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158719 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-solo-php-wordpress-7-1200x766.jpg" alt="insertar bloque solo php wordpress 7" width="1200" height="766" srcset="https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-solo-php-wordpress-7-1200x766.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-solo-php-wordpress-7-768x490.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-solo-php-wordpress-7-1536x980.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-solo-php-wordpress-7.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>Con el bloque ya insertado y seleccionado, <strong>en el panel lateral verás un desplegable con los IDs de los usuarios, un campo numérico para el tamaño del avatar y dos interruptores para mostrar u ocultar la biografía y el enlace web</strong>.</p>
<p><a href="https://ayudawp.com/?attachment_id=158720" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158720 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-wordpress-7-1200x766.jpg" alt="bloque solo php wordpress 7" width="1200" height="766" srcset="https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-wordpress-7-1200x766.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-wordpress-7-768x490.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-wordpress-7-1536x980.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-wordpress-7.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>Además, si activas los <code>supports</code> de color y espaciado, podrás personalizar los colores de fondo y texto, y los márgenes y relleno directamente desde el editor.</p>
<p><strong>Un apunte importante sobre el selector de usuarios</strong> es que el control <code>SelectControl</code> que genera WordPress muestra los valores del <code>enum</code> tal cual, en este caso los IDs numéricos de los usuarios. No es lo más elegante visualmente (lo ideal sería mostrar el nombre), pero es la limitación actual de la generación automática de controles.</p>
<p>Para un bloque de producción con un selector más refinado ya necesitarías JavaScript, pero para un uso interno o un tema personalizado funciona de sobra, y se ve perfecto.</p>
<p>Si quieres profundizar en otras formas de mostrar una caja de información del autor en WordPress, por si no te termina de convencer el uso del bloque, y te ha entrado la curiosidad y ganas de usar algo así, echa un vistazo a <a href="https://ayudawp.com/informacion-autor-sin-plugins/" target="_blank" rel="noopener ugc">esta guía sobre cómo mostrar la información del autor sin plugins</a>.</p>
<h2>Ejemplo 2: Migrar el shortcode de entradas recientes a bloque</h2>
<p>Ahora empieza la parte más interesante del tutorial, pues para empezar a darle caña a esto <strong>vamos a tomar un shortcode que ya funciona y convertirlo en un bloque <code>PHP-only</code></strong>.</p>
<p>Usaremos como base el <a href="https://ayudawp.com/entradas-recientes-shortcode/" target="_blank" rel="noopener ugc">shortcode de entradas recientes</a> que publiqué hace un tiempo, y <strong>lo vamos a mejorar de paso con un par de atributos nuevos</strong>.</p>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">Pero la mejora real no son los atributos extra, sino dónde puedes usar este bloque.</p>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">Como shortcode estabas limitado a pegarlo dentro del contenido de una entrada o página, como bloque <code>PHP-only</code> puedes insertarlo en cualquier plantilla del editor de sitio (la página de inicio, el pie de página, la plantilla de entradas individuales, la 404, etc.) <strong>sin depender de plugins ni tocar los archivos del tema</strong>.</p>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">El bloque nativo de últimas entradas de WordPress hace algo parecido, pero no te deja ordenar por número de comentarios, ni mostrar entradas aleatorias, ni activar el extracto con un interruptor, este sí.</p>
<h3>El shortcode original</h3>
<p>El shortcode <code>[entradas_recientes]</code> usa <code>get_posts()</code> para mostrar una lista de entradas filtrable por categoría, con parámetros de orden y cantidad. Así era el código:</p>
<pre>function ayudawp_recent_posts_shortcode( $atts, $content = null ) {
    global $post;
    extract( shortcode_atts( array(
        'cat'     =&gt; '',
        'num'     =&gt; '5',
        'order'   =&gt; 'DESC',
        'orderby' =&gt; 'post_date',
    ), $atts ) );
    $args = array(
        'cat'            =&gt; $cat,
        'posts_per_page' =&gt; $num,
        'order'          =&gt; $order,
        'orderby'        =&gt; $orderby,
    );
    $output = '';
    $posts  = get_posts( $args );
    foreach ( $posts as $post ) {
        setup_postdata( $post );
        $output .= '&lt;li&gt;&lt;a href="' . get_the_permalink() . '"&gt;' . get_the_title() . '&lt;/a&gt;&lt;/li&gt;';
    }
    wp_reset_postdata();
    return '&lt;ul&gt;' . $output . '&lt;/ul&gt;';
}
add_shortcode( 'entradas_recientes', 'ayudawp_recent_posts_shortcode' );</pre>
<h3>Qué cambia al convertirlo en bloque</h3>
<p>Los parámetros del shortcode se convierten en atributos del bloque, y cada uno se mapea al tipo que mejor encaje para generar un control automático en el editor:</p>
<table>
<thead>
<tr>
<th>Parámetro del shortcode</th>
<th>Atributo del bloque</th>
<th>Tipo</th>
<th>Control generado</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>num</code></td>
<td><code>num</code></td>
<td><code>integer</code></td>
<td>Campo numérico</td>
</tr>
<tr>
<td><code>cat</code></td>
<td><code>cat</code></td>
<td><code>string</code></td>
<td>Campo de texto (ID de categoría)</td>
</tr>
<tr>
<td><code>order</code></td>
<td><code>order</code></td>
<td><code>string</code> + <code>enum</code></td>
<td>Desplegable (ASC/DESC)</td>
</tr>
<tr>
<td><code>orderby</code></td>
<td><code>orderby</code></td>
<td><code>string</code> + <code>enum</code></td>
<td>Desplegable</td>
</tr>
<tr>
<td><em>(nuevo)</em></td>
<td><code>show_date</code></td>
<td><code>boolean</code></td>
<td>Interruptor</td>
</tr>
<tr>
<td><em>(nuevo)</em></td>
<td><code>show_excerpt</code></td>
<td><code>boolean</code></td>
<td>Interruptor</td>
</tr>
</tbody>
</table>
<p>Los dos atributos nuevos (<code>show_date</code> y <code>show_excerpt</code>) son de tipo <code>boolean</code>, así que generarán un interruptor cada uno en el panel lateral. De esta forma, en un solo ejemplo ves los cuatro tipos de control que genera <code>autoRegister</code>.</p>
<h3>El bloque completo</h3>
<p>Crea el archivo <code>wp-content/mu-plugins/ayudawp-recent-posts-block.php</code>:</p>
<pre>&lt;?php
/**
* Plugin Name: Bloque de entradas recientes
* Description: Bloque PHP-only de entradas recientes. Migración del shortcode [entradas_recientes]. Requiere WordPress 7.0 o superior, o el plugin Gutenberg 14.0+ en versiones anteriores.
* Plugin URI: https://servicios.ayudawp.com
* Version: 1.0.0
* Author: Fernando Tellado
* Author URI: https://ayudawp.com
* License: GPL-2.0-or-later
* Requires PHP: 7.4
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action( 'init', 'ayudawp_register_recent_posts_block' );

/**
 * Register the recent posts PHP-only block.
 */
function ayudawp_register_recent_posts_block() {
    register_block_type(
        'ayudawp/recent-posts',
        array(
            'title'           =&gt; __( 'Entradas recientes (PHP)', 'ayudawp' ),
            'icon'            =&gt; 'list-view',
            'category'        =&gt; 'theme',
            'description'     =&gt; __( 'Muestra una lista personalizable de entradas recientes.', 'ayudawp' ),
            'keywords'        =&gt; array( 'posts', 'recent', 'latest', 'entries' ),
            'attributes'      =&gt; array(
                'num'          =&gt; array(
                    'type'    =&gt; 'integer',
                    'default' =&gt; 5,
                ),
                'cat'          =&gt; array(
                    'type'    =&gt; 'string',
                    'default' =&gt; '',
                ),
                'order'        =&gt; array(
                    'type'    =&gt; 'string',
                    'enum'    =&gt; array( 'DESC', 'ASC' ),
                    'default' =&gt; 'DESC',
                ),
                'orderby'      =&gt; array(
                    'type'    =&gt; 'string',
                    'enum'    =&gt; array( 'post_date', 'title', 'modified', 'rand', 'comment_count' ),
                    'default' =&gt; 'post_date',
                ),
                'show_date'    =&gt; array(
                    'type'    =&gt; 'boolean',
                    'default' =&gt; false,
                ),
                'show_excerpt' =&gt; array(
                    'type'    =&gt; 'boolean',
                    'default' =&gt; false,
                ),
            ),
            'render_callback' =&gt; 'ayudawp_render_recent_posts_block',
            'supports'        =&gt; array(
                'autoRegister' =&gt; true,
                'color'        =&gt; array(
                    'text' =&gt; true,
                    'link' =&gt; true,
                ),
                'spacing'      =&gt; array(
                    'margin'  =&gt; true,
                    'padding' =&gt; true,
                ),
                'typography'   =&gt; array(
                    'fontSize' =&gt; true,
                ),
            ),
        )
    );
}

/**
 * Render callback for the recent posts block.
 *
 * @param array $attributes Block attributes.
 * @return string Block HTML output.
 */
function ayudawp_render_recent_posts_block( $attributes ) {

    $num          = absint( $attributes['num'] ?? 5 );
    $cat          = sanitize_text_field( $attributes['cat'] ?? '' );
    $order        = in_array( $attributes['order'] ?? 'DESC', array( 'ASC', 'DESC' ), true )
                    ? $attributes['order']
                    : 'DESC';
    $orderby      = sanitize_key( $attributes['orderby'] ?? 'post_date' );
    $show_date    = (bool) ( $attributes['show_date'] ?? false );
    $show_excerpt = (bool) ( $attributes['show_excerpt'] ?? false );

    $args = array(
        'posts_per_page' =&gt; $num,
        'order'          =&gt; $order,
        'orderby'        =&gt; $orderby,
        'post_status'    =&gt; 'publish',
    );

    if ( ! empty( $cat ) ) {
        $args['cat'] = absint( $cat );
    }

    $posts = get_posts( $args );

    if ( empty( $posts ) ) {
        return '';
    }

    $wrapper = get_block_wrapper_attributes();
    $output  = sprintf( '&lt;div %s&gt;&lt;ul style="list-style:none;padding:0;"&gt;', $wrapper );

    foreach ( $posts as $post ) {
        $output .= '&lt;li style="margin-bottom:0.75em;"&gt;';
        $output .= sprintf(
            '&lt;a href="%s"&gt;%s&lt;/a&gt;',
            esc_url( get_permalink( $post ) ),
            esc_html( get_the_title( $post ) )
        );

        if ( $show_date ) {
            $output .= sprintf(
                ' &lt;span style="color:#666;font-size:0.85em;"&gt;— %s&lt;/span&gt;',
                esc_html( get_the_date( '', $post ) )
            );
        }

        if ( $show_excerpt &amp;&amp; $post-&gt;post_excerpt ) {
            $output .= sprintf(
                '&lt;br&gt;&lt;span style="font-size:0.9em;color:#555;"&gt;%s&lt;/span&gt;',
                esc_html( wp_trim_words( $post-&gt;post_excerpt, 20 ) )
            );
        }

        $output .= '&lt;/li&gt;';
    }

    $output .= '&lt;/ul&gt;&lt;/div&gt;';

    return $output;
}

/*
 * Opcional: mantiene funcional el shortcode por retro-compatibilidad.
 * Los usuarios que ya tengan [entradas_recientes] en su contenido
 * pueden seguir usándolo mientras migran al bloque.
 */
add_shortcode( 'entradas_recientes', 'ayudawp_recent_posts_shortcode_compat' );

/**
 * Shortcode compatibility wrapper.
 *
 * @param array  $atts    Shortcode attributes.
 * @param string $content Shortcode content (unused).
 * @return string HTML output.
 */
function ayudawp_recent_posts_shortcode_compat( $atts, $content = null ) {
    $atts = shortcode_atts(
        array(
            'cat'     =&gt; '',
            'num'     =&gt; '5',
            'order'   =&gt; 'DESC',
            'orderby' =&gt; 'post_date',
        ),
        $atts,
        'entradas_recientes'
    );

    return ayudawp_render_recent_posts_block(
        array(
            'num'          =&gt; (int) $atts['num'],
            'cat'          =&gt; $atts['cat'],
            'order'        =&gt; $atts['order'],
            'orderby'      =&gt; $atts['orderby'],
            'show_date'    =&gt; false,
            'show_excerpt' =&gt; false,
        )
    );
}</pre>

<a href="https://ayudawp.com/crear-bloques-wordpress-php/insertar-bloque-php-migrado-de-shortcode-wordpress-7/" rel="nofollow"><img width="1200" height="766" src="https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-migrado-de-shortcode-wordpress-7-1200x766.jpg" class="attachment-medium size-medium" alt="insertar bloque php migrado de shortcode wordpress 7" srcset="https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-migrado-de-shortcode-wordpress-7-1200x766.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-migrado-de-shortcode-wordpress-7-768x490.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-migrado-de-shortcode-wordpress-7-1536x980.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-migrado-de-shortcode-wordpress-7.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>
<a href="https://ayudawp.com/crear-bloques-wordpress-php/bloque-solo-php-de-entradas-recientes-migrado-de-shortcode-en-wordpress-7/" rel="nofollow"><img width="1200" height="835" src="https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-de-entradas-recientes-migrado-de-shortcode-en-wordpress-7-1200x835.jpg" class="attachment-medium size-medium" alt="bloque solo php de entradas recientes migrado de shortcode en wordpress 7" srcset="https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-de-entradas-recientes-migrado-de-shortcode-en-wordpress-7-1200x835.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-de-entradas-recientes-migrado-de-shortcode-en-wordpress-7-768x534.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-de-entradas-recientes-migrado-de-shortcode-en-wordpress-7-1536x1069.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-de-entradas-recientes-migrado-de-shortcode-en-wordpress-7-260x180.jpg 260w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-solo-php-de-entradas-recientes-migrado-de-shortcode-en-wordpress-7.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>
<a href="https://ayudawp.com/crear-bloques-wordpress-php/bloque-php-wordpress-7-entradas-relacionadas-mostrado-en-web/" rel="nofollow"><img width="1200" height="835" src="https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-wordpress-7-entradas-relacionadas-mostrado-en-web-1200x835.jpg" class="attachment-medium size-medium" alt="bloque php wordpress 7 entradas relacionadas mostrado en web" srcset="https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-wordpress-7-entradas-relacionadas-mostrado-en-web-1200x835.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-wordpress-7-entradas-relacionadas-mostrado-en-web-768x534.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-wordpress-7-entradas-relacionadas-mostrado-en-web-1536x1069.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-wordpress-7-entradas-relacionadas-mostrado-en-web-260x180.jpg 260w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-wordpress-7-entradas-relacionadas-mostrado-en-web.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>

<h3>Qué hemos ganado con la migración</h3>
<p>Fíjate en lo que ha cambiado, que es mucho:</p>
<ul>
<li>El usuario ya no necesita recordar la sintaxis <code>[entradas_recientes num="5" cat="12"]</code>. Inserta el bloque desde el insertador, configura todo desde el panel lateral con controles visuales y ve una previsualización en tiempo real de las entradas seleccionadas.</li>
<li>El <code>callback</code> de renderizado es prácticamente el mismo que el del shortcode, con las mejoras de seguridad (validación de los parámetros, <code>esc_url()</code>, <code>esc_html()</code>) y los dos atributos nuevos.</li>
</ul>
<p>Al final del archivo hemos incluido además una función de compatibilidad que mantiene el shortcode <code>[entradas_recientes]</code> funcionando, reutilizando el mismo <code>callback</code> del bloque. Así, las entradas o páginas que ya tengan el shortcode insertado seguirán mostrando las entradas recientes sin tener que tocar nada. Puedes ir migrando a tu ritmo.</p>
<p>Este patrón de migración (bloque nuevo + shortcode de compatibilidad que llama al mismo renderizado) es exactamente lo que deberías aplicar siempre que conviertas un shortcode a bloque. <strong>Nunca elimines el shortcode de golpe</strong>, mantenlo como alternativa.</p>
<p>Para saber más sobre shortcodes y cómo crearlos, tienes la <a href="https://ayudawp.com/que-son-los-shortcodes-y-como-crearlos/" target="_blank" rel="noopener ugc">guía completa de shortcodes de WordPress</a>. Y si te has encontrado con el problema de los shortcodes que dejan de funcionar al desactivar un plugin, echa un vistazo a la <a href="https://ayudawp.com/shortcodes-huerfanos/" target="_blank" rel="noopener ugc">guía de shortcodes huérfanos</a>.</p>
<h2>Ejemplo 3: Migrar el shortcode de botones de AI Share &amp; Summarize a bloque</h2>
<p>Para cerrar los ejemplos prácticos vamos con un caso real sobre un plugin publicado en WordPress.org, y no es ni más ni menos que la migración del shortcode <code>[ayudawp_share_buttons]</code> del plugin <a href="https://es.wordpress.org/plugins/ai-share-summarize/" target="_blank" rel="nofollow noopener">AI Share &amp; Summarize</a> a un bloque <code>PHP-only</code>.</p>
<p>Este plugin combina botones de <strong>compartir en redes sociales con botones para generar resúmenes en IA</strong> (Claude, ChatGPT, Perplexity, DeepSeek y muchas más). Tiene inserción automática, pero también un shortcode muy completo con parámetros para el estilo, tamaño, iconos, alineación y selección de botones concretos.</p>
<h3>El shortcode que vamos a migrar</h3>
<p>El shortcode admite estos parámetros principales:</p>
<pre>[ayudawp_share_buttons style="brand" size="normal" show_icons="true" alignment="left" icon_style="circular"]</pre>
<p>Cada uno de estos parámetros se traduce directamente en un atributo del bloque:</p>
<table>
<thead>
<tr>
<th>Parámetro</th>
<th>Tipo de atributo</th>
<th>Valores del enum</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>style</code></td>
<td><code>string</code> + <code>enum</code></td>
<td><code>minimal</code>, <code>brand</code>, <code>outline</code>, <code>dark</code>, <code>custom</code>, <code>icons-only</code></td>
</tr>
<tr>
<td><code>size</code></td>
<td><code>string</code> + <code>enum</code></td>
<td><code>compact</code>, <code>normal</code>, <code>large</code>, <code>fluid</code></td>
</tr>
<tr>
<td><code>show_icons</code></td>
<td><code>boolean</code></td>
<td>—</td>
</tr>
<tr>
<td><code>alignment</code></td>
<td><code>string</code> + <code>enum</code></td>
<td><code>left</code>, <code>center</code></td>
</tr>
<tr>
<td><code>icon_style</code></td>
<td><code>string</code> + <code>enum</code></td>
<td><code>circular</code>, <code>square</code></td>
</tr>
<tr>
<td><code>show_title</code></td>
<td><code>boolean</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h3>Cómo se integra en el plugin</h3>
<p>A diferencia de los ejemplos anteriores (que son mu-plugins independientes) aquí el bloque se registra <strong>dentro del propio plugin</strong>, en un archivo nuevo de la carpeta <code>/includes</code>.</p>
<p>La clave está en el <code>render_callback</code>: en vez de pasar por <code>do_shortcode()</code>, llama directamente al método estático <code>AyudaWP_AISS_Buttons::ayudawp_generate_buttons_html()</code>, que es la misma función que ya usa internamente el shortcode para generar el HTML de los botones. Es mucho más eficiente y sin duplicar código.</p>
<p>Si miras la clase <code>AyudaWP_AISS_Shortcode</code> del plugin, verás que el shortcode pilla las opciones guardadas con <code>get_option( 'ayudawp_aiss_options' )</code>, sobrescribe las que vengan como parámetro del shortcode y pasa todo a <code>AyudaWP_AISS_Buttons::ayudawp_generate_buttons_html()</code>.</p>
<p>El render <code>callback</code> del bloque hace exactamente lo mismo, pero <strong>recibiendo los valores desde los atributos del bloque en vez de desde los parámetros del shortcode</strong>.</p>
<pre>&lt;?php
/**
 * PHP-only block registration for AI Share &amp; Summarize
 *
 * @package AiShareSummarize
 * @since   2.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action( 'init', 'ayudawp_aiss_register_share_block' );

/**
 * Register the share buttons as a PHP-only block.
 */
function ayudawp_aiss_register_share_block() {
    register_block_type(
        'ayudawp/share-buttons',
        array(
            'title'           =&gt; __( 'AI Share &amp; Summarize', 'ai-share-summarize' ),
            'icon'            =&gt; 'share',
            'category'        =&gt; 'widgets',
            'description'     =&gt; __( 'Share buttons and AI summary buttons.', 'ai-share-summarize' ),
            'keywords'        =&gt; array( 'share', 'social', 'ai', 'summarize' ),
            'attributes'      =&gt; array(
                'style'      =&gt; array(
                    'type'    =&gt; 'string',
                    'enum'    =&gt; array( 'minimal', 'brand', 'outline', 'dark', 'custom', 'icons-only' ),
                    'default' =&gt; 'minimal',
                ),
                'size'       =&gt; array(
                    'type'    =&gt; 'string',
                    'enum'    =&gt; array( 'compact', 'normal', 'large', 'fluid' ),
                    'default' =&gt; 'normal',
                ),
                'show_icons' =&gt; array(
                    'type'    =&gt; 'boolean',
                    'default' =&gt; true,
                ),
                'alignment'  =&gt; array(
                    'type'    =&gt; 'string',
                    'enum'    =&gt; array( 'left', 'center' ),
                    'default' =&gt; 'left',
                ),
                'icon_style' =&gt; array(
                    'type'    =&gt; 'string',
                    'enum'    =&gt; array( 'circular', 'square' ),
                    'default' =&gt; 'circular',
                ),
                'show_title' =&gt; array(
                    'type'    =&gt; 'boolean',
                    'default' =&gt; true,
                ),
            ),
            'render_callback' =&gt; 'ayudawp_aiss_render_share_block',
            'supports'        =&gt; array(
                'autoRegister' =&gt; true,
                'spacing'      =&gt; array(
                    'margin'  =&gt; true,
                    'padding' =&gt; true,
                ),
            ),
        )
    );
}

/**
 * Render callback for the share buttons block.
 *
 * Replicates the shortcode logic: loads plugin options,
 * overrides with block attributes, and calls the existing
 * AyudaWP_AISS_Buttons renderer directly.
 *
 * @param array $attributes Block attributes.
 * @return string Block HTML output.
 */
function ayudawp_aiss_render_share_block( $attributes ) {

    // Check the rendering class exists (plugin active)
    if ( ! class_exists( 'AyudaWP_AISS_Buttons' ) ) {
        return '';
    }

    // Load the saved plugin options as base
    $options = get_option( 'ayudawp_aiss_options' );

    if ( ! is_array( $options ) ) {
        return '';
    }

    $block_options = $options;

    // Override options with block attributes (same as shortcode does)
    if ( ! empty( $attributes['style'] ) ) {
        $block_options['button_colors'] = sanitize_text_field( $attributes['style'] );
    }

    if ( ! empty( $attributes['size'] ) ) {
        $block_options['button_size'] = sanitize_text_field( $attributes['size'] );
    }

    if ( isset( $attributes['show_icons'] ) ) {
        $block_options['show_icons'] = (bool) $attributes['show_icons'];
    }

    if ( ! empty( $attributes['icon_style'] ) ) {
        $block_options['icon_style'] = sanitize_text_field( $attributes['icon_style'] );
    }

    if ( isset( $attributes['show_title'] ) &amp;&amp; ! $attributes['show_title'] ) {
        $block_options['title_text'] = '';
    }

    // Get the enabled buttons from plugin settings
    $enabled_buttons = isset( $options['enabled_buttons'] ) ? $options['enabled_buttons'] : array();

    if ( empty( $enabled_buttons ) || ! is_array( $enabled_buttons ) ) {
        return '';
    }

    $current_url   = get_permalink();
    $current_title = get_the_title();

    // Call the same renderer the shortcode uses
    $html = AyudaWP_AISS_Buttons::ayudawp_generate_buttons_html(
        $enabled_buttons,
        $block_options,
        $current_url,
        $current_title
    );

    if ( empty( $html ) ) {
        return '';
    }

    $wrapper = get_block_wrapper_attributes();

    return sprintf( '&lt;div %s&gt;%s&lt;/div&gt;', $wrapper, $html );
}</pre>
<p>Fíjate en el render callback, hace exactamente lo mismo que el método <code>ayudawp_shortcode_share_buttons()</code> de la clase <code>AyudaWP_AISS_Shortcode</code>, carga las opciones del plugin, sobrescribe con los valores que vienen del bloque (en vez de los del shortcode), y pasa todo a <code>AyudaWP_AISS_Buttons::ayudawp_generate_buttons_html()</code> junto con la URL y título de la entrada actual.</p>
<p>El resultado es que bloque y shortcode comparten el mismo motor de renderizado, sin duplicar nada de código.</p>
<p>El usuario podrá insertar los botones de compartir y resumir como un bloque nativo del editor, configurando el estilo, tamaño, iconos y alineación desde el panel lateral, con una previsualización que se actualiza con cada cambio.</p>

<a href="https://ayudawp.com/crear-bloques-wordpress-php/insertar-bloque-php-plugin-ai-share-summarize/" rel="nofollow"><img width="1200" height="835" src="https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-plugin-ai-share-summarize-1200x835.jpg" class="attachment-medium size-medium" alt="insertar bloque php plugin ai share summarize" srcset="https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-plugin-ai-share-summarize-1200x835.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-plugin-ai-share-summarize-768x534.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-plugin-ai-share-summarize-1536x1069.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-plugin-ai-share-summarize-260x180.jpg 260w, https://ayudawp.com/wp-content/uploads/2026/03/insertar-bloque-php-plugin-ai-share-summarize.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>
<a href="https://ayudawp.com/crear-bloques-wordpress-php/bloque-php-plugin-ai-share-summarize/" rel="nofollow"><img width="1200" height="835" src="https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-1200x835.jpg" class="attachment-medium size-medium" alt="bloque php plugin ai share summarize" srcset="https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-1200x835.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-768x534.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-1536x1069.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-260x180.jpg 260w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>
<a href="https://ayudawp.com/crear-bloques-wordpress-php/bloque-php-plugin-ai-share-summarize-renderizado/" rel="nofollow"><img width="1200" height="663" src="https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-renderizado-1200x663.jpg" class="attachment-medium size-medium" alt="bloque php plugin ai share summarize renderizado" srcset="https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-renderizado-1200x663.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-renderizado-768x424.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-renderizado-1536x848.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/03/bloque-php-plugin-ai-share-summarize-renderizado.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>

<p>El shortcode <code>[ayudawp_share_buttons]</code> seguirá funcionando exactamente igual para todos los que ya lo tengan insertado en su contenido, que la compatibilidad no se toca.</p>
<p>Esta integración estará disponible en una próxima versión del plugin. Aún no está perfecta pero lo estará.</p>
<h2>Cuándo usar bloques PHP-only y cuándo no</h2>
<p>Después de ver los tres ejemplos, conviene tener claro para qué sirve esta herramienta y para qué no. No todo debería ser un bloque <code>PHP-only</code>, igual que no todo debería ser un shortcode.</p>
<h3>Es buena elección cuando…</h3>
<p>Los bloques <code>PHP-only</code> son la opción adecuada para contenido dinámico que se genera en el servidor, sin necesidad de interacción en el editor más allá de configurar unos parámetros.</p>
<p>Hay muchos ejemplos de esto, como listados de entradas, cajas de autor, alertas o avisos personalizables, CTAs, widgets de datos, embeds de herramientas propias, botones de compartir, bloques informativos que <strong>tiran de la base de datos o de APIs</strong> externas, suma y sigue.</p>
<p>Todo lo que antes resolvías con un shortcode o con una función en el <code>functions.php</code> pero con <strong>la ventaja de una interfaz visual en el editor</strong>.</p>
<p>También son ideales para <strong>temas de bloques y FSE</strong>, donde puedes crear componentes específicos para tu tema sin depender de plugins de terceros.</p>
<h3>No es la mejor opción cuando…</h3>
<p><strong>Si necesitas edición en tiempo real dentro del editor</strong>, como por ejemplo, escribir texto directamente en el bloque, arrastrar elementos o manipular contenido inline. En estos casos necesitas un bloque JavaScript completo. Pasa lo mismo si tu bloque debe contener otros bloques dentro (<code>InnerBlocks</code>), que es algo que los bloques <code>PHP-only</code> no admiten de momento.</p>
<p>Ten en cuenta que la previsualización de un bloque <code>PHP-only</code> usa <code>ServerSideRender</code>, por lo que cada vez que cambias un atributo, el editor hace una petición <code>REST</code> al servidor para obtener el HTML actualizado. Para bloques sencillos esto es imperceptible pero si tu callback hace consultas pesadas o llamadas a APIs externas, cada cambio de atributo puede generar un retardo visible en el editor.</p>
<h3>¿Y los shortcodes?</h3>
<p>Los shortcodes <strong>siguen siendo perfectamente válidos</strong> para retro-compatibilidad y para <strong>situaciones o webs donde no puedes usar el editor de bloques</strong> (campos personalizados, widgets clásicos, plantillas PHP). Pero si estás creando algo nuevo los bloques <code>PHP-only</code> son su sucesor natural porque ofrecen la misma facilidad de desarrollo con una experiencia de usuario mucho mejor en el editor.</p>
<h2>Consejos prácticos y errores comunes</h2>
<p>Para terminar unas cuantas cosas que no están en la documentación oficial y que te pueden ahorrar algún dolor de cabeza:</p>
<ul>
<li><strong>Define siempre valores <code>default</code> en los atributos.</strong> Si un atributo llega vacío o sin definir al callback, tu bloque puede renderizar en blanco o dar un error. Un <code>default</code> te garantiza que siempre hay un valor válido con el que trabajar.</li>
<li><strong>Usa siempre <code>get_block_wrapper_attributes()</code>.</strong> Esta función genera los atributos HTML del contenedor del bloque (clases, estilos inline de los supports como color o espaciado). Si no la usas, los supports que actives no tendrán efecto.</li>
<li><strong>El <code>namespace</code> del bloque es obligatorio.</strong> El primer argumento de <code>register_block_type()</code> debe llevar el formato <code>namespace/nombre-bloque</code> (por ejemplo, <code>ayudawp/author-box</code>). Sin el namespace, el registro fallará.</li>
<li><strong>Los enum solo muestran el valor, no una etiqueta legible.</strong> Si tu enum tiene valores como <code>array( 'small', 'medium', 'large' )</code>, el desplegable en el editor mostrará exactamente esos textos. No hay forma (de momento) de mostrar una etiqueta más descriptiva al lado de cada valor sin recurrir a JavaScript.</li>
<li><strong>Las etiquetas de los controles son el nombre del atributo.</strong> Los controles que genera <code>autoRegister</code> en el panel lateral usan directamente el nombre del atributo como etiqueta, en mayúsculas y sin formato. No hay ninguna propiedad para personalizar esa etiqueta desde PHP. Por eso conviene nombrar los atributos de forma legible desde el principio (por ejemplo, <code>autor</code> en vez de <code>user_id</code>, o <code>biografia</code> en vez de <code>show_bio</code>). No es lo ideal pero es lo que hay de momento. Si necesitas etiquetas descriptivas y una interfaz más cuidada en el panel lateral, ya te toca escribir JavaScript con <code>InspectorControls</code>.</li>
<li><strong>Cuidado con las plantillas en el editor de sitio.</strong> Se ha detectado un problema en las betas de WordPress 7.0 donde los bloques <code>PHP-only</code> se renderizan correctamente en las previsualizaciones de plantillas, pero el CSS aplicado globalmente o por bloque no siempre se muestra. Es un tema que el equipo de desarrollo está resolviendo.</li>
<li><strong>InnerBlocks no están soportados.</strong> No puedes crear un bloque <code>PHP-only</code> que acepte otros bloques dentro. Si necesitas esta funcionalidad, toca usar bloques JavaScript.</li>
<li><strong>El rendimiento del editor depende de tu callback.</strong> Como cada cambio de atributo genera una petición REST que ejecuta tu <code>render_callback</code>, intenta que sea lo más ligero posible. Si haces consultas a la base de datos, plantéate usar <a href="https://developer.wordpress.org/apis/transients/" target="_blank" rel="nofollow noopener">transients</a> para cachear los resultados.</li>
<li><strong>No necesitas <code>block.json</code>.</strong> Para bloques <code>PHP-only</code>, toda la definición del bloque (título, icono, categoría, atributos, supports) va directamente en el array que pasas a <code>register_block_type()</code>. No necesitas crear un archivo <code>block.json</code> separado.</li>
</ul>
<h2>Próximos pasos</h2>
<p><strong>WordPress 7.0</strong> está disponible desde el 9 de abril de 2026. Si quieres probar todo esto antes puedes instalarte una versión beta o el <a href="https://es.wordpress.org/plugins/gutenberg/" target="_blank" rel="nofollow noopener">plugin Gutenberg</a> en un sitio de pruebas.</p>
<p>De cara a WordPress 7.1, el equipo de desarrollo ya está trabajando en <strong>Block Fields</strong>, una evolución de esta misma idea que promete ampliar los tipos de controles automáticos disponibles, y en mejorar la compatibilidad con <strong>Block Bindings</strong>, el sistema que conecta los atributos de los bloques con fuentes de datos externas.</p>
<p>Todo apunta a que <strong>la creación de bloques solo con PHP seguirá mejorando en las próximas versiones</strong>.</p>
<p>Si quieres aprender a crear estos bloques usando inteligencia artificial como copiloto, en la <a href="https://ayudawp.com/vibe-agentic-coding/" target="_blank" rel="noopener ugc">guía de vibe coding y agentic coding para WordPress</a> tienes técnicas y prompts concretos para generar código de plugins y bloques con Claude o ChatGPT.</p>
<p>Y si necesitas repasar los fundamentos de PHP antes de meterte con los bloques, la <a href="https://ayudawp.com/php-basico/" target="_blank" rel="noopener ugc">guía de PHP básico para WordPress</a> es un buen punto de partida, y cuando descubras que esta magia del código es lo tuyo, <a href="https://campus.ayudawp.com/curso-avanzado-de-programacion-profesional-para-wordpress/" rel="ugc ">aquí tienes el único curso de programación para WordPress que existe</a>, preparado por mi y muchos de los mejores profesionales que hay.</p>
<p>Para todo lo demás aquí me tienes.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/crear-bloques-wordpress-php/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>¿Se puede quitar la lupa que el tema Astra añade a la barra de admin de WordPress?</title>
		<link>https://ayudawp.com/quitar-lupa-astra-barra-admin/</link>
					<comments>https://ayudawp.com/quitar-lupa-astra-barra-admin/#respond</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Tue, 14 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Programación en WordPress]]></category>
		<category><![CDATA[Temas WordPress]]></category>
		<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Astra]]></category>
		<category><![CDATA[Avanzado]]></category>
		<category><![CDATA[Functions]]></category>
		<category><![CDATA[Paleta de comandos]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158972</guid>

					<description><![CDATA[No hace mucho el tema Astra, el más instalado de todos los temas WordPress, añadió a la barra de administración una lupa, un icono en la parte derecha, al lado de donde te saluda WordPress y está tu perfil, que me extrañó bastante, por varios motivos que ahora te comento.]]></description>
										<content:encoded><![CDATA[<p>No hace mucho <strong>Astra, el tema WordPress más instalado de todos</strong>, añadió a la barra de administración una lupa, un icono en la parte derecha, al lado de donde te saluda WordPress y está tu perfil, que me extrañó bastante, por varias razones que ahora te comento.</p>
<p>Por si no lo has probado, <strong>lo que hace es lanzar la <a href="https://ayudawp.com/wordpress-6-3/" target="_blank" rel="noopener ugc">paleta de comandos de WordPress</a></strong>, que te permite <strong>hacer búsquedas dentro de tu sitio</strong> desde cualquier parte del escritorio con la combinación de teclas <code>Control+K</code> o <code>Comando+K</code>, según tu sistema operativo.</p>
<p><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158979 size-full" src="https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra.jpg" alt="lupa tema astra" width="1200" height="160" srcset="https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra-768x102.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>La utilidad, pues que tienes <strong>un icono para recordarte que existe la paleta de comandos</strong>, lo cual en sí no está mal, salvo que <strong>es una funcionalidad ya incluida en WordPress desde la versión 7.0</strong>.</p>
<p>No niego la utilidad, pero como te decía, <strong>me ha parecido extraño que Astra lo incluya por algunos motivos</strong>.</p>
<p>El primer motivo es puramente lógico, porque <strong>¿a qué viene que un tema añada una funcionalidad que no tiene nada que ver con el tema?</strong> Vale que hasta la versión 7.0 WordPress no ayudaba a saber cómo usar la paleta de comandos pero ¿un tema?</p>
<p>Otra cosa que me ha resultado extraña es <strong>lo silenciosa que ha sido su incorporación</strong>, pues no es algo que hayan anunciado de ningún modo.</p>
<p>También, <strong>es raro</strong>, y más siendo algo no lógico en un tema, que:</p>
<ol>
<li>Se active por defecto.</li>
<li>No tenga ningún ajuste para desativarlo.</li>
</ol>
<p>Para terminar, comentar que <strong>esta incorporación es especialmente molesta desde WordPress 7.0</strong>, porque resulta que añade su propia lupa para lanzar la paleta de comandos, de manera nativa, aunque en vez de en la parte derecha en la izquierda, pero el resultado es que tienes <strong>dos iconos, dos lupas, ocupando espacio en tu barra de admin, para la misma utilidad</strong>.</p>

<a href="https://ayudawp.com/quitar-lupa-astra-barra-admin/lupa-tema-astra-barra-admin-wordpress/" rel="nofollow"><img width="1200" height="675" src="https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra-barra-admin-wordpress-1200x675.jpg" class="attachment-medium size-medium" alt="lupa tema astra barra admin wordpress" srcset="https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra-barra-admin-wordpress-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra-barra-admin-wordpress-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra-barra-admin-wordpress-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/lupa-tema-astra-barra-admin-wordpress.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>
<a href="https://ayudawp.com/quitar-lupa-astra-barra-admin/paleta-comandos-wordpress-7-repetida-tema-astra/" rel="nofollow"><img width="1200" height="675" src="https://ayudawp.com/wp-content/uploads/2026/04/paleta-comandos-wordpress-7-repetida-tema-astra-1200x675.jpg" class="attachment-medium size-medium" alt="paleta comandos wordpress 7 repetida tema astra" srcset="https://ayudawp.com/wp-content/uploads/2026/04/paleta-comandos-wordpress-7-repetida-tema-astra-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/paleta-comandos-wordpress-7-repetida-tema-astra-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/paleta-comandos-wordpress-7-repetida-tema-astra-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/paleta-comandos-wordpress-7-repetida-tema-astra.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px" loading="lazy" decoding="async" fetchpriority="low"></a>

<p>En fin, que <strong>es una cosa bastante ilógica</strong>, pero que, afortunadamente,<strong> tiene una solución sencilla</strong>, que pasa por añadir este código al archivo <code>functions.php</code> del <a href="https://ayudawp.com/tema-hijo-astra/" target="_blank" rel="noopener ugc">tema hijo de Astra</a>, si lo tienes, o a un <a href="https://ayudawp.com/crea-un-plugin-para-liberar-el-fichero-functions-php/" target="_blank" rel="noopener ugc">plugin personalizado</a> o <a href="https://ayudawp.com/que-son-los-mu-plugins-de-wordpress/" target="_blank" rel="noopener ugc">MU plugin</a>:</p>
<pre>// Desactivar el icono de búsqueda en la barra de administración de Astra
add_filter( 'astra_show_admin_bar_search_icon', '__return_false' );</pre>
<p>El resultado es inmediato, <strong>ya solo tienes una lupa, la nativa de WordPress</strong> (desde la versión 7.0), o ninguna si utilizas alguna versión de WordPress anterior a esta.</p>
<p><img loading="lazy" decoding="async" class="alignnone size-medium wp-image-158974" src="https://ayudawp.com/wp-content/uploads/2026/04/lupa-paleta-comandos-wordpress-7-1200x675.jpg" alt="lupa paleta comandos wordpress 7" width="1200" height="675" srcset="https://ayudawp.com/wp-content/uploads/2026/04/lupa-paleta-comandos-wordpress-7-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/lupa-paleta-comandos-wordpress-7-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/lupa-paleta-comandos-wordpress-7-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/lupa-paleta-comandos-wordpress-7.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>¡De nada!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/quitar-lupa-astra-barra-admin/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Deberías medir la accesibilidad de tu web WordPress y ¡deberías hacerlo ya!</title>
		<link>https://ayudawp.com/medir-accesibilidad-wordpress/</link>
					<comments>https://ayudawp.com/medir-accesibilidad-wordpress/#comments</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Mon, 13 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Accesibilidad]]></category>
		<category><![CDATA[Principiante]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158801</guid>

					<description><![CDATA[Desde junio de 2025 la accesibilidad web en España ha dejado de ser una recomendación para convertirse en una obligación legal que afecta también al sector privado. Si tienes una tienda online, una plataforma de servicios o cualquier negocio digital, esto te toca. El primer paso para cumplir es saber dónde estás, es decir, medir.]]></description>
										<content:encoded><![CDATA[<p>Desde junio de 2025 <strong>la accesibilidad web en España ha dejado de ser una recomendación para convertirse en una obligación legal</strong> que afecta también al sector privado. Si tienes una tienda online, una plataforma de servicios o cualquier negocio digital, esto te toca. El primer paso para cumplir es saber dónde estás, es decir, medir.</p>
<p>Pero medir la accesibilidad no es tan sencillo como pasar una herramienta y obtener un aprobado o un suspenso. Tiene matices, limitaciones y trampas que conviene conocer antes de lanzarse. En este artículo te cuento <strong>qué se mide exactamente, cómo se mide, con qué herramientas puedes hacerlo, y dónde está el límite</strong> de lo que una herramienta automática puede detectar.</p>
<h2>Por qué medir la accesibilidad de tu web</h2>
<p>Hay dos razones, y las dos de peso. La primera es legal, pues la <strong>Ley 11/2023</strong>, que transpone la Directiva europea de accesibilidad (2019/882), está en vigor desde el 28 de junio de 2025 y afecta a empresas privadas que ofrezcan servicios digitales (ecommerce, banca online, transporte, plataformas de contenido, etc.).</p>
<p>Las <strong>sanciones</strong> por incumplimiento van desde 301 euros para infracciones leves <strong>hasta</strong> <strong>1.000.000 de euros</strong> para las muy graves, no es broma, es un arruina-negocios.</p>
<p>Las microempresas, o sea, las de menos de 10 empleados y menos de 2 millones de euros de facturación anual, la tuya, la mía y la de la mayoría de emprendedores, tienen exenciones parciales, pero ojo, parciales. Por su parte, el sector público ya estaba obligado por el <strong>RD 1112/2018</strong> desde hace años.</p>
<p>La segunda razón es práctica, pues un sitio accesible es un sitio que funciona mejor para todo el mundo. Mejor estructura, mejor navegación, mejor rendimiento en buscadores. No es casualidad que muchas de las buenas prácticas de accesibilidad coincidan con las de SEO y usabilidad.</p>
<p>Un h1 bien puesto, un formulario con elementos <code>label</code> correctos, un contraste de texto legible. Todo eso <strong>beneficia a todos tus visitantes, no solo a los que usan tecnologías de asistencia</strong>.</p>
<p>Si quieres profundizar a nivel general en la accesibilidad web en WordPress tengo una <a href="https://ayudawp.com/accesibilidad-web-en-wordpress/">guía completa sobre accesibilidad web en WordPress</a> que te vendrá bien como referencia, es sencilla de leer y complemento previo a este artículo si me apuras.</p>
<h2>Qué se mide exactamente</h2>
<p>La referencia técnica son las <strong>WCAG 2.1</strong> (Web Content Accessibility Guidelines), un estándar del W3C que organiza los criterios de accesibilidad en <strong>cuatro principios</strong>. No hace falta que te los aprendas de memoria pero sí que entiendas la lógica:</p>
<ol>
<li><strong>Perceptible:</strong> El contenido debe poder verse y oírse. Imágenes con texto alternativo, vídeos con subtítulos, contraste de color suficiente.</li>
<li><strong>Operable:</strong> El sitio debe poder navegarse con teclado, sin trampas de foco, con enlaces descriptivos, sin redirecciones automáticas que desorienten.</li>
<li><strong>Comprensible:</strong> El idioma de la página debe estar declarado, los formularios deben tener elementos <code>label</code> claros, los errores deben explicarse de forma accesible.</li>
<li><strong>Robusto:</strong> El código debe funcionar con distintas tecnologías de asistencia. IDs únicos, ARIA bien usado, regiones <code>live</code> para mensajes dinámicos.</li>
</ol>
<p>La normativa española (tanto la Ley 11/2023 como el RD 1112/2018) exige el <strong>nivel AA</strong> de las WCAG 2.1, que son 50 criterios de éxito. No todos pesan igual, claro, pero todos cuentan.</p>
<p>Además de lo puramente técnico, en España hay requisitos legales adicionales que una auditoría debería revisar:</p>
<ul>
<li><strong>Declaración de accesibilidad</strong> enlazada desde el pie de página</li>
<li><strong>Aviso legal</strong> con identificación del titular (LSSICE)</li>
<li><strong>Política de privacidad</strong> (RGPD)</li>
<li><strong>Banner de cookies</strong> conforme a la AEPD</li>
<li><strong>Canal de reporte</strong> de problemas de accesibilidad</li>
</ul>
<h2>Lo que las herramientas automáticas pueden y no pueden hacer</h2>
<p>Esto es lo más importante del artículo y no quiero que te lo saltes. Las herramientas automáticas de análisis de accesibilidad detectan, en el mejor de los casos, <strong>entre el 30% y el 40% de los problemas reales</strong>. Es un dato que repiten tanto Deque (los creadores de axe) como el W3C y cualquier auditor profesional serio.</p>
<p>¿Por qué tan poco? Pues porque <strong>muchos criterios WCAG requieren juicio humano</strong>.</p>
<p>Una herramienta puede detectar que una imagen no tiene atributo <code>alt</code>, pero no puede evaluar si el texto alternativo que has puesto es realmente descriptivo o es un «<code>imagen1.jpg</code>«. Puede comprobar que existe un contraste mínimo en estilos inline, pero no puede procesar todo el CSS para verificar el contraste real del texto que ve el usuario. Puede encontrar un <code>div</code> con <code>onclick</code>, pero no puede saber si ese <code>div</code> tiene un comportamiento interactivo legítimo o es un error.</p>
<p><strong>Lo que sí hacen bien las herramientas automáticas</strong>:</p>
<ul>
<li>Detectar imágenes sin <code>alt</code></li>
<li>Encontrar <code>IDs</code> duplicados</li>
<li>Verificar que existe el atributo <code>lang</code> en el HTML</li>
<li>Comprobar si el <code>viewport</code> bloquea el zoom</li>
<li>Detectar enlaces con texto ambiguo («haz clic aquí»)</li>
<li>Encontrar campos de formulario sin <code>label</code> asociado</li>
<li>Localizar <code>outline:none</code> sin alternativa de foco</li>
</ul>
<p><strong>Lo que no pueden hacer (o hacen mal)</strong>:</p>
<ul>
<li>Calcular el contraste real de colores (necesitan procesar todo el CSS)</li>
<li>Evaluar la calidad del texto alternativo</li>
<li>Comprobar que la navegación con teclado funciona de verdad</li>
<li>Verificar que los lectores de pantalla anuncian correctamente el contenido</li>
<li>Determinar si la estructura semántica tiene sentido para un usuario real</li>
<li>Detectar si un banner de cookies usa patrones oscuros</li>
</ul>
<p>Dicho esto, que no detecten todo no significa que no sean útiles, son el mejor punto de partida, la primera línea de defensa. Te dan un mapa de los errores más evidentes y te ahorran horas de revisión manual en cosas que una máquina sí puede verificar con fiabilidad.</p>
<h2>Cómo medir la accesibilidad paso a paso</h2>
<p>Si quieres hacer una evaluación razonable (no profesional, pero sí útil), sigue estos pasos:</p>
<h3>Pasa una herramienta automática</h3>
<p>Empieza por ahí. Analiza al menos la portada, una página interior tipo y una ficha de producto o formulario de contacto. Anota los fallos y clasifícalos por gravedad.</p>
<h3>Navega con el teclado</h3>
<p>Cierra el ratón y navega tu web solo con <code>Tab</code>, <code>May+Tab</code> y luego <code>Intro</code>. ¿Puedes llegar a todos los menús? ¿Ves dónde está el foco en cada momento? ¿Algún elemento te atrapa y no te deja salir? Esta prueba de cinco minutos te dirá más sobre la accesibilidad real de tu web que muchas herramientas.</p>
<h3>Prueba con un lector de pantalla</h3>
<p>NVDA (gratuito, Windows) o VoiceOver (integrado en Mac e iOS). No hace falta ser experto, basta con activarlo y escuchar cómo se lee tu página. Si algo suena raro, confuso o directamente no se anuncia, ahí tienes un problema.</p>
<h3>Revisa los requisitos legales</h3>
<p>Comprueba manualmente si tu web tiene enlazados desde el pie de página: aviso legal, política de privacidad, política de cookies y, si procede, la declaración de accesibilidad. Verifica que el banner de cookies permita rechazar con la misma facilidad que aceptar (exigencia de la AEPD).</p>
<h3>Documenta y prioriza</h3>
<p>Haz una lista de todo lo encontrado, ordena por gravedad (los problemas que impiden el uso van primero), y planifica la corrección. No intentes arreglar todo de golpe, prioriza lo que bloquea el acceso.</p>
<h2>Herramientas para medir la accesibilidad</h2>
<p><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158816 size-full" src="https://ayudawp.com/wp-content/uploads/2026/04/analizar-accesibilidad-web-wordpress-online-gratis.jpg" alt="analizar accesibilidad web wordpress online gratis" width="1200" height="645" srcset="https://ayudawp.com/wp-content/uploads/2026/04/analizar-accesibilidad-web-wordpress-online-gratis.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/analizar-accesibilidad-web-wordpress-online-gratis-768x413.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>Aquí va un repaso sincero de las opciones disponibles, cada una con lo que hace bien y lo que no.</p>
<h3>Lighthouse (Google Chrome)</h3>
<p>Viene integrada en las DevTools de Chrome (F12 &gt; Lighthouse &gt; Accessibility). Gratuita, rápida, da una puntuación de 0 a 100 y usa el motor axe-core internamente, aunque ejecuta menos reglas que axe completo.</p>
<ul>
<li><strong>A favor:</strong> no necesitas instalar nada, genera informes descargables, combina accesibilidad con rendimiento y SEO en un solo análisis.</li>
<li><strong>En contra:</strong> ejecuta menos reglas que axe DevTools, la puntuación puede dar falsa sensación de seguridad (un 90 en Lighthouse no significa que tu web sea accesible), solo analiza una página cada vez.</li>
</ul>
<h3>WAVE (WebAIM)</h3>
<p>Extensión gratuita para Chrome y Firefox que superpone los errores directamente sobre la página. Muy visual y fácil de entender sin conocimientos técnicos.</p>
<ul>
<li><strong>A favor:</strong> la representación visual ayuda mucho a entender dónde están los problemas, gratuita, no requiere conocimientos de desarrollo.</li>
<li><strong>En contra:</strong> analiza solo una página cada vez, puede saturar visualmente en páginas complejas, no detecta problemas que requieran renderizado completo del CSS.</li>
</ul>
<h3>axe DevTools (Deque)</h3>
<p>Extensión para Chrome y Firefox creada por Deque, la referencia en accesibilidad. El motor axe-core es el mismo que usa Lighthouse internamente, pero la extensión ejecuta más reglas y tiene la política de cero falsos positivos.</p>
<ul>
<li><strong>A favor:</strong> la herramienta automatizada más precisa del mercado, informes técnicos detallados, versión gratuita muy potente, cero falsos positivos declarados.</li>
<li><strong>En contra:</strong> orientada a desarrolladores (la interfaz puede intimidar), la versión gratuita tiene limitaciones, solo analiza una página cada vez.</li>
</ul>
<h3>Accessibility Insights (Microsoft)</h3>
<p>Extensión para Chrome que combina un análisis rápido (FastPass) con una guía paso a paso para revisión manual. La guía de evaluación manual es lo más interesante, te lleva de la mano por los criterios que las herramientas automáticas no pueden verificar.</p>
<ul>
<li><strong>A favor:</strong> la combinación de análisis automático y guía manual es única, gratuita y de código abierto, excelente para aprender sobre accesibilidad mientras evalúas.</li>
<li><strong>En contra:</strong> solo disponible en inglés, requiere más tiempo que un simple escaneo automático.</li>
</ul>
<h3>Soluciones de superposición (accessiBe, UserWay, etc.)</h3>
<p>Son widgets que se instalan en tu web y prometen corregir problemas de accesibilidad automáticamente con IA. Tengo que ser claro aquí, y es que <strong>la comunidad de accesibilidad las desaconseja de forma casi unánime</strong>. No corrigen los problemas reales del código, solo ponen una capa encima.</p>
<p>Algunos estudios incluso han demostrado que pueden empeorar la experiencia para usuarios de lectores de pantalla, y no te protegen legalmente porque no modifican el HTML subyacente. Si te interesa el tema tengo un artículo sobre <a href="https://ayudawp.com/accesibilidad-wordpress-1-clic/">plugins de accesibilidad a un clic</a> donde profundizo más en estas cosas.</p>
<h3>Auditoría profesional</h3>
<p>La opción más completa y <strong>la única que realmente puede certificar cumplimiento</strong>. Un auditor profesional combina herramientas automáticas, revisión manual experta, pruebas con tecnologías de asistencia y, en el mejor de los casos, pruebas con usuarios reales con discapacidad. El coste varía mucho según el tamaño del sitio, pero en España hay que contar con un mínimo de 1.500 a 3.000 euros para un sitio pequeño.</p>
<ul>
<li><strong>A favor:</strong> la única vía para detectar el 100% de los problemas, genera documentación válida legalmente, incluye plan de aplicación de soluciones por prioridades.</li>
<li><strong>En contra:</strong> coste elevado para pequeñas empresas, hay que repetirla periódicamente (cada cambio importante del sitio puede introducir nuevas barreras).</li>
</ul>
<h3>Analizador de accesibilidad online</h3>
<p>La <a href="https://herramientas.ayudawp.com/#accesibilidad" target="_blank" rel="noopener ugc">herramienta de análisis de accesibilidad para webs WordPress</a> tiene un funcionamiento sencillo. Solo tienes que introducir la URL de tu web WordPress y obtener un análisis automático con <strong>25 comprobaciones organizadas en los 4 principios WCAG más requisitos legales españoles y comprobaciones específicas de WordPress</strong>.</p>
<ul>
<li><strong>A favor:</strong> gratuita, sin registro, en español, orientada específicamente a WordPress (detecta tema, maquetadores, plugins de accesibilidad, tema <code>accessibility-ready</code>), incluye correcciones concretas para WordPress con plugins recomendados, cubre requisitos legales españoles (Ley 11/2023, RD 1112/2018, LSSICE, RGPD), también acepta HTML pegado directamente para analizar sin necesidad de URL pública.</li>
<li><strong>En contra:</strong> como toda herramienta automática solo detecta problemas verificables en el HTML estático (no procesa el CSS completo ni simula interacción alguna), no sustituye una auditoría profesional ni pruebas manuales. La puntuación orienta pero no certifica cumplimiento.</li>
</ul>
<p>Te recomiendo <strong>usarla como primer paso rápido para saber dónde estás</strong>, complementarla con una navegación con teclado y, si tu sitio tiene obligaciones legales, plantearte seriamente pedir una auditoría profesional.</p>
<h2>El enfoque realista</h2>
<p>Si tu presupuesto es limitado y no puedes contratar una auditoría profesional la combinación más eficaz es:</p>
<ol>
<li>Pasa el <a href="https://herramientas.ayudawp.com/#accesibilidad">analizador online de accesibilidad</a> o Lighthouse para tener un mapa de errores automáticos</li>
<li>Instala WAVE o axe DevTools en tu navegador para ir revisando página por página</li>
<li>Navega tu web con el teclado y detecta trampas de foco y problemas de navegación</li>
<li>Prueba con NVDA o VoiceOver al menos la portada y el flujo principal (menú, página, formulario)</li>
<li>Revisa los requisitos legales manualmente (pie de página, declaración de accesibilidad, cookies)</li>
<li>Documenta todo y corrige empezando por lo más grave</li>
</ol>
<p>No es un kit perfecto pero es mucho mejor que no hacer nada, y sobre todo es un proceso continuo.</p>
<p><strong>La accesibilidad no se «arregla» una vez y se olvida</strong>, cada actualización del tema, cada plugin nuevo, cada cambio de contenido puede introducir nuevas barreras. Lo ideal es incorporar estas comprobaciones a tu flujo de trabajo habitual.</p>
<p>Para gestionar la accesibilidad en el día a día de tu WordPress no olvides revisar también la <a href="https://ayudawp.com/accesibilidad-web-en-wordpress/">guía de accesibilidad en WordPress</a> y a los <a href="https://ayudawp.com/accesibilidad-wordpress-1-clic/">plugins de accesibilidad</a> que pueden ayudarte.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/medir-accesibilidad-wordpress/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>x402 – El protocolo de pagos de internet que ya funciona en WordPress</title>
		<link>https://ayudawp.com/x402/</link>
					<comments>https://ayudawp.com/x402/#respond</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Thu, 09 Apr 2026 06:28:52 +0000</pubDate>
				<category><![CDATA[Ingresos]]></category>
		<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.com]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[402]]></category>
		<category><![CDATA[ACP]]></category>
		<category><![CDATA[Avanzado]]></category>
		<category><![CDATA[Bitcoin]]></category>
		<category><![CDATA[EmDash]]></category>
		<category><![CDATA[x402]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158870</guid>

					<description><![CDATA[x402 es un protocolo abierto de pagos nativos de Internet que utiliza el código de estado HTTP 402 (Payment Required) para que servidores y clientes (incluidos agentes de IA) negocien y procesen pagos de forma automática dentro de las propias peticiones HTTP. Pero hay más…]]></description>
										<content:encoded><![CDATA[<div>
<p><strong>x402</strong> es un <strong>protocolo abierto de pagos nativos de Internet</strong> que utiliza <a href="https://ayudawp.com/402-payment-required/" target="_blank" rel="noopener ugc">el código de estado HTTP 402 (Payment Required)</a> para que servidores y clientes (incluidos agentes de IA) negocien y procesen pagos de forma automática dentro de las propias peticiones HTTP.</p>
<p>Creado por Coinbase en mayo de 2025, desde abril de 2026 <strong>está bajo la gobernanza de la Linux Foundation, con Google, Stripe, Visa, Mastercard, AWS, Cloudflare y Shopify como miembros fundadores</strong>.</p>
<p><strong>En WordPress ya existen plugins</strong> como PayLayer e ICPay que permiten implementar x402 para cobrar a agentes de IA por acceso a contenido o para procesar compras automatizadas en WooCommerce, sin afectar a la experiencia de los visitantes humanos.</p>
<p>Esto sería un resumen rápido, pero <strong>hay mucho más que contar, y todo interesante…</strong></p>
</div>
<h2>El protocolo del código 402</h2>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-158914" src="https://ayudawp.com/wp-content/uploads/2026/04/x402.png" alt="x402" width="1200" height="443" srcset="https://ayudawp.com/wp-content/uploads/2026/04/x402.png 1200w, https://ayudawp.com/wp-content/uploads/2026/04/x402-768x284.png 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>Si leíste el artículo sobre <a href="https://ayudawp.com/402-payment-required/" target="_blank" rel="noopener ugc">qué es el código de estado HTTP 402 y cómo usarlo en WordPress</a>, recordarás que hablamos de un código HTTP que lleva casi tres décadas reservado «para uso futuro» y que estaba empezando a despertar. Mencionaba de pasada el protocolo x402 de Coinbase como <strong>una de las implementaciones reales que le dan sentido al 402</strong>.</p>
<p>Desde que se publicó aquel artículo han pasado cosas bastante gordas, y lo más gordo es que <strong>x402 ha dejado de ser un proyecto de una empresa de criptomonedas para convertirse en un estándar abierto bajo la Linux Foundation</strong>, con medio sector tecnológico mundial respaldándolo. Y además, ya hay plugins de WordPress que lo implementan.</p>
<p>Vamos a ver <strong>qué es exactamente x402</strong>, cómo funciona a nivel técnico, quién está detrás, qué opciones hay para WordPress y cuánto de todo esto es real hoy y cuánto es promesa de futuro.</p>
<h2>Qué es x402 y cómo funciona</h2>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-158916" src="https://ayudawp.com/wp-content/uploads/2026/04/se-requiere-pago-x402.jpg" alt="se requiere pago x402" width="1094" height="586" srcset="https://ayudawp.com/wp-content/uploads/2026/04/se-requiere-pago-x402.jpg 1094w, https://ayudawp.com/wp-content/uploads/2026/04/se-requiere-pago-x402-768x411.jpg 768w" sizes="auto, (max-width: 1094px) 100vw, 1094px"></p>
<p><strong>x402 es un protocolo abierto que integra pagos directamente dentro de las peticiones HTTP</strong>. La idea es que el dinero se mueva por internet con la misma facilidad con la que se mueve la información. Sin formularios, sin cuentas de usuario, sin pasarelas de pago intermediarias.</p>
<p>Un cliente (sea un navegador, una aplicación o un agente de IA) solicita un recurso, el servidor le dice cuánto cuesta, el cliente paga, y el servidor le da acceso. Todo dentro del propio protocolo HTTP.</p>
<p>El flujo básico es así:</p>
<ol>
<li>Un cliente hace una petición HTTP a un recurso protegido.</li>
<li>El servidor responde con un <code>HTTP 402 Payment Required</code> e incluye en la respuesta las instrucciones de pago: cuánto cuesta, qué métodos acepta, a qué dirección de wallet hay que pagar.</li>
<li>El cliente procesa el pago (actualmente con stablecoins como USDC) y reenvía la petición con una cabecera de autorización de pago.</li>
<li>Un «facilitador» (un servicio intermedio) verifica que el pago se ha completado en la cadena de bloques.</li>
<li>El servidor responde con un <code>HTTP 200 OK</code> y entrega el contenido.</li>
</ol>
<p>Lo que diferencia a x402 de un muro de pago tradicional es que <strong>todo sucede a nivel de protocolo</strong>. No hay una página de pago, no hay un formulario donde meter los datos de la tarjeta, no hay una suscripción mensual. Es una transacción única con petición, pago, acceso, y está diseñado para que las máquinas lo hagan solas, sin intervención humana.</p>
<p>En la web de x402.org lo resumen con un ejemplo de código que da una idea bastante clara de la filosofía:</p>
<ul>
<li> Añades un middleware a tu servidor con una línea de código indicando qué endpoints requieren pago, cuánto cuestan y qué métodos de pago aceptas.
<ul>
<li>Si llega una petición sin pago, el servidor devuelve un 402.</li>
<li>Si llega con pago válido, devuelve el contenido.</li>
</ul>
</li>
</ul>
<h3>La versión 2 del protocolo</h3>
<p>x402 se lanzó en mayo de 2025 y en diciembre de ese mismo año ya salió la versión 2, basada en lo aprendido con los primeros meses de uso.</p>
<p>Los cambios principales del V2 son bastantes:</p>
<ul>
<li>Soporte multichain de serie, lo que significa que <strong>funciona con stablecoins y tokens en varias cadenas de bloques</strong> (Base, Solana y otras) sin necesidad de lógica personalizada. También es compatible con pasarelas de pago tradicionales, de modo que un «facilitador» puede procesar pagos por ACH, SEPA o tarjeta dentro del mismo modelo.</li>
<li><strong>Sesiones reutilizables basadas en wallet</strong>, para que un cliente que ya ha pagado no tenga que repetir la transacción en cada petición. Esto es importante para agentes de IA que hacen muchas llamadas seguidas: sin sesiones, cada petición individual sería una transacción en la cadena de bloques, algo lento y caro. Con sesiones, el agente paga una vez y mantiene el acceso durante un periodo definido.</li>
<li><strong>Arquitectura modular de plugins</strong> que permite añadir nuevas cadenas de bloques, métodos de pago o esquemas de precio sin tocar el núcleo del protocolo. Y descubrimiento automático de endpoints, para que los facilitadores puedan indexar los servicios de pago disponibles sin configuración manual.</li>
<li><strong>Las cabeceras HTTP se han actualizado</strong>, y ahora las antiguas cabeceras con prefijo <code>X-</code> (ya obsoletas según las convenciones HTTP) se han reemplazado por <code>PAYMENT-REQUIRED</code>, <code>PAYMENT-SIGNATURE</code> y <code>PAYMENT-RESPONSE</code>.</li>
</ul>
<h2>Quién está ahora detrás de x402</h2>
<p><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158920 size-full" src="https://ayudawp.com/wp-content/uploads/2026/04/x402-linux-foundation.jpg" alt="x402 linux foundation" width="1200" height="480" srcset="https://ayudawp.com/wp-content/uploads/2026/04/x402-linux-foundation.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/x402-linux-foundation-768x307.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>Aquí es donde la cosa se pone seria. x402 empezó como un proyecto de Coinbase (la mayor plataforma de intercambio de criptomonedas de Estados Unidos). En septiembre de 2025 Coinbase y Cloudflare anunciaron su intención de crear la <strong>x402 Foundation</strong>, y el 2 de abril de 2026 la fundación se ha constituido oficialmente bajo el paraguas de la Linux Foundation.</p>
<p>Los <strong>miembros fundadores</strong> son Amazon Web Services, American Express, Cloudflare, Coinbase, Google, Mastercard, Microsoft, Shopify, Stripe y Visa. También están Adyen, Circle, Fiserv, KakaoPay, Polygon Labs, PPRO y la Solana Foundation. Es decir, prácticamente <strong>todos los actores relevantes del sector de pagos</strong> global, las principales plataformas cloud y las empresas de infraestructura web más grandes del mundo.</p>
<p>El propio Jim Zemlin, director ejecutivo de la Linux Foundation, ha dicho que <strong>x402 tendrá gobernanza abierta y comunitaria</strong>, igual que otros estándares que gestiona la fundación. Coinbase ha cedido la propiedad del protocolo y ya no es «su» estándar, es un estándar de la industria.</p>
<p>Las cifras actuales del protocolo pasan porque en los últimos 30 días se han procesado más de 75 millones de transacciones por un volumen superior a 24 millones de dólares, con más de 94.000 compradores y 22.000 vendedores. No es tráfico de prueba, <strong>hay empresas ya cobrando y pagando a través del protocolo</strong>.</p>
<p>Un dato que merece atención es que <strong>Google ya ha integrado x402 como pasarela de pago por defecto en su protocolo de pagos para agentes de IA</strong>, Visa ha lanzado una herramienta CLI de pagos orientada a comercio de agentes, y Circle ha construido sus Nanopayments (micropagos de fracciones de céntimo) directamente sobre x402. El ecosistema va creciendo a toda leche.</p>
<p>Lo que más llama la atención no es la tecnología en sí, sino que empresas de criptomonedas (Coinbase, Circle, Solana Foundation), gigantes del pago tradicional (Visa, Mastercard, American Express, Stripe), plataformas cloud (AWS, Google, Microsoft) e infraestructura web (Cloudflare, Shopify) están todas en la misma mesa.</p>
<p>No es habitual ver a Visa y a la Solana Foundation compartiendo fundación, y eso te dice algo sobre lo en serio que se están tomando la idea de que <strong>los pagos entre máquinas necesitan un estándar</strong> común.</p>
<h2>x402 frente al enfoque manual con status_header(402)</h2>
<p>En el <a href="https://ayudawp.com/402-payment-required/" target="_blank" rel="noopener ugc">artículo anterior sobre el 402</a> mostrábamos cómo devolver un código 402 desde WordPress usando <code>status_header( 402 )</code> con cabeceras informativas de precio y una URL de contacto. Ese enfoque sigue siendo válido, pero conviene entender en qué se diferencia de lo que hace x402.</p>
<p>El código que te proponía en aquel artículo es <strong>declarativo</strong>, o sea, le dices al bot «esto cuesta dinero, aquí tienes dónde informarte». Es una señal, un cartel que dice «hay precio», pero el pago no ocurre dentro del propio protocolo HTTP. Si el bot quiere pagar, tiene que salir de la petición, ir a la URL de contacto, negociar un acuerdo y volver con algún tipo de credencial.</p>
<p><strong>x402 es transaccional</strong>, pues el pago sucede dentro del propio intercambio HTTP. El servidor dice cuánto cuesta, el cliente paga en la cadena de bloques, reenvía la petición con la prueba de pago, y el contenido se sirve. <strong>Todo automático, todo en tiempo real, sin intervención humana</strong> en ningún punto.</p>
<p>Son dos niveles distintos y, en la práctica, complementarios. El enfoque manual es viable hoy para cualquier WordPress sin dependencias externas y funciona como barrera frente a rastreadores de IA. x402 requiere plugins específicos y un ecosistema cripto funcional (wallets, stablecoins, facilitadores), pero a cambio permite cobros reales automatizados.</p>
<p>Si tu objetivo es simplemente bloquear rastreadores de IA con una señal de que tu contenido no es gratis, el snippet manual con <code>status_header( 402 )</code> sigue siendo la opción más sencilla y controlable. No depende de ningún servicio externo, no requiere wallet, y lo puedes implementar en cinco minutos con un mu-plugin. Si lo que quieres es cobrar de verdad, automáticamente y sin intervención humana, ahí es donde x402 entra en juego.</p>
<p>También hay un escenario intermedio: puedes usar el enfoque manual como primera barrera y tenerlo listo para el día en que los facilitadores x402 estén suficientemente maduros para añadir la capa transaccional encima. El código de estado 402 es el mismo en ambos casos, lo que cambia es lo que hay detrás.</p>
<h2>El elefante en la habitación son las criptomonedas</h2>
<p>No tiene sentido hablar de x402 sin mencionar la parte que seguramente genere más resistencia en la comunidad WordPress en general, y la hispana en particular, y es que todo esto funciona con criptomonedas.</p>
<p>Un matiz importante es no estamos hablando de Bitcoin o de tokens especulativos. x402 usa <strong>stablecoins</strong>, que son criptomonedas vinculadas al valor de una moneda fiduciaria (USDC está vinculada al dólar estadounidense 1:1). Sin fluctuación, sin especulación. Pagar 0,05 USDC equivale a pagar 0,05 dólares, hoy y mañana, funciona de este modo, para bien y para mal.</p>
<p>Dicho esto, la realidad práctica para un propietario de web WordPress en España, Mexico, Argentina, Chile, Perú, Costa Rica o cualquier otro país que no sea los EEUU es que necesitas un wallet de criptomonedas, necesitas saber qué es USDC, necesitas entender en qué cadena de bloques estás operando, y necesitas gestionar la conversión a euros o tu divisa local si quieres ese dinero en tu cuenta bancaria.</p>
<p>Para quien esté familiarizado con el ecosistema cripto, es trivial, para el resto es una barrera considerable.</p>
<p>Hay dos señales de que esto podría cambiar.</p>
<ol>
<li>La primera es que Stripe y Visa son miembros fundadores de la x402 Foundation. Que las dos mayores infraestructuras de pago del mundo estén dentro sugiere que eventualmente <strong>habrá puentes con métodos de pago tradicionales</strong> (tarjeta, transferencia, domiciliación).</li>
<li>La segunda es que la versión 2 del protocolo ya contempla explícitamente la compatibilidad con pasarelas de pago estándar (ACH, SEPA, tarjetas). Pero hoy, en abril de 2026, la única pasarela funcional es cripto.</li>
</ol>
<p>Luego está la regulación europea, como siempre poniendo todo aún más complicado. El reglamento <strong>MiCA</strong> (Markets in Crypto-Assets), en vigor desde junio de 2024, establece un marco normativo para las stablecoins en la UE. USDC de Circle cumple con MiCA, lo que le da cierta seguridad jurídica, pero las obligaciones fiscales y contables de recibir pagos en stablecoins son algo que cada propietario de web tendrá que consultar con su asesor.</p>
<p>Para ponerte un ejemplo concreto, si recibes 50 $ en USDC al mes por acceso de agentes de IA a tu contenido, esos ingresos hay que declararlos. Necesitas saber cómo convertirlos a euros (a través de un exchange como Coinbase o Binance, o directamente con Stripe si integra x402 como facilitador), cómo registrarlos contablemente, y cómo aplicar el IVA si corresponde. Nada de esto es algo insalvable, pero es una capa de complicación que no existe cuando cobras por PayPal o por transferencia.</p>
<h2>Cloudflare y su CMS (EmDash) con x402 de serie</h2>
<p>Un detalle que merece mención aunque no vamos a entrar en profundidad ahora, porque <a href="https://ayudawp.com/emdash-wordpress/" target="_blank" rel="noopener ugc">ya escribí sobre ello</a> es que Cloudflare ha presentado <strong>EmDash</strong>, un CMS de código abierto que se posiciona como «sucesor espiritual de WordPress» y que trae soporte nativo para x402 integrado de fábrica. Cualquier sitio EmDash puede cobrar por acceso a contenido configurando qué páginas son de pago, cuánto cuestan y una dirección de wallet, todo ello sin código, sin plugins adicionales.</p>
<p>Que Cloudflare haya decidido que los micropagos a agentes de IA son una funcionalidad nativa de CMS, no un plugin, es una señal que WordPress debería tomarse en serio. Pero ya te digo que no me enrollo más al respecto, ya he escrito de sobra de EmDash, qué es, cómo afecta a WordPress y cómo probarlo en otros artículos.</p>
<h2>x402 en WordPress</h2>
<p><img loading="lazy" decoding="async" class="sombra alignnone wp-image-156084 size-full" src="https://ayudawp.com/wp-content/uploads/2025/10/agentic-commerce-protocol-wordpress-woocommerce.jpg" alt="agentic commerce protocol wordpress woocommerce" width="1200" height="800" srcset="https://ayudawp.com/wp-content/uploads/2025/10/agentic-commerce-protocol-wordpress-woocommerce.jpg 1200w, https://ayudawp.com/wp-content/uploads/2025/10/agentic-commerce-protocol-wordpress-woocommerce-768x512.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>Y ahora la parte que nos interesa, <strong>¿se ya puede usar x402 en WordPress?</strong> Pues sí, aunque con matices importantes. De momento dos opciones disponibles.</p>
<h3>PayLayer</h3>
<p><a href="https://paylayer.org/" target="_blank" rel="nofollow noopener">PayLayer</a> es un plugin WordPress <strong>diseñado específicamente para monetizar el tráfico de agentes de IA usando el protocolo x402</strong>. Su propuesta es que los bots de IA pagan por acceder al contenido, mientras que los visitantes humanos siguen viendo la web con normalidad y sin interrupciones.</p>
<p>Instalas el plugin, conectas un wallet de Solana, y configuras qué contenido requiere pago y cuánto cuesta. Puedes definir precios por petición, por cada mil palabras o una tarifa fija por recurso, y puedes aplicar las reglas por tipo de contenido, categoría, etiqueta o ruta de la REST API.</p>
<ul>
<li>Cuando un agente de IA solicita un contenido protegido, PayLayer le devuelve un <code>HTTP 402</code> con las instrucciones de pago en las cabeceras, el agente paga, y recibe el contenido.</li>
<li>Cuando un visitante humano solicita el mismo contenido, recibe un <code>HTTP 200</code> y ve la página con normalidad. La distinción se hace analizando las cabeceras de la petición (user agent y cabeceras <code>Accept</code>).</li>
</ul>
<p>Tiene también <strong>integración con WooCommerce</strong>, pudiendo permitir que agentes de IA compren productos de tu tienda de forma automática y recurrente. El agente añade productos al carrito, procesa el pago mediante x402, y WooCommerce genera el pedido automáticamente. Los pedidos de agentes se etiquetan para que puedas distinguirlos de las compras normales.</p>
<p>El escritorio muestra las visitas pagadas frente a las bloqueadas, los <strong>ingresos por contenido y qué agentes han pagado</strong>. Útil para ir ajustando precios según datos reales.</p>
<p>Un ejemplo práctico sería por ejemplo un blog de recetas con 500 artículos bien posicionados. y los agentes de IA de ChatGPT o Gemini pasan por tu sitio constantemente para alimentar sus respuestas. Pues bien, con PayLayer podrías cobrar 0,002 € por cada receta a la que un agente acceda, mantener el contenido completamente abierto para los humanos que llegan desde Google, y a final de mes tener un ingreso extra proporcional al volumen de tráfico automatizado que recibes.</p>
<p>No es un modelo que vaya a reemplazar a AdSense mañana pero sí una <strong>fuente de ingresos complementaria por un tráfico que hasta ahora no generaba nada</strong>.</p>
<h3>ICPay (Instant Crypto Payments)</h3>
<p><a href="https://wordpress.org/plugins/icpay-payments/" target="_blank" rel="nofollow noopener">ICPay</a> es un plugin de pagos crypto más generalista que está en el repositorio oficial de WordPress.org. Admite más de 50 criptomonedas y tokens en varias cadenas (Base, Solana, Internet Computer), y <strong>ha añadido x402 de Coinbase como opción de pago</strong>.</p>
<p>A diferencia de PayLayer, <strong>ICPay no está centrado en la monetización de tráfico de IA</strong>. Es un plugin de pagos crypto con integración WooCommerce que incluye bloques de Gutenberg y shortcodes para botones de pago, botes de propinas, muros de contenido premium y termómetros de donaciones. x402 es uno más de sus métodos de pago, no el eje central del plugin.</p>
<p>Tiene menos de 10 instalaciones activas y ninguna reseña a día de hoy. <strong>Cobra una comisión del 0,5% por transacción</strong> y los pagos van directos a tu wallet sin intermediarios.</p>
<h3>¿Funcionan?</h3>
<p>Esto aún está en fase muy temprana. PayLayer se lanzó en enero de 2026 y el otro, ICPay, tiene menos de 10 instalaciones. Ningún sitio WordPress grande los está usando a escala todavía, al menos de forma pública o que yo sepa. Yo los tengo en pruebas, pero aún sin datos que pueda (ni deba) compartir. Ten en cuenta que <strong>son las primeras herramientas de un ecosistema que está naciendo</strong>.</p>
<p>Dicho esto, que la infraestructura de plugins exista ya, antes incluso de que la x402 Foundation se haya constituido formalmente, dice algo sobre la velocidad a la que se mueve este espacio.</p>
<h2>Para quién tiene sentido x402 hoy</h2>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-158918" src="https://ayudawp.com/wp-content/uploads/2026/04/ia-comprando-contenido.jpg" alt="ia comprando contenido" width="1000" height="667" srcset="https://ayudawp.com/wp-content/uploads/2026/04/ia-comprando-contenido.jpg 1000w, https://ayudawp.com/wp-content/uploads/2026/04/ia-comprando-contenido-768x512.jpg 768w" sizes="auto, (max-width: 1000px) 100vw, 1000px"></p>
<ul>
<li>Tiene sentido no perderle la pista a x402 si gestionas un sitio WordPress con <strong>contenido de alto valor que los rastreadores de IA visitan con frecuencia</strong> (guías técnicas extensas, directorios de datos, comparativas, documentación especializada).</li>
<li>Si operas una API con WordPress, <strong>sirves datos estructurados y quieres monetizar el acceso</strong>.</li>
<li>Si tienes una tienda WooCommerce y quieres estar preparado para <a href="https://ayudawp.com/tag/acp/" target="_blank" rel="noopener ugc">cuando los agentes de IA de tus clientes compren productos directamente</a>.</li>
</ul>
<p><strong>No tiene mucho sentido aún </strong>si gestionas un blog pequeño o mediano donde el tráfico de bots de IA es marginal, si tu audiencia no está familiarizada con criptomonedas (y tú tampoco), o si dependes del tráfico orgánico de Google como fuente principal de visitas, porque las páginas que devuelven un 402 a los rastreadores dejarán de indexarse.</p>
<p><strong>Lo que hay que vigilar de cerca</strong> es:</p>
<ol>
<li>Cómo evoluciona la integración de métodos de pago dentro del protocolo (cuando Stripe o Visa actúen como facilitadores x402, la barrera cripto desaparece)</li>
<li>Cómo reacciona el ecosistema WordPress (plugins nuevos, integraciones con WooCommerce, posibles movimientos de Automattic)</li>
<li>Qué pasa con EmDash y otros CMS que están naciendo con x402 integrado de raíz.</li>
<li>También merece la pena seguir de cerca el esquema de pagos diferidos que Cloudflare ha propuesto para x402, que permitiría cobros automatizados en lugar de transacción por transacción, algo mucho más práctico para sitios con mucho volumen de tráfico automatizado.</li>
</ol>
<p>El protocolo <strong>x402 es la pieza que faltaba para que el código de estado HTTP 402 dejara de ser una curiosidad</strong> histórica y se convirtiera en infraestructura real. Que Google, Stripe, Visa, Mastercard y la Linux Foundation estén empujando en la misma dirección indica que no es una moda pasajera.</p>
<p>Para WordPress, hoy por hoy, <strong>estamos en la casilla de salida</strong>. Los cimientos ya están, las primeras herramientas existen, y la industria se ha posicionado, lo único que falta es que todo madure lo suficiente para que un propietario de web normal pueda activarlo sin necesitar un máster en criptografía.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/x402/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Cómo migrar de WordPress a EmDash</title>
		<link>https://ayudawp.com/migrar-wordpress-emdash/</link>
					<comments>https://ayudawp.com/migrar-wordpress-emdash/#respond</comments>
		
		<dc:creator><![CDATA[Fernando Tellado]]></dc:creator>
		<pubDate>Wed, 08 Apr 2026 06:28:00 +0000</pubDate>
				<category><![CDATA[Tutoriales - Trucos]]></category>
		<category><![CDATA[WordPress.org]]></category>
		<category><![CDATA[Astro]]></category>
		<category><![CDATA[Avanzado]]></category>
		<category><![CDATA[Cloudflare]]></category>
		<category><![CDATA[EmDash]]></category>
		<category><![CDATA[Experto]]></category>
		<category><![CDATA[WXR]]></category>
		<guid isPermaLink="false">https://ayudawp.com/?p=158863</guid>

					<description><![CDATA[Si ya has instalado EmDash y quieres ver cómo queda tu contenido de WordPress en el nuevo CMS de Cloudflare, aquí tienes cómo migrar tus entradas, páginas, medios, taxonomías y campos personalizados. El proceso es bastante rápido para un blog o una web de contenido normal, pero conviene saber qué se migra, qué no y dónde te vas a encontrar trabajo manual.]]></description>
										<content:encoded><![CDATA[<p>Si ya has <a href="https://ayudawp.com/instalar-emdash/" target="_blank" rel="noopener ugc">instalado EmDash</a> y quieres ver cómo queda tu contenido de WordPress en <a href="https://ayudawp.com/emdash-wordpress/">el nuevo CMS de Cloudflare</a>, aquí tienes cómo migrar tus entradas, páginas, medios, taxonomías y campos personalizados. El proceso es bastante rápido para un blog o una web de contenido normal, pero conviene saber qué se migra, qué no y dónde te vas a encontrar trabajo manual.</p>
<h2>Qué se puede migrar y qué no</h2>
<p>Antes de tocar nada, conviene tener claro qué es lo que EmDash puede traerse de WordPress y qué se queda en el camino.</p>
<p><strong>Lo que sí migra:</strong></p>
<ul>
<li>Entradas y páginas, incluidos borradores y contenido privado (con el método WXR).</li>
<li>Tipos de contenido personalizados (CPTs).</li>
<li>Categorías, etiquetas y taxonomías personalizadas, con toda su jerarquía.</li>
<li>Medios (imágenes, vídeos, documentos) con metadatos como texto alternativo, pie de foto y dimensiones.</li>
<li>Datos de SEO de Yoast SEO y Rank Math como datos meta.</li>
<li>Autores y su atribución al contenido.</li>
<li>Ajustes (parcial, solo los que contempla EmDash)</li>
</ul>
<p><strong>Lo que no migra:</strong></p>
<ul>
<li>Plugins: La arquitectura es completamente diferente (PHP vs. TypeScript, acceso total vs. sandbox). No hay equivalencia directa posible.</li>
<li>Temas: Hay que reconstruirlos como proyectos de Astro. EmDash incluye Agent Skills para ayudar a portarlos con agentes de IA, pero no es automático.</li>
<li>Bloques de Gutenberg personalizados: Se pueden reconstruir con el Block Kit de EmDash, pero hay que hacerlo uno a uno.</li>
<li>Funcionalidad específica de plugins: formularios de contacto, pasarelas de pago, sistemas de reservas, constructores de páginas, membresías. Todo eso tendrías que rehacerlo en EmDash (si es que existe la posibilidad) o prescindir de ello.</li>
<li>Widgets y menús de navegación: La estructura de navegación se define de forma diferente en Astro.</li>
<li>Campos personalizados, incluidos los de ACF (Advanced Custom Fields), con información de tipo.</li>
</ul>
<p>El contenido y los datos migran bien, la funcionalidad no. Si tu web es un blog o un sitio de contenido la migración es relativamente sencilla. Si tienes una tienda online con WooCommerce, un sistema de membresía con Restrict Content Pro o una web con varios plugins haciendo cosas distintas, la migración es otro cantar y seguramente no te compense ni de lejos.</p>
<h2>Método 1: exportar WXR desde WordPress</h2>
<p>El WXR (WordPress eXtended RSS) es el formato de exportación nativo de WordPress, un archivo XML que contiene todo el contenido de tu sitio. Es el método más completo y el más sencillo si tienes un sitio de tamaño pequeño o mediano.</p>
<h3>Paso 1: exportar el contenido desde WordPress</h3>
<p>Entra en tu panel de WordPress y ve a <strong>Herramientas → Exportar</strong>.</p>
<p><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158898 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/exportar-wordpress-1200x675.jpg" alt="exportar wordpress" width="1200" height="675" srcset="https://ayudawp.com/wp-content/uploads/2026/04/exportar-wordpress-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/exportar-wordpress-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/exportar-wordpress-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/exportar-wordpress.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>Selecciona <strong>Todo el contenido</strong> para exportar entradas, páginas, comentarios, campos personalizados, términos de navegación y Custom Post Types. Si solo quieres migrar una parte (por ejemplo, solo las entradas), puedes filtrar por tipo de contenido, categoría, autor o rango de fechas.</p>
<p>Pulsa <strong>Descargar el archivo de exportación</strong>. WordPress generará un archivo XML con extensión <code>.xml</code> que se descargará a tu ordenador.</p>
<p>Si prefieres hacerlo por WP-CLI (por ejemplo, para sitios grandes o si quieres automatizarlo), el comando es:</p>
<pre><code>wp export --dir=/ruta/donde/guardar/</code></pre>
<p>Esto genera uno o varios archivos WXR en la carpeta que indiques.</p>
<h3>Paso 2: importar el WXR en EmDash</h3>
<p>Abre el panel de administración de EmDash (normalmente <code>http://localhost:4321/admin</code> si es local, o la URL de tu despliegue en Cloudflare).</p>
<p>Ve a la sección de importación. EmDash tiene un importador integrado en el propio panel de administración.</p>
<p><a href="https://ayudawp.com/?attachment_id=158899" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158899 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-analizar-sitio-importar-1200x805.jpg" alt="emdash admin analizar sitio importar" width="1200" height="805" srcset="https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-analizar-sitio-importar-1200x805.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-analizar-sitio-importar-768x515.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-analizar-sitio-importar-1536x1030.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-analizar-sitio-importar.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>Selecciona la opción de importar desde archivo WXR y sube el archivo XML que exportaste de WordPress.</p>
<p>EmDash analizará el archivo y te mostrará un resumen de lo que va a importar: número de entradas, páginas, tipos personalizados, taxonomías y archivos de medios.</p>
<p><a href="https://ayudawp.com/?attachment_id=158900" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158900 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importador-wordpress-wxr-subido-1200x585.jpg" alt="emdash admin importador wordpress wxr subido" width="1200" height="585" srcset="https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importador-wordpress-wxr-subido-1200x585.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importador-wordpress-wxr-subido-768x374.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importador-wordpress-wxr-subido-1536x749.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importador-wordpress-wxr-subido.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>Confirma la importación. El proceso tarda entre unos segundos y varios minutos dependiendo del tamaño del sitio. EmDash descargará automáticamente los archivos de medios desde las URLs originales de tu WordPress y los almacenará en su propia librería de medios (sistema de archivos en local, R2 en Cloudflare).</p>
<p><a href="https://ayudawp.com/?attachment_id=158901" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158901 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importacion-realizlada-con-errores-1200x754.jpg" alt="emdash admin importacion realizlada con errores" width="1200" height="754" srcset="https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importacion-realizlada-con-errores-1200x754.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importacion-realizlada-con-errores-768x482.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importacion-realizlada-con-errores-1536x965.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-admin-importacion-realizlada-con-errores.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<h3>Qué pasa con el contenido durante la importación</h3>
<p>Hay varios detalles que conviene saber sobre cómo EmDash procesa el contenido de WordPress:</p>
<ul>
<li><strong>El HTML se convierte a Portable Text:</strong> WordPress almacena el contenido como HTML (o como bloques de Gutenberg serializados en HTML con comentarios). EmDash lo convierte a Portable Text, su formato nativo en JSON estructurado. El texto, los enlaces, las imágenes incrustadas y el formato básico (negritas, cursivas, encabezados, listas, citas) se mantienen. Los bloques de Gutenberg más complejos (columnas, grupos, bloques personalizados) pueden perder estructura o convertirse en HTML genérico.</li>
<li><strong>Las taxonomías se convierten en colecciones:</strong> Las categorías y etiquetas de WordPress se importan como colecciones separadas en EmDash, manteniendo la jerarquía de las categorías (padres e hijas).</li>
<li><strong>Los Custom Post Types se pueden asignar:</strong> Si tu WordPress tiene tipos de contenido personalizados (por ejemplo, «Proyectos», «Testimonios», «Productos»), EmDash puede crear colecciones equivalentes durante la importación. Lo ideal es crear las colecciones en EmDash antes de importar, definiendo los campos que necesitas, y luego mapear los tipos de WordPress a las colecciones de EmDash durante el proceso.</li>
<li><strong>Los campos personalizados se importan con tipo:</strong> El exportador reconoce los grupos de campos y exporta los valores con información de tipo. Un campo de imagen se importa como campo de tipo media en EmDash, un campo de texto como texto, un repetidor como array. No es perfecto al 100% (los campos más complejos pueden necesitar ajustes), pero para campos estándar funciona bien.</li>
</ul>
<h2>Método 2: el plugin EmDash Exporter</h2>
<p>El segundo método es instalar un plugin en tu WordPress que crea un endpoint seguro por el que EmDash puede importar el contenido directamente, sin necesidad de descargar y subir archivos. Es más rápido para sitios grandes porque transmite el contenido en streaming en vez de pasar por un archivo intermedio.</p>
<h3>Paso 1: instalar el plugin en WordPress</h3>
<p>Descarga el plugin <a href="https://github.com/emdash-cms/wp-emdash/tree/main/plugins/emdash-exporter" target="_blank" rel="nofollow noopener">EmDash Exporter desde GitHub</a>. De momento no está en el directorio de plugins de WordPress.org, así que tienes que instalarlo manualmente.</p>
<p>Sube la carpeta <code>emdash-exporter</code> a <code>/wp-content/plugins/</code> de tu WordPress (por FTP, por el gestor de archivos de tu hosting o por WP-CLI) y actívalo desde <strong>Plugins</strong> en el panel de WordPress.</p>
<p><a href="https://ayudawp.com/?attachment_id=158903" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158903 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/wp-emdash-exporter-activo-1200x675.jpg" alt="wp emdash exporter activo" width="1200" height="675" srcset="https://ayudawp.com/wp-content/uploads/2026/04/wp-emdash-exporter-activo-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/wp-emdash-exporter-activo-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/wp-emdash-exporter-activo-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/wp-emdash-exporter-activo.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<h3>Paso 2: crear una contraseña de aplicación</h3>
<p>El plugin usa las <a href="https://ayudawp.com/application-passwords/" target="_blank" rel="noopener ugc">contraseñas de aplicación de WordPress</a> para verificar las peticiones de EmDash. Ve a tu perfil de usuario en WordPress (<strong>Usuarios → Tu perfil</strong>), baja hasta la sección de <strong>Contraseñas de aplicación</strong>, escribe un nombre identificativo (por ejemplo, «EmDash») y pulsa <strong>Añadir nueva contraseña de aplicación</strong>.</p>
<p><a href="https://ayudawp.com/?attachment_id=158904" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158904 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/application-passwords-emdash-1200x675.jpg" alt="application passwords emdash" width="1200" height="675" srcset="https://ayudawp.com/wp-content/uploads/2026/04/application-passwords-emdash-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/application-passwords-emdash-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/application-passwords-emdash-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/application-passwords-emdash.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>WordPress te mostrará la contraseña generada. <strong>Cópiala ahora porque no la podrás ver de nuevo.</strong> La vas a necesitar en el siguiente paso.</p>
<h3>Paso 3: conectar EmDash a tu WordPress</h3>
<p>En el panel de EmDash, ve a la sección de importación y selecciona la opción de importar desde WordPress (API REST).</p>
<p>Introduce la URL de tu sitio WordPress y las credenciales: tu nombre de usuario de WordPress y la contraseña de aplicación que acabas de generar.</p>
<p><a href="https://ayudawp.com/?attachment_id=158905" rel="nofollow"><img loading="lazy" decoding="async" class="sombra alignnone wp-image-158905 size-medium" src="https://ayudawp.com/wp-content/uploads/2026/04/conectar-importar-wordpress-con-emdash-exporter-1200x497.jpg" alt="conectar importar wordpress con emdash exporter" width="1200" height="497" srcset="https://ayudawp.com/wp-content/uploads/2026/04/conectar-importar-wordpress-con-emdash-exporter-1200x497.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/conectar-importar-wordpress-con-emdash-exporter-768x318.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/conectar-importar-wordpress-con-emdash-exporter-1536x636.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/conectar-importar-wordpress-con-emdash-exporter.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></a></p>
<p>EmDash sondeará tu sitio WordPress y te mostrará un resumen del contenido disponible, algo parecido a esto:</p>
<p><img loading="lazy" decoding="async" class="alignnone size-medium wp-image-158906" src="https://ayudawp.com/wp-content/uploads/2026/04/emdash-importar-exporter-wp-1200x675.jpg" alt="emdash importar exporter wp" width="1200" height="675" srcset="https://ayudawp.com/wp-content/uploads/2026/04/emdash-importar-exporter-wp-1200x675.jpg 1200w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-importar-exporter-wp-768x432.jpg 768w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-importar-exporter-wp-1536x864.jpg 1536w, https://ayudawp.com/wp-content/uploads/2026/04/emdash-importar-exporter-wp.jpg 1920w" sizes="auto, (max-width: 1200px) 100vw, 1200px"></p>
<p>Selecciona lo que quieres importar y lanza el proceso. El plugin transmite el contenido directamente desde WordPress a EmDash, incluyendo los medios. Para sitios con muchos archivos de medios, este método es bastante más rápido que el WXR porque no tienes que descargar un XML gigante a tu ordenador y luego volver a subirlo.</p>
<p>El plugin también admite importación incremental, así que puedes ejecutarlo varias veces durante una ventana de migración para sincronizar contenido nuevo sin duplicar lo que ya se importó.</p>
<h3>Seguridad del proceso</h3>
<p>El endpoint que crea el plugin solo es accesible con autenticación mediante la contraseña de aplicación. Nadie puede acceder a él sin las credenciales. Aun así, asegúrate de que tu WordPress tiene HTTPS habilitado antes de hacer la migración. Las contraseñas de aplicación viajan en las cabeceras de las peticiones HTTP, así que sin HTTPS estarías enviando las credenciales en texto plano.</p>
<p>Una vez terminada la migración, desactiva y borra el plugin de tu WordPress. No tiene sentido dejarlo instalado si ya no lo necesitas.</p>
<h2>¿Y después de la migración que hago?</h2>
<p>Importar el contenido es solo la primera parte. Si tu objetivo es que EmDash sustituya a tu WordPress en producción (algo que a día de hoy, con la versión 0.1.0, yo no recomendaría para un sitio real), hay varias cosas que necesitas resolver después.</p>
<h3>Las URLs y el SEO</h3>
<p>Si tu sitio WordPress tenía la estructura de permalinks <code>/nombre-de-la-entrada/</code>, necesitas asegurarte de que EmDash genera las mismas URLs. De lo contrario, todos tus enlaces posicionados en Google devolverán un 404 y perderás el tráfico orgánico.</p>
<p>EmDash tiene gestión de redirecciones integrada, así que puedes configurar redirecciones 301 desde las URLs antiguas a las nuevas si la estructura no coincide. Pero lo ideal es que las URLs sean idénticas para evitar problemas.</p>
<p>Revisa también que los metadatos de SEO (títulos, descripciones, URLs canónicas) se han importado correctamente si usabas Yoast SEO o Rank Math. El importador trae estos datos, pero conviene comprobar que están en el lugar correcto.</p>
<h3>Los medios</h3>
<p>Verifica que las imágenes se ven bien en el contenido importado. El proceso de importación intenta descargar los archivos y actualizar las URLs internas, pero si tenías imágenes con rutas absolutas metidas a mano en el HTML (fuera del sistema de medios de WordPress), esas podrían quedarse apuntando a tu WordPress antiguo. Revisa un par de entradas con muchas imágenes para asegurarte.</p>
<h3>Los bloques de Gutenberg</h3>
<p>Si tu contenido WordPress usaba bloques básicos de Gutenberg (párrafos, encabezados, imágenes, listas, citas, código), la conversión a Portable Text debería funcionar bien. Los bloques más complejos y específicos (columnas, grupos anidados, bloques de plugins como los de Kadence o Spectra) pueden perder formato o convertirse en HTML plano.</p>
<p>EmDash incluye un <a href="https://github.com/emdash-cms/emdash/blob/main/skills/creating-plugins/references/block-kit.md" target="_blank" rel="nofollow noopener">Block Kit Agent Skill</a> que ayuda a reconstruir bloques personalizados como componentes nativos de EmDash. Si usas Claude Code u otro agente de IA compatible con Agent Skills, puedes apuntarlo al skill y pedirle que reconstruya tus bloques. No es magia, pero acelera bastante el proceso.</p>
<h3>El tema</h3>
<p>Tu tema de WordPress no migra, de esto te olvidas, pero no es diferente en WordPress. En EmDash los temas son proyectos de Astro con páginas, layouts y componentes. Si usabas un tema personalizado o un tema hijo con muchas modificaciones, toca reconstruirlo.</p>
<p>EmDash incluye un <a href="https://github.com/emdash-cms/emdash/blob/main/skills/wordpress-theme-to-emdash/SKILL.md" target="_blank" rel="nofollow noopener">skill para portar temas de WordPress a EmDash</a> con tablas de equivalencia entre los template tags de WordPress y las llamadas a la API de EmDash. Está pensado para dárselo a un agente de IA y que haga el trabajo pesado. Para temas sencillos puede funcionar, para temas complejos con mucha lógica en <code>functions.php</code> vas a necesitar reescribir bastante.</p>
<p>Las plantillas que trae EmDash pueden servirte como punto de partida si tu sitio encaja en alguno de esos formatos.</p>
<h3>Los plugins es lo que duele</h3>
<p>Aquí es donde la migración se pone cuesta arriba porque tus plugins de WordPress no migran y no tienen equivalente directo en EmDash. El ecosistema de plugins de EmDash está vacío, no hay directorio, no hay marketplace, no hay nada publicado salvo un par de experimentos que hizo la comunidad el día del lanzamiento.</p>
<p>Esto significa que toda la funcionalidad que dependía de plugins la pierdes, y en un WordPress típico, casi en cualquier web actual, <strong>los plugins son los que marcan la diferencia entre unas paginitas web o una web profesional</strong>. De todos modos vamos a repasar los casos más comunes y qué opciones tienes:</p>
<ul>
<li><strong>SEO (Yoast SEO, Rank Math, SEOPress):</strong> EmDash trae funcionalidad SEO básica integrada (títulos, descripciones y URLs canónicas). Pero no tienes análisis de contenido, sitemaps XML configurables, esquema de datos estructurados avanzado ni la monitorización que ofrecen estos plugins. Para un blog sencillo puede valer, para un sitio que depende del SEO técnico te vas a quedar corto, y eso siendo generoso.</li>
<li><strong>Formularios de contacto (Contact Form 7, WPForms, Gravity Forms):</strong> No hay un sistema de formularios configurable como los que ofrecen estos plugins. Si tu negocio depende de formularios complejos con lógica condicional, integraciones con CRM o pagos, no tienes solución en EmDash ahora mismo.</li>
<li><strong>Caché y rendimiento (WP Super Cache, W3 Total Cache, Zero Config Performance Optimization):</strong> No los necesitas, en teoría, y de momento. EmDash en Cloudflare es serverless y funciona en el edge, así que el rendimiento es nativo de la arquitectura (Astro, Cloudflare). No hay capas de caché que configurar porque no hay un servidor PHP generando páginas en cada petición. Este es uno de los puntos donde EmDash tiene ventaja razonable.</li>
<li><strong>Seguridad (Wordfence, Vigilant, Solid Security):</strong> Tampoco los necesitas en el sentido tradicional. El modelo de sandboxing de plugins (si lo tienes en Cloudflare) y la identificación con passkeys eliminan las dos vías de ataque más comunes en WordPress, que suelen ser plugins vulnerables y contraseñas débiles. Eso sí, recuerda que el sandboxing solo funciona en Cloudflare de pago.</li>
<li><strong>Tienda online (WooCommerce, Easy Digital Downloads):</strong> No hay equivalente. EmDash tiene soporte nativo para <a href="https://ayudawp.com/tag/x402/" target="_blank" rel="noopener ugc">x402</a> (micropagos por HTTP), que sirve para cobrar por acceso a contenido de forma automatizada, pero no es un sistema de ecommerce. No hay carrito, no hay gestión de productos, no hay pasarelas de pago tradicionales, no hay gestión de pedidos ni de envíos. Si tu web vende productos o servicios EmDash no es una opción.</li>
<li><strong>Maquetadores visuales (Elementor, Divi, Gutenberg).</strong> No existen en EmDash y no van a existir en el formato que conoces. Los temas en EmDash son código Astro (HTML, CSS, JavaScript/TypeScript). La edición permite modificar contenido de texto e imágenes pero no es un maquetador de arrastrar y soltar, no ya como Elementor, ni siquiera como Gutenberg. Si tu sitio fue creado entero con Elementor o Divi la migración implicaría <strong>reconstruir todo el diseño desde cero a pelo</strong>.</li>
<li><strong>Membresías y restricción de contenido (MemberPress, Restrict Content Pro, Paid Memberships Pro):</strong> No hay sistema de membresías integrado. El soporte de x402 permite cobrar por contenido individual, pero no gestiona suscripciones, niveles de acceso ni cuentas de usuario con contenido exclusivo al estilo de una membresía tradicional. También te olvidas de esto hasta que alguien no cree plugins y esas cosas a las que tan acostumbrados nos tiene sea CMS tan malo malísimo que es WordPress.</li>
<li><strong>Email marketing (Mailchimp, Mailerlite, etc.):</strong> No hay integración nativa con servicios de email marketing. Tendrías que implementar las conexiones tú mismo mediante un plugin personalizado de EmDash (usando el sistema de capacidades) o con los scripts de tu sistema de newsletter.</li>
<li><strong>Analítica (Site Kit, VigIA):</strong> No hay plugin de analítica ni rastreo. Puedes añadir manualmente el código de seguimiento de Google Analytics, Plausible o cualquier otro servicio en la plantilla de tu tema de Astro. No es difícil, pero tampoco tienes un panel integrado con los datos.</li>
<li><strong>Backups (UpdraftPlus, BackWPup, BlogVault):</strong> No hay sistema de backups integrado. En Cloudflare, la base de datos D1 tiene sus propios mecanismos de respaldo. En local con SQLite, la base de datos es un archivo que puedes copiar. Pero no hay nada comparable a la programación automática de backups con restauración en un clic que ofrecen estos plugins.</li>
</ul>
<p>Vamos, que no hace falta casi que te lo diga, si tu WordPress usa más de tres o cuatro plugins para funcionar como necesitas, la migración a EmDash significa perder esa funcionalidad y esperar a que alguien la reconstruya (o hacerlo tú mismo).</p>
<p>Para un blog o un sitio de contenido donde los plugins principales eran SEO, caché y un formulario de contacto, la transición es más o menos viable. Para cualquier cosa más compleja el coste de la migración es muy alto y el resultado va a ser un sitio con menos funcionalidad que el que ya tenías.</p>
<h2>¿Y si me arrepiento?, ¿se puede volver de EmDash a WordPress?</h2>
<p>Antes de migrar conviene saber si tiene vuelta atrás. La respuesta corta es que sí, pero no es tan fácil como la ida. Curioso ¿verdad?. Recuerda, te querías ir de un sistema totalmente abierto a otro <em>no tan abierto</em>.</p>
<p><strong>EmDash no tiene un botón de exportar WordPress</strong>. No existe un plugin exportador en sentido inverso ni un archivo WXR de salida. Lo que sí tiene es una API REST y una CLI que devuelve datos en JSON, así que el contenido es accesible de forma programática. La cuestión es cómo meterlo de vuelta en WordPress.</p>
<ul>
<li><strong>El contenido en texto_</strong> Tus entradas y páginas están almacenadas como Portable Text (JSON). Para llevarlas de vuelta a WordPress necesitas convertir ese JSON a HTML, que es lo que WordPress espera. No hay una herramienta oficial para hacerlo, pero Portable Text es un formato documentado y existen librerías en JavaScript (como <code>@portabletext/to-html</code>) que hacen la conversión. Con un script puedes extraer el contenido de la API de EmDash, convertirlo a HTML y usar la API REST de WordPress o WP All Import para importarlo. No es un clic, pero es factible.</li>
<li><strong>Los medios:</strong> Las imágenes y archivos están en el sistema de archivos local o en R2 de Cloudflare. Puedes descargarlos y subirlos a WordPress con cualquier método habitual (FTP, librería de medios, WP-CLI con <code>wp media import</code>). Lo que tendrás que actualizar después son las URLs internas del contenido para que apunten a la nueva ubicación en WordPress.</li>
<li><strong>Las taxonomías:</strong> Categorías, etiquetas y taxonomías personalizadas se pueden recrear en WordPress manualmente o por importación. Si tienes pocas, a mano va más rápido. Si tienes muchas, un script que lea la API de EmDash y escriba en la API REST de WordPress te ahorra tiempo.</li>
<li><strong>Los campos personalizados:</strong> Si creaste colecciones con campos tipados en EmDash (el equivalente a los Custom Post Types + ACF en WordPress), necesitas recrear la estructura en WordPress: registrar el tipo de contenido personalizado, configurar los grupos de campos en ACF y luego importar los datos. El mapeo no es automático.</li>
<li><strong>El SEO:</strong> Si EmDash importó tus títulos y descripciones de Yoast o Rank Math, esos datos están en las colecciones de EmDash. Puedes extraerlos y reimportarlos en WordPress asociándolos a los meta fields que usa tu plugin de SEO. Pero ojo: si durante el tiempo que estuviste en EmDash cambiaste URLs o estructura, tendrás que gestionar las redirecciones para no perder posicionamiento.</li>
<li><strong>Lo que no vuelve:</strong> Cualquier funcionalidad que construiste como plugin de EmDash (en TypeScript, con el modelo de capabilities) no se puede portar a WordPress. Tendrías que buscar el plugin de WordPress equivalente o reconstruir esa funcionalidad desde cero en PHP.</li>
</ul>
<p>El escenario más realista para la vuelta es que si mantuviste tu WordPress original funcionando en paralelo mientras probabas EmDash (lo cual es lo recomendable con una beta), <strong>volver es simplemente seguir usando tu WordPress de siempre</strong>. El único contenido que tendrías que migrar de vuelta sería lo que hubieras publicado en EmDash durante el período de prueba, y eso normalmente es poco.</p>
<blockquote><p><strong>Moraleja</strong>: no borres tu WordPress hasta estar completamente seguro de que EmDash te funciona. Y con una versión beta ese momento está muy lejos siquiera de planteárselo.</p></blockquote>
<h2>¿Merece la pena migrar ahora?</h2>
<p><strong>Mi consejo de amigo es que no migres un sitio en producción a EmDash</strong> a día de hoy. La versión beta es para desarrolladores, no un producto listo para producción.</p>
<p>Pero si quieres probar cómo quedaría tu contenido, hacer una migración de prueba en local (con SQLite, sin coste) es rápido y no afecta a tu WordPress para nada. Exportas el WXR, lo importas en una instalación local de EmDash y en unos minutos tienes una idea bastante clara de lo que funciona y lo que no.</p>
<p>Otra posibilidad es <a href="https://ayudawp.com/instalar-emdash/" target="_blank" rel="noopener ugc">animarte a instalarlo desde cero, y para eso también publiqué un tutorial con hasta 3 maneras de hacerlo</a>, así que no puedes decir que no te lo pongo fácil, incluso te animo. Otra cosa es que sea fan, que te lo recomiende.</p>
<p>Si te interesa seguir el desarrollo de EmDash y compararlo con lo que ofrece WordPress, también te puede interesar el <a href="https://ayudawp.com/emdash-wordpress/" target="_blank" rel="noopener ugc">análisis completo que publiqué sobre EmDash</a>, donde entro en detalle sobre la licencia MIT, el modelo de seguridad de plugins y si tiene sentido como alternativa real a WordPress.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ayudawp.com/migrar-wordpress-emdash/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>