Быстрое развитие BuddyPress

Работа с BuddyPress поверх WordPress — это супер захватывающая вещь, она добавляет платформе совершенно новое измерение и действительно демонстрирует огромный потенциал.

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

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

Вступление

В этом уроке мы будем использовать комбинацию функций PHP, jQuery и WordPress, чтобы расширить BuddyPress настолько, чтобы продемонстрировать концепцию.

Работая над профилями пользователей, мы без каких-либо средств добавим ссылку, позволяющую пользователям посещать область закладок участника.

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

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

Шаг 1 Основы

Сегодня мы будем опираться на тему bp-default и создадим собственную дочернюю тему. Ниже приведена структура, которую вы должны были создать.

• style.css — некоторые дополнительные стили для значков, кнопок и списков (это не будет обсуждаться).
• sidebar.php — мы будем называть наш виджет отсюда.
• header.php — требуется одна модификация.
• functions.php — Регистрация скриптов и применение фильтра.
• _inc / img / — Количество файлов изображений, которые будут использоваться.
• _inc / js / bookmarks.js — jQuery и AJAX.
• members / single / home.php — некоторая логика PHP для включения загрузчика шаблонов.
• members / single / bookmarks / ajax.php — используется для наших вызовов AJAX.
• members / single / bookmarks / loop.php — поиск закладок через профили участников.
• members / single / bookmarks / remove.php — удаление закладок через мой профиль участника.
• members / single / bookmarks / save.php — Хранение закладок через мой профиль участника.
• members / single / bookmarks / view.php — Загрузчик шаблонов хакерских закладок.
• members / single / bookmarks / widget.php — Вызывается на сайт sidebar.php .

style.css — в style.css нам нужно минимальное количество кода, чтобы можно было выбирать темы через wp-admin . Давайте сделаем это сейчас.

Tags: buddypress уведомит BuddyPress о том, что мы используем тему с поддержкой BP.

Template: bp-default проинструктирует BuddyPress, что, когда эта тема активна, наследовать ее функциональность от темы bp-default, если файл темы не был изменен.

Внутри sidebar.php нам нужно загрузить widget.php .

Шаг 2 functions.php — Регистрация скрипта

Давайте продолжим и зарегистрируем файл bookmarks.js , он будет необходим на каждой странице. В functions.php добавить следующее.

wp_enqueue_script принимает 5 параметров.

1. Ручка — Дайте вашему сценарию имя.
2. Источник — путь к вашему сценарию.
3. Зависимости — какие сценарии понадобятся вашему сценарию для работы.
4. Версия — номер версии вашего скрипта.
5. In footer — если false, ваш скрипт будет загружен с помощью wp_head . Если установлено значение true, он будет загружаться с wp_footer .

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

При нажатии на любой из якорей мы будем использовать AJAX и делать запрос к PHP-скрипту. После выполнения мы обновим виджет боковой панели.

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

functions.php …

Эта функция вызывается на каждой итерации цикла, используя add_filter и the_tags качестве нашей ловушки.

Мы сообщаем WordPress, что внутри этой функции нам нужен доступ к элементам в $wp_query и, следовательно, $post . Это позволит нам получить the_id , the_title и the_permalink .

Некоторая логика применяется, когда этот код выполняется, чтобы определить, какую ссылку показывать. Если у пользователя уже есть элемент в текущем сеансе, мы покажем привязку «Удалить из закладок» и наоборот. in_array() позволяет нам проверить это.

in_array() будет отмечать уведомления, если в error_reporting есть эта директива, мы используем символ @ для подавления этих уведомлений (хакерство).

Используя данные, возвращаемые в $post мы формируем две привязки для добавления и удаления закладок (все важные здесь атрибуты data ), которые впоследствии будут использоваться с нашими вызовами AJAX в bookmarks.js .

Для полного ознакомления с доступными фильтрами посетите Кодекс .

Шаг 3 Виджет — подтверждение концепции

Теперь у нас есть ссылка, давайте создадим виджет, который будет постоянно отображаться на боковой панели и будет заполняться или очищаться по требованию.

Изображение выше отражает конечные состояния виджета в 3 сценариях.

1. Нет закладок во время входа или выхода.
2. Закладки, сохраненные в сеансе, но не вошедшие в систему .
3. Закладки, сохраненные в сеансе во время входа .

Следующий блок кода помещается в widget.php и вложен в разметку HTML.

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

Здесь важно отметить, как извлечь элементы из $_SESSION['bookmarks'] которые будут созданы на следующем этапе.

На каждой итерации мы используем get_post() для запроса базы данных WordPress с сохраненными целочисленными значениями в $_SESSION['bookmarks'] . Который вернет все необходимые для чтения человеком данные, которые нам нужны.

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

Шаг 4 Добавление закладок через AJAX

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

• Якоря с классом add-bookmark
• Якоря с классом delete-bookmark
• Якоря с классом clear-bookmarks

Используя hasClass мы можем проверить, какой элемент был выбран в методе делегата, и hasClass требуемый вызов AJAX .

