【问题标题】:Styling issues while rendering wordpress template in react在反应中渲染wordpress模板时的样式问题
【发布时间】:2020-09-04 19:48:28
【问题描述】:

我有一个反应应用程序,它获取 wordpress 帖子内容并通过 WP REST API 呈现它。 创建的设计器模板周围有很多 CSS 类名。 现在,当我在 react 应用程序中查看此帖子内容时,没有应用任何样式,因为类名特定于 wordpress 主题/插件。

问题:有没有办法获取所有相关的 CSS,以便我可以在 react 中使用它?

预期:react 中显示的模板应该与 wordpress 中创建的帖子相同。

使用的插件: Elementor(用于创建形状、样式内容等)

尝试过的解决方案:

  1. 在客户端应用程序中保留来自 WordPress 的样式副本 - 由于 WP 中的 CSS 文件在管理员添加更多主题/插件时发生变化,因此无法扩展。
  2. 使用 AutoOptimize 插件合并 & 缩小所有 CSS 文件,并在 react 中使用最终生成的文件,但 CSS 连接有其自身的缺点
  3. 使用永久链接直接在客户端应用程序中呈现 WP 帖子 - 这包含我们不想在客户端应用程序中公开的网站的导航标题和其他信息

【问题讨论】:

    标签: css reactjs wordpress


    【解决方案1】:

    这里可以尝试的解决方案是从 wordpress 获取所有样式表链接并添加它的 react head 标签。如果有任何依赖的js链接也可以添加。所以现在当模板在 react 中渲染时,它将显示所有样式。

    另一种方法与上述方法类似,但要容易得多。通过 rest-api 获取整个 wordpress-post 文档并将其传递给 iframe 中的 react。在这种情况下,页面不会中断,因为 html 文档将包含所有需要呈现的链接。

    https://wordpress.stackexchange.com/questions/320065/get-the-list-of-enqueued-registered-scripts-for-a-specific-post -> 参考这个以检查如何获取样式表链接以及基于帖子 ID 的文档。

    https://www.haselt.com/blog/wp-rest-api-modifying-the-json-response -> 参考这里查看如何修改 json 响应。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-14
      • 1970-01-01
      • 2016-12-17
      • 2016-07-13
      相关资源
      最近更新 更多