VisualizerでWordPressにバーとチャートを作成する方法

WordPressサイトで棒グラフ、グラフ、円グラフを作成すると、データをよりアクセスしやすくすることでコンテンツを改善できます。視覚的に魅力的でユーザーが理解しやすい方法で情報を提示するのに役立ちます。

良いニュースは、これを行うのに技術的な経験は必要ないということです。Visualizerのようなプラグインを使用できます。このツールは自分でテストしましたが、プロセスがどれほど簡単になったかが気に入りました。

Visualizerを使用すると、さまざまなソースから簡単にデータを取得して、見栄えの良いカスタム棒グラフや円グラフを作成できます。これにより、コンテンツと全体的なユーザーエクスペリエンスを向上させることができます。

この記事では、Visualizer を使用して WordPress でバーやグラフを作成する方法を説明します。

WordPressにおける棒グラフと円グラフの問題

コンテンツにバー、チャート、グラフを追加するための多くのプラグインがあります。しかし、ユーザーから最もよく聞かれる不満は、これらのプラグインは通常使い方が複雑すぎるということです。

これらのプラグインの中には、ユーザーが非常に複雑な形式のショートコード内にデータを追加することを期待するものもあります。

これらのプラグインを使用する代わりに、多くのユーザーはオフィスアプリケーションでチャートを作成し、WordPressウェブサイト用の画像に変換しています。

これは、変更しないと決めている場合は機能する可能性があります。しかし、画像は、ユーザーが特定のセクションをクリックしたときに役立つデータが表示されるインタラクティブなチャートの代わりにはなりません。

理想的なチャートとグラフソリューションでは、次のことが可能になります。

• コンピューターまたはウェブ上のデータソースからデータを追加します。
• データを使い、チャート、円グラフ、グラフ、棒グラフを生成します。
• 美しく、インタラクティブで、カラフルで、モバイルフレンドリーなチャートを作成します。
• 最も重要なのは、いつでもデータを更新できることです。

Visualizerでグラフを追加すると、ユーザーエンゲージメントを高め、データを簡単に理解できるようになります。

それを踏まえて、WordPressサイトにバーやグラフを簡単に追加する方法を見てみましょう。

VisualizerでWordPressにバーとチャートを作成する方法

Visualizerプラグインを使用すると、WordPressで簡単に棒グラフやグラフを作成できます。これは市場で最高のWordPressデータ可視化プラグインであり、サイト用のインタラクティブなデータ可視化を作成できます。

バーやグラフを作成できる無料プランもあります。

まず、Visualizer: Tables and Charts Manager for WordPressプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベーション後、WordPress ダッシュボードから Visualizer » 新しいチャートを追加 ページにアクセスする必要があります。

そこに着いたら、テーブル、円、線、または棒グラフなど、作成したいグラフの種類を選択します。次に、「次へ」ボタンをクリックします。

次のステップに進みます。ここで「ファイルを選択」ボタンをクリックして、コンピューターからExcelスプレッドシートデータをインポートする必要があります。

Excel または Google スプレッドシートを CSV ファイルとして保存した場合、「URL からデータをインポート」タブを展開してインポートできます。

それが完了したら、「CSVからインポート」ボタンをクリックします。その後、CSVファイルのURLを入力してファイルを埋め込むことができます。

CSVファイルには、最初の行に列名、2行目にデータ型を含める必要があることに注意してください。このプラグインは、文字列、数値、ブール値、日付、時刻、および時刻のデータ型をサポートしています。

Googleスプレッドシートで作成したこのサンプルファイルをご覧ください。

テキストエディタを使用してCSVファイルを作成している場合は、このCSVファイルの例をご覧ください。

日々の活動、時間
文字列、数値
仕事、8
睡眠、7
食事、3
テレビ鑑賞、2
通勤、1


ただし、組織図のデータが Google ドライブのスプレッドシートとして保存されている場合は、エクスポートせずに組織図に追加できます。

まず、Google スプレッドシートでデータファイルを開き、次に ファイル » 共有 » ウェブに公開 リンクをクリックします。

これによりポップアップが表示され、このドキュメントを公開する方法を選択する必要があります。

