コーディングせずにWordPressで高度なHTMLテーブルを作成する方法

公開: 2021-12-11

WordPressは、ウェブ全体の43％を占める、世界で最も人気のあるCMSプラットフォームであり続けています。間違いなく最も魅力的な機能を備えたものですが、コーディングなしでHTMLテーブルを作成する場合、WordPressが必ずしも最適なプラットフォームであるとは限りません。

多くの人がHTMLテーブルは時代遅れだと思っていますが、それでも聴衆に優れた価値を提供します。その結果、ほとんどのユーザーは特定の「開発者のみ」のタスクのために専門家を雇わなければなりませんでした。目的を考えると、当時のWordPressユーザーにとっては大きな失望でした。

グーテンベルク：テーブルブロックを備えたWordPressのデフォルトエディタ

2017年7月に開催されたEuropeWordCampで、WordPressの創設者であるMatt Mullenwegは、GutenbergブロックエディターがWordPressの将来のエディターであると発表しました。多くのWordPressユーザーを喜ばせるために、まったく新しいエディターは組み込みのテーブルブロックを含むことを約束しました。

しかし、グーテンベルクがWordPress 5.0を導入したとき、エディターはさまざまなデバイスで応答性と最適化の問題を引き起こしたとして批判されました。それにもかかわらず、エディターには約束どおりの組み込みのテーブルブロックが付属しており、ユーザーはコーディングしなくてもWebサイトにテーブルを作成できます。

GutenbergテーブルブロックはWordPressでHTMLテーブルを作成するための非常に便利なオプションですが、効果的なテーブルビルダーソリューションになるには何マイルも遅れていました。最も魅力的な外観を提供せず、再利用できず、大規模なデータベースの処理が苦手です。

グーテンベルクは単なるテーブルビルダーに他なりません。 Gutenbergは、テーブルの並べ替え、フィルタリング、スタイル設定などの高度なHTMLテーブル機能には使用できません。全体として、グーテンベルクのブロックエディタは、高度なテーブルビルダーになるにはほど遠いです。

したがって、ダッシュボードに高度なテーブル機能を追加するプラグインを作成するのは、私たちのようなフリーローミングのWordPress開発者であるWPManageNinja次第でした。

Ninja Tables：高度なHTMLテーブルのWordPressプラグイン

グーテンベルクが発表される前から、WPManageNinjaの開発者は、ユーザーが手間をかけずにテーブルを作成できる信頼性の高いWordPressテーブルプラグインを考案するために絶え間なく取り組んでいました。

2018年2月27日に、WordPressプラグインストアでNinjaテーブルをリリースしました。NinjaTabesが30000を超えるアクティブなインストールに到達するまで、わずか数か月しかかかりませんでした。ユーザーの信じられないほどのサポートと感謝の気持ちも、最初のリリースから2。5年以内に45を超えるプラグインの更新をリリースする動機となり、NinjaTablesはそのプロセスでナンバーワンのWordPressテーブルプラグインになりました！

その動的な機能とユーザーフレンドリーなインターフェースのおかげで、NinjaTablesは現在70k以上のWebサイトや企業で使用されています。

Ninja Tablesは、Webサイトに表示するためのさまざまなテーブルを作成できるデータ視覚化プラグインです。応答性、機能、カスタマイズ機能、およびサードパーティの統合により、WordPressサイトにこれらの難しい高度なHTMLテーブルを取り込む場合に最善の策が得られます。

忍者テーブルを無料で入手

それでは、NinjaTablesの最も高度なHTMLテーブル構築およびカスタマイズ機能について詳しく見ていきましょう。

UI
テーブルエディタ
統合

UI

アクティベートすると、忍者テーブルはWordPressダッシュボードのサイドバーから見つけることができます。ほとんどのWordPressプラグインと同様に、NinjaTableはいくつかの機能を備えたUIを提供します。それについてもっと学びましょう！

すべてのタブ
ツールと設定
ヘルプとドキュメント

ホーム/すべてのテーブル

Ninja Tables Homeは、新鮮な製品を備えた魅力的なインターフェースを備えています。 2つのボタンがあります。1つは作成用、もう1つはインポート用です。

[最初のテーブルを作成]ボタンをクリックすると、手動のWordPressテーブルビルダーが表示されますが、 CSVからインポートすることもできます。

