スプレッドシートのデータをWordPressで表示するプラグイン作りました。

最終更新日

どんなプラグイン ?

Google Sheets(スプレッドシート)に入力したデータを、
WordPressで表示するプラグインを作りました。

スプレッドシートに入力したデータはリアルタイムに、WordPress側で表示されます。

Googleフォームと組み合わせて、イベント参加者の申し込み状況をWebサイトで表示や、アンケート結果を表示など何かと使えるかと思います。

前提

  • Googleスプレッドシートを使っている。
  • WordPress5.0以上。

使い方

まず、公式プラグイン ディレクトリから「WP Simple Spreadsheet Fetcher for Google」をインストールして有効化してください。

設定をクリック

STEP
1

APIキー取得ページへ移動

APIキー(スプレッドシートからデータを取得するための、パスワードのようなもの)を取得するために、リンクをクリック。

STEP
2

APIを有効化

GoogleのAPI設定ページへ飛ぶので、「Enable the Google Sheets API」をクリック。

ポップアップ画面が開き、APIが有効化されます。「Done」をクリックしてポップアップを閉じます。

STEP
3

APIキーを生成

「Create API key」をクリックして、APIキーを作成します。

生成したAPIキーをコピーします。

STEP
4

APIキーを設定

「STEP4」でコピーしたAPIキーを貼り付けて保存ボタンをクリックします。

STEP
5

スプレッドシートの共有設定を有効化

右上の「共有」ボタンをクリックします。

「共有可能なリンクを取得」をクリックします。
※リンクを知っているユーザーの権限は、任意で設定してください。

STEP
6

ブロックを挿入

「WP Simple Spreadsheet Fetcher for Google」ブロックカテゴリから、「フェッチャー」ブロックを選択します。

STEP
7

取得データの設定

表示したいスプレッドシートのURLをコピーし、ブロックのサイドバーの「シートURL」に貼り付けます。

同じようにシート名も、コピーし貼り付けます。

スプレッドシートで範囲を選択するように、データを取得したい範囲をA1表記で設定します。(例:A1:B5 )

STEP
8

公開

範囲指定をしたデータが表示されます。スプレッドシートのデータを変更すると、ほぼリアルタイムで結果が反映されます。

STEP
9

設定動画

表示されない時は?

表示されない場合は下のチェックリストを確認してください。

  • APIキーは設定されていますか? => STEP2を確認。
  • スプレッドシートの共有は有効化されていますか? => STEP6を確認。
  • スプレッドシートのURLは合っていますか? => STEP8を確認。
  • シート名は合っていますか?(前後にスペースが入っているなど)=> STEP8を確認。
  • 範囲を適切に設定していますか?(前後にスペースが入っているなど)=> STEP8を確認。

バグなどありましたらGitHubにissueを立てて頂くか、↓

GitHub:https://github.com/naogify/wp-simple-spreadsheet-fetcher-for-google

Twitterで、@naogify 宛に、リプライかDMを頂けると嬉しいです。

ブログを始めました。 プログラミングに関する学んだことや、日常考えていることを書いていきます。

シェアする