Advertisement
  1. Code
  2. Plugins

Разработка тем BuddyPress - Часть 1: API и циклы BuddyPress

by
Length:LongLanguages:

Russian (Pусский) translation by Svetlana (you can also view the original English article)

В прошлом месяце, мы посмотрели на основы Buddypress и как вы можете пользоваться этим, чтобы увеличить социальное создание сети в ваших проектах. Ответ был большим и много запрошенных theming обучающих программ. Так, в этом три серии части, мы объясним некоторые основные элементы Buddypress API и распакуемся, как создать таможенную детскую тему, которая выдержит как Buddypress, так и модификации Wordpress.


Еще и еще с клиентами, ищущими социального создания сети, мы прошли основы Buddypress и воздействие, которое это может приводить к вашим проектам. Теперь мы хотим погрузиться в разработку дочерних тем, настроенных в соответствии с вашими потребностями, которые будут обновлять BuddyPress и WordPress. Недавно я искал в репозитории тем совместимые с BuddyPress темы и получил 19 потрясающих результатов! Излишне говорить, что это рынок, который может использовать некоторые разработки. Хотя есть плагины, которые могут сделать ваши темы совместимыми с BuddyPress, я всегда поддерживаю понимание того, как сделать что-то самостоятельно, и не полагаться полностью на плагины. Кроме того, создание базовой дочерней темы - это простой процесс, который стоит изучить, если вы планируете разрабатывать с BuddyPress.

Что Мы Сделаем

В этом руководстве я расскажу вам о некоторых основных элементах API BuddyPress и основных шагах по созданию настраиваемой дочерней темы BuddyPress. К концу этого урока вы сможете понять:

  • Как использовать теги шаблонов BuddyPress
  • Как распознать и настроить цикли BuddyPress
  • Как использовать условные обозначения BuddyPress в ваших темах
  • Как создать и редактировать базовую дочернюю тему BuddyPress

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


Начиная с BuddyPress API

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

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

Работа с тегами шаблонов BuddyPress

Для начала давайте взглянем на функции BuddyPress, которые являются ключевыми для разработки темы - шаблоны тегов. Кодекс BuddyPress имеет список этих здесь, а также для вашей справки. Эти теги шаблонов имеют жизненно важное значение для индивидуальной настройки ваших тем, и, как предположил Дэн Дэвис в своей недавней статье wp.tutsplus, некоторые из них должны быть у вас при быстром наборе, если вы планируете много заниматься разработкой тем в BuddyPress. Некоторые из них точно такие же, как теги шаблонов в Wordpress, что также должно сэкономить вам время, если у вас есть опыт разработки шаблонов в WordPress.

Вот краткий список некоторых шаблонных тегов от верхнего до нижнего колонтитула для использования в разработке вашей темы:

    Заголовок и Навигация (проводник)

  • get_header () - тот же тег шаблона, что и WordPress. Это включает в себя файл header.php вашей темы.
  • bp_get_loggedin_user_nav () - отображает ссылки навигации по сайту для зарегистрированных пользователей. Он также добавляет «текущий выбранный» класс к просматриваемому элементу навигации, чтобы вы могли создать собственный CSS для изменения отображения этого элемента списка.
  • Пост и форматирование контента

    Эти шаблонные теги - это те же теги, которые используются для форматирования и отображения контента в WordPress. Они также работают в том же цикле WordPress. Чтобы увидеть пример этого в действии, откройте тему bp-default и откройте index.php. Строки 15-61 дают отличный пример цикла WordPress, работающего в BuddyPress.

  • the_content()
  • the_excerpt
  • the_tags()
  • the_category()
  • Информация о пользователе и участнике

    Чтобы увидеть эти теги в действии, откройте members / member-loop.php и members / single.php в bp-default.

  • bp_loggedin_user_avatar () - отображает текущий вошедший в систему аватар пользователя.
  • bp_loggedin_user_domain()  вводит , зарегистрированное,имеющееся в URL-адресе пользователя.
  • bp_member_permalink - выводит URL-адрес страницы профиля.
  • bp_member_avatar - отображает аватар участника. Это может использоваться в цикле члена для создания глобального списка пользователей.
  • bp_get_user_firstname()
  • bp_group_member_joined_since()
  • Группы

    Чтобы увидеть эти теги в действии, откройте groups / groups-loop.php и groups / single.php в bp-default.

  • bp_group_permalink() - выводит ссылку на домашнюю страницу конкретной группы.
  • bp_group_avatar() - отображает аватар группы.
  • bp_group_description_excerpt() - показывает описание группы, заданное администратором группы
  • bp_get_group_name()-
  • Деятельность

  • bp_sitewide_activity_feed_link() - выводит ссылку на сайт RSS лента.
  • Поисковые формы

  • bp_directory_groups_search_form () - отображает форму поиска, которая будет искать во всех общедоступных группах и их активности.
  • bp_directory_forums_search_form () - отображает форму поиска, которая позволяет осуществлять поиск по содержанию форума.
  • bp_directory_members_search_form () - отображает форму поиска, которая позволяет осуществлять поиск на основе содержимого и информации участника.
  • Включает в себя

  • locate_template () - используется для включения таких шаблонов, как боковая панель и формы поиска. Для включения боковой панели это выглядит так:

    Вы также можете использовать этот тег шаблона для отображения шаблонов форм поиска. Для этого в действии не ищите ничего кроме файла index.php bp-default.

  • Разбивка на страницы

  • bp_groups_pagination_count()
  • bp_groups_pagination_links()
  • bp_members_pagination_count()
  • bp_members_pagination_links()
  • bp_activity_pagination_count()
  • bp_activity_pagination_links()
  • В дополнение к этому, существуют другие теги шаблона нумерации страниц для разных типов контента. Просто замените слово «группы» в приведенных выше тегах шаблона словами «форум», «блоги», «group_members» или «сообщения», чтобы включить ссылки или подсчет для любого цикла, который вы используете. Эти петли более подробно рассматриваются ниже.

    Нижний колонтитул

  • get_footer()