ドロップダウンメニューからカンマ区切り値（.csv）オプションを選択し、「公開」ボタンをクリックするだけです。

これで、シートの公開可能なURLがCSVファイルとして表示されます。このURLをコピーして、Visualizerチャートに戻ります。

このURLを「CSVからインポート」フィールドに追加する必要があります。

URLを入力すると、プラグインがCSVファイルをフェッチし、チャートのライブプレビューを表示します。

これで、上部にある「設定」タブに切り替えて、フォントスタイル、数値形式、サイズと配置、サイズ設定など、一般的な設定を構成できます。

完了したら、プロンプトの下部にある「作成」ボタンをクリックします。

WordPressの投稿/ページにチャートまたはグラフを追加する

WordPressの投稿やページにグラフやチャートを追加するのは、画像の追加と同じくらい簡単です。

まず、円グラフを追加したい新しいまたは既存のページ/投稿を開きます。そこに移動したら、画面左上の「ブロックを追加」（+）ボタンをクリックします。

これによりブロックメニューが開きます。そこからVisualizer Chartブロックを見つけて追加する必要があります。

それが完了したら、ブロック自体の「既存のグラフを表示」ボタンをクリックします。

これにより、ブロックに新しいプロンプトが表示され、作成したばかりの円グラフを選択する必要があります。

最後に、「公開」または「更新」ボタンをクリックして設定を保存します。

これで、WordPressサイトにアクセスして、円グラフが機能しているのを確認できます。

WordPressでVisualizerチャートを編集する

チャートはいつでも編集・変更できます。WordPressダッシュボードからVisualizer » Chart Library ページにアクセスするだけです。

そこから、チャートを複製したり、削除したり、チャート名の下のアイコンを使用して視覚設定を編集したりできます。

Visualizerを使えば、チャートを変更せずに既存のチャートのデータを更新することも非常に簡単です。

Google スプレッドシートからデータを追加した場合、スプレッドシートのデータを更新し、ファイル » 共有 » ウェブに公開 オプションに移動して、スプレッドシートを再公開するだけで済みます。

あなたの変更は自動的にグラフに反映されます。

一方、CSVファイルをアップロードした場合は、コンピューター上のCSVファイルを更新する必要があります。完了したら、更新したいグラフを選択し、グラフの下にある編集リンクをクリックします。

「CSV ファイルのインポート」セクションで、新しい CSV ファイルをアップロードするだけです。データの変更は、そのチャートを挿入した投稿またはページに自動的に反映されます。

ボーナス：WordPressで組織図を作成する

もし中小企業のサイトをお持ちであれば、WordPressに会社の組織図を追加することもできます。この図は、CEO から各チーム内のさまざまなチームや個々の従業員までの会社の構造を示します。

組織図は、潜在顧客があなたのビジネスについてさらに学ぶのに役立ち、チーム間のコミュニケーションを容易にします。

チャートを作成するには、Organization Chartプラグインをインストールして有効化するだけです。詳細は、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

有効化したら、Wpdevart Chart » Charts ページにアクセスし、「新規追加」ボタンをクリックします。これにより、チャートの名前を追加できる新しい画面が表示されます。

その後、画面上の要素に会社の CEO の画像とタイトルを追加します。次に、矢印アイコンをクリックします。

これにより、CEOの次にくる人物のタイトルと画像を追加できる要素がもう1つ追加されます。次に、要素をもう一度クリックすると、さまざまな方向の複数の矢印アイコンが表示されます。

これを行うことで、複数の支社やチームを持つ企業構造を作成できます。

完了したら、「保存」ボタンをクリックして設定を保存します。

次に、組織図を追加したいページを開き、「WpDevArt organization chart」ブロックを追加します。その後、ブロック自体内のドロップダウンメニューから作成したチャートを選択します。

最後に、「公開」または「更新」ボタンをクリックして設定を保存します。詳細については、WordPressで組織図を作成する方法に関するチュートリアルをご覧ください。

この記事が、WordPressサイトに棒グラフやチャートを追加するのに役立ったことを願っています。また、WordPressサイトのカスタマイズ方法に関する初心者向けガイドと、見逃している最高のWordPress楽しいプラグインに関する専門家のおすすめもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。