WordPressテーブルにGoogleシートを埋め込み、ソート可能にする方法

Google Sheetsは、リアルタイムでオンラインでスプレッドシートで作成、編集、コラボレーションできる無料のWebベースのアプリケーションです。 WordPressを今日使用している多くの人々は、GoogleシートをWordPressに埋め込み、ソート可能なテーブルを作成するためのオプションを探します。

ソート可能なテーブルを使用すると、ユーザーは行と列の順序を変更することでコンテンツを整理できます。たとえば、並べ替え可能な価格設定テーブルの場合、その順序を最低から最高に並べることができます。この機能は、テーブル上のすべてのセルをスクロールして探索することなく、ユーザーが情報を調査および比較できるようにするのに非常に役立ちます。

Elementorは、最高の機能が豊富なページビルダープラグインの1つです。それは、素晴らしいWebページを作成するための強力なウィジェットをカバーしています。このプラグインを使用して、WordPressにGoogleシートを表示できます。この投稿では、WordPressテーブルにGoogleシートを埋め込み、ソート可能にする方法を紹介します。

ソート可能なテーブルを作成する必要がある理由：重要な利点

チュートリアルを開始する前に、ソート可能なテーブルとその重要な利点を作成する必要がある理由を探って、さらに数分かかります。以下でそれらを見てください。

• データのフィルタリングが簡単です

ソート可能なテーブルを使用すると、ユーザーは必要なものに基づいて情報をすばやくフィルタリングおよび整理できます。たとえば、テーブルの行/列をアルファベット順に並べ替えるか、価格を低くて高から高に並べ替えると、研究を迅速に完了することができます。

• 非常に時間を節約します

スクロールする代わりに、ユーザーはソートだけで長いデータテーブルを探索できるため、時間を節約できます。したがって、このタイプのテーブルは、特に詳細または複雑な情報を扱う場合に最適です。

• もっときれいに見えます

並べ替え可能なテーブルは、行と列が特定の順序でアルファベット順または数値的に整理されるため、コンテンツをきちんと整理します。これにより、テーブルはきれいでプロフェッショナルに見えます。

• もっと魅力的です

このタイプのテーブルは、ユーザーが行、列、データを再注文するための複数のオプションを提供するため、ユーザーはより魅力的だと感じています。

• 大規模なデータセットに適しています

多くの場合、大きなデータセットを表示するには、数百行と数十列を作成する必要がある場合があります。これはユーザーを圧倒するかもしれません。この場合、ソート可能なテーブルはユーザーを救うことができます。

WordPressテーブルにGoogleシートを埋め込み、ソート可能にする方法

チュートリアルを開始するには、サイトに次のプラグインをインストールしてアクティブ化する必要があります。 HappyAddonsは、Elementorプラグインの有名なアドオンです。 Elementor自体は広大なツールですが、Webデザインにはいくつかの重要なウィジェットと機能がありません。

• Elementor
• HappyAddons
• HappyAddons Pro

それらがサイトにインストールされてアクティブ化されると、以下のチュートリアルで説明されている手順に従うことができます。

ステップ01：Elementor Canvasを使用してページを開きます

ソート可能なテーブルを作成したいElementorキャンバスを使用して投稿またはページを開きます。

ステップ02：高度なデータテーブルウィジェットをドラッグアンドドロップする

検索ボックスに高度なデータテーブルを入力します。ウィジェットが表示されたら、エディターにドラッグしてドロップします。

高度なデータテーブルウィジェットがエディターに追加されていることがわかります。

ステップ03：Googleシートからテーブルにデータを追加する

データテーブルセクションを展開します。隣からテーブルタイプまで、 Googleシートオプションを選択します。

次に、GoogleシートデータをElementorを使用したWordPressのテーブルとして表示するには、下の画像にマークされているように、Google APIキー、GoogleシートID、およびGoogleシートの範囲をそれぞれのフィールドに追加する必要があります。

＃Google APIキーを取得します

ここをクリックして、Google APIキーをクリックして、キーを取得するページにアクセスしてください。

次に、 3行のアイコン>資格情報をクリック>資格情報を作成します。

リストが開きます。オプションAPIキーをクリックします。

キーでポップアップが開きます。キーをコピーします。

Elementor Canvasに来てください。下の画像にマークされているように、左側のそれぞれのボックスにGoogle APIキーを貼り付けます。

＃グーグルシートIDを取得します

リンクには3つの部分があります。

• 最初の部分 - https://docs.google.com/spreadsheets/d/
• 2番目の部分 - /13nierdo5sylj9fwudwomlbqodz4xere2ezym1biaqjg /
• 3番目の部分 - /編集？gid = 0＃gid = 0

