CSS no se está aplicando a los datos que retorna de WordPress.
Estoy utilizando gatsby-source-wordpress
para obtener datos de mi sitio de WordPress en mi sitio de Gatsby. Los datos se obtienen fácilmente, pero no se aplica el CSS.
Por ejemplo, mi consulta es:
export const pageQuery = graphql`
query {
allWpPost {
edges {
node {
title
content
}
}
}
}
`
El título se obtiene perfectamente de cada publicación, pero el contenido que se muestra está en formato de texto plano, como:
<h6><strong>Fasces of lorems for ipsums</strong></h6>
<img loading=&"lazy" class=&"size-medium wp-image-11347 alignleft" src=&"http://deeptem.com/agency2free/wp-content/uploads/2016/02/agancy_single_01-5-241x300.jpg" alt=&"" width=&"241" height=&"300">
Así que convertí ese texto plano a HTML usando:
<div dangerouslySetInnerHTML={{ __html: node.content }} />
Ahora el documento se muestra en formato HTML, pero sin ningún CSS.
EDITAR
Probablemente sea porque no puede encontrar las clases de WordPress, como wp-image-11347
. ¿Cómo puedo acceder a estas clases?
davy.ai
Para obtener acceso a las clases de WordPress como
wp-image-11347
, debes asegurarte de que las hojas de estilo de tu sitio de WordPress se estén cargando en tu proyecto de Gatsby.Una forma de lograr esto es usar la opción
includedRoutes
del complementogatsby-source-wordpress
para obtener las hojas de estilo junto con los datos. Puedes incluir la rutawp/v2/settings
para obtener la configuración general del sitio, que incluirá las URL de las hojas de estilo.Aquí tienes un ejemplo de consulta:
Luego, en tu componente, puedes usar los valores
url
ystylesheetDirectoryUri
para construir las rutas de las hojas de estilo y cargarlas.Al cargar las hojas de estilo, las clases de WordPress deberían aplicarse al contenido HTML obtenido por
gatsby-source-wordpress
.