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

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

Что замечательно, так это то, что вам не нужно беспокоиться о работе со сложным программным обеспечением для построения диаграмм, поскольку вы можете делать это благодаря простым плагинам WordPress для построения таблиц и диаграмм. Итак, здесь мы должны объяснить, какие из этих плагинов являются лучшими, и мы также рассмотрим, как создавать красивая графика и формы в wordpress.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

Преимущества создания диаграмм, таблиц и рисунков на WordPress

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

В противном случае вот преимущества создания диаграмм и графики на WordPress с помощью плагинов:

  • Он объединяет весь ваш график и построитель в одну область. Если вы регулярно строите графики или диаграммы, это сэкономит вам много времени.
  • Это позволяет вам вернуться и отредактировать диаграмму при необходимости. Изображение ограничивает количество быстрых исправлений и требует, чтобы вы нашли старый файл, который вы использовали для построения графика.
  • Некоторые графики и диаграммы имеют интерактивные функции, которые были бы невозможны с изображением.

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

5 мощных плагинов для создания диаграмм и диаграмм на WordPress

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

  1. wpDataTables
  2. Диаграммы и графики WordPress Lite
  3. Диаграммы WordPress
  4. Интерактивные карты, диаграммы, графики
  5. Уберчарт

1. wpDataTables

wpDataTables Это очень мощный плагин для WordPress! Не позволяйте названию ввести вас в заблуждение. Он может делать гораздо больше, чем просто создавать собственные типовые таблицы. Вы также можете создавать всевозможные графики и диаграммы. Он был специально разработан, чтобы вы могли вводить большие объемы данных и быстро преобразовывать их в красивый графический дисплей для вас и ваших читателей.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

wpDataTables - это платное дополнение, от 44 долларов за лицензию. В настоящее время у него более 13 продаж на CodeCanyon с рейтингом 000 из 4.5 звезд, поэтому вы можете быть уверены, что есть много людей, счастливых использовать его. Некоторые из его функций включают:

  1. Все зависит от типа используемого устройства, а это означает, что он будет отображаться в красивом диапазоне для каждого устройства.
  2. Плагин wpDataTables предлагает три различных механизма построения диаграмм: Google Charts, Highcharts и Chart.js. Это позволяет вам представлять диаграммы простым и гибким способом с множеством опций для их настройки.
  3. С автоматическим обновлением таблиц и графиков в реальном времени
  4. Предварительный просмотр ваших диаграмм в фоновом режиме вместе с таблицей

2. Диаграммы и графики WordPress Lite

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

Позже, если вы решите изменить тип диаграммы с блочной диаграммы на круговую, нажмите кнопку редактирования и выберите «Переключить». Да, это действительно просто. Также стоит отметить, что создаваемая им инфографика может работать на всех экранах устройств (настольных, планшетных и мобильных) любого размера, потому что этот плагин адаптивен.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

Он включает девять типов диаграмм, поддержку коротких кодов и возможность импорта большого количества данных с помощью CSV. Есть как бесплатная версия, так и платная. Версия Pro стоит не менее 74 долларов (лицензия на один сайт) и предоставляет инструменты для импорта из других диаграмм. Версия Pro включает некоторые другие функции:

  • Возможность предоставить пользователям возможности редактирования
  • Создайте свою схему
  • Автоматическая синхронизация с вашим файлом онлайн
  • Дополнительные типы диаграмм
  • Вы можете получить доступ к прямому редактору

Плагин Lite по-прежнему очень мощный. Вот несколько схем, которые вы можете составить:

  1. линейный график
  2. круговая диаграмма
  3. гистограмма
  4. вертикальная диаграмма
  5. диаграмма с областями
  6. географическая карта
  7. таблица диаграммы
  8. полоса
  9. столы
  10. Комбо-диаграмма
  11. диаграмма рассеяния
  12. Я немец

3. Диаграммы WordPress

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

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

Плагин WordPress Charts предоставляет шесть уникальных диаграмм и шаблонов графиков, которые вы можете настроить и вставить свои собственные данные для отображения на своем веб-сайте. Показанные диаграммы включают:

  1. Линия
  2. Лента
  3. Пирог
  4. радар
  5. Полярный регион
  6. виды пончиков

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

4. Интерактивные карты, диаграммы, графики

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

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

Надстройка продается за 12 долларов и предлагает интерактивные карты, графики и диаграммы, которые размещаются в интерфейсе Visual Composer. Расширение включает векторные иконки, шрифты Google, неограниченное количество цветов и широкий спектр других функций для создания и настройки графиков, таблиц и диаграмм. Расширение содержит стандартные графики и графики, такие как круговые и линейные графики. Существует также уникальная функция карты для выделения определенных областей, будь то карта местности или карта мира.