この2番目の部分は、実際にはシートIDです。コピーします。

同様に、GoogleシートIDをそれぞれのボックスに貼り付け、シートの範囲を他のボックスに貼り付けます。

テーブルはすぐに表示されます。

注：テーブルが表示されていない場合、心配はありません。サイドバーセクションをスクロールして、キャッシュの削除オプションをご覧ください。オンとオフをオフにします。テーブルが表示されることを願っています。

また、テーブルが表示されると、テーブルの一番上の行でソートオプションが有効になっていることがわかります。このオプションをクリックすると、テーブルの行を再注文することで情報を変更できます。

ステップ04：テーブルコンテンツのアラインメントを変更します

データテーブルセクションの下には、2つのアライメントオプションが表示されます。ヘッドアライメントと行のアライメントです。それらを使用すると、テーブルコンテンツのアラインメントを変更できます。それをしてください。

コンテンツを中央に整列させていることがわかります。

ステップ05：テーブル設定を構成します

検索ボックス、ページネーション、およびページごとに表示する行の数を表示できます。これを行うには、設定セクションを展開します。次のオプションを有効にするためにトグルします。

• 検索を有効にします
• ページネーションを有効にします
• エントリを有効にします

エントリと検索ボックスが上に表示され、テーブルの下のページネーションが表示されます。

ステップ06：プリセットを使用（オプション）

プリセットは、設定が保存された既製のテンプレートです。時間が短い場合は、プリセットを使用してすぐにテーブルを準備できます。 HappyAddonsは、高度なデータテーブルウィジェットに4つのプリセットを提供します。

これを行うには、プリセットセクションを展開します。好きなオプションをクリックしてください。あなたはあなたのテーブルの上にスタイルが適用されていることがわかります。

ステップ07：テーブルの様式化

パディング、境界半径、境界線タイプ、ボーダーカラーなど、テーブルを魅力的に見せるためのオプションをさらにカスタマイズできます。テーブルコンテンツの各部分をカスタマイズできます。

＃共通オプションを様式化します

[スタイル]タブ> [共通]に移動します。このセクションから、検索ボックス、ページネーション、エントリを様式化できます。

最初に検索ボックスを様式化しましょう。境界線の色と入力の背景色を変更したことがわかります。必要に応じて、パディングや境界線の半径もカスタマイズできます。

下にスクロールして、ページネーションオプションをご覧ください。必要な変更を必要とします。間のスペースをわずかに増加させ、境界半径を変更しました。

共通セクションの下の最後のいくつかのオプションは、エントリのカスタマイズ用に予約されています。エントリオプションの色を変更したことがわかります。

＃テーブルヘッドを様式化します

次に、テーブルヘッドセクションを展開します。テーブルの一番上の行の様式化を変更できます。色を変更し、フォントサイズを増やし、ソートオプションで異なる色を選択したことがわかります。

＃テーブルの行を様式化します

同様に、テーブル行セクションを展開します。上記の手順に示すように、パディング、背景色、テキストの色、フォントタイプ、その他のオプションを変更できます。自分で一人でできることを願っています。

ステップ08：テーブルをモバイルに応答します

最後に、すべてのデバイスタイプでテーブルが等しく見えるようにするには、各デバイスのレイアウトを個別に最適化する必要があります。

これを行うには、Elementorパネルの下部にある応答モードをクリックします。 Elementor Canvasにトップバーが表示され、キャンバスをさまざまな画面サイズに変更するオプションが表示されます。

スタイルタブでのカスタマイズは、その特定のデバイスタイプに対してのみ保存されます。したがって、テーブルをモバイル応答性にすることができます。

ステップ09：テーブルをプレビューします

さて、投稿/ページのフロントエンドに来てください。テーブルが完全に機能するかどうかを確認してください。それがあなたの側でうまくいくことを願っています。

結論

このチュートリアルを楽しんだことを願っています。したがって、これからは、WordPressサイトにGoogleシートから大きなコンテンツを表示することはそれほど難しくありません。 WordPressを初めて使用していて、Elementorについて知らない場合は、このツールを探索するのに少なくとも数時間かかる必要があります。

あなたがノーコードユーザーであるかどうかに関係なく。 Elementorだけでも、専門家の助けを借りずにWebサイト全体を自分で設計できるようになります。これだけではありません。プラグインのパワーを活用することで、リードと収益をもたらす変換中心のWebサイトを作成できます。

Elementorプラグインを使用して、Webサイトのさまざまな側面を設計する方法に関する多くのチュートリアルについては、すでに説明しています。ブログアーカイブページにアクセスして、それらを探索し、知識ベースを増やしてください。