Работа с циклами BuddyPress 

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

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

Давайте рассмотрим обзор каждого из них и некоторые конкретные способы настройки их отображения.

Цикл групп

Цикл групп используется для отображения списка групп сайтов. Цикл выглядит так:

Следующие параметры являются наиболее полезными при настройке цикла групп:

  • type - по умолчанию это устанавливается как активное, но также может принимать следующие: новые, популярные, случайные, алфавитные, большинство форумов, большинство форумов.
  • per_page - по умолчанию цикл BuddyPress отображает 10 групп на странице, но, введя новый номер, вы можете изменить это.
  • user_id - указав идентификатор пользователя, будут показаны только те группы, в которые входит пользователь. Например, для отображения только тех групп, частью которых является текущий вошедший в систему пользователь, код должен выглядеть так:

Давайте рассмотрим пример цикла, настроенного с использованием вышеуказанных параметров. Сразу после открывающей скобки введите следующее:

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

Члены цикла

Цикл членов использован, чтобы показать список текущих членов. Стандартный цикл  членов выглядит так:

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

Потом, мы имеем нас признаки шаблона нумерации страниц члена. Есть также template признаки для другой согласительной type нумерации страниц подобно группам и блогам. Выше их написано для вашей ссылки.

Так как вы можете посмотреть, каждая петля может быть разбита внизу в кусках, выявляющих больше о template признаках и их использованиях. Только в этом цикле, мы видим шаблонные признаки: bp_member_profile_data, bp_member_permalink, bp_member_avatar, и bp_member_latest_update.

bp_has_members () аргумент имеет многоразовые параметры, которые могут быть настроены изменить показанный список членов. Самые полезные есть:

  • type - возвращает активных пользователей по умолчанию. Другие аргументы: новейшие, популярные, онлайн, алфавитные, случайные.
  • per_page
  • max
  • user_id - когда он указан, он возвращает только тех пользователей, которые являются друзьями с указанным номером пользователя.

Цикл активности потока

Полезные параметры для цикла потока активности:

  • display_comments - когда установлено значение "true", это будет отображать комментарии к активности.
  • per_page - опять же, это устанавливает, сколько действий нужно показать перед нумерацией страниц BuddyPress.

Есть и другие полезные советы по фильтрации активности в сети и добавлению поддержки комментирования на странице цикла потока активности в кодексе BuddyPress.

Форум Темы Loop (Цикла)

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

Полезные параметры для цикла тем форума:

  • type - по умолчанию цикл извлекает самые последние или новейшие темы, но вы можете использовать следующие аргументы: популярные, неотвеченные, теги. Если вы выбираете «теги», то вы также должны указать особые условия поиска.
  • forum_id - указав это, вы извлекаете темы форума только из указанного идентификатора форума.
  • search_terms - используется в сочетании с типом «теги» для возврата только определенных тем по ключевому слову.

