yotigory 本題に入る前に、Shifter には「Static」と「Headless」という2つのサービスがあります。
違いは、「Static」＝いつもの WordPress を静的に変換して高速配信。
「Headless」= API を通じてコンテンツだけを提供。
もうちょっと簡単にいうと「Shifter Headless」 は、いつもの WordPress の画面からコンテンツを入稿できますが、表示する先、Head（宛先） がありません。だから Head（宛先）less（無し）です。
なので、表示する先は自分たちで用意する必要があります。
表示する先は、サイト、アプリ、サービスのダッシュボードなど多岐にわたります。
詳しくは、公式サイト：Static と Headless の違い
今回は「Shifter Headless」 を使って、React で作られたサービスのダッシュボードにお知らせを表示します。
使うのは、投稿、カテゴリー、カスタムタクソノミーだけです。
Shifter Headless の設定をしよう！
Shifter のダッシュボードからサイトを新規作成します。
サイトに名前をつけて、プランを選択しサイトを作成します。
サイトが作成できたら、概要ページを表示します。
必要なログイン URL やログイン情報を確認して、WordPress にログインしましょう！
ログイン後、いつも通りの管理画面が表示されます。
Settings から言語を日本語に変更、タイムゾーンも Tokyo にしておきます。
必要なプラグインを有効にします
「Shifter Headless」 は、入稿専用なのでテーマはありませんし、プラグインの新規追加、functions.php の編集など独自カスタマイズはできません。
ですが、必要なプラグインは全てインストール済みですので、すぐに使い始めることができます。
公式：Shifter Headless で利用可能なプラグイン一覧
今回使ったプラグインは、こちら。
- WP GraphQL Gutenberg
- WPGraphQL
- Custom Post Type UI
GraphQL とカスタムタクソノミーを使いたかったので、これだけ有効化します。
プラグインの設定をします
設定が必要なのは「Custom Post Type UI」だけです。
必要なタクソノミー、今回は「公開先」「言語」「お知らせのラベル」をそれぞれ追加していきます。
各タクソノミーに値を設定します
「公開先」には、本番環境と開発環境。
「言語」には、日本語と英語。「お知らせのラベル」には、お知らせ、注意、警告としました。
投稿にカテゴリーの設定をします
カテゴリーを使って、表示するダッシュボードを選べるようにします。
実際に投稿して「お知らせ」を作ります
いつも通り投稿にコンテンツを入力します。
その後、先ほど作った「カテゴリー」「公開先」「言語」「お知らせのラベル」をチェックします。
これを GraphQL IDE で確認します
GraphQL IDE は、クエリを視覚的に作成し、実行することができます。
WordPress の管理画面で確認できます！！！すごいね〜
①「Query Composer」をクリックすると、左手に新しい Query が表示されます。
②ポチポチやっていくと、真ん中に query NewQuery が作られていきます。
再生ボタンみたいなのをクリックすると、右手に結果が表示されます。表示されればオッケー！！！
ここまできたら、Shifter Headless の設定は終わり〜。表示側の作業に移ることになります。
さて、表示する側とは、、、
今回、このデータを表示するのは Shifter のダッシュボード（React）です。
先ほど、つくった Query が大活躍！！変数 postquery の中にぺたっと貼ります！
const postquery = `query PostQuery {
posts {
edges {
node {
id
date
title
content
categories {
edges {
node {
slug
}
}
}
destinationToPublish {
edges {
node {
slug
}
}
}
language {
edges {
node {
slug
}
}
}
announcementLabel {
edges {
node {
slug
}
}
}
}
}
}
}`;この Query を使って、データを引っ張ります。
export const fetchPost = async () => {
const data = await fetch(
'https://XXXXXXXXXXXXXXXXXXXXXXXXXx.hl-a.getshifter.co/graphql',
{
method: 'POST',
body: JSON.stringify({
query: postquery,
}),
headers: {
'Content-Type': 'application/json',
},
}
)
.then((res) => res.json())
.catch((error) => {
console.error('エラー:', error);
});
return data;
};URL は Shifter ダッシュボード概要にある ログイン URL の /wp-admin/ を取って /graphql を足してください。
やってることは、GraphQLクエリを使って特定のエンドポイント（WordPress）にデータを要求しています。fetchPost関数は、POST リクエストを行い、レスポンスを JSON 形式で取得します。
返ってくるデータは、先ほど WordPress の管理画面で確認した GraphQL IDE の結果と同じものなので、表示に合わせて整形します。edges とか node とか階層が邪魔なので、とったりね。
表示されるとこんなイメージ！
お知らせのラベルによりスタイルを変更しています！
こうすることで、Shifter のダッシュボードのお知らせを React を変更することなく、表示することができます。
「Shifter Headless」便利だね！！！！