Статьи

Адаптивные графики в реальном времени в WordPress: работа с данными

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

Я начну с обсуждения PHP и MySQL. Если вы действительно пережили эти части этой серии, уделите некоторое время просмотру этого раздела. Некоторые из них повторяют старые разделы, но теперь, когда вы на самом деле сделали это, у вас, вероятно, появятся некоторые прозрения о том, как и почему этот процесс работает.

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

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

Советы по PHP / MySQL для начинающих:

Если вы новичок в PHP и MySQL, вы можете спросить, что означают эти слова со знаком доллара. Если вы вставите этот код в редактор, который поддерживает проверку кода, вы увидите, что он меняет эти слова на другой цвет.

Это переменные и важная часть головоломки PHP / MySQL. Давайте посмотрим на переменную $ wpuser. В верхней части файла мы просматриваем небольшую песню и танцуем, чтобы найти того, кто в данный момент вошел в систему. Короче говоря, переменная слева от знака равенства «получает» все, что находится справа от знака равенства.

Таким образом, переменная $ current_user «получает» все, что текущий пользователь выполнил, используя некоторый код, встроенный в WordPress — wp_get_current_user () ;. Этот код возвращает много информации в массиве, который будет выглядеть как таблица информации. Одной из строк в этом массиве является идентификатор входа пользователя.

Итак, мы можем назначить $ wpuser идентификатор входа в систему, используя код $ current_user-> user_login. Вы можете назначить ему несколько других вещей, но мы пока просто хотим user_login.

Переменные — это самый безопасный способ передачи информации в PHP. Вы можете передавать переменные за пределы функции, чтобы ее мог использовать другой код — даже JavaScript!

Добавление функции в файл плагина

Если вы читали предыдущие части этой серии, возможно, вы уже сделали эту часть. В WordPress перейдите в «Плагины»> «Редактор» и выберите Flot для WordPress в качестве плагина, который вы хотите редактировать.

Также в предыдущих постах мы создали простую форму для добавления контента в пользовательскую таблицу с помощью phpMyAdmin. Я включил этот файл PHP в этом. Добавьте вызов include внизу файла:

[sourcecode language = ”php”]

/ *
Здесь вы можете добавить свои собственные файлы для извлечения и добавления данных
Помните, что вы НЕ можете использовать URL-адрес, чтобы указать на любые файлы, которые вы хотите
включают. Вы должны использовать путь. Таким образом, вы можете прикрепить эти файлы в любом месте
вы хотите в вашей установке WP, просто используйте PATH, чтобы указать на них.
Вызов plugin_dir_path будет использовать PATH из WP wp-content / plugins
папка: http://codex.wordpress.org/Function_Reference/plugin_dir_path
* /
include (plugin_dir_path (__FILE__). ‘flot / custom_workout.php’);
include (plugin_dir_path (__FILE__). ‘flot / pushups_results.php’);

[/исходный код]

У нас уже был файл custom_workout.php, так что просто добавьте включение для файла pushups_results.php. Теперь все, что вам нужно сделать, это сбросить шорткод [pushups_results_sc] где угодно, и все готово!

Исправление проблем

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

Я не потратил много времени здесь, чтобы обсудить детали файла pushups_results.php — кода, используемого для отображения результатов графика. Я ожидаю, что вы пройдете через комментарии. Даже для начинающих разработчиков у вас должно быть достаточно информации, чтобы вы могли получить ответы Google, помимо того, что я включил здесь и в комментарии к коду.

Начать построение графиков данных из другого набора данных не так уж сложно:

  1. Подключите свою собственную информацию о подключении к базе данных
  2. Измените запросы, чтобы соответствовать вашей базе данных
  3. Измените переменные в JavaScript, чтобы они соответствовали вызовам вашей базы данных.

Это оно! Промойте и повторите все графики, которые вы можете себе представить.

Завершая функциональность

Я разработал инструмент, позволяющий пользователям удалять записи, и хотел объединить функциональность «Добавить отжимания» с графиком. Поэтому сделайте следующее, чтобы быстро добавить полноценный инструмент отслеживания pushup:

  1. Создайте новый пост и назовите его Pushups Tracker
  2. Добавьте в сообщение следующие шорткоды:
      1. [Pushups_sc]
      2. [Pushups_results_sc]
      3. [Pushups_records_sc]
      4. Опубликуйте это
  3. Из предоставленных мною файлов ресурсов загрузите pushups_records.php и delete_pushups.php в папку wp-content / plugins / flot-for-wp / flot
  4. Перейдите в «Плагины»> «Редактор» в WordPress и добавьте следующий оператор включения внизу, а два других уже есть:
    • include (plugin_dir_path (__FILE__). ‘flot / pushups_records.php’);
  5. Перейдите к сообщению Pushups Tracker и посмотрите на доброту!
  6. Я очень рад видеть то, что вы все придумали! Не забывайте, что вы можете вызывать данные из любого места, чтобы заставить ваши графики работать. Это действительно просто ограничено вашим воображением. Проверьте файл pushups_results.php для одного способа получить данные на вашу страницу и вызвать графы Флота.

    Теперь иди и сделай данные интересными. У тебя есть сила!

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