Если вы собираетесь встроить это в более крупный проект, рассмотрите возможность использования шаблона pubsub .

  var $ bookmark_widget = $ ('# px-bookmarks'),
	 $ bookmark_form = $ ('# px-bookmarks form'),
	 $ bookmark_widget_list = $ ('# px-bookmarks .current-bookmarks'),
	 $ empty_widget = $ ('# px-bookmarks p'),
	 $ widget_buttons = $ ('# px-bookmarks .widget-buttons'),
	 $ login_notify = $ ('# px-bookmarks .login-notify'),
	 // Это должно быть изменено, чтобы отразить ваш домен.
	 $ ajax_path = 'http://yoursite.com/wp-content/themes/bookmark-theme/members/single/bookmarks/ajax.php'; 

Сначала запишите некоторые переменные, чтобы мы не слишком «плескались в DOM». Все селекторы DOM выше расположены в widget.php .

  $ (". add-bookmark, .delete-bookmark, .clear-bookmarks"). делегат (this, 'click', function (e) {
	 e.preventDefault ();
 }); 

Мы сообщаем jQuery прослушивать щелчок по всем перечисленным классам, а через функцию обратного вызова мы сообщаем ему, что делать. Следующие части кода, которые будут добавлены, будут размещены непосредственно после e.preventDefault() .

Использование preventDefault() — это более preventDefault() способ аннулировать действие по умолчанию, когда присутствует JavaScript. Вот некоторые обсуждения, связанные с preventDefault() по переполнению стека .

