如何获取 WordPress 网站标志

Posted 2023-03-08

【中文标题】如何获取 WordPress 网站标志

【英文标题】：How to get WordPress Wesitelogo

【发布时间】：2021-03-09 13:17:20

【问题描述】：

我是盖茨比的新手。 所以，我想在 WordPress 管理中定义我的网站徽标。这是我的做法：

`import React from 'react';
import graphql, StaticQuery from 'gatsby';
import styled from 'styled-components';
import  Img  from  'gatsby-image';

    const SiteInfo = () => (
        <StaticQuery query=graphql`
        
            file(name: eq: "logo") 
                relativePath
                childImageSharp 
                  fluid 
                    originalImg
                  
                
            
            site 
                siteMetadata 
                  title
                
            
        
        allFile(filter: name: eq: "logo") 
            edges 
              node 
                name
                url
                relativePath
              
            
        
        
        allWordpressWpMedia(filter: title: eq: "logo") 
            edges 
              node 
                title
                source_url
              
            
          
    
      
      
    `
     render = data => (
        <BasicInfoWrapper>
            <Sitelogo>
                <Img src=data.allWordpressWpMedia.edges.node.source_url  />
            </Sitelogo>
            <SiteTitle>
                /*data.site.siteMetadata?.title || `Title`*/
            </SiteTitle>

        </BasicInfoWrapper>
    )/>
    );
    export default SiteInfo;

`

不幸的是它不起作用，我收到以下错误：TypeError:

`can't access property "source_url", data.allWordpressWpMedia.edges.node is undefined`

所以我求助于你，这样我才能成功

谢谢！

【问题讨论】：

您是否在 GraphQL 游乐场 (localhost:8000/___graphql) 中测试过您的查询？

是的，效果很好。结果如下： "data": "allWordpressWpMedia": "edges": [ "node": "title": "logo", "source_url": "localhost/hellopomelo/wp-content/uploads/2020/11/logo.png" ] , “扩展”：

【参考方案1】：

你需要输入嵌套edges的位置，因为它是一个数组。

 <Img src=data.allWordpressWpMedia.edges[0].node.source_url  />

但是，这不适用于使用gatsby-image 显示图像。你应该使用原生的img 标签：

 <img src=data.allWordpressWpMedia.edges[0].node.source_url  />

如果您想使用gatsby-image，您需要使用片段或原始字段检索一些额外的数据。 gatsby-image 的理想查询应如下所示：

  query 
    file(relativePath:  eq: "blog/avatars/kyle-mathews.jpeg" ) 
      childImageSharp 
        fixed(width: 125, height: 125) 
          ...GatsbyImageSharpFixed
        
      
    
  

然后，您将能够：

export default ( data ) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed=data.file.childImageSharp.fixed />
  </div>
)

总而言之，您不能只使用src 属性，因为 Gatsby 需要使用转换器和锐器解析图像来处理图像并创建 GraphQL 节点模式。

您需要将查询转换为：

const allMedia = graphql`
  query 
    allWordpressWpMedia 
      edges 
        node 
          source_url
          localFile 
            publicURL
            childImageSharp 
              fluid(maxWidth: 800) 
                ...GatsbyImageSharpFluid
              
            
          
        
      
    
  
`;

更多详情请查看this article。

【讨论】：

噢噢太棒了！谢谢你，非常感谢你。它适用于第一种方法。