PR

WordPressにGoogle スプレッドシートを埋め込む

2022.10.15

Googleスプレッドシートの埋込み

WordPressに Google スプレッドシートを埋め込んで見ました。

元のスプレッドシートを変更した時に WordPress側の表示が連動して変わらなくても良いのであれば、セル部分をコピペして WordPressの表にした方が見易いと思います。但し、Wordpress本来の表は表示機能が乏しいので、表のプラグイン(Flexible Table Block)の利用をお勧めします。

埋込み手順

埋込み手順は以下の通り

  1. WordPressに埋め込みたい Google スプレッドシート(以下、SS) を開き、ファイル－共有－ウェブに公開 を選択します。
  2. 埋め込む を選択。公開対象を、下の ドキュメント 全体 か 特定のシート かを選択します。
  3. 下に表示されているコードをコピーします。
  4. 埋込みをしたい WordPressを開きます。ブロックエディターの場合は「カスタムhtml」を選択します。
  5. 枠内に、先程コピーしたコードをペーストします。
    これでSSの埋込みはできましたが、表示エリアが小さいと思います。
  6. 表示エリアを大きくするためには ファイル名の後ろに 例えば「width=70% height=”400″」を追記してください。上記の70% や 400(px) は適宜変更して表示サイズを調整してください。width=70%の代わりに width=”500″ の様にpxで指定することも可能です。

iframe のパラメータ

iframeの中は、２つのから構成されています。

  1. src=”https:～/pubhtml? ～” までの SSの要素を指定する部分。上記「埋め込み手順」３．でコピーした内容。
    src=”https://docs.google.com/spreadsheets/d/e/2PACX-1vQ2Y3MF_-(途中省略）/pubhtml?gid=1200275672&single=true&widget=true&headers=false”
  2. “></iframe> の最初の ” と > の間。初期値では何も無い部分。
    ここに、表示サイズ等を決めるパラメータを記載します。

下表では、iframe 設定時のパラメータを纏めました。
なお、スプレッドシートを SS、スプレッドシート内のシートをシートと表現します。
（ ）はデフォルト(指定しないと その状態を指定したのと同等)を示します。
また、& は 正式に記載すると &amp; ですが、多くのブラウザでは & を理解してくれる様なのでここでは & と記載しています。

上記１のパラメータ ：URLに付与するパラメータ

gid=0シートID。gid=シートID の形式で指定します。シートIDは、Googleスプレッドシートをブラウザで開いた際のURLの中に含まれる gid=XXXXXXXXXX の部分の数字です。最初のシートは大抵 gid=0 ですが、複数のシートがある場合は確認が必要です。
&range=A1:o24表の表示範囲を指定します。
gid パラメータと併用することで、特定のシートの特定の範囲を表示できます (.../pubhtml?gid=1234567890&range=A1:D10)。
&chrome=falseSSの名称の表示 （する：true)、しない：false
&widget=trueシートの下部に表示されるシートセレクター（タブ）を表示するかどうかを制御します。（する：true)、しない：false
&headers=false行番号（左側の数字）と列ヘッダー（上部のアルファベット）を表示するかどうかを制御します。(する：true)、しない：false
&gridlines=falseSSの罫線表示を する：true、しない：false

上記2のパラメータ: iframeタグの標準属性

width=100%幅を指定：100% 、800px等
height=”600″高さを指定：600px
frameborderframeborder="0" または frameborder="no" で境界線が非表示になります。frameborder="1" または指定しない場合は表示されます。多くの埋め込みコードでは 0 が指定されています。
allowfullscreen全画面表示を許可するかどうかを指定します。
allowfullscreen と記述します。値は不要または "true"
loadingブラウザがiframeをいつ読み込むかを制御します。ページのパフォーマンス改善に役立ちます。
loading="lazy" （遅延読み込み – 要素がビューポートに近づいたら読み込む）または loading="eager" （即時読み込み – ページが読み込まれるとすぐに読み込む）を指定します。
titleiframeの内容を説明するタイトルを指定します。アクセシビリティのために重要です。
title="一都六県のデータ" のように、具体的な説明を記述します。

コメント