Следующие части кода, которые будут добавлены, будут размещены непосредственно после e.preventDefault() .

  var $ post_id = $ (this) .data ('post-id'),
	 $ post_name = $ (this) .data ('post-name'),
	 $ post_href = $ (this) .attr ('href'),
	 $ that = $ (this); 

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

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

  if ($ that.hasClass ('add-bookmark')) {
	 $ .Ajax ({
		 url: $ ajax_path + '? method = add',
		 тип: 'GET',
		 данные: 'post_id =' + $ post_id,
		 success: function (returndata) {
			 if ($ bookmark_widget_list.children (). length === 0) {
				 // Показать спрятать
			 }
			 $ bookmark_widget_list.prepend ('<li id ​​= "bookmark -' + $ post_id + '">
				 <a href="'+ $post_href +'"> '+ $ post_name +' </a> </ li> ');
		 }
	 });
 } 

Здесь мы используем hasClass чтобы отличить, какой элемент был нажат, с помощью jQuery для поиска по нашему нажатому элементу.

Исходя из результатов, мы каждый раз настраиваем наш вызов AJAX немного по-разному. При этом url и data , запрашиваемые и отправляемые каждый раз, меняются незначительно.

Обратите внимание ?method=add добавлен в $ajax_path . Это эквивалент http://site.com/path/to/ajax.php?method=add .

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

Когда jQuery получает успешный ответ, мы добавляем этот элемент в текущий список закладок в области виджетов как элемент списка. Используя $post_id , $post_name и $post_href здесь.

Когда страница обновится, будет добавлен код, добавленный в widget.php на шаге 3 .

В строке 7 последнего фрагмента в методе success есть небольшая подпрограмма, которая определяет, есть ли какие-либо элементы списка в области виджета. Это ранее упоминавшийся слегка подробный код, который не более чем показывает и скрывает некоторые элементы DOM. Он был удален для удобства чтения здесь, на Wptuts +. Двигаемся дальше …

  if ($ that.hasClass ('delete-bookmark')) {
	 $ .Ajax ({
		 url: $ ajax_path + '? method = delete',
		 тип: 'GET',
		 данные: 'post_id =' + $ post_id,
		 success: function (returndata) {
			 if ($ bookmark_widget_list.children (). length <= 1) {
				 // Показать спрятать
			 }
			 $ ('# bookmark -' + $ post_id) .remove ();
		 }
	 });
 } 

Как и в if($that.hasClass('add-bookmark')) здесь мы проверяем, нажали ли элементы, имеющие класс delete-bookmark .

Как только эта подпрограмма была введена, url в вызове AJAX слегка изменяется, посылая другую строку запроса. А именно ?method=delete .

Когда возвращается успешный ответ, мы удаляем этот элемент списка из текущих закладок, хранящихся в виджете.

Применение некоторой логики таким же образом, как в подпрограмме add-bookmark чтобы определить, будет ли удаленный элемент последним. На основании этого результата элементы DOM снова показываются или скрываются.

  if ($ that.hasClass ('clear-bookmarks')) {    
	 $ .Ajax ({
		 url: $ ajax_path + '? method = clear',
		 success: function (returndata) {
			 // Показать спрятать

			 $ ('. postmetadata .delete-bookmark'). each (function (index) {
				 // Список закладок очищен, по умолчанию якоря, прикрепленные к сообщениям.
				 $ (this) .removeClass (). addClass ('add-bookmark'). html ('Добавить в закладки');
			 });
		 }
	 });
 } 

Последний фрагмент кода здесь используется для очистки всех закладок в виджете, установив для строки запроса url другой метод и сбросив любые привязки на странице по умолчанию «Добавить в закладки», чтобы отобразить пустой $_SESSION . Это делается с помощью each method jQuery, чтобы найти все вхождения класса delete-bookmark (привязка, прикрепленная к сообщениям с помощью add_filter ) и переключением его на значение по умолчанию
add-bookmark .

Шаг 5 PHP запрашивается через AJAX

Теперь мы создадим код PHP, указанный в вызовах AJAX выше, который будет использоваться для добавления, удаления и удаления всех закладок из сеанса.

В ajax.php мы создадим следующие 3 функции.

• add_bookmark()
• delete_bookmark()
• clear_bookmarks()

Давайте сначала создадим add_bookmark()

Сначала мы сохраняем $post_id ранее переданный в bookmarks.js через data: 'post_id=' + $post_id .

Затем мы снова используем функцию in_array чтобы определить, следует ли добавить этот элемент в сеанс закладок.

В функции delete_bookmark() мы снова сохраняем $post_id .

Используя ту же технику для вывода наших закладок в widget.php, устанавливается $start_count .

Затем мы определяем, существует ли переданный элемент ( $post_id ) в сеансе закладок с помощью in_array , и сбрасываем любые совпадающие значения.

Наконец, clear_bookmark() уничтожает все данные сеанса.

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

Мы используем session_start() для возобновления текущего сеанса. Это очень важно здесь.

Затем мы сохраняем метод, который передается с помощью url в наших $.ajax .

На основании текущего значения $method мы вызываем соответствующую функцию.

Шаг 6 Закладки на профилях пользователей

Файлы, с которыми мы будем иметь дело до конца этого урока, перечислены ниже.

• members / single / home.php — этот файл является модифицированной версией bp-default / members / single / home.php .
• members / single / bookmarks / loop.php — используется для получения любых ранее сохраненных списков закладок участников.
• members / single / bookmarks / remove.php — используется для удаления любых сохраненных списков закладок.
• members / single / bookmarks / save.php — используется для сохранения любых списков закладок, хранящихся в текущем сеансе.
• members / single / bookmarks / view.php — используется как временный загрузчик шаблонов.

Внутри home.php мы добавим элемент списка в неупорядоченный список внутри div с идентификатором item-nav .

Используя глобальную $bp мы можем быстро сформировать требуемый URL.

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

Если бы мы решили расширить эту функцию, мы бы хотели использовать хуки BuddyPress.

Тем не менее, внутри home.php мы проверяем строку запроса, которая позволит нам обслуживать пользовательские шаблоны.

В view.php (наш загрузчик шаблонов make-shift) мы проверяем 2 действия и, если ни одно из них не было определено, мы показываем список сохраненных закладок.

Вернувшись к шагу 3, была добавлена ​​логика для определения привязок, отображаемых в виджете, на основе текущего состояния $_SESSION['bookmarks'] и того, вошел ли пользователь в систему.

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

MySQL выше создаст новую таблицу с 5 полями для хранения данных закладок.

После создания пришло время перейти в save.php .

Пока пользователь обращается к save.php, мы представим форму с текстовым вводом, здесь пользователь должен будет указать метку в списке закладок, которые он или она хотели бы сохранить.

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

Теперь на первом этапе save.php …

Сначала мы отображаем ошибку, если метка не указана.

Далее мы используем ту же технику из widget.php и ajax.php, чтобы установить счетчик старта и перебрать данные сеанса.

Наконец, мы get_post некоторые поля формы с помощью get_post .

На втором этапе save.php мы получаем доступ к глобальному $bp .

Мы перебираем данные $_POST и сохраняем записи, которые будут сохранены в виде массива. Затем он сериализуется и сохраняется в переменной $posts .

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

Наконец, мы проверяем, был ли запрос успешным, и сбрасывали данные сеанса, в противном случае отображаем ошибку.

Шаг 7 Получение и удаление закладок

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

При использовании $bp global идентификатор отображаемого профиля сохраняется в переменной $displayed_user .

Затем мы выполняем запрос к таблице закладок с сохраненным $displayed_user в качестве условия where.

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

Мы можем сделать еще одно дополнение к предыдущему блоку кода.

Это добавит привязку к заголовку каждого списка, который при нажатии передаст новое действие remove вместе с идентификатором списка закладок.

Что приводит нас к нашему последнему этапу … Удаление списка закладок. Откройте remove.php и давайте закончим.

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

Далее мы храним некоторые пользовательские данные и запускаем запрос. Пользователи должны иметь возможность удалять только те списки, которые им принадлежат. Использование $bp->loggedin_user->id помогает нам достичь этого.

Наконец мы подаем сообщение в зависимости от результата.

Вывод

В течение этого урока был применен ряд методов. Используя jQuery, сырой PHP, соглашения WordPress и BuddyPress, мы смогли проиллюстрировать замечательную функцию, которая будет добавлена ​​на ваш сайт социальной сети на платформе WordPress и BuddyPress.

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

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

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

С некоторыми ноу-хау это можно было бы собрать вечером без особых проблем. Временные обязательства ощутимы и могут быть учтены в ежемесячном контракте на техническое обслуживание

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

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

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