homefinance blog
Una de las principales razones por las cuales las comunidades de BuddyPress fallan es que los miembros no se conectan ni interactúan entre sí. Una forma de mejorar esto es por diseño que mantiene a los miembros interesados. Los estilos del director de los miembros de BuddyPress salen de la caja, como una lista plana. Es funcional, pero no es terriblemente emocionante o inspirador. Hoy haremos algo divertido con directorios y exploraremos un poco de tema de BuddyPress. En este tutorial haremos algunas cosas interesantes con los archivos de plantilla CSS y BuddyPress para crear un directorio más interactivo que aliente a los usuarios a conectarse entre sí, pasar más tiempo navegando, hacer clic en perfiles y hacer nuevos amigos.
Siga los pasos a continuación mientras tomamos al director predeterminado de los miembros de BuddyPress y gire de la siguiente manera:
Director personalizado de miembros de BuddyPress Aquí hay una breve presentación general de los cambios que haremos:
Agregue un nuevo directorio / buddypress / a su tema para plantillas personalizadas
Eliminar suplementos innecesarios de los miembros de los miembros
Agregue un campo para una nueva ubicación a los miembros de los miembros.
Aumentar el tamaño del avatar en el directorio del gerente
Personalizar a los miembros de los miembros para que sean circulares
Cambiar la apariencia del director
Agregue un efecto en tonos grises al ratón
Personalice los botones “Agregar amigo” y “eliminar amigo”.
Usaremos BuddyPress 1.7 para este tutorial porque se lanzará pronto. Sin embargo, la idea básica sigue siendo la misma, sin importar dónde estén las plantillas.
Para empezar, el director de miembros de BuddyPress se parece a él, con los estilos predeterminados:
El director predeterminado de los miembros para este tutorial, trabajaremos con los veinte doce WordPress predeterminados. Paso 1: Agregue un directorio / BuddyPress / al tema activo actual y agregue archivos de plantilla. Para comenzar a hacer personalizaciones en BuddyPress, crearemos un directorio / BuddyPress / en su tema activo actual. Venga un director de BuddyPress en su tema activo tiene algunas instrucciones breves y simples para la compatibilidad de los temas en BuddyPress 1.7. Encuentra archivos de plantilla antiguos aquí:
WP-Content/Plugins/BuddyPress/BP-Templates/BP-Legacy/Copie los archivos que desea cambiar. En este caso, también podría tomar el director / miembros / y pegarlo al nuevo director de BuddyPress del tema. Paso 2: Corte todos los elementos adicionales de Members-Loop.php Para este tutorial, reduciremos parte de la información que se muestra en la página del director y eliminaremos los siguientes dos elementos.
Elimine la última etiqueta de tiempo activo
Elimine la actualización de actividad de los miembros más recientes
Mostrar la última hora activa me parece un trastorno y no veo que tenga demasiado valor para la comunidad ordinaria de BuddyPress. Si desea eliminarlo, córtelo del archivo member-loop.php:
Eliminar la última actualización de actividad es tan fácil. Corta esto de members-loop.php:
Paso 3: Agregue un campo de ubicación a los miembros de los miembros Ahora agregaremos algo nuevo a los miembros de los miembros. El archivo de plantilla indica en los comentarios cómo hacer esto. La documentación establece que agrega una consulta adicional para cada miembro del bucle, pero es solo una, independientemente de la cantidad de campos que muestre. En primer lugar, debe asegurarse de crear el campo que desea mostrar en los perfiles de BuddyPress. Usaremos la ubicación en este ejemplo. Acceso: Bordeflies >> Usuarios >> Campos de perfil. Agregue el nuevo campo al tablero y luego puede agregarlo al bucle. Pegue esto a Members-Loop.php directamente bajo el comentario sobre cómo mostrar los datos de los datos de los miembros: < ?
Paso 4: Aumente el tamaño de los avatares que se muestran en el bucle de los miembros Encuentre el código de la extremidad en la parte superior del bucle: <a href = "
Cambie esas líneas para que coincidan con esto:
<a href=" “>
La razón por la que desea especificar tipo = completo aquí es que hace que BuddyPress use el avatar de la más alta calidad y aumente a la altura y el ancho que establece. De lo contrario, tienen que aumentar y hacer avatares poco claros.
Paso 5: hacer los avatares circulares
Pruebe los avatares después de personalizar a los miembros de los miembros, ahora vamos a los cambios de estilo. Puede hacer los avatares circulares con algunos cambios CSS. Este efecto agrega algo de diversión al director. Para algunos cambios rápidos y simples como este, puede agregar los cambios a la hoja de estilo de su base. Aquí solo nos dirigimos a los avatares en los miembros de los miembros. Agregue esto: #membres-dir List iMg.avary {
-WebKit-Border-Radius: 50%;
-Moz-Border-Radius: 50%;
-Ms-Border-Radius: 50%;
-O-Border-Radius: 50%;
Radio fronterizo: 50%;
-Webkit-box-shadow: 0 1px 0 #fff;
-Moz-box-shadow: 0 1px 0 #fff;
Shadow de caja: 0 1px 0 #fff;
}
Paso 6: Agregue el efecto del flotador en blanco y negro a Avatar Este es un pequeño efecto divertido que puede ayudar a que los usuarios navegen en su directorio por un poco más de tiempo. Por supuesto, probablemente no funcionará en IE, pero esto no es realmente mucho, porque es solo un efecto cosmético.
Avatar en tonos grises para pasar el mouse Agregue esto a su hoja de estilo: #miembros-Dir Lista A: Hover img.avar {
-Webkit-filter: escala de grises (100%);
-Moz-Filter: escala de grises (100%);
Filtro: escala de grises (100%);
-WebKit-Transition: -Webkit-Filter 0.2s Facle-Out;
-Moz-Transition: -Moz-Filter 0.2s Facle-En-Out;
Transición: filtrar 0.2s Fase-In-Out;
}
Paso 7: Personalice el aspecto de los miembros de los miembros para que las listas de miembros se carguen en una cuadrícula con filas de 3: #BuddyPress #Members List Li {
Desbordamiento: auto;
Estilo de lista: ninguno;
Flotador izquierdo;
Ancho: 30%;
margen: 0 20px 28px 0;
Borde: 0;
}
También haremos algunos pequeños ajustes para cambiar el tamaño y la alineación del texto:
#BuddyPress #miembros-Dir-list Ul.Item List Li Div. Div.item-Title, #BuddyPress #miembros-Lista Lista UL.Item Li H4, #BuddyPress #miembros-Dir List Ul.Item List Li Div.Item-Meta {
Ancho: 100%;
Text-Align: Center;
}
#BuddyPress #miembros-Dir-List Ul.Itemlist Li Div.Item-Title {
Tamaño de fuente: 110%;
}
#BuddyPress #miembros-Dir-List Ul.Itemlist Li Div.Item-Meta {
Texto-transformación: uppercase;
Tamaño de fuente: 80%;
}
#BuddyPress #miembros-Dir-List Ul.Itemlist Li Img.avar {
Margen de fondo: 8px;
}
Por supuesto, algunos de estos ajustes dependen del tema con el que comienza como un tema activo. Si usa estas plantillas básicas, el CSS debería ser bastante similar al anterior.
Paso 8: Personalice el botón Agregar amigo y elimine a un amigo si hay alguna forma de filtrar este botón, no lo sé. Para personalizar el texto del botón, deberá crear un archivo de idioma personalizado para BuddyPress. Este proceso es bastante fácil si tienes un programa como Poison para ayudarte. Siga las instrucciones de Codex para crear su propio archivo de idioma personalizado. Para este tutorial, cambiamos las cadenas de idiomas para los botones de amistad:
Agregue un amigo >> cambio a “+”
Cancelar amistad >> cambio a “-”
Tenga en cuenta que esto no es para cada comunidad. Es solo un ejemplo de cómo puede personalizar esos botones. Si siente que pierde demasiado para eliminar el texto de estos botones, no los cambie. Sus opciones para la interfaz de usuario dependerán completamente de los datos demográficos de su comunidad. Así es como puede personalizar los botones para que se vea como el ejemplo: #BuddyPress #miembros-Dir List A.friendhip-Button.add {
-WebKit-Border-Radius: 50%;-Moz-Border-Radius: 50%;
-Ms-Border-Radius: 50%;
-O-Border-Radius: 50%;
Radio fronterizo: 50%;
Borde: 5px Solid #89AC48;
Tamaño de fuente: 26px;
Font-Weight: Bold;
Antecedentes: #A5D156;
Color: #ffffff;
Línea de altura: 50px;
}
#BuddyPress #miembros-Dir-List A.friendship-button.is_friend.remove {
-WebKit-Border-Radius: 50%;
-Moz-Border-Radius: 50%;
-Ms-Border-Radius: 50%;
-O-Border-Radius: 50%;
Radio fronterizo: 50%;
Borde: 5px Solid #CC0000;
Tamaño de fuente: 26px;
Font-Weight: Bold;
Antecedentes: #FF5050;
Color: #ffffff;
Línea de altura: 50px;
}
UL#Members-List.
Text-Align: Center;
Desbordamiento: oculto;
Arriba: 18px;
Derecha: 6px;
}
Con estos cambios, tendrá un director gerente que se ve así:
Director personalizado de miembros de BuddyPress Si siente que el botón “Eliminar el amigo” es demasiado visible en rojo, puede ocultarlo por completo agregando “Pantalla: Ninguno”; a la clase .is_friend.remove. Alternativamente, puede seleccionar diferentes colores o texto para los botones de acción. Este es el último paso para personalizar a los miembros de los miembros para que coincidan con el ejemplo anterior. Es bastante sorprendente cómo solo un poco de CSS puede transformar completamente a sus directores, para que no muestre nada como BuddyPress predeterminado. La compatibilidad de los temas de BuddyPress 1.7 abrirá la plataforma para varios desarrolladores de WordPress. Los componentes encajarán maravillosamente en su tema, pero depende de usted destacarse. Tome una copia del tronco 1.7 y comience a experimentar antes de que llegue el lanzamiento oficial. Te sorprenderá gratamente lo fácil que es personalizar a BuddyPress directamente en su tema de WordPress.
