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

BuddyPress прекрасно работает с огромным количеством бесплатных и платных тем, и BuddyPress-компоненты выигрышно смотрятся также и в адаптивных темах.

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

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

Установка BuddyPress

Первое, что вы должны будете сделать – это установить плагин BuddyPress. Я буду ставить его в свежую сборку WordPress, однако вы можете установить его и на уже существующий сайт.

В панели администратора WordPress перейдите в раздел Plugins > Add New, и вы увидите BuddyPress в списке доступных плагинов. Щелкните по кнопке Install, после чего Activate, и плагин будет установлен на ваш сайт.

Вы сразу же увидите экран приветствия BuddyPress:

Конфигурация BuddyPress

Есть три аспекта настройки BuddyPress:

• Выбор необходимых компонентов
• Создание страниц
• Изменение параметров

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

Активация BuddyPress компонентов

Чтобы выбрать компоненты, которые вы хотите использовать, либо щелкните по ссылке Set Up Components на экране приветствия, либо перейдите в раздел Settings > BuddyPress и активируйте вкладку Components.

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

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

• Extended Profiles: изменяет пользовательские профили и настраивает доступные поля
• Account Settings: позволяет пользователям редактировать свой аккаунт.
• Friend Connections: позволяет пользователям связываться друг с другом.
• Private Messaging: позволяет пользователям отправлять приватные сообщения
• Activity Streams: выводит ленту активности на сайте с прямым постингом во фронтэнд, древовидным комментированием, упоминаниями и уведомлениями по email.
• Notifications: ваши пользователи смогут получать уведомления о последней активности тем способом, который они выберут для себя.
• User Groups: позволяет создавать пользовательские группы
• Site Tracking: позволяет отслеживать события на сайте (записи и комментарии)
• BuddyPress Core: вы не можете отменить этот компонент, без него BuddyPress не будет работать
• Community Members: опять же, без этого компонента BuddyPress не будет работать.

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

Я выберу все компоненты для данного руководства, поскольку я хочу их все продемонстрировать вам. Вы можете выбрать только те, которые вам требуются. После того, как вы сделаете это, щелкните по кнопке Save Settings.

Настройка страниц

Следующий этап – это настройка страниц, которые будет использовать BuddyPress. Перед тем как переходить к вкладке Pages, вам нужно будет создать несколько страниц: для регистрации и активации.

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

В админке WordPress переходим в раздел Pages > Add New и создаем две страницы, как мы делаем это всегда. Одну назовем Registration, а вторую – Activation (можете присвоить им любые другие названия).

После того, как вы сделаете это, вы увидите все эти страницы в основном списке страниц. BuddyPress уже добавил две другие страницы для вас: Activity и Members. Я удалил стандартную страницу Sample Page, поэтому в данный момент у меня есть четыре страницы.

Теперь, когда все страницы созданы, вы можете настроить их для BuddyPress.

Переходим в раздел Settings > BuddyPress и щелкаем по вкладке Pages.

Выбираем страницы под каждую функцию:

• Members – выбираем Members
• Activity Streams – выбираем Activity
• User Groups – выбираем Groups
• Register – выбираем Registration
• Activate – выбираем Activation

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

Настраиваем параметры

Теперь, когда вы выбрали компоненты и создали страницы, настало время перейти к настройке параметров BuddyPress .

Щелкаем по вкладке Settings

На этой странице есть масса опций, которые вы можете включать или отключать:

• Main Settings : можно включить/выключить тулбар в самом верху экрана для зарегистрированных пользователей, установить, могут ли пользователи самостоятельно удалять свои аккаунты.
• Profile Settings : можно разрешить участникам загружать свои собственные изображения для профиля, синхронизировать профили BuddyPress и WordPress.
• Groups Settings : можно разрешить пользователям создавать группы, установить, могут ли пользователи изменять аватары групп.
• Activity Settings : можно разрешить комментирование в ленте активности записей блога и форума, автоматически обновлять ленту активности в режиме реального времени.

Выбираем пункты, которые отвечают вашему сайту, после чего щелкаем по кнопке Save Settings. Я выбрал все опции.

Настраиваем параметры WordPress

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

В меню Settings в админке WordPress редактируем следующие параметры:

• Permalinks: убедитесь в том, что красивые постоянные ссылки включены
• Reading: делаем так, чтобы домашняя страница была статичной страницей, а именно страницей Activity. Это позволит гарантировать, что, когда пользователи откроют ваш сайт, они будут видеть свежую активность. Я оставлю без изменения опцию Posts page, поскольку на моем сайте нет блога. Если у вас он имеется, выберите подходящую страницу.

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

Измените настройки и сохраните изменения.

Установка темы

Теперь вам нужно найти тему для вашего сайта. Если вы работаете с уже существующим сайтом, вы можете пропустить этот шаг (если ваша тема вас устраивает).

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

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

Переходим в раздел Appearance > Themes и щелкаем по кнопке Add New. Вбиваем spacious в поисковое поле и видим тему:

Щелкаем по Install, после чего Activate, чтобы установить и активировать тему. Если вы хотите настроить тему, вы можете сделать это через параметры темы или через кастомайзер.

Добавляем меню и виджеты для навигации

Создание навигационного меню

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

Переходим в раздел Appearance > Menus и щелкаем по ссылке: create a new menu. Даем название меню, ставим галочку напротив Primary Navigation и сохраняем его.

Если вы не обнаружили секцию под названием BuddyPress с левой стороны на сайте, вам нужно будет включить ее, открыв вкладку Screen Options в самом верху экрана и выбрав BuddyPress.

Теперь добавьте страницы BuddyPress и ваши обычные страницы в навигационное меню. Я добавил следующие страницы:

• Activity (с Messages и Notifications в качестве ссылок второго уровня)
• Friends
• Groups
• Profile (с Settings в качестве ссылки второго уровня)
• Log Out
• Log In
• Registration

Все эти пункты, кроме последнего, взяты из списка BuddyPress слева: ссылка Registration взята из списка Pages. Я сменил текст ссылки для Registration на Join, чтобы было понятнее.

Теперь щелкаем Save Menu для сохранения меню.

Вот как будет выглядеть сайт с новой темой и меню:

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

Добавление виджетов

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

Добавьте следующие виджеты в область виджетов сайдбара:

• BuddyPress Log In
• BuddyPress Sitewide Notices
• BuddyPress Friends

Добавьте виджет Search к области виджетов хэдера, если ваша тема имеет такую область. Если нет, то можно добавить этот виджет в сайдбар.

Вот как выглядят мои области виджетов:

• BuddyPress Who’s Online
• BuddyPress Recently Active Members
• BuddyPress Groups

Наконец, добавим текстовый виджет в четвертую область виджетов с некоторым текстом о сообществе и ссылкой на страницу регистрации:

Теперь мой сайт выглядит так, как на скриншоте ниже:

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

Тестируем сайт с помощью фиктивных данных

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

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

Переходим в раздел Plugins > Add New и устанавливаем BuddyPress Default Data.

Опции, указанные здесь, зависят от компонентов BuddyPress, которые установлены на вашем сайте:

• Import Users: включает фиктивных пользователей для тестирования
• Import user profile data: добавляет данные профиля для пользователей
• Create friend connections: создает дружеские связи между пользователями (если включен компонент Friend Connections).
• Import activity posts: заполняет ленту активности (если включен Activity Streams).
• Import groups: импортирует группы (если включен User groups).

Щелкните по Import Selected Data, и плагин автоматически импортирует фиктивные данные для вас.

Вот как выглядит мой сайт после заполнения его тестовыми данными:

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

Если вы протестировали все страницы и пришли к выводу, что все работает отлично, вы можете удалить тестовые данные, вернувшись к странице плагина и щелкнув по кнопке Clear BuddyPress Data.

Управление сайтом BuddyPress

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

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

• Поддерживать свой сайт в актуальном состоянии, включая WordPress, плагин BuddyPress, вашу тему и любые другие установленные плагины.
• Тестировать сайт после обновления, чтобы не было никаких проблем (сначала лучше протестировать обновление на разрабатываемой версии сайта, после чего уже ставить его на рабочую версию).
• Делать регулярные бэкапы с помощью плагинов, таких как Snapshot Pro
• Если необходимо, модерировать сообщество и решать любые жалобы и споры

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

Как администратор, вы можете удалять аккаунты пользователей, если они нарушают правила сообщества, однако лучше всего удалять определенные записи и предотвращать любые действия, если они противоречат правилам, разъяснив пользователю, что именно он сделал не так. Вы должны найти баланс между предотвращением нежелательного поведения и блокировкой всех подряд – если вы следили за ростом Facebook и Twitter, то вы понимаете, о чем я говорю.

Если вы обнаружили, что метаданные, связанные с вашим сообществом, сбились после обновления или восстановления, вы можете использовать страницу BuddyPress Tools для исправления определенных данных:

• Кол-во друзей для каждого пользователя
• Кол-во групп для каждого пользователя
• Общее число участников
• Восстановление пользовательской «последней активности»

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

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

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

Вообще, существует несколько способов того, при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью»:)

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

Фиксация шапки при прокрутке страницы

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

Вот такая простая html структура! Теперь добавим стили!

#headerMain { width:920px; height: 195px; margin:0px auto; z-index:0; } #header { width:920px; height: 195px; background: url(../img/bg-header.jpg) no-repeat; position: fixed; z-index: 9999; }

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

Я думаю, что многие из Вас уже заметили, что сейчас в тенденцию входят всё больше липких элементов дизайна, которые остаются на виду при прокрутке страницы пользователем. Как по моему это очень удобно, особенно если это навигация сайта. Вот именно такой пример мы сегодня и будем делать. Мы узнаем как сделать анимированную шапку сайта на JQuery и CSS3 с анимацией.

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

Но для начала хочется сказать огромное спасибо http://www.webdesignerdepot.com ну а теперь давайте точно начнём.

Ι

HTML

HTML код очень и очень простой, нам просто нужно задать теги для , и далее между ними написать содержимое сайта:

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

Код jQuery

CSS является самым лучшим способом реализации анимации и переходов в настоящее время. Так что скриптов мы будем использовать минимум, и то для того чтобы задать определение срабатывания анимации при прокрутке страницы.

Когда значение положения страницы при прокрутке больше чем 1, это означает, что пользователь прокрутил страницу и нужно добавить класс «sticky» к тегу шапки сайта. Таким образом срабатывает и фиксируется шапка сайта.

А вот и сам код:

$(window).scroll(function() { if ($(this).scrollTop() > 1){ $("header").addClass("sticky"); } else{ $("header").removeClass("sticky"); } });

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

CSS

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

Header{ position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: "PT Sans", sans-serif; }

Теперь самый интересный момент: когда пользователь прокручивает страницу вниз, тогда будет применяться класс.sticky, которому мы можем задать совершенно разнообразное отображение, на которое только способно CSS. Мы так же установим фиксированную позицию, что бы наша шапка сайта была всегда на виду.

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

Header.sticky { font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; }

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

Ну а сейчас давайте добавим немного анимации нашему переходу с помощью . Вот код:

Transition: all 0.4s ease;

Ι

Заключение

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

По Вашему запросу фиксированный header найдено 256 результатов

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

  Соответствие: 7

• Фиксированная навигационная панель часто встречается на различных ресурсах. Такой функционал достаточно легко воспроизвести на WordPress. Фиксированная панель поможет вашим читателям быстро перейти к интересному разделу из любой точки на странице.

  Соответствие: 7

• В сегодняшнем уроке мы создадим фиксированную панель навигации для сайта или блога.

  Соответствие: 6

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

  Соответствие: 6

• Фиксированная панель для сообщений является отличным инструментом для привлечения внимания пользователя вне зависимости от места ее размещения на сайте. Такая панель великолепно справляется с задачей анонсирования события, продукта, бонусов и прочих приятных новостей. Для WordPress существует много плагинов, которые легко использовать и настраивать.

  Соответствие: 6

• Сегодня разрешение экранов варьирует от 320px (iPhone) до 2560px (большой монитор) или еще больше. Теперь пользователи пользуются интернетом не только через свой PC, но и при помощи мобильных устройств, таких как iPad или Playbook. Таким образом, традиционный подход к фиксированным размерам страницы больше не является дееспособным. Веб-дизайн должен быть адаптирован под всё. Расположение элементов должно корректироваться автоматически, чтобы соответствовать разрешению дисплея. В этом уроке мы покажем вам, как создать кроссбраузерный дизайн, работая с HTML5 и CSS3 медиа запросами.

  Соответствие: 4

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

  Соответствие: 4

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