Как создать столбики и диаграммы в WordPress с помощью документ-камеры

Хотите ли вы добавить бары и графики в WordPress? Визуальные средства, такие как график, столбики, круговая диаграмма и другие — это отличный способ красиво дополнить данные вашим контентом. В этой статье мы покажем вам, как создавать бары и диаграммы в WordPress с помощью плагина Visualizer WordPress Charts and Graphs.

Проблема с барами и диаграммами в WordPress

Существует множество плагинов WordPress для добавления баров, диаграмм и графиков к вашему контенту. Однако, наиболее распространенная жалоба, которую мы слышали от наших пользователей, заключается в том, что эти плагины обычно слишком сложны в использовании.

Некоторые из этих плагинов даже предлагают пользователям добавлять данные внутри шорткода в чрезвычайно сложных форматах.

Вместо того чтобы использовать эти плагины, многие пользователи создают диаграммы в своих офисных приложениях и конвертируют их в изображение.

Это может сработать, если вы планируете никогда их не менять. Однако изображение не заменит интерактивную диаграмму, где полезные данные появляются, когда пользователь наводит курсор мыши на определенный участок.

Идеальное решение для графиков и диаграмм позволит вам это сделать:

• Добавьте данные из источника данных на вашем компьютере или в Интернете.
• Наполните диаграммы, пироги, графики и столбики вашими данными.
• Создавайте красивые, интерактивные, красочные и удобные для мобильных устройств диаграммы.
• Самое главное, чтобы вы могли обновлять данные, когда захотите.

Сказав это, давайте посмотрим, как плагин Visualizer WordPress Charts and Graphs поможет вам сделать все это.

Создание баров и графиков в WordPress с помощью документ-камеры

Первое, что вам нужно сделать, это установить и активировать плагин Visualizer WordPress Charts and Graphs. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.

Хотя бесплатная версия делает почти все, что вам нужно, у них также есть Visualizer Charts and Graphs Pro, который добавляет дополнительные функции к плагину, такие как добавление данных напрямую с помощью интерфейса, похожего на электронную таблицу, и импорт данных из других диаграмм.

Стоимость лицензии на один сайт составляет $79 с одним годом профессиональной поддержки и обновлений.

Примечание: В этом руководстве рассматривается бесплатная версия плагина.

После активации вам необходимо посетить Медиа » Библиотека документ-камеры страница. Именно здесь будут отображаться все ваши графики и диаграммы.

Вам нужно нажать на кнопку Add New, чтобы добавить свой первый график.

Это приведет к появлению всплывающего окна на экране. Вы увидите различные типы графиков, доступные с помощью плагина. Просто выберите тип графика, который вы хотите добавить, и нажмите следующую кнопку, чтобы продолжить.

Следующим шагом будет добавление вашего источника данных в формате CSV. Если вы сохранили данные в виде электронной таблицы с помощью Excel, Google Sheets или любой другой программы, то вы можете просто экспортировать их в CSV-файл.

Вы можете загрузить или сохранить CSV-файл на свой компьютер, а затем загрузить его, нажав на кнопку «С компьютера».

Ваш CSV файл должен иметь имена столбцов в первой строке и тип данных во второй строке. Плагин поддерживает эти типы данных: строка, число, булево, дата, дата времени и время дня.

Взгляните на этот пример файла, который мы создали в Google Sheets.

Если вы создаете CSV-файл с помощью текстового редактора, то посмотрите на этот пример CSV-файла:

Браузер, посетители
строка, числа
Chrome, 7894
Firefox,6754
Internet Explorer, 4230
Safari,2106
Opera, 627

Добавление диаграммы в WordPress с помощью электронной таблицы Google Drive

Если данные графика сохранены в виде электронной таблицы на диске Google, то вы можете добавить их в график без его экспорта.

Откройте файл с данными в Google Таблицах и нажмите на кнопку Файл » Опубликовать в веб.

Появится всплывающее окно, в котором нужно выбрать способ публикации документа. Вам необходимо выбрать Comma Separated Values (.csv) из выпадающего меню.

Не забудьте нажать на кнопку «Опубликовать».

Теперь вы увидите общедоступный URL вашего листа в виде CSV-файла. Вам нужно скопировать этот URL и вернуться к диаграмме Visualizer.

Нажмите на кнопку From Web и введите URL-адрес csv-файла вашей электронной таблицы Google.

Как только вы введете URL, плагин получит ваш CSV-файл и покажет предварительный просмотр вашей диаграммы в реальном времени.

Теперь вы можете нажать на кнопку «Создать диаграмму», чтобы сохранить свою диаграмму.

Добавление диаграммы или графика в сообщениях/страницах WordPress

Добавить диаграмму или график в ваши посты и страницы WordPress так же просто, как добавить изображения.

Создайте новый пост / страницу или отредактируйте существующую, в которую вы хотите добавить диаграмму. На экране редактирования нажмите на кнопку Добавить медиа над редактором постов.

Это вызовет всплывающее окно загрузки медиафайлов WordPress. Вам нужно перейти на вкладку визуализаций из левой колонки. Загрузятся все диаграммы, которые вы создали и сохранили на этом сайте.

Нажмите на значок вставки под вашей диаграммой. Всплывающее окно исчезнет, и вы увидите, что ваш график добавлен в пост WordPress в виде шорткода.

Теперь вы можете сохранить свой пост или страницу WordPress и посетить свой сайт, чтобы увидеть диаграмму, встроенную в ваш пост WordPress.

Редактирование диаграмм документ-камеры в WordPress

Вы можете редактировать и изменять свои графики в любое время. Простое посещение Медиа » Библиотека документ-камеры страница. Отсюда вы можете клонировать график, удалить его или отредактировать его визуальные настройки.

Обновить данные для существующего графика, не изменяя его, довольно просто с помощью Visualizer.

Если вы добавили данные из электронной таблицы Google, то все, что вам нужно сделать, это обновить данные в таблице и перейти в раздел Файл » Опубликовать в Интернете и повторно опубликовать вашу электронную таблицу. Ваши изменения автоматически отразятся в диаграмме.

С другой стороны, если вы загрузили файл CSV, то вам нужно обновить файл CSV на вашем компьютере. После этого выберите график, который вы хотите обновить, и нажмите на ссылку «Редактировать» под графиком.

В разделе Upload CSV file просто загрузите ваш новый CSV файл. Изменения в данных будут автоматически отражаться в постах или страницах, куда вы вставили этот график.

Добавление диаграммы в виджет боковой панели WordPress

Визуализатор использует шорткоды для вставки диаграмм. Просто перейдите в раздел Медиа » Библиотека документ-камеры, там вы увидите шорткод под вашими диаграммами.

Скопируйте шорткод и перейдите по адресу Внешний вид » Виджеты. Перетащите текстовый виджет на боковую панель и вставьте шорткод внутрь виджета.

Если шорткод не работает в текстовом виджете, ознакомьтесь с нашим руководством по использованию шорткодов в виджетах боковой панели WordPress.

Мы надеемся, что эта статья помогла вам добавить бары и графики на свой сайт WordPress. Вы также можете посмотреть наш список из 24 обязательных плагинов WordPress для бизнес-сайтов

Источник: www.wpbeginner.com