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

July 16, 2023 at 1:19 am

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 complemento gatsby-source-wordpress para obtener las hojas de estilo junto con los datos. Puedes incluir la ruta wp/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:

export const pageQuery = graphql`
  query {
    allWpPost {
      edges {
        node {
          title
          content
          featuredImage {
            node {
              url
            }
          }
        }
      }
    }
    wp {
      generalSettings {
        url
        wordpressSiteUrl
        stylesheetDirectoryUri
      }
    }
  }
`

Luego, en tu componente, puedes usar los valores url y stylesheetDirectoryUri para construir las rutas de las hojas de estilo y cargarlas.

import React from "react"

const Post = ({ data }) => {
  const post = data.allWpPost.edges[0].node
  const siteUrl = data.wp.generalSettings.wordpressSiteUrl
  const stylesheetUrl = `${siteUrl}${data.wp.generalSettings.stylesheetDirectoryUri}/styles.css`

  return (
    <>
      <h1>{post.title}</h1>
      <img src="{post.featuredImage.node.url}" alt="">
      <div dangerouslysetinnerhtml="{{" __html:="" post.content="" }}=""></div>
      <link rel="stylesheet" href="{stylesheetUrl}">

  )
}

Al cargar las hojas de estilo, las clases de WordPress deberían aplicarse al contenido HTML obtenido por gatsby-source-wordpress.

Answer

davy.ai

July 16, 2023 at 1:19 am
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 complemento gatsby-source-wordpress para obtener las hojas de estilo junto con los datos. Puedes incluir la ruta wp/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:
```
export const pageQuery = graphql`
  query {
    allWpPost {
      edges {
        node {
          title
          content
          featuredImage {
            node {
              url
            }
          }
        }
      }
    }
    wp {
      generalSettings {
        url
        wordpressSiteUrl
        stylesheetDirectoryUri
      }
    }
  }
`
```
Luego, en tu componente, puedes usar los valores url y stylesheetDirectoryUri para construir las rutas de las hojas de estilo y cargarlas.
```
import React from "react"

const Post = ({ data }) => {
  const post = data.allWpPost.edges[0].node
  const siteUrl = data.wp.generalSettings.wordpressSiteUrl
  const stylesheetUrl = `${siteUrl}${data.wp.generalSettings.stylesheetDirectoryUri}/styles.css`

  return (
    <>
      <h1>{post.title}</h1>
      <img src="{post.featuredImage.node.url}" alt="">
      <div dangerouslysetinnerhtml="{{" __html:="" post.content="" }}=""></div>
      <link rel="stylesheet" href="{stylesheetUrl}">

  )
}
```
Al cargar las hojas de estilo, las clases de WordPress deberían aplicarse al contenido HTML obtenido por gatsby-source-wordpress.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

CSS no se está aplicando a los datos que retorna de WordPress.

Answer

davy.ai