テーブルを最初から作成する場合は、ポップアップウィンドウにタイトルと説明を入力するように求められます。また、さまざまなインポートおよび統合機能を提供する他のいくつかのタブに気付くかもしれません。ただし、無料バージョンのNinja Tablesでは、CSVまたはJSONを介してインポートし、WPFluentFormsと統合することしかできません。

タイトルと説明を入力したら、[追加]ボタンをクリックしてテーブルビルダーにアクセスします。必要ない場合は、説明ボックスをスキップできます。

インポート機能も同じように機能します。それはあなたがあなたのウェブサイトにアップロードするためにあなたがあなたのコンピュータで作成したExcelファイルまたは他のCSVファイルを選択することを可能にします。

いずれにせよ、あなたはテーブルエディタに行き着くでしょう。 作成したテーブルは再利用可能であり、ホームウィンドウに表示されることに注意してください。 Ninja Tablesは、ショートコードを使用してテーブルを識別します。 Webサイトの投稿またはページでテーブルを使用するには、ページまたは投稿にテーブルのショートコードをコピーして貼り付けるだけです。

ツールと設定

Ninja Tableには、[ホーム]タブの他に、ユーザーがインポート、グローバルアピアランスの変更、ユーザー権限の設定、およびグローバル設定の変更を行うことができる[ツールと設定]タブも含まれています。

インポートツールは、他の一般的なテーブルプラグインを既に使用していて、NinjaTableに切り替えた場合に適しています。 Ninja Tableには、SupsysticによるTablePress、Ultimate Tables、およびDataTablesGeneratorのワンクリックテーブルインポート機能があります。このタブ内でCSVファイルをインポートすることもできます。

次に、[グローバルアピアランス]タブでテーブルスタイルを変更できます。忍者テーブルは、3つの異なるテーブルUIスタイルを使用してテーブルを即興で作成できます。また、好みに応じて各スタイルをカスタマイズし、訪問者がテーブルを検索およびフィルタリングできるようにするかどうかを選択することもできます。ただし、外観ルールはテーブルごとに個別に変更することもできます。

残念ながら、Ninja Tablesプロバージョンを使用していない限り、さまざまなバックエンドユーザーに権限を設定することはできません。残りのタブでは、 Javascriptエラーの処理方法を選択したり、テーブルキャッシュをクリアしたりできます。

ヘルプとドキュメント

忍者テーブルの幅広い機能には信頼性の高いドキュメントが必要です。私たちのチームは、忍者テーブルについて知っておく必要のあるすべてのものを用意しています。

ヘルプとドキュメントのインターフェイスは、Ninja Tablesで何ができるかを深く理解するために、十分に文書化されたユーザーガイドを提供します。それでも問題が解決しない場合は、サポートチケットを送信して、いつでもお問い合わせください。

UIについて学習したので、必ずテーブルを作成する必要があります。だから、ホームに戻って、それを作成し始めてください！

テーブルエディタ

テーブルエディタは、忍者テーブルの最もエキサイティングなものの1つです。それは、カスタマイズだけでなく、最も高度なHTMLテーブルビルダー機能のいくつかで後押しされます。 [追加]または[インポート]ボタンをクリックすると、充実したNinjaTablesテーブルエディターが表示されます。

Ninja TablesテーブルビルダーUIは、上記のセクションで構成されています。各テーブルビルダーセクションには、美しいWordPressHTMLテーブルを作成および設計するための複数のカスタマイズ機能があります。

上部の[編集]ボタンをクリックすると、テーブルのタイトルと説明を変更したり、テーブルのキャプションを設定したりできます。さらに、Ninja TablesテーブルビルダーUIを使用すると、いつでもテーブルをプレビューできます。

テーブルの行
構成
設計
フロントエンド編集
カスタムCSS
インポート・エクスポート

テーブルビルダーの機能を1つずつ説明していきましょう。

テーブル行

テーブル行は、WordPressのHTMLテーブルビルダーの基本的な側面の1つです。それが言うように、あなたは列の追加ボタンをクリックすることから始めることができます！

ボタンを押すと、WordPressで最も高度なHTMLテーブル機能のいくつかを許可する列作成ウィンドウが開きます。 Ninja Tablesは、平均的な列作成機能を備えた単なる基本的なテーブルビルダーではありません。それ以上のものです。