5. UberChart

добавление Уберчарт Он более универсален, чем эти платные надстройки, потому что надстройка не требует Visual Composer. Расширение предоставляет 10 встроенных типов диаграмм, которые получают около 240 опций для настройки в диаграмме.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

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

  1. графики
  2. Планы района
  3. гистограммы
  4. круговые диаграммы
  5. кольцевые диаграммы
  6. Графические пузыри

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

Как создавать красивые диаграммы и диаграммы в WordPress

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

Шаг 1. Установите и активируйте WordPress Charts and Graphs Lite.

Достаточно просто.

Шаг 2. Перейдите в библиотеку визуализатора и добавьте новый график.

Как мы вкратце упоминали выше, WordPress Charts and Graphs Lite также называют визуализатором. Страницу настроек найти довольно сложно, но все, что вам нужно сделать, это перейти в Медиа> Библиотека визуализатора. Нет никаких других настроек, которые вам нужно настроить перед тем, как начать работу с макетами WordPress.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

Когда вы загрузите библиотеку визуализатора, вы увидите сообщение «Схемы не найдены». Это совершенно нормально, потому что мы еще не запускали графики. Следовательно, вы должны нажать кнопку «Добавить» вверху страницы.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

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

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

Шаг 3. Импортируйте данные в схему WordPress.

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

  • Импорт данных из файла (вероятно, самый распространенный метод)
  • Импортировать данные из URL
  • Импорт из другой схемы
  • Импорт из WordPress (доступно только в версии Pro)
  • Импортировать данные вручную (доступно только в версии Pro)

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

Например, я собираюсь импортировать данные из файла CSV. Я создал его из файла Excel, который является одним из наиболее распространенных способов переноса данных в диаграмму или график WordPress. При импорте данных из файла нажмите кнопку «Выбрать файл», найдите файл на своем компьютере, а затем нажмите кнопку «Импорт» в панели управления WordPress.

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

Шаг 4: Настройте макет WordPress

Под всеми параметрами импорта есть небольшая ссылка «Дополнительно». Нажмите на нее, чтобы открыть настройки персонализации. Вариантов очень мало, поэтому мы не будем их здесь рассматривать.

Но мы можем начать с названия графика. Я напишу что-то вроде "Куда уходит ваше время?" Где мой планировщик определяет процент времени, которое люди тратят на определенные задачи в течение дня. Я также могу изменить шрифт, размер шрифта, цвет и расположение заголовка.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

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

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

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

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

Шаг 5. Скопируйте шорткод на страницу или в публикацию.

После сохранения диаграммы или графика WordPress вернитесь в библиотеку визуализатора. Вы увидите список диаграмм, и вы сможете отфильтровать их по типам диаграмм. Поскольку сейчас у меня только одна диаграмма, я сразу вижу, что это единственный вариант. Чтобы опубликовать схему WordPress на странице или в публикации, вы должны скопировать шорткод схемы и вставить его на нужную страницу или сообщение. Шорткод находится под предварительным просмотром диаграммы (см. Изображение ниже).

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

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

Шаг 6. Отобразите график WordPress в интерфейсе

Я рекомендую предварительно просмотреть диаграмму, прежде чем нажимать кнопку «Опубликовать». Таким образом, вы можете видеть то, что видят ваши пользователи, особенно графики и диаграммы WordPress, которые вместо этого могут быть сложными. Если вы посмотрите на снимок экрана ниже, вы увидите предварительный просмотр тестового графика в передней части веб-сайта. Кнопки печати и загрузки видны, макет WordPress имеет приятную анимацию при наведении курсора, а цвета и элементы заголовка выглядят красиво.

Как создавать красивые диаграммы и полезные диаграммы на WordPress - WordPress профессиональный WordPress

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

Вопросы о том, как создать инфографику в WordPress?

Все диаграммы и диаграммы wordpress имеют разные функции. Самое интересное в этих надстройках - это то, что у вас есть вся гибкость. Поэтому я рекомендую вам потратить некоторое время, чтобы проверить графики и понять, что можно сделать с каждой настройкой. Затем вы в конечном итоге станете мастером чертежей, и люди будут спрашивать вас, как это сделать. Если у вас есть какие-либо вопросы или идеи о том, как создавать макеты и графику WordPress, оставьте строку в комментариях ниже.

Перейти к верхней кнопке