Блоги Цикла

Цикл блогов используется для отображения списка блогов пользователей. Цикл выглядит так:

Полезные параметры для цикла блогов:

  • type - по умолчанию это возвращает активные блоги, но вы также можете использовать аргументы: newest и random.
  • per_page

Члены группы Цикла

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

Личные сообщения Loop (Цикла)

Цикл личных сообщений используется для отображения личных сообщений пользователю. Он также включает в себя хороший список тегов шаблона для настройки его отображения.

Цикл данных профиля

Цикл данных профиля используется для отображения данных профиля пользователя.

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

Использование условных тегов шаблона

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

Мой условный тег шаблона здесь bp_is_group_home (). Чтобы отобразить что-то только на домашних страницах пользователя, я бы сделал то же, что и выше, но с условным тегом шаблона: bp_is_home или bp_is_my_profile.

Чтобы получить полный список, нажмите здесь.


Создание детской темы BuddyPress

Теперь давайте перейдем к разговору об API - вы можете встать и потянуться на минуту, если вам нужно - и перейти к какому-то практическому применению. Опять же, мы пытаемся заложить основу для нашей пользовательской темы, которая будет представлена ​​в частях 2 и 3, поэтому давайте теперь посмотрим на создание дочерней темы для BuddyPress. Я не могу подчеркнуть важность этого достаточно. Позвольте мне поделиться личным опытом о том, насколько важен этот момент. Недавно я сделал ошибку новичка и непосредственно отредактировал основные файлы BuddyPress, не думая об обновлениях и новых выпусках. Могу поспорить, вы можете догадаться, что случилось дальше. Вот так. Я забыл подкрепить его, и новый выпуск переписал всю работу, которую я вложил в него. Я был довольно расстроен и должен был провести ненужные часы, исправляя беспорядок. Итак, чтобы помочь вам избежать этого,Вот как создать дочернюю тему BuddyPress, которую мы будем редактировать и работать в следующих двух частях этого учебного цикла.

Заложить прочный фундамент

Сначала создайте новую папку в вашей папке wp-content / themes / с именем cool-bp-theme. Это будет наша детская тема BuddyPress. Если вы не понимаете, что такое «дочерняя тема», просто подумайте о ней как о теме, которая все еще будет работать и функционировать, как тема bp-default, расположенная в wp-content / plugins / buddypress / bp-themes / bp-default / ,но позволит редактировать и настраивать и не сломается при обновлении Wordpress или BuddyPress. Это делается только путем изменения файлов шаблонов, расположенных в папке нашей дочерней темы. Он даже будет использовать таблицу стилей bp-default, но позволит импортировать новые таблицы стилей или перезаписать оригинальный CSS в style.css.

После создания новой папки я создаю новый пустой файл functions.php (потому что ожидаю отредактировать некоторые функции) и новый файл style.css со следующим кодом:

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

Теперь у вас есть основы дочерней темы BuddyPress. Если вы перейдете в «Внешний вид» -> «Темы» на панели инструментов Wordpress, вы увидите дочернюю тему, и при ее активации вы увидите именно то, что вы увидите, если активируете bp-default.

Дублировать, перемещать и редактировать

Поскольку дочерняя тема активна и активна, для редактирования шаблона мы просто делаем следующее:

  1. Дублируйте файл, который мы хотим редактировать, из темы bp-default.
  2. Переместите дублированный файл - с тем же именем файла - в нашу новую папку дочерней темы. Вы также можете скопировать старый файл в новую папку темы.
  3. Отредактируйте файл. При редактировании вы сразу заметите изменения в внешнем виде вашей темы.

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

  1. Скопируйте header.php в вашу новую папку темы.
  2. Откройте пустой файл functions.php, который вы создали ранее, и добавьте следующее:
  3. Теперь откройте header.php и замените строку 79 следующим текстом:
  4. Теперь откройте свой сайт и посмотрите, как старый список страниц был удален. Перейдите в Внешний вид -> Меню и создайте новое меню заголовка!

Самое приятное, что это постоянное изменение, которое не будет удалено из-за обновления!


Заключение

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

Спасибо за чтение, и я надеюсь, что я помог вам узнать что-то новое о тематике с BuddyPress и его API!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.