Gatsby + WordPressの設定

2020/11/20

ホーム / Gatsby

スターターテーマ

Balsa

https://www.gatsbyjs.com/starters/draftbox-co/gatsby-wordpress-balsa-starter

.wordpress-config.json のbaseUrl を変更する

カスタマイズしやすく

  • Local Image Support
  • Gutenberg Support
  • Post and Page generation
  • Simple CSS support
  • Fast build time
  • Paired WordPress theme
cd リポジトリ名

git clone https://github.com/cjkoepke/wp-gatsby-starter.git
options: {
  typeName: "WPGraphQL",
  fieldName: "wpgraphql",
  url: `ドメイン/graphql`,
}

WordPress のブロックを追加

npm install @wordpress/block-library

CSS をカスタマイズ

src に styles ディレクトリを作成

global.css を新規作成

components/Layout.js に以下を 挿入

import '../styles/global.css'

プラグイン

// package.jsonを参照してプラグインを確認

// アンインストール
npm remove パッケージ名

サイトマップ

npm install gatsby-plugin-sitemap
siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

AMP

npm install --save gatsby-plugin-amp

FontAwesome

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/react-fontawesome

yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

xxx.jsに追加

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faUtensils, faCheckSquare } from "@fortawesome/free-solid-svg-icons"
<FontAwesomeIcon icon={faUtensils} />

Canonical URL

gatsby-plugin-canonical-urls
  {
    resolve: `gatsby-plugin-canonical-urls`,
    options: {
      siteUrl: `https://www.example.com`,
    },
  },

アイキャッチ・OGP画像の設定

OGP画像を指定する場合

metaの指定

<meta property="og:image" content={data.allWpPost.edges[0].node.featuredImage.node.localFile.childImageSharp.fixed.src} />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />

graphql

OGP用は固定サイズ fixed でよさそう

...
featuredImage {
            node {
              mediaItemUrl
              localFile {z
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                  }
                  fixed(width: 1280, height: 640) {
                    src
                    ...GatsbyImageSharpFixed
                  }
                }
              }
            }
          }
...

Error: getaddrinfo ENOTFOUND localhost

gatsby develop で次のエラーが出たらネットワークをつなぎ直すせば直る。

WiFi を接続し直し、または /etc/host の設定を確認。

Error: getaddrinfo ENOTFOUND localhost　

ページロード時に実行

gatsby-browser.js にコードを入れる

export const onClientEntry = () => {
  window.onload = () => { 
    コード
  }
}
Gatsby
# WordPress