したがって、列のタイトルを書き込むことができますが、データ型とレスポンシブブレークポイントを設定することもできます（レスポンシブブレークポイントでは、特定のデバイスで列を表示するかどうかを選択できます）。

ただし、無料バージョンでは、[選択]フィールド、画像、およびファイルのアップロードが制限されており、ボタンを作成できません。それでも、プラグインは、 HTMLフィールド、数値、日付フィールドなどのいくつかの信じられないほどのデータ追加機能でブーストします。

また、テーブルの列をさらに細かく制御したい場合は、他の列のカスタマイズタブで使用できる[詳細設定] 、[条件付き設定] 、および[変換値]のロックを解除できます。それらがどのように機能するかについての詳細は、NinjaTablesのドキュメントを確認してください。

テーブル列を追加すると、エディターに[データの追加]ボタンが表示されます。それはあなたが楽にあなたのウェブサイトにデータを追加することを可能にします。列ヘッダーの横にある歯車のアイコンをクリックして列を個別にカスタマイズし、いつでもデータを編集、複製、または削除できます。

最後に、テーブルの行セクションでは、テーブルが多数のデータで構成されている場合に、一括アクションを実行したり、コンパクトビューを設定したりすることもできます。

テーブル構成

[テーブルの構成]タブには、ドラッグアンドドロップによる列の編成があります。一般に、HTMLテーブルは、一度作成されるとWordPressで整理できません。

その点で、忍者テーブルはテーブルの編成を制限しません。テーブルの行はドラッグアンドドロップで整理できますが、新しい列を作成したり、既存の列を編集したりすることもできます。

[テーブル構成]タブの次のタブでは、レンダリング設定、つまり、ブラウザでテーブルをどのようにレンダリングするかを選択できます。デフォルトでは、テーブルはAjaxテーブル設定でレンダリングされます。この機能を使用すると、Webサイトの速度を損なうことなく、大規模なデータベースを組み込むことができます。

2つのレンダリングオプションがありますが、プロバージョンがない限り、詳細テーブル設定を選択することはできません。 Advanced Tableは、セルマージやショートコードなど、最も高度なテーブルフィールドのいくつかを組み込むことができ、SEO最適化に適しています。

カスタムフィルターは、ラジオボタン、チェックボックス、日付ピッカー、またはその他のさまざまな特殊なUIをテーブルに含める場合に便利な機能です。これらは、商品を表示したり、テーブルセル内にデータを追加したりする場合に、優れた変換最適化機能を提供する可能性があります。ただし、カスタムフィルターもプロ機能です。

ボタン構成では、印刷またはCSVインポートボタン（Pro機能）を含めることができます。 言語設定は、テーブルの検索バー、検索プレースホルダー、または検索ドロップダウンの見出しに別の言語を使用する場合に役立ちます。

テーブルデザイン

Ninja Tables Table Designは、信じられないほどのビジュアルカスタマイザーです。最大9つのスタイルカスタマイズ機能を備えた3つのスタイリングライブラリを備えており、WordPressのHTMLテーブルを最大限に視覚的に制御できます。

スタイルに加えて、テーブルのタイトル、説明、検索バー、列フィルター、ヘッダー行、境界線などを表示するかどうかを選択することもできます。さらに、スタック可能なテーブル構成を有効にして、ターゲットデバイスが壊れないように設定できます。任意のデバイスで。

スタイルは、テーブルの視覚的な魅力に重要な役割を果たします。ただし、色が最も重要です。忍者テーブルは、テーブルの色タブ内で完全な色のカスタマイズを提供します。テーブルヘッダーの色からテーブルの境界線まですべてをカスタマイズでき、許可される色に制限はありません。

また、色のカスタマイズを決定できない場合、Ninja Tableには、テーブル用に13の事前定義された配色が付属しています。ただし、この驚くべき機能にはプレミアムバージョンが必要です。

残りのテーブルデザインタブには、ページ付け、検索バーの位置、並べ替え方法などのさまざまなカスタマイズ機能があり、テーブルデザインに追加のCSSクラスを指定できます。

フロントエンド編集

フロントエンド編集は、NinjaTablesが単なるテーブルプラグインではないもう1つの典型的な理由です。フロントエンドユーザーの編集を有効にすることができます。たとえば、ユーザーがテーブルデータに入力する必要がある場合は、フロントエンドの編集を容易にすることができます。ただし、フロントエンド編集機能はプレミアムバージョンでのみ使用できます。

カスタムCSS/JS

カスタムCSSを使用すると、WordPressでのHTMLの外観を制御できます。プラグインの場合は、テーブルを制御できます。この記事は非コーダーを対象としていますが、CSSとJavascriptを知っていると、忍者テーブルの外観を包括的に制御できます。

インポート・エクスポート

この場合も、インポート機能を使用すると、CSVファイルをインポートしたり、CSVを介して既存のテーブルを置き換えたりすることができます。一方、エクスポート機能を使用すると、テーブルをCSVファイルに保存できます。

統合

Ninja Tablesには、WordPressで手間をかけずにHTMLテーブルを作成するために必要なすべてのツールと機能が組み込まれています。しかし、力はテーブル作りに限定されていません。それは単なるテーブルプラグイン以上のものであり、いくつかの信じられないほどの統合が付属しています。すべてが素晴らしい設備を提供します！

FluentFormsの統合
WP投稿
WooCommerce
Googleスプレッドシート
忍者チャート

FluentFormsの統合

Webサイトの所有者は、おそらくWebサイトでフォームプラグインを使用します。フォームエントリをテーブルに入れたい場合はどうなりますか？ Ninja Tablesは、テーブルの設定以外の操作を必要とせずに、フォームエントリを使用してテーブルを作成および表示します。

WP Fluent Formsは、現在世界最高のコンタクトフォームプラグインです。オーディエンスからデータを収集するためにプラグインを使用している場合は、多くのことをしなくても、WordPressテーブルにプラグインを取り込むことができます。

WP投稿の統合

Ninja Tablesは、お問い合わせフォームのエントリをテーブルに取り込むだけではありません。また、数回クリックするだけで、すべての投稿、製品、ページなどを1つのテーブルに整理できます。投稿や製品の分類を検討している場合、NinjaテーブルのWP投稿の統合により、作業を大幅に最小限に抑えることができます。

WooCommerceの統合

WooCommerceは最も人気のあるWordPressショッププラグインです。ただし、WooCommerceを使用しているユーザーの数が非常に多いということは、多くのユーザーが同じユーザーエクスペリエンスを提供していることも意味します。 WooCommerceと統合されたNinjaTablesは、サイトの多様性とバックエンドでの効果を提供できる伝説的なプラグインです。最も簡単なWooCommerceショップ管理を可能にしながら、コンバージョン率を向上させます！ Ninja Tablesは、WooCommerceショップを管理するために必要なものです。

Googleスプレッドシートの統合

忍者テーブルが袖の下に隠しているのは信じられないほどです！それがあなたが考えていることですよね？

おそらく、Googleスプレッドシートは、WordPressプラグインが提供できる最高の統合オプションの1つです。 Googleスプレッドシートは、最もシンプルな機能を備えた最も人気のあるオンラインスプレッドシートです。 Webアプリには絶対にワールドクラスの機能があり、さらに重要なことに、どのデバイスからでもアクセスできます。

Ninja Tablesは、任意のGoogleシートに接続して、シートの更新時にそのデータをWebサイトに表示できます。したがって、外出先でテーブルを更新する必要がある場合、Ninja TablesのGoogleスプレッドシートの統合は絶対的なマスタークラスです！

忍者チャートの統合

テーブルはデータを処理します。統計データを表示するため、WordPressテーブルに依存しています。ただし、少しクリエイティブになって、それらをグラフィカルに表示する方法を見つける必要がある場合もあります。 Ninja Chartsの統合は、テーブルデータの視覚的表現を作成するための完璧なソリューションです。あなたがそれで何ができるかを見たいですか？ビデオをチェックしてください！

まとめ

Ninja Tablesで、WordPressで高度なHTMLテーブルを作成するという困難はついに終わりました！これは、HTMLコードを捨てながら美しいデータテーブルを表示する必要があるすべてのWordPressユーザーのためのワンストップソリューションです。

したがって、テーブルを作成し、エンゲージメントを高め、コンバージョンを改善し、忍者テーブルを使用してテーブルを構築する以上のことを行います。

それが今日のすべてです。あなたの人生に幸あれ。

共著者：Nusrat Fariha

Nusratは、さまざまなトピックに取り組むのが大好きなWPManageNinjaのクリエイティブコンテンツライターです。そして、彼女が書いていないとき、彼女はおそらく彼女の好きな本を読んでいます！