WordPressとデータの視覚化

公開: 2022-02-04

WordPress Webサイトにグラフ形式で表示したいデータがたくさんありますか？おそらく、数か月の間にWebサイトへのトラフィックをどのように改善したかをクライアントに示すいくつかの販売統計またはデータですか？理由が何であれ、データを視覚的に提示することで、コアポイントを視聴者に伝えることがはるかに簡単になるだけでなく、より楽しくなります。とても楽しいという誰もが考えていることではありません！

データを視覚的に表示するというアイデアが好きかもしれませんが、重要な質問は「どのようにそれを行うのですか？」です。グラフィックデザインソフトウェア（Canvaなど）でグラフや円グラフを作成してから、その画像をWebサイトに配置したくなるかもしれません。それは確かに仕事を成し遂げるでしょうが、もっと良い方法があったらどうしますか？

幸いなことに、WordPressであるため、すべてプラグインから始まります。この記事では、ユーザーフレンドリーで興味深く読みやすい方法でそのデータを表示するのに役立つプラグインオプションのいくつかを見ていきます。さあ行こう！

簡単なチャート

Easy chartsプラグインは、仕事をこなす人気のある無料のプラグインです。しばらくの間更新されていませんが、これは、重大な怠慢によるものではなく、「現状のまま」正常に機能し続けた結果であるように思われます。

それはよく機能していて、始めるのはかなり簡単です。インストールしたら、EasyChartsAdminエリア内から[AddNew]メニューリンクに直接移動します。

行と列にデータを追加できることがわかります（Excelや他のスプレッドシートの場合と同じです。ボーナスとして、結果をその場で確認できるプレビューパネルがあります。

構成の詳細。スタイル、タイポグラフィ、キャプション、色などをパーソナライズして、希望の外観を実現できます。データを表示する方法は複数あります。選択する方法は、表示するデータの種類に大きく依存します。

棒グラフ
面グラフ
積み上げ棒グラフ
積み上げ面グラフ
パーセント棒グラフ
パーセント面グラフ
円グラフ
ドーナツチャート
ステップアップ棒グラフ
ウォーターフォールチャート
折れ線グラフ
極域面グラフ

グラフを作成すると、投稿またはページに貼り付けることができるショートコードが提供されます。または、ビジュアルエディタを使用している場合は、クイック挿入の[簡単なグラフ]ボタンを使用して、ビジュアルエディタ内から直接グラフを追加することもできます。

プラグインは、uvCharts Javascriptライブラリを使用して開発され、SVGおよびCSS3トランジションを使用してチャートを作成します。クールなボーナスとして、作成したグラフを画像ファイルとしてダウンロードすることもできます。最後に、チャートは応答性が高いことにも注意してください…今日のモバイルファーストのWebデザインの世界では必須です。

ビジュアライザー

Visualizerプラグインは、Webサイトの見栄えが良く応答性の高いチャートや図を作成するためのもう1つの人気のある選択肢です。 40,000以上のインストールと多数のすばらしいレビューがあり、優れたオプションです。

プラグインをインストールしてアクティブ化すると、WordPressメニューにプラグインが表示されます。「ビジュアライザー->新しいチャートの追加」をクリックして、最初のチャートを追加します。

特定のチャート要件に最適なオプションを選択するプロセスを案内するポップアップウィンドウが表示されます。

6つの無料テンプレートから選択できます。

テーブル
パイ/ドーナツ
ライン
領域
ジオ
バー

データCSVをローカルにアップロードするか、リモートCSVファイルまたはGoogleスプレッドシートからデータをインポートできます。最初にテンプレートCSVファイルをダウンロードすることをお勧めしますが、プラグインが理解できるようにデータが構造化されていることを確認してください。または、リモートJSONソースからデータをインポートするか、手動でデータを追加することもできます。

[設定]タブには、グラフを公開する前にグラフのスタイルを変更できるさまざまなオプションがあります。

グラフを作成したら、関連するショートコードをコピーするか、CSVまたは画像としてエクスポートできます。 Visualizerプラグインは、Google Visualization API、DataTables.net、ChartJSを使用して上記を実現します。

wpDataTables

wpDataTablesプラグインは、WordPressWebサイトに表示するデータテーブルとチャートを作成するためのもう1つの優れた選択肢です。これはプレミアムプラグインですが、多くのプロジェクトに十分な機能を提供する可能性のある軽量の無料バージョンを提供します。

インストールしてアクティブ化したら、「wpDatatables->チャートの作成」に進んで開始します。

ウィザードを使用し、手順に従って、選択したチャートを作成できます。グラフの名前を設定し、レンダリングエンジンと視覚化タイプを選択してから、同じプラグインで作成されたテーブルである必要があるソースデータを取得します。

前述のプラグインで提供されていない機能を調べるために、このプロセスをもう少し詳しく見てみましょう。「テーブルの作成」をクリックして開始します。

ご覧のとおり、最初から作成するか、既存のソースからテーブルの内容をプルすることができます。この例では、既存のソースから作成することを選択します。これをクリックすると、「入力データソースタイプ」を選択するように求められます。

無料版では、CSV、Excel、XML、またはJSONファイル形式を使用するか、PHPシリアル化オブジェクトを提供できます。

これは、データベースからデータを表示するための選択肢を提供するため、優れた機能です。これは最も簡単な方法ではありませんが、ちょっと、挑戦します！

この例では、ページに対する投稿の数を示すいくつかの統計を表示したいとします。

シリアル化された配列を出力するPHPコードは、次のようになります。

 <?php include('wp-blog-header.php'); header("HTTP/1.1 200 OK"); $return_array = array(); $posts_query = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish' ) ); $pages_query = new WP_Query( array( 'post_type' => 'page', 'post_status' => 'publish' ) ); $posts = $posts_query->found_posts; $pages = $pages_query->found_posts; $return_array[] = array( 'Type' => 'Posts', ' Count' => $posts ); $return_array[] = array( 'Type' => 'Pages', 'Count' => $pages ); echo serialize( $return_array ); ?>

wpDataTablesが提供する公式ドキュメントによると、親配列エントリは行として解析され、子配列キーは列ヘッダーとして解析され、子配列値はセル値として解析されます。

test.phpという名前のファイルにコードを保存しました。この例では、WordPressインストールのルートフォルダーにコードを配置します。

管理領域に戻り、次のようにファイルパスを入力します。

変更と出来上がりを保存します。

これで、チャートのソースとしてテーブルを設定し、チャートタイプを選択して、チャートを保存できます。そのような単純な！最後のステップは、ウィザードに従って結論を出すことです。これには、使用可能な設定を微調整して、グラフに必要なデザインを取得することが含まれます。その後、自由に公開できます。

結論

Webサイトに視覚的にデータを表示できると非常に便利です。ただし、多くのWordPressユーザーは、プラグインを使用して行うのが比較的簡単なことであることに気づいていません。うまくいけば、上記があなたにあなたが利用できるオプションのいくつかのアイデアを与えたでしょう。ハッピーグラフ構築！