BuddyPress является мощным плагином WordPress, который позволяет вам создать сайт социальных сетей
После установки buddyPress, в settings вы можете выбрать те страницы которые будут использоваться как часть Buddypress chat
- примеры страниц
1.1 Страница BuddyMembers
страница на которой мы видим зарегестрированых ползователей.
1.2
страница BuddyPress activity stream где ползователи могут обменевитсья сообщениями, ставить лайк. При входе на сайт сверху мы видим навигационное меню где есть Profile с субменю: friends, groups, messages, activity, logout and woocommerce
1.3
На странице пользователя мы можем добавить его в друзья, посмотреть кто у него в друзьях, посмотреть его активность, оставленые посты, фото, видео на странице activity stream.
2. Youzify plugin – при установки этого плгина ваш wordpress автоматически преобретает новый усовершенствованный дизайн.
Пример: plugin buddypress без Youzify
2.1 После установки плагина Youzify
activity stream автоматически модернизировалась, появилась возможность делать посты в виде фото, видео, или gif, так же сам дизайн вашего чата автоматически приобретает modern view.
Youzify позволяет контралировать медиа сторону вашего buddypress, устанавливать запреты или давать допалнительные права для публикаций всех постов. Так же youzify имеет дополнительные настройки связаные с css, однако они могут не работать из за не совместимости некоторых плагинов.
2.3 Sidebar youzify откуда можно управлять медиа активностью на buddypress
3. BuddyPress Profile Completion
После установки этого плагина каждый зарегестрированый пользователь может добавить свой аватар и background своего профиля. В настройках BuddyPress Profile Completion можно указать эти табования как обязательные.
Пример: Я зашел под пользователем у которого еще нет фото и background profile
Таким образом он не может переходить на другие страницы buddypress пока не заполнит эти требования.
4. Nav Menu Roles считаю его одним из наиполезнейших плагинов для администрирования своего buddypress. Помогает улучшить навигацию для различных групп пользователей и обеспечивает просмотр пользователями только опций меню, относящихся к их роли или уровню доступа.
Пример: после установки этого плагина в editor page/ menu вы можете увидеть дополнительные настройки для любой из страниц
3.1
3.2У каждого пользователя есть страница friends где отображаются его друзья
3.3 есть отдельная страница Members buddy где видны все зарегестрированые участники чата.
3.3Допустим вы хотите что бы пользователи видели users дабавленых в друзья но не видели страницу Members buddy где все users.
3.4 устанавливаем только logged in Users и видить именно эту страницу может только администратор.
3.5 Захожу как обычный пользователь
3.6 Members buddy не отображается
3.7 Захожу как администратор
3.8 Members buddy отображается
3.9 Таким образом получаются улучшенные возможности пользователя управляя видимостью пунктов меню на основе ролей пользователя.
4. Zoone.ee при установки плагина buddypress есть страница регистрации, но нет страницы log in. На zone.ee в папке wp/wp-content/themes в теме которую я применил для моего чата generatepress. Я создал новы фаил template-registrate-buddy.php
4.1 Код который я применил отображает форму входа в систему, если BuddyPress активен и компонент members также активен
<?php
/*
* Template Name: Registrate Buddy
*/
// страница для входа в stream activity связана с buddyPress REGISTRATION BUDDY через wordpress editor в template, css подключен с файла custom-login.css
// для этой страницы
get_header();
?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/custom-login.css">
<?php
// Display the login form
if ( class_exists( 'BuddyPress' ) && bp_is_active( 'members' ) ) {
echo '<div class="footer login-form login-register-container register-form">';
wp_login_form();
// Add the login button
echo '<a href="https://pavelivanov22.thkit.ee/wp/buddy/activity-stream/" class="button-link">Log in</a>';
echo '</div>';
}
}
get_footer();
?>
4.2 В папке generatepress я так же создал фаил custom-login.css для страницы log in buddypress
Где сразу было прописано условие как для настольных пк так и для мобильных версий
.login-form {
text-align: center;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
}
.login-form label {
display: block;
margin-bottom: 10px;
color: #f0f0f0;
font-weight: bold;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 20%;
padding: 10px;
margin-bottom: 10px;
font-weight: bold;
}
.login-form input[type="submit"],
.login-form input[type="button"] {
background-color: red;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* Styles for mobile */
@media (max-width: 768px) {
.login-form input[type="text"],
.login-form input[type="password"] {
width: 50%;
padding: 5px;
margin-bottom: 5px;
font-weight: normal;
}
.login-form input[type="submit"],
.login-form input[type="button"] {
display: inline-block;
margin-top: 10px;
}
}4.3 Подключили css к php с помощею этой ссылки
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/custom-login.css">4.4 После этого мы создали обычную страницу на вордпресс и подключили ее через template к registrate buddy
4.5 Результат log in page связанная с формой регистрации, честно говоря потом уже я понял что можно было скачать отдельный плагин для входа в чат, но как правило они очень ограничены мы там не можешь скажем background поменять или поменять расположения кнопок, использовать псевдо-элементы after::before before::before, с помощю этих элементов я добавил на заглавную страницу несколько надписей через wordpress editor adittional css
Пример: для ПК и Mobile version по id страницы page-id-2987 мы уверены что эти inscriptions будут отображаться только на этой странице. Если делать без id когда заходишь ва чат, они там тоже отображаются.
/*Inscription PC*/
body.page-id-2987::before {
content: "Woocommerce";
font-family: "Chiller", sans-serif;
position: fixed;
top: 50%;
left: 36%;
transform: translate(-50%, -50%) rotate(45deg);
font-size: 55px;
color: transparent;
background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
z-index: 10;
}
body.page-id-2987::after {
content: "Chat just shoot the breez";
font-family: "Chiller", sans-serif;
position: fixed;
top: 64%;
right: 17%;
transform: translate(-50%, -50%) rotate(-50eg);
font-size: 55px;
color: transparent;
background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
z-index: 10;
}
@media (max-width: 768px) {
body.page-id-2987::before {
content: "Woocommerce";
font-family: cursive, sans-serif;
position: fixed;
top: 50%;
left: 19%;
transform: translate(-50%, -50%) rotate(45deg);
font-size: 29px;
color: transparent;
background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
z-index: 10;
}
body.page-id-2987::after {
content: "Chat just shoot the breez";
font-family: cursive, sans-serif;
position: fixed;
top: 64%;
left: 15%;
transform: translate(-50%, -50%) rotate(-50eg);
font-size: 34px;
color: transparent;
background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
z-index: 10;
}
}4.6 Результат
5. Google sign in. Сделать возможность на нашей странице log in. Log in users через google account
New Project – Google Cloud console
5.1 Нужно создать API project, после пойти на эту страницу Credential page
Integrating Google Sign-In into your web app | Authentication | Google for Developers
5.2 Создать credentials Oauth clientID
5.3 Подтвердить конфигурацию
5.4 Выбрать тип авторизации
5.5 Вернуться в dashboard и взять Client-ID
5.6 После этого в файле нашей страницы log in мы прописали этот код с id
<script src=”https://accounts.google.com/gsi/client” async defer></script>
<div id="g_id_onload"
data-client_id="123...example.com"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin" data-theme="filled_black" data-type="standard"></div>
<script>
function handleCredentialResponse(response) {
if (response.credential) {
// Handle the credential response
var idToken = response.credential;
// Send the ID token to your server for verification and processing
// ...
window.location.href = 'example.ee';
// Redirect the user to the desired page
} else {
// Handle error
console.error('Credential error:', response.error);
}
}
</script>
5.7 Так же к console.cloud.google надо указать origin где google sign in должен работать, и страницу куда после log in через sign in google a user должен быть напрвлен. Authorised redirect URIs не отвечает. Поэтому в функции выше есть the line of code window.location.href = 'example.com';
5.8 Результат:
1.
2.
3. Пользователь попадает на activity stream. Menu bar не отображается когда захожу через google sign in, хотя editor wordpress is settled отоброжать меню для всех.
6. Так же на zone.ee в папке нашей темы generatepress в файле functions.php нам надо прописать некоторые функции блогодаря которым форма log in и Registration работали бы так как нам кажется удобней всего.
6.1 Когда пользователь нажимает кнопку log out он попадает на страницу log in
// function check if a user log out he will be sent to the same page of login
function custom_logout_redirect() {
$redirect_url = 'example.ee';
return $redirect_url;
}
add_filter( 'logout_redirect', 'custom_logout_redirect' );6.2 Мы решили что удобней всего будет что когда пользователь logged in что бы он сразу попадал на страницу activity stream где пользователи оставляют посты.
//function check if a user registered he will be sent to the page activity stream where he can leave messages
function redirect_after_login( $user_login, $user ) {
if ( ! is_wp_error( $user ) ) {
bp_core_redirect( 'example.ee' );
exit;
}
}
add_action( 'wp_login', 'redirect_after_login', 10, 2 );6.3 Если пользователь вводит не верный пороль или логин появляется страница с сообщением
Incorrect username or password. Please try again
// function check if a user does not input right username or password error will be displayed
function redirect_unregistered_user( $username, $password ) {
$user = get_user_by( 'login', $username );
if ( ! $user ) {
$user = get_user_by( 'email', $username );
}
if ( ! $user || ! wp_check_password( $password, $user->user_pass, $user->ID ) ) {
// Display error message here
$error_message = 'Incorrect username or password. Please try again.';
wp_die( $error_message, 'Login Error' );
}
}
add_action( 'wp_authenticate', 'redirect_unregistered_user', 10, 2 );
6.4
Пример: Ввел не правельный логин нажал log in
6.5
Результат:
7. Woocommerce довольно удобный плагин и не сложный в обращении, на уроке мы настраивали отображения категории над товаром, тема Teluro блакирует ету возможность, с generatepress работает
пока что кроме как просто связать чат с несколькими страницами woocommerce и возможностью зарегестрированых пользователей видеть товар я не придумал как более красиво и функционально интегрировать woocommerce в мой чат, но придумаю.
В целом создание своего чата, очень большая работа, я бы сказал что, то-что я сделал это очень и очень блеклое отражение черновика полноценного чата. Очень много ньюнсов связаных с безопасностью которых я не понимаю.
Ссылка на чат: Get_in_just_shoot_the_breez