あなたは、HTML、CSSとJavaScriptで静的ウェブサイトをつくる方法を知っていますか?私はあなた自身のブログを作成する一度WordPressを使用していると思います.
あなた自身のテーマとプラグインを作成する方法を知らずにWordPressを使用することができます.野生にはたくさんある.しかし、それはあなたが物事をあなたがそれをしたい方法でtinkeringを開始すると複雑になる.
あなたがコンテンツをプルして、どこでもそれを表示することができるAPIまたはデータソースにWordPressを回す方法があるならば、どうですか?
この記事では、ヘッドプレスモードでWordPressを設定し、基本的なHTML/CSSテンプレートを作成し、WordPressでテンプレートを統合するためにGatsByjsを使用します.

ワードプレス

私はあなたがWordPressをインストールする方法を知っていると仮定します.そうでなければ、ここにありますa step by step guide .
ヘッドプレスモードでWordPressを設定するには、次のプラグインをインストールする必要があります.

WP API Menus - これは、APIをAPIとして公開します.組み込みのWordPress APIはメニューを公開しません.

Advanced Custom Fields - 我々はルールに基づいてカスタムフィールドを作成し、APIを介してアクセスできるようになる

Custom Post Type UI - 時々、ページとポストは十分でありません、我々は製品、映画、その他のようなカスタムメイドのポストをつくりたいです.

Postlight Headless Theme - このテーマでは、フロントエンドに面したクライアント上のWebページを削除し、JSONに置き換えます.

ヘッドレスモードで実行すると、我々はまだコンテンツを管理するためにWordPressのダッシュボードを使用していることを意味するが、我々はAPIを介してそれらを提供されます.したがって、我々は訪問者に生成されたコンテンツを表示するにはWordPressを使用していません.
あなたのWordPressサイトで少なくとも1つのポストと1ページを持っていることを確認してください.少なくとも1つのポストに少なくとも1つのタグがあることを確認してください.我々は後者の部分のためにこれを使用します.

HTML / CSSテンプレート

今では、WordPressのセットアップがあります.我々のウェブサイトの基本テンプレートを作成し始めましょう.私は聖杯レイアウトを使用しますthis article at Alligator.io

Holy Grail is a layout pattern that’s very common on the web. It consists of a header, a main content area with fixed-width navigation on the left, content in the middle and a fixed-width sidebar on the right and then a footer.

私がCodepenの上に構築したデモは、ここにあります.入出力我々はgatsbyjs上で私たちのレイアウトとして使用されます.

ガッツビーズ

あなたがこのガイドに従っているならば、私はあなたがあなたのマシンの上でnodejsセットアップをすると仮定します.もしそうならis a step by step guide .
GatsByJSはフードの下のReactJsですので、一般的に反応またはフロントエンドフレームワークの基本的な理解があるならば、それに続くのがより簡単でしょう.ここにMaximilian Schwarzmシュルラーに良いスターターです.心配しないでください、あなたはまだこのガイドに従うことができる必要があります.

gatsbyjsの設定

私たちはgatsby-starter-wordpress . ヒアgatsbyhg プロジェクトの名前は、任意の名前を使用することができます.

ガッツバイセントラル / スターターワードプレス

ワードプレスAPI、ACFとより多くを活用する

ワードプレススターター

このスターターは
gatsby-starter-netlify-cms
そして、NetLify CMSの代わりにWordPressを使用するように変更されますgatsby-source-wordpress データコネクタとしてのプラグイン.
デモ:https://gatsby-starter-wordpress.netlify.com/

Looking for maintainer: If you're interested in taking over the maintenance of this starter, please reach out in an issue. We're not working with Gatsby any more (it got way too complicated, hello nextjs), and so we're not maintaining this.

今すぐ利用

gatsby new NAME https://github.com/GatsbyCentral/gatsby-starter-wordpress

エディットgatsby-config.js , チェンジbaseUrl

あなたのWordPressサイトの少なくとも1つのポストと1ページを持っていることを確認してください

少なくとも1つのポストに少なくとも1つのタグがあることを確認してください

WordPressのインストールにおけるPermalink構造の確認Post Name 悪魔の代わりにPlain , その他gatsby-source-wordpress プラグインは、WordPressと通信することができなくなります

喜ぶ

ソースプラグインの詳細については、.

View on GitHub

npx gatsby new gatsbyhg https://github.com/GatsbyCentral/gatsby-starter-wordpress

あなたはそれを実行することによって、このギャツビーのスターターテンプレートに何があるかをプレビューできます

yarn start

次に、http://localhost:8000/

WordPressサイトへの接続

当社のWordPressサイトに接続する.開けるgatsby-config.js ファイル.探すbaseUrl , それを変更しないでくださいhttps:// . プロジェクトを起動し、表示されるコンテンツが実際にあなたのWordPressサイトからあるかどうかを確認します.

yarn start

HTML / CSSテンプレートの統合

The gatsby-starter-wordpress すでにそれを組み込んだテンプレートを持っています.私たちは私たちの聖杯のレイアウトに置き換えます.
まず、編集しましょうsrc/components/Layout.js 我々のレイアウトに一致するように.
この部分を具体的に変更します.

 <div>
   <Helmet title="Home | Gatsby + WordPress" />
   <Navbar />
   <div>{children}</div>
 </div>

これを:

  <div className="layout">
    <Helmet title="Home | Gatsby + WordPress" />
    <header>Header</header>

    <Navbar />

    <main>{children}</main>

    <aside>Sidebar</aside>

    <footer>Footer</footer>
  </div>

次に、CSSファイルをstyle.css 下src/components/ 次のコンテンツを使用します.

/* Layout */

.layout {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";

  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

header {
  grid-area: header;

  display: flex;
  justify-content: space-between;  
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
}

footer {
  grid-area: footer;
}

/* Theme */
/* This is optional, you can use your own style for this */

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

header {
  font-size: 18px;
  color: #fff;
  min-height: 20px;
  background: #0a2b4e;
  padding: 20px;
}

nav,
aside {
  background: #666;
  padding: 10px;
  color: #fff;
}

footer {
  background: black;
  color: #fff;
  padding: 20px;
}

.navbar-item {
  display: inline-block;
  color: #fff;
  padding: 10px;
}

.navbar-item img {
  height: 20px;
}

.pagination {
  margin: 0;
  background: black;
}

.pagination a {
  color: #fff;
}

スタイルインポートを変更src/components/Layout.js

import './style.css' // add this
import './style/all.sass' // remove this, we won't be needing this anymore

あなたはdemo はい.ソースコードはhere .