WordPressでデータテーブルを使用する方法–データを埋め込んだHTMLテーブルを作成する独創的な方法

WordPressでデータテーブルを使用する方法–データを埋め込んだHTMLテーブルを作成する独創的な方法

WordPressでデータテーブルを使用する方法–データを埋め込んだHTMLテーブルを作成する独創的な方法
СОДЕРЖАНИЕ
02 июня 2020

テーブルは、WordPressが特に得意とするものではありませんでした。基本的に、WordPressでデータテーブルを紹介したい場合は、プレゼンテーション全体を手作業で作成することになります–生のHTMLとCSSを使用してすべての見栄えを良くします.


いいえ、新しいブロックエディタのことを忘れていません。それは確かにテーブルの作成と表示を全体的に簡単にしますが、特に大規模なデータセットの場合はまだ完璧なソリューションではありません.

とにかく、CodeinWPの投稿でテーブルを多用してきたので、今日の主な戦略をいくつか紹介します.

このガイドでは、WordPressでHTMLテーブル/データテーブルを使用する方法、それらを自然のままに見せる方法、およびモバイル向けに最適化されていることと、SEOフレンドリーであることを同時に確認するためのクリエイティブなアイデアをいくつか紹介します。.
WordPressでデータテーブルを使用する方法

WordPressのデータテーブルに対する3つの側面からのアプローチ

私たちのアプローチをすばやく要約するために、WordPressのデータテーブルを3つの異なる方法で操作しています。

(a) シンプルなレスポンシブで見栄えの良いテーブルを使用して基本的なデータを提示し、投稿の一部を簡単に消化できるようにする.

(b) 私たちが呼ぶかもしれないものを使う "中間層テーブル" ユーザーの並べ替えやマウスホバー時の行の強調表示などの追加機能を可能にする.

ライブの例:

ホスティング会社評価/ 5調査人気市場人気(アレクサ)
GoDaddy3.50.41223
ブルーホスト3.30.261780
HostGator3.70.301872
WPEngine4.40.374065
SiteGround4.61.005708
DreamHost4.10.2210030
A2ホスティング3.80.1612709
クラウドウェイズ4.50.3918544
キンスタ4.80.2523350
フライホイール4.60.1834689

ホスティング調査から

(c) フロントエンドのユーザーにはあまり見えない、より高度な内部処理を可能にする自動更新テーブルの使用。たとえば、ここにあるテーブルはGoogleスプレッドシートに基づいて構築されており、自動的に更新されます(つまり、シートを更新するたびに、テーブルも更新されます).

例:ビジュアライザーホストテーブルのデモ

Googleのアプローチをエミュレートして、WordPressでいくつかのクールなデータテーブルを作成する方法は次のとおりです。

戦略#1:Visualizerを使用してテーブルに命を吹き込む

おそらく、最も先進的なアプローチから始めましょう。次に、この投稿をさらに下に行くにつれて、物事をより簡単にします.

ビジュアライザー は独自のプラグインの1つであり、WordPressでデータテーブルを処理するこの最初の戦略を可能にする主要なツールです。.

  • ��️Visualizerとは何ですか?これは、チャート、グラフ、テーブルを作成し、ショートコードまたはブロックを介してそれらをブログ投稿に含めることができるプラグインです。基本的な機能のセットだけが必要な場合は簡単に使用できますが、内部の機能を少し変更したい場合は非常に強力です。.

Visualizerの優れた点の1つは、複数のソースからデータを(表だけでなくグラフでも)ロードできることです。たとえば、新しいテーブルを作成するときは、次のものからインポートできます。

  • CSVファイル,
  • URL(Googleスプレッドシートを含む),
  • 別のチャート,
  • WordPress(フィルター/ワークフローを作成し、WordPressデータベースを参照して必要なデータを表示する),
  • データベースを直接(生のSQLクエリを使用して),
  • さらに、データを手動で入力することもできます.


ビジュアライザー:WordPressのテーブルとグラフのマネージャー

著者: テーマ


90%評価


40,000以上のインストール


WP 3.5+が必要

より詳しい情報

visualizer.zip

現在のバージョン:3.4.3

最終更新日:2020年5月4日


90%評価


40,000以上のインストール


WP 3.5+が必要

WordPress.orgプラグインページ


ビジュアライザー:WordPressのテーブルとグラフのマネージャー

さて、ここであなたのテーブルを生き生きとさせることは、ここでどこに出てきます?

一般に、テーブルの難しい点は、テーブルを手動で作成すると、後で更新する場合と基本的に同じ時間がかかることです。テーブルを1回限りのタスクにして、すべてが自動的に最新の状態に保たれるようにします.

