Я хочу видеть сеть, полную красивых графиков в реальном времени, которые позволяют нам визуализировать наши данные новыми и эффективными способами. Я надеюсь сделать это настолько поразительно легким для вас, что вы начнете создавать всевозможные красивые, мощные инструменты, которые оживят ваши данные.
В этой серии я расскажу новичку WordPress от начала до конца, от начала до конца, в создании полностью отзывчивой графической системы в реальном времени, которая работает на вашем сайте WordPress. Я предполагаю, что вы знаете абсолютные основы WordPress — как войти в систему, перейти к «Внешний вид»> «Редактор» и внести базовые изменения в свой сайт.
В качестве нашего примера рабочих данных мы создадим базовый трекер тренировок с нуля. Мы сделаем формы, таблицы базы данных и внедрим Flot — потрясающую библиотеку графиков и диаграмм — чтобы ваши данные ожили. У меня есть плагин для WordPress, который вам понадобится для этого проекта, который позаботится о большей части усилий по созданию диаграмм Flot на вашем сайте.
Если вы никогда не создавали форму, не работали с phpMyAdmin и не работали со своим бэкэндом WordPress, вы получите удовольствие от обучения! Вот основные навыки, необходимые для работы этого урока:
- Базовые знания WordPress — как обойти инструменты администратора и т. Д.
- Административные права на ваш сайт WordPress
- Доступ к phpMyAdmin (который вы можете получить через хост вашего домена)
- Доступ по FTP — мы собираемся загрузить некоторые файлы в ваши папки WordPress
Эта серия охватывает много вопросов. Для некоторых из вас основы настройки WordPress для пользовательских сообщений и обработки форм не представляют особой проблемы. Вы можете просто перейти прямо к разделу адаптивных графиков. Вот почему это серия из нескольких частей — для всех уровней пользователя.
Предостережения
Во-первых, я знаю, что есть лучшие, более безопасные способы выполнения всего этого процесса, но я отошлю вас ко второму предложению в этом посте — я хочу, чтобы это было легко. Оказавшись на месте, вы можете сделать процесс намного более безопасным и адаптировать его по мере необходимости.
Во-вторых, у всех есть немного другой сайт WordPress. Ваш сайт может иметь другую тему или быть на другом хосте, чем мой, поэтому представление администратора может выглядеть иначе. Пока вы не изменили основные файлы WordPress, весь этот процесс будет работать.
Я начинаю со свежей установки и чистого сайта WordPress. Я использую WordPress версии 3.4.2 для этого урока, так что все скриншоты будут выглядеть именно так. Я также использую тему TwentyEleven, которая поставляется со свежей установкой WordPress.
Единственные изменения, которые я внес на свой сайт, находятся в меню «Настройки»> «Постоянная ссылка», где я выбрал «Имя публикации» в качестве структуры URL. Для этого урока я также изменил название сайта «Настройки»> «Общие».
Итак, без лишних слов, давайте перейдем к этой серии!
Шаг 0: установите плагин Flot для WordPress
Я создал этот плагин, чтобы сделать процесс намного проще. Плагин включает в себя урезанную версию Flot, отличную библиотеку графиков и диаграмм. Но Flot не очень хорошо работает с WordPress из коробки. Таким образом, этот плагин помогает вам получать нужные файлы на ваш сайт WordPress. Если вы новичок, я настоятельно рекомендую вам установить этот плагин.
Вы также можете захотеть файлы PHP, которые я создал для этой серии. Для новичков я рекомендую вам создавать эти файлы с нуля вместе со мной. Таким образом, вы узнаете намного больше, и у вас будет гораздо больше возможностей для устранения проблем.
Файлы ресурсов
Эти файлы будут в конечном итоге загружены в вашу папку плагинов:
WP-содержание / плагины / Flot-для-в.ч. / Flot
Шаг 1: Загрузить файл
При создании новых функций в WordPress я всегда стараюсь убедиться, что они будут работать надежно, даже если я обновлю свои темы. Вот где плагин Flot для WordPress выше очень удобен. Но если вы хотите использовать Flot без плагина, просто убедитесь, что вы не храните всю свою работу в папках wp-content / themes. Как только вы смените тему, вы потеряете все.
Итак, создайте пустой пользовательский файл PHP. Вы можете использовать текстовый редактор. Просто откройте новый файл и сохраните пустой документ. Я называю мой «custom-workout.php».
Загрузите это в свою папку wp-content / plugins / flot-for-wp / flot. Я использую Filezilla , бесплатный инструмент FTP, который легко использовать. Вы можете использовать инструмент загрузки файлов вашего хостинг-провайдера. Вы не можете двигаться вперед, не вставив этот PHP-файл в папку с плагинами. Чтобы быть понятным, вот примерный путь к папке, которую я рекомендую вам загрузить этот файл:
yoursite.com/wp-content/plugins/flot-for-wp/flot/
Если вы хотите загрузить файлы в другое место, это нормально. Но вам придется изменить пути и URL-адреса в файлах PHP, которые мы будем создавать. Теперь вы должны загрузить файл custom-workout.php.
Шаг 2: Подключение пользовательских файлов
Теперь нам нужно сообщить WordPress, где в мире искать весь этот модный код, который мы собираемся создать. После того, как вы загрузили свой файл, в панели администратора WordPress перейдите на страницу «Плагины»> «Редактор»:
Выберите плагин Flot для WordPress из выпадающего меню в правом углу:
Убедитесь, что файл flot-for-wp.php был выбран. Здесь мы должны сообщить WordPress о ваших новых файлах.
В файле flot-for-wp.php вы увидите раздел только для добавления ваших собственных файлов.
[sourcecode language = ”php”]
/ *
Здесь вы можете добавить свои собственные файлы для извлечения и добавления данных для flot.
Помните, что вы НЕ можете использовать 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’);
[/исходный код]
Извините за скучный комментарий PHP, но это детали, которые сделают поиск и устранение неисправностей намного проще, если у вас возникнут проблемы. Мы используем вызов INCLUDE, чтобы сообщить WordPress о загруженном файле.
резюмировать
Итак, давайте остановимся и проверим нашу работу. Для абсолютного новичка вы, вероятно, взаимодействовали с некоторыми вещами, которые вы никогда не видели раньше; FTP, файлы PHP и редактор плагинов могут быть пугающими. Но теперь вы заложили основу для создания этой функциональности.
В следующей статье этой серии мы создадим несколько пользовательских шорткодов и создадим новую таблицу базы данных для этого инструмента. Если вы думаете об этом, у вас начинается приступ паники … хорошо ! Власть через это и придерживайся меня!