{"id":74946,"date":"2024-05-13T10:05:53","date_gmt":"2024-05-13T08:05:53","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=74946&preview=true&preview_id=74946"},"modified":"2024-05-21T13:15:58","modified_gmt":"2024-05-21T11:15:58","slug":"wordpress-sveltekit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/wordpress-sveltekit\/","title":{"rendered":"Integrar SvelteKit con WordPress headless"},"content":{"rendered":"

Desde hace alg\u00fan tiempo, WordPress headless se ha convertido en una de las tendencias m\u00e1s importantes en el \u00e1mbito del desarrollo web. Desvincular el front end y el back end puede llevar a un mayor grado de control, aplicaciones omnicanal<\/a> y algunos usos interesantes de esta nueva tecnolog\u00eda.<\/p>\n

Muchos desarrolladores han disfrutado experimentando con frameworks como Vue.js<\/a> y React.js<\/a> o incluso frameworks web como Django<\/a> y Ruby on Rails<\/a>, que suelen ser pr\u00e1cticamente incompatibles con WordPress.<\/p>\n

Hay muchos frameworks de este tipo que funcionan bien con WordPress headless, pero SvelteKit es especial. Este framework de interfaz de usuario se cre\u00f3 espec\u00edficamente para facilitar el desarrollo de aplicaciones web con c\u00f3digo conciso y agradable. Puede agilizar f\u00e1cilmente la funcionalidad que normalmente no funciona bien en un entorno desacoplado.<\/p>\n

\u00bfQuieres saber m\u00e1s? Vamos a repasar algunos conceptos b\u00e1sicos de WordPress headless, y luego te ense\u00f1aremos todo sobre SvelteKit y c\u00f3mo hacerlo funcionar en tu entorno.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

\u00bfQu\u00e9 es WordPress headless?<\/h2>\n

Es posible que ya conozcas la diferencia entre el front-end y el back-end de WordPress<\/a>. El back end es donde van todas las operaciones subyacentes del CMS: creas entradas y p\u00e1ginas, instalas plugins, dise\u00f1as tu tema y cambias la configuraci\u00f3n.<\/p>\n

En el otro extremo, el front end es b\u00e1sicamente el sitio web que se muestra a los visitantes. WordPress, junto con sus temas y plugins, utiliza varias funciones como get_posts()<\/a> para extraer y mostrar los datos que necesita.<\/p>\n

Por ejemplo, el widget Entradas Recientes que se muestra en la p\u00e1gina de inicio. Usando funciones como esa, accede a los datos desde el back-end y muestra tus \u00faltimas entradas en el front-end p\u00fablico.<\/p>\n

\"art\u00edculos
Los art\u00edculos relacionados se muestran en el blog Kinsta.<\/figcaption><\/figure>\n

El back end y el front end de WordPress est\u00e1n estrechamente entrelazados y, en muchos sentidos, dependen el uno del otro para funcionar, pero eso no significa que sean inseparables.<\/p>\n

Ah\u00ed es donde entra el concepto de \u00abWordPress headless\u00bb: con \u00e9l, separas, o desvinculas, el back-end de WordPress. Entonces eres libre de conectarlo a cualquier tecnolog\u00eda front end que desees utilizar \u2014 no s\u00f3lo PHP, sino cualquier framework de desarrollo web<\/a>, o incluso una aplicaci\u00f3n.<\/p>\n

Esto tiene la funcionalidad adicional de permitirte utilizar el CMS de WordPress en m\u00faltiples canales. Transporta las entradas de tu blog u otros elementos del CMS a m\u00faltiples sitios web, aplicaciones m\u00f3viles y donde quieras.<\/p>\n

En general, WordPress headless te da m\u00e1s control sobre el CMS y la posibilidad de utilizar tecnolog\u00edas que normalmente son incompatibles con \u00e9l. Tambi\u00e9n te evita tener que escribir toda una aplicaci\u00f3n desde cero \u2014 puedes utilizar el CMS integrado de WordPress para hacer parte del trabajo.<\/p>\n

\u00bfQu\u00e9 es la API REST?<\/h2>\n

Para que WordPress headless funcione, necesitas conectar tus aplicaciones mediante una API o Interfaz de Programaci\u00f3n de Aplicaciones (Application Programming Interface). Las API permiten que dos aplicaciones diferentes interact\u00faen entre s\u00ed, en este caso, el back-end de WordPress y tu aplicaci\u00f3n personalizada del front-end.<\/p>\n

Aunque hay muchos tipos de API, la API REST<\/a> es una de las que vienen integradas en WordPress. Esto permite a las aplicaciones externas recuperar datos de forma segura desde el backend de WordPress sin necesidad de pasar por la interfaz de administraci\u00f3n.<\/p>\n

La API REST se utiliza en diversas funciones oficiales de WordPress, como el editor de bloques, y la mayor\u00eda de los temas y plugins que necesitan una API para funcionar la utilizan.<\/p>\n

Esto tambi\u00e9n se aplica a las aplicaciones headless. Muchas de ellas utilizan la API REST para interactuar con WordPress, recuperando datos del back-end y mostr\u00e1ndolos din\u00e1micamente a trav\u00e9s de tu aplicaci\u00f3n front-end.<\/p>\n

La API REST proporciona endpoints<\/a> que representan distintos recursos de WordPress, como entradas, p\u00e1ginas, usuarios, categor\u00edas, etc. Acceder a ellos te permite mostrar estos datos en el front-end.<\/p>\n

Pero aunque puedes utilizar la API REST con ella, SvelteKit se basa principalmente en una tecnolog\u00eda diferente para muchas de sus funciones: GraphQL.<\/p>\n

\u00bfQu\u00e9 es GraphQL?<\/h2>\n
\"GraphQL\"
GraphQL es un lenguaje de consulta de API.<\/figcaption><\/figure>\n

GraphQL<\/a> no es una API en s\u00ed, sino un lenguaje de consulta de API. A diferencia de las API REST<\/a> tradicionales, en las que los clientes a menudo tienen que hacer varias peticiones a diferentes endpoints para obtener datos relacionados, GraphQL te permite recuperar todos tus datos en una sola petici\u00f3n.<\/p>\n

En general, GraphQL se dise\u00f1\u00f3 para permitirte hacer consultas m\u00e1s concisas en un framework r\u00e1pido y optimizado. Tambi\u00e9n es m\u00e1s f\u00e1cil de aprender y menos complejo que la API REST.<\/p>\n

Muchos frameworks de WordPress headless utilizan GraphQL en lugar de la API REST o junto a ella por estas razones. Aunque GraphQL no est\u00e1 incluido en WordPress como la API REST, hay plugins que puedes utilizar para incorporar esta funcionalidad al CMS.<\/p>\n

Gracias al framework optimizado, evitas la obtenci\u00f3n insuficiente o excesiva de datos. Puedes obtener los datos exactos que necesitas en una sola consulta, lo que es mucho m\u00e1s f\u00e1cil para tu red y tu servidor.<\/p>\n

\u00bfQu\u00e9 es SvelteKit?<\/h2>\n
\"SvelteKit\"
SvelteKit es un framework que puedes utilizar para crear aplicaciones y WordPress headless.<\/figcaption><\/figure>\n

SvelteKit<\/a> es un framework web construido sobre Svelte, un framework front-end de c\u00f3digo abierto similar a Next.js<\/a> o React<\/a> en su funcionamiento. Se construy\u00f3 para agilizar el proceso de creaci\u00f3n de aplicaciones web, y aunque no se construy\u00f3 espec\u00edficamente para WordPress headless, \u00e9sta es s\u00f3lo una de las muchas aplicaciones posibles.<\/p>\n

SvelteKit se construy\u00f3 sobre HTML, CSS y Javascript \u2014 nada m\u00e1s. Esto hace que sea muy f\u00e1cil de usar y que no dependa de ning\u00fan framework, por lo que puedes utilizarlo junto con otros frameworks para crear una aplicaci\u00f3n front end totalmente din\u00e1mica o construir un sitio est\u00e1tico<\/a>.<\/p>\n

Svelte se lanz\u00f3 en 2016 y sigue actualiz\u00e1ndose activamente. El framework web SvelteKit lleg\u00f3 unos a\u00f1os m\u00e1s tarde, en 2020. Ambos son muy conocidos y apreciados en la escena del desarrollo web, ya que te permiten escribir c\u00f3digo sencillo y elegante.<\/p>\n

Por qu\u00e9 deber\u00edas utilizar SvelteKit para WordPress headless<\/h3>\n

Hay algunos aspectos de WordPress headless que puede resultar complicado poner en marcha. Gracias al dise\u00f1o minimalista de SvelteKit, estos problemas se reducen al m\u00ednimo y hacen que la configuraci\u00f3n de WordPress headless sea mucho m\u00e1s sencilla.<\/p>\n

\u00c9stas son s\u00f3lo algunas de las funciones que ofrece SvelteKit.<\/p>\n