Visualizerを使用すると、URLからテーブルのデータをフェッチし、インポートを1時間ごと/ 12時間/日/ 3日ごとに繰り返すように設定できます.

これが効果的に意味することは、 自動的に更新されるテーブル ソースの変更に基づいています。読む:戻って手動で更新する必要はありません.

これを活用できる4つの創造的な方法を次に示します。

ケーススタディまたは分析の投稿を最新の状態に(自動的に)保つ

私たちはWordPressホスティング市場に力を入れてきました。このトピックには多数の投稿があり、それらのほとんどは継続的な更新が必要です.

メインのホスティング比較のバージョンの1つには、注目のホストの読み込み時間を強調するライブテーブルが含まれています。これは次のようになります(ライブテーブル):

.visualizer-41792oddTableRow {background-color:#eaeaea!important;}

(今、その投稿にアクセスすると、実際の動作が表示されない場合があります。多くのことをテストして、かなり頻繁に変更しています。)

このテーブル全体は、Googleスプレッドシートから自動的にフェッチされます。ロゴやリンクでさえ、(生のHTMLとして)Googleスプレッドシート内に保存されます。たとえば、ロード時間を更新するたびに、それらもテーブルで更新されます。言うまでもなく、ユーザーはテーブルを並べ替えることができます.

これを設定することはまったく難しくありません。

1. Google SheetStandardのものを準備します。次に例を示します。

シート例

その後, "それをウェブに公開する" による このガイド.
2. VisualizerFirstでテーブルを作成し、 ビジュアライザー プラグイン、!

に行く メディア→ビジュアライザーライブラリ そしてクリック 新しく追加する. ピック テーブル.

設定ウィンドウから、 URLからデータをインポート, に入る インポートのスケジュール 次に、インポートのURLとスケジュールを入力します。そのようです:

インポートのスケジュール

テーブルを保存する.
3.ポスト/ページにテーブルを追加します。ショートコードまたはブロックエディターを使用してテーブルを含めます。それだけです。WordPressにデータテーブルがあります。!

繰り返しますが、この設定では、テーブルのデータを自動的にフェッチし、それらのテーブルを自動的に更新することもできます.

複数の投稿にわたって複数のテーブルを最新に保つ(自動的に)

これは前のシナリオに関連していますが、角度は少し異なります.

基本的に、同じGoogleスプレッドシートを複数のテーブルのデータのソースとして使用することを妨げるものは何もありません.

つまり、複数の投稿/ページにまたがる同様のテーブルを含めることができ、時間の経過とともに同期が外れることを心配する必要がありません(たとえば、一方を更新し、もう一方を更新し忘れるなど)。.

Visualizerでテーブルを設定する場合、詳細設定に進み、ページネーション、行数、ユーザーの並べ替えの無効化/有効化、検索の有効化などのさまざまなことを調整できます。つまり、同じデータソースを使用していても、テーブルの外観が異なる場合があります。.

トラフィック/ユーザー/販売数を最新の状態に保つ(自動的に)

ウェブビジネスでは、トラフィック、売上、サービスを提供するユーザーの数など、さまざまな数値/インジケーターをウェブサイトで共有する傾向があります.

ただし、誰もが外部サービスを組み込んで、何らかの方法で外部サービスをモデレートできないとは限らない.

理想的には、非常に透明性が高いとしても、目を覚ましてショッピングカートやトラフィックツールからの埋め込みが大幅な低下を示していることに気づかないでください。 "私たちがどれだけうまくやっているか見てください!"

別のレイヤーを追加して、最初にGoogleスプレッドシートにデータをインポートすると、すべての変更をモデレートしてから、トラフィック/販売のテーブルにフェッチしてサイトで公開することができます.

セットアップは前のシナリオと同じです。新しいGoogleスプレッドシートを作成し、数値をインポートまたは入力して、ビジュアライザーのテーブルまたはチャートに接続するだけです.

データベースにクエリを(自動的に)

Visualizerには、もう1つの優れた機能があります。生のSQLクエリを介してWordPressデータベースから直接テーブルデータをインポートできます.

はい、かなり高度なものですが、実験したい場合は、多くの可能性を提供します.

いくつかの簡単なアイデア:

まず、コメントの多い投稿を簡単に紹介できます。このようなリストは、透明性レポートだけでなく、アーカイブページでも使用できます。例:

コメントされた

このようなテーブルを作成するには、ビジュアライザーに移動して新しいテーブルを作成し、 データベースからインポート.

クエリウィンドウで、次のように入力できます。

SELECT post_title AS Post、COUNT(DISTINCT c.comment_ID)AS Comments FROM wp_posts p LEFT JOIN wp_comments c ON p.id = c.comment_post_ID GROUP BY p.ID ORDER BY Comments DESC LIMIT 10

これにより、最もコメント数の多い投稿トップ10の表が表示されます.

クエリを複雑にしてURLを取得することもできるので、これらの投稿タイトルをライブにすることができます。これは単なる例です。他にできることは次のとおりです。

  • 特定のカテゴリからの、または著者が書いたすべての投稿を一覧表示する
  • 他のプラグインがデータを格納するために使用するテーブルを調べ、それらから関連データをフェッチする
  • WooCommerceのベストセラー商品を、販売数、リンク、価格など、何でも希望どおりに表示する
  • Easy Digital Downloadsでも同じことを行います。ここにあるいくつかの 既製のクエリ

それはそれについてです ビジュアライザー それをどのように使用しているか。ただし、この種の高度な自動化が必要ない場合は、他のソリューションもあります。

TablePressを使用して、信頼できるソートとテーブル編集を行います

私たちも大ファンです TablePress 私たちの多くの投稿でそれを使用しています.

たとえば、ここには大きなテーブルがあり、WordPressテーマ市場のトップ100プレイヤーがリストされています。プレビュー:

テーマディレクトリの例

TablePressが気に入っているのは、行を簡単に再配置し、行を非表示にしたり、行を複製したり、ユーザーにテーブルを並べ替えるためのコントロールを提供したりできること.

たとえば、その特定のテーブルの場合、バックエンドには表示しないいくつかの列があります(赤い列)。 TablePressはそれらを強制的に削除するわけではありません。それらを非表示にすることができます。.

隠しテーブルプレス

Shortcodes Ultimateを使用してHTMLテーブルをひっくり返す

個人的に, 究極のショートコード (SU)は、私のお気に入りのプラグインの1つです。.

多くのショートコードの中には、標準のHTMLテーブルをより見栄えよくするために使用できるものもあります。.

以下は、トップVPNサービスを比較した投稿の表です。

suテーブル

それは生のHTMLを介して構築され、その後SUショートコードが追加されました。これです:

[su_table] [/ su_table]

表示されるすべての行のスタイルと境界線はSUのものです.

つまり、テーマにテーブルを処理するための特に優れたCSSがない場合は、SUを使用します.

��注;この投稿で説明されている3つのソリューションすべて(Visualizer、TablePress、SU)は、モバイル対応のレスポンシブなテーブルを出力できます。.

結論

これら3つのプラグインを試すことをお勧めします。 Visualizerは私たちが独自に作成したものであるため、私たちは大好きですが、他の2つは特定のタスクにもかなりきちんとしていることを認めなければなりません。!


ビジュアライザー:WordPressのテーブルとグラフのマネージャー

著者: テーマ


90%評価


40,000以上のインストール


WP 3.5+が必要

より詳しい情報

visualizer.zip

現在のバージョン:3.4.3

最終更新日:2020年5月4日


90%評価


40,000以上のインストール


WP 3.5+が必要

WordPress.orgプラグインページ


ビジュアライザー:WordPressのテーブルとグラフのマネージャー


TablePress

著者: トビアス・バースゲ


100%評価


800,000以上のインストール


WP 5.3+が必要

より詳しい情報

tablepress.1.11.zip

現在のバージョン:1.11

最終更新日:2020年4月1日


100%評価


800,000以上のインストール


WP 5.3+が必要

WordPress.orgプラグインページ


TablePress


WordPress Shortcodes Plugin — Shortcodes Ultimate

著者: ウラジミール・アノキン


98%評価


800,000以上のインストール


WP 4.6+が必要

より詳しい情報

shortcodes-ultimate.5.9.0.zip

現在のバージョン:5.9.0

最終更新日:2020年5月24日


98%評価


800,000以上のインストール


WP 4.6+が必要

WordPress.orgプラグインページ


WordPress Shortcodes Plugin — Shortcodes Ultimate

WordPressでデータテーブルを使用しますか?

WordPressの最新のUIにおけるテーブルとその配置についてどう思いますか?

Gutenbergのブロックエディタにより、テーブルの作成がよりユーザーフレンドリーになりました。そのため、カジュアルなユーザーは、おそらく今すぐにそれらを試してみたいと思うでしょう。結局のところ、テーブルは、MS Wordを使用したことがある人ならだれでもよく知っている古典的なものの1つです。それで、なぜあなたはできませんか "追加するだけ" ワードプレスへ、右?

WordPressでデータテーブルをよく使用しますか?もしそうなら、それらをどのように作成しますか?

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector