Share
Bienvenue dans la partie 3 de la rubrique "Développement de thèmes BuddyPress". Dans ce tutoriel, nous allons nous concentrer sur la dernière version de BuddyPress - version 1.5, ainsi que sur la façon de personnaliser l'expérience utilisateur en modifiant les pages des membres et en ajoutant des fonctions personnalisées..
Ce tutoriel est la dernière partie de cette série de thèmes de développement de BuddyPress. De l'API, nous sommes passés à la création d'un thème personnalisé construit autour d'une communauté spécifique. Aujourd'hui, nous allons prendre cela un peu plus loin.
Dans ce tutoriel, nous allons:
À la fin de cette série de tutoriels, vous devriez avoir une compréhension complète des nouveaux changements de BuddyPress et un excellent point de référence lorsque vous commencez ou continuez à développer vos propres thèmes BuddyPress..
Tout d'abord, si vous n'avez pas encore mis à jour votre BP, allez-y, franchissez le pas et mettez-le à jour. Vous pouvez le faire manuellement ou via le tableau de bord WP. Une fois que vous avez mis à jour, vous verrez une notification en haut de l'écran vous indiquant que vous devez configurer la mise à jour..
Cliquez dessus et vous devriez voir ceci:
Le thème que nous avons créé devrait être bon. Ne vous inquiétez pas de la mise en file d'attente des feuilles de style ou de quelque chose du genre, cela est en fait inutile, à ma connaissance. Si quelqu'un a un commentaire à ce sujet, assurez-vous de le jeter là-bas!
Si la mise à jour n'a pas été aussi agréable pour votre thème, visitez la page du concepteur de thème et du développeur de BuddyPress à l'adresse suivante:.
Depuis sa sortie la semaine dernière, j'ai peu joué, mais je vais faire écho aux temps forts publiés sur le site Web de BuddyPress. Ils sont comme suit:
Pour une liste complète des fonctionnalités et des points forts, cliquez ici. Assurez-vous de noter quelques modifications apportées aux boucles et aux fonctions de base du partenaire. Ceux-ci devraient vraiment vous aider dans le développement de votre thème BP.
Une chose importante que je souhaite aborder dans BuddyPress 1.5 est la manière de l’intégrer. BuddyPress utilise maintenant l’intégration native de Wordpress, ce qui vous permet d’incorporer directement du contenu via l’URL. Par exemple, si je veux ajouter une vidéo à mon sujet de forum, je posterais quelque chose comme:
Hey, regarde ça et laisse-moi savoir ce que tu penses. http://www.youtube.com/watch?v=ROBmgYcIBww
Cela se traduira par:
Si vous préférez, vous pouvez également mettre l'URL ci-dessus dans un intégrer shortcode et spécifiez la hauteur et la largeur comme ceci:
[embed] http://www.youtube.com/watch?v=ROBmgYcIBww [/ embed]
Cela devrait aider si vous utilisez un thème utilisant un style différent de celui par défaut, car la largeur de l'incorporation risque d'être supérieure à celle souhaitée..
Voyons maintenant la modification des modèles de membres, une fonctionnalité de BuddyPress 1.5. En modifiant les modèles de membre, je souhaite également vous montrer comment ajouter vos données de champ de profil personnalisé aux modèles afin de renforcer réellement votre communauté en ligne..
Avant de commencer, vous devrez copier le membres dossier de bp-default et collez-le dans le dossier de votre thème enfant.
Toujours dans le dossier des membres que vous avez copié dans votre thème enfant, ouvrez le dossier nommé unique. Ce dossier contient les éléments qui constituent ce qu'un membre voit lorsqu'il visite son profil. Ma page ressemble actuellement à ceci:
Les fichiers principaux sur lesquels nous allons travailler sont home.php et member-header.php, car ce sont les fichiers qui contrôlent ce que l'utilisateur voit lorsqu'il regarde ses informations..
Tout d'abord, ouvrez le fichier membre-header.php. Ce fichier est utilisé pour afficher les éléments d'avatar, d'informations et de navigation de l'utilisateur..
Étant donné que le site que je crée concerne les grands espaces et le camping, je souhaite que les membres aient des informations pertinentes. Pour cela, j'ai créé les champs de profil personnalisés suivants:
L'un des grands avantages de la nouvelle interface utilisateur est qu'il est beaucoup plus facile de naviguer. Vous pouvez rapidement créer et éditer de nouveaux champs de profil pour chaque groupe que vous avez, personnalisant ainsi vraiment chaque groupe dans BuddyPress.
Pour intégrer ces champs dans l'en-tête de ma page de membre, sous la ligne 29, procédez comme suit:
Placez ce qui suit:
Accentsconagua
Mon spot de camping préféré: '. $ Favorite_spot. ''; $ required_item = bp_get_profile_field_data ('champ = Un élément nécessaire'); écho 'Mon seul élément nécessaire: '. $ Required_item. '
'; ?> Ici, j'ai récupéré les champs de profil personnalisés "Lieu de camping préféré" et "Un élément nécessaire" et les ai affichés dans de nouveaux paragraphes en dessous de la dernière information d'activité. Je leur ai aussi donné la classe "profile-fields" afin que je puisse facilement les styler via CSS.
En plus de cela, vous pouvez ajouter des conditions qui demandent aux utilisateurs de mettre à jour leurs profils si les données sont manquantes..
Jusqu'ici, nous avons beaucoup parlé de thèmes enfants et de la façon d'ajouter vos propres fonctions via le fichier functions.php de votre dossier de thèmes enfants. Cependant, qu'en est-il des modifications que vous souhaitez apporter à BuddyPress, quel que soit le thème utilisé? Qu'en est-il des choses globales telles que le processus d'inscription ou d'autres éléments globaux de l'expérience utilisateur??
Eh bien, pour apporter des modifications à l'échelle mondiale quel que soit le thème, vous devez créer un nouveau fichier appelé bp-custom.php et le placer dans wp-contents / plugins /. Pour créer ce fichier, ouvrez un nouveau fichier et placez-y les éléments suivants:
Enregistrez-le sous bp-custom.php, placez-le dans wp-contents / plugins et vous avez terminé! Une fois que vous ajoutez des fonctions, elles se chargeront quel que soit le thème..
Enfin, je voulais montrer rapidement comment utiliser les champs personnalisés et bp-custom.php pour afficher un flux Twitter. Je sais qu'il existe des plug-ins qui offrent également cette fonctionnalité, mais je voulais mettre en parallèle certains des concepts dont nous avons parlé..
Tout d'abord, j'ai placé le code suivant dans mon fichier bp-custom:
fonction CNBTgetTwitterStatus () ?>Flux Twitter de
texte; // récupère l'heure de création du statut $ tweet-> created_at; // récupère l'URL de l'image de profil utilisateur $ tweet-> user-> profile_image_url; // obtient le nom d'écran de l'utilisateur $ tweet-> user-> nom_écran; // récupère l'emplacement de l'utilisateur $ tweet-> user-> location; // obtient le nom d'utilisateur $ tweet-> user-> name; // Obtenir le nombre de suiveurs. $ tweet-> user-> followers_count; // Récupère l'URL du site Web de l'utilisateur. $ tweet-> user-> url * / // Convertissez les noms d'utilisateur Twitter et les liens vers des hyperliens $ tweetcontent = linkify ($ tweet-> text); $ getTweets. = "$ tweetcontent
"; // Définissez le cache s'il n'existe pas set_transient ($ transitoire, $ getTweets, 10); echo $ getTweets; else retour false; / * Crédit Jeremy Parrish http://rrish.org/ * / function linkify ($ status_text) // URL de linkify $ status_text = preg_replace ('/ (https?: \ / \ / \ S +) /', '\ 1', $ status_text) // // utilisateurs de twitter de linkify $ status_text = preg_replace ('/ (^ | \ s) @ (\ w +) /', '\ 1 @ \ 2', $ status_text) // // balises de lien $ status_text = preg_replace ('/ (^ | \ s) # (\ w + ) / ',' \ 1 # \ 2 ', $ status_text); return $ status_text; add_action (' bp_after_member_home_content ',' CNBTgetTwitterStatus ');
Ce code produit ceci:
Pour décomposer cela un peu, j’utilise d’abord une balise template pour afficher un en-tête avec le nom de l’utilisateur, vous savez, pour que ce soit plus personnel..
Flux Twitter de
Ensuite, nous construisons la fonction qui produira nos mises à jour Twitter. Pour gagner du temps, j'ai effectivement trouvé cette fonction. Il existe d’autres fonctions que vous pouvez facilement utiliser pour créer le flux Twitter de votre choix. Si vous remarquez, je mets également un cours sur chaque tweet, afin que je puisse l'appeler dans mon style.css:
$ getTweets. = "$ tweetcontent
";
À la fin de cette fonction, je l'appelle et j'utilise une balise de modèle pour la placer après le contenu de la page d'accueil du membre..
add_action ('bp_after_member_home_content', 'CNBTgetTwitterStatus'); Et maintenant, vous avez un simple flux Twitter que vous pouvez afficher et personnaliser pour connecter encore plus vos utilisateurs.!
En conclusion, j'espère que vous avez vu tout au long de cette série que BuddyPress est un outil puissant pouvant être utilisé efficacement dans vos projets. Ce n'est pas incompréhensible! Mieux encore, une équipe de développement active et une communauté s’efforcent de la rendre encore plus efficace et fonctionnelle. J'ai aimé parcourir cette série avec vous et si je peux vous aider, faites-le-moi savoir..
!
