Як створювати красиві діаграми та графіки на WordPress

Пропонуємо вам докладний посібник про те, як створювати діаграми на WordPress за допомогою безкоштовного плагіна Visualizer.

Якщо ви хочете відобразити дані та потрібну інформацію у своєму блозі на WordPress за допомогою привабливих діаграм та графіків, тоді можете довго не шукати варіантів, як це зробити. Плагін Візуалізатор — найкращий із них.

Дивіться також:

• Працюємо з таблицями у WordPress за допомогою плагіна TablePress
• wpDataTables: Створюємо адаптивні таблиці та діаграми з різних джерел даних
• Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

Важко повірити, що цей плагін є безкоштовним. З його допомогою можна легко впоратися з поставленими завданнями, а результат перевершує всі очікування. Навіть після публікації діаграм у блозі є можливість їх редагування: змінити колір, шрифти, приховати текст/додати текст.

Додавання діаграми до посту чи на сторінку — такий самий простий процес, як і завантаження електронної таблиці та шорткоду — плагін автоматично генерує її на сторінку.

Надалі, якщо ви захочете змінити тип графіка, скажімо блок-діаграму на кругову, потрібно просто натиснути на редагування і вибрати відповідний тип. Нічого складного.

Варто також відзначити, що створювати подібні діаграми та графіки можна на екранах усіх пристроїв, включаючи настільні комп'ютери, планшети, мобільні телефони. Плагін створено з урахуванням різних розширень.

Але для початку необхідно мати хоч найменше уявлення про те, що цей плагін робить і як він працює. Давайте розглянемо все більш детально, щоб ви могли використовувати практично всі його можливості.

плагін Візуалізатор

Ви можете завантажити плагін з офіційного каталогу розширень WordPress за цим посиланням.

Якщо ви не знаєте, що таке плагіни і як їх встановлювати, перегляньте цей урок.

Після встановлення та активації плагіна ви можете перейти до його налаштувань у консолі в меню Медіафайли → Visualizer. Відразу після встановлення бібліотека діаграм буде порожньою. Щоб додати перший графік, натисніть «Додати новий».

Коли ви починаєте додавати дані, у бібліотеці з'являються ескізи діаграм, які ви створили у стилі вашого сайту. Це чудова функція, яка дозволяє побачити, які саме діаграми ви використовуєте для сайту.

При використанні великої кількості діаграм їх можна фільтрувати за допомогою навігаційного меню (дивіться картинку вище). Оскільки бібліотека спочатку порожня, нам потрібно додати дані, необхідні створення графіка.

Є два способи це зробити. Перший – завантажити ескізи з комп'ютера, другий – імпортувати їх з GoogleDocs. Ось як виглядає ескіз для простої діаграми, яка використовується для прикладу у цьому пості:

У деяких діаграмах використовується дещо інший формат. У процесі створення плагін посилається на файл CSV з прикладом для кожного типу діаграми і сторінку з інструкціями на GitHub для тих, хто використовує Google Docs. На зображенні нижче виділено місце, де ці посилання можна знайти.

Коли ви завантажили ескіз, можна розпочати створення першої діаграми. Все зроблене можна буде переробити будь-якої миті, тому не бійтеся зробити помилку.

Спочатку вибираємо тип діаграми, яку ви хочете використати. У цьому прикладі він обраний за замовчуванням лінійний. Для його зміни натисніть кнопку в лівому верхньому кутку. Як мовилося раніше, його можна змінити будь-якої миті, навіть після публікації.

Коли ви визначилися, натисніть «даліправоруч. За замовчуванням діаграма називається «коти» і на зображенні нижче ви можете побачити чому.

Для завантаження даних натисніть кнопку і завантажте файл з будь-якого розташування на своєму комп'ютері. Для прикладу використано дані добового трафіку на сайт за останні сім днів. Було записано загальну кількість відвідувань та унікальні відвідувачі.

Якщо ви хочете змінити стиль діаграми на цьому етапі, натисніть кнопку «Назад» та виберіть інший варіант. Якщо вам все подобається, натисніть «далі».

На наступній сторінці починається найцікавіше – експериментуйте з діаграмою, як хочете. Змінюйте шрифти, налаштовуйте колірні схеми та змінюйте текст. Нижче надано список функцій:

Натисніть на стрілку поруч із налаштуваннями, і вони відкриються. Найкращий спосіб добре в них розбиратися – це покопатись у них. Багато хто з них не становить жодної складності, наприклад, зміна фону, кольору, шаблону, відображення/приховування тієї чи іншої інформації. Їх можна налаштувати на даному етапі чи пізніше.

Діаграмі можна назвати. У нашому випадку це «Трафік сайту за останні 7 днів». Усі інші параметри залишаються за замовчуванням. Буде добре, якщо ви зробите так само на першому етапі створення діаграми, щоб ви мали чітке уявлення про те, як вона виглядатиме на сайті. Тепер можна публікувати створену діаграму.

Коли WordPress створює діаграму, він повертає вас до бібліотекиVisualizer, де відображається її ескіз у великому розмірі. Помітили дві стрілки на скріншоті вище? Кнопка зліва вказує на шорткоди, які потрібно додати до редактора, щоб діаграма відображалася на сайті. А ліва – на три кнопки: «Редагувати», « Копіювати», « видалити».

Скопіюйте шорткод на свою сторінку та побачите результат. Якщо вам знадобиться щось змінити, натисніть «Редагувати», і будуть доступні всі функції. Зміни вносяться в реальному часі одразу ж на сайті, тому навіть без збереження ви одразу побачите кінцевий варіант на сторінці сайту.

Варто згадати ще одну відмінну функцію. У створеній раніше діаграмі можна змінити не лише її стиль, а й дані шляхом завантаження інших файлів, існуючий текст та замінити будь-яку інформацію на нову.

У підсумку

Це дуже корисний плагін для тих, хто постійно працює з цифрами, як, наприклад, графік трафіку сайту, звіти про доходи та інше. Якщо ви один із них, то ви просто зобов'язані поповнити свій арсенал плагіном Візуалізатор. Він перетворить нудні цифри на привабливі діаграми для відвідувачів вашого сайту.

Джерело: kinsta.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/