Share
Le mois dernier, nous avons examiné les bases de Presse copain et comment vous pouvez l'utiliser pour augmenter le réseautage social dans vos projets. La réponse a été excellente et beaucoup ont demandé des tutoriels sur la thématique. Ainsi, dans cette série en trois parties, nous expliquerons quelques éléments essentiels de l’API de BuddyPress et expliquerons comment créer un thème enfant personnalisé qui survivra à BuddyPress et à WordPress mises à jour.
Avec de plus en plus de clients à la recherche de réseaux sociaux, nous avons passé en revue les bases de BuddyPress et l'impact qu'il peut avoir sur vos projets. Nous souhaitons à présent nous intéresser au développement de thèmes enfants adaptés à vos besoins et qui résisteront aux mises à jour de BuddyPress et WordPress. Récemment, j'ai recherché dans le référentiel de thèmes des thèmes compatibles avec BuddyPress et 19 résultats ont été obtenus! Inutile de dire que ce marché pourrait utiliser certains pays en développement. Bien qu'il existe des plug-ins capables de rendre vos thèmes compatibles avec BuddyPress, je suis toujours un partisan de la compréhension de la manière de faire quelque chose vous-même et de ne pas compter entièrement sur les plugins. De plus, créer un thème enfant de base est un processus simple, et intéressant d'apprendre si vous envisagez de développer avec BuddyPress.
Dans ce didacticiel, je vais vous présenter les principaux éléments de l'API BuddyPress et les étapes de base permettant de créer un thème enfant BuddyPress personnalisé. A la fin de ce tutoriel, vous devriez être capable de comprendre:
Ce tutoriel jettera les bases des deux prochaines parties, qui contiendront des techniques plus détaillées pour travailler avec des éléments spécifiques dans BuddyPress, tels que des groupes et des forums..
Si vous travaillez avec WordPress, vous savez alors qu'il est important de comprendre comment utiliser ses fonctions, actions, liens et filtres spécifiques. Vous avez également compris que lorsque vous comprenez mieux ces choses, vos projets vont plus vite et vous pouvez vous plonger plus complètement dans la personnalisation des thèmes et des plugins. Il n'y a rien de différent avec BuddyPress.
Je souhaite d’abord vous présenter quelques éléments clés de l’API BuddyPress: balises de modèle, boucles et conditions. J'espère que lorsque nous explorerons ces éléments et comment créer un thème enfant, vous pourrez utiliser ce qui est écrit ici et l'appliquer pour créer vos propres thèmes enfants BuddyPress..
Pour commencer, examinons les fonctions BuddyPress qui sont essentielles au développement du thème - les balises de modèle. Le codex de BuddyPress en contient une liste à titre de référence. Ces balises de modèle sont essentielles pour personnaliser réellement vos thèmes et, comme Dan Davies l’a suggéré dans son récent article wp.tutsplus, vous devriez en avoir certaines en composition abrégée si vous envisagez de développer beaucoup de thèmes dans BuddyPress. Certaines d'entre elles sont exactement les mêmes que les balises de modèles dans Wordpress, ce qui devrait également vous faire gagner du temps si vous avez de l'expérience en conception de modèles dans WordPress..
Voici une liste rapide de balises de gabarit de l'en-tête au bas de page à utiliser dans le développement de votre thème:
Ces balises de modèle sont les mêmes que celles utilisées pour formater et afficher le contenu dans WordPress. Ils fonctionnent également dans la même boucle WordPress. Pour voir un exemple de ceux-ci en action, ouvrez le thème bp-default et ouvrez index.php. Les lignes 15 à 61 donnent un bon exemple de la boucle WordPress au travail dans BuddyPress.
Pour voir ces balises en action, ouvrez members / member-loop.php et members / single.php dans bp-default.
Pour voir ces balises en action, ouvrez groups / groups-loop.php et groups / single.php dans bp-default.
Vous pouvez également utiliser cette balise de modèle pour afficher les modèles de formulaire de recherche. Pour cela, ne cherchez pas plus loin que le fichier index.php de bp-default.
En plus de cela, il existe d'autres balises de modèle de pagination pour différents types de contenu. Remplacez simplement le mot "groupes" dans les balises de modèle ci-dessus par les mots: forum, blogs, membre du groupe ou messages, pour inclure les liens ou compter pour la boucle utilisée. Ces boucles sont examinées plus en détail ci-dessous.
Comme je l'ai déjà mentionné ci-dessus, vous pouvez utiliser la boucle WordPress par défaut dans vos thèmes pour afficher des messages et publier du méta-contenu. BuddyPress contient également ses propres boucles, chacune étant chargée d’afficher les types de contenu spécifiques à BuddyPress. BuddyPress inclut des boucles pour: les groupes, les membres, le flux d'activité, les sujets de forum, les blogs, les membres du groupe, les messages privés et les données de profil. Bien que chacun de ces éléments ressemble beaucoup à la boucle WordPress standard, chacun a ses propres variables spécifiques qui permettent également une plus grande personnalisation..
Assurez-vous de plonger dans les fichiers de thème bp-default pour mieux comprendre les boucles et leurs utilisations spécifiques. Chaque type de contenu aura un dossier dans lequel se trouve le fichier de boucle spécifique..
Regardons un aperçu de chacun d’eux, et quelques moyens spécifiques de personnaliser leur affichage..
La boucle groups permet d’afficher une liste des groupes de sites. La boucle ressemble à ceci:
Les paramètres suivants sont les plus utiles lors de la personnalisation de la boucle de groupes:
Jetons un coup d'œil à un exemple de boucle, personnalisé à l'aide des paramètres ci-dessus. Juste après le support d’ouverture, entrez ce qui suit:
Accentsconagua
$ args = array ('type' => 'popular', 'max' => 5, 'user_id' => $ user_id); if (bp_has_groups ($ args)) ? Puisque nous utilisons plusieurs arguments, je mets en place une variable nommée args qui peut gérer un tableau. J'ai ensuite défini le type sur popular, le nombre maximal par page sur 5 et l'identifiant utilisateur sur l'identifiant de l'utilisateur actuellement connecté. Ceci affichera ensuite les 5 groupes les plus populaires auxquels le membre actuel appartient et ensuite paginera le reste..
La boucle des membres est utilisée pour afficher une liste des membres actuels. La boucle des membres standard ressemble à ceci:
Pour aller plus loin, décomposons un peu ce code. Les premières et dernières lignes sont vitales, et dites à BuddyPress d’afficher le reste de notre code uniquement s’il existe des membres présents..
?
Ensuite, nous avons nos balises de modèles de pagination de membres. Il existe également des balises de modèle pour d'autres types de contenu, tels que les groupes et les blogs. Ceux-ci sont écrits ci-dessus pour votre référence.
Comme vous pouvez le constater, chaque boucle peut être décomposée en éléments révélant davantage d'informations sur les balises de modèle et leurs utilisations. Dans cette seule boucle, nous voyons les balises template: bp_member_profile_data, bp_member_permalink, bp_member_avatar et bp_member_latest_update.
le bp_has_members () L'argument a plusieurs paramètres qui peuvent être personnalisés pour modifier la liste des membres affichée. Les plus utiles sont:
Les paramètres utiles pour la boucle de flux d'activité sont les suivants:
Il existe d'autres astuces utiles sur le filtrage de l'activité à l'échelle du site et sur l'ajout de commentaires sur la page de boucle de flux d'activités du codex BuddyPress..
La boucle de rubriques de forum est utilisée pour afficher une liste de rubriques de forum, les derniers postés sur le sujet et le nombre total de posts dans le sujet, entre autres choses. La boucle ressemble à ceci:
| "title =" - "> | "> | "> "title =""> |
Les paramètres utiles pour la boucle des sujets du forum sont les suivants:
La boucle de blogs est utilisée pour afficher une liste de blogs d'utilisateurs. La boucle ressemble à ceci:
Les paramètres utiles pour la boucle de blogs sont les suivants:
Cette boucle est utilisée pour afficher les membres d'un groupe spécifique.
Ce groupe n'a pas de membres.
La boucle de messages privés est utilisée pour afficher des messages privés à un utilisateur. Il comprend également une belle liste de balises de modèle pour personnaliser son affichage.
Il n'y a aucun message à afficher.
La boucle de données de profil est utilisée pour afficher les données de profil de l'utilisateur.
Cet utilisateur n'a pas de profil.
Bien que BuddyPress contienne de nombreuses boucles, elles sont faciles à comprendre et à personnaliser. En les étudiant, vous devriez également mieux comprendre comment BuddyPress utilise les balises de gabarit et les conditionnelles dans son thème par défaut. Voyons maintenant comment BuddyPress utilise les balises de modèle conditionnelles.
Les conditions sont un excellent moyen de développer facilement et rapidement des thèmes personnalisés qui changent en fonction de certaines conditions. Dans BuddyPress, ces conditions commenceront par: bp_is_ et ils sont utilisés pour afficher un contenu spécifique sur des pages spécifiques. Par exemple, si je souhaitais afficher quelque chose de spécifique sur les pages d'accueil de groupe, j'utiliserais la balise de modèle conditionnel suivante:
Afficher ceci sur les pages d'accueil du groupe
Ma balise de modèle conditionnel est ici bp_is_group_home (). Pour afficher quelque chose uniquement sur les pages d'accueil des utilisateurs, je ferais la même chose que ci-dessus, mais avec la balise de modèle conditionnelle: bp_is_home ou bp_is_my_profile.
Pour une liste complète de ceux-ci, cliquez ici..
Passons maintenant à la conversation sur les API - vous pouvez vous lever et vous étirer pendant une minute si vous en avez besoin - et passer à une application pratique. Encore une fois, nous essayons de préparer le terrain pour que notre thème personnalisé apparaisse dans les parties 2 et 3, voyons maintenant la création d’un thème enfant pour BuddyPress. Je ne saurais trop insister sur l'importance de cela. Permettez-moi de partager une expérience personnelle sur l’importance de ce point. Récemment, j'ai commis une erreur de recrue et modifié directement les fichiers de base de BuddyPress sans penser aux mises à niveau et aux nouvelles versions. Je parie que vous pouvez deviner ce qui s'est passé ensuite. C'est vrai. J'ai oublié de le sauvegarder et la nouvelle version a écrasé tout le travail que j'avais effectué. J'étais assez déprimé et j'ai dû passer des heures inutiles à réparer les dégâts. Donc, pour vous aider à éviter cela, voici comment créer un thème enfant BuddyPress que nous allons éditer et sur lequel nous travaillerons dans les deux prochaines parties de cette série de tutoriels..
Tout d’abord, créez un nouveau dossier dans votre wp-content / thèmes / dossier nommé cool-bp-theme. Ce sera notre thème enfant BuddyPress. Si vous ne savez pas ce qu'est un "thème enfant", considérez-le simplement comme un thème qui fonctionnera et fonctionnera comme le thème bp-default situé dans wp-content / plugins / buddypress / bp-themes / bp-default / , mais autorisera l'édition et la personnalisation et ne se brisera pas lorsque Wordpress ou BuddyPress sera mis à niveau. Pour ce faire, il ne modifie que les fichiers de modèle situés dans notre dossier de thèmes enfants. Il utilisera même la feuille de style bp-default, mais autorisera l’importation de nouvelles feuilles de style ou le remplacement du CSS original dans style.css..
Après avoir créé le nouveau dossier, je crée un nouveau fichier functions.php vide (car je compte modifier certaines fonctionnalités) et un nouveau fichier style.css avec le code suivant:
/ * Nom du thème: Nouveau thème cool pour BuddyPress Description: Nouveau thème cool pour BuddyPress. Version: 1.0 Auteur: Adam Murray URI de l'auteur: http://twodoorscreative.com/ Modèle: bp-default Étiquettes: buddypress, two-column, light * /
L’élément fondamental ici est le modèle ligne, où je lie cela au thème bp-default, ce qui en fait un thème enfant. Je souhaite maintenant aller plus loin et importer les feuilles de style standard de bp-default. Pour ce faire, sous ce code, j'entre:
/ * Hériter des styles de thème par défaut * / @ import url (? /? /Plugins/buddypress/bp-themes/bp-default/_inc/css/default.css); / * Hériter des styles d'administration par défaut du thème * / @import url (? /? /Plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css);
Maintenant, vous avez les bases d'un thème enfant BuddyPress. Si vous naviguez jusqu'à Apparence -> Thèmes dans votre tableau de bord Wordpress, vous verrez maintenant le thème enfant et, lorsque vous l'activez, vous devriez voir exactement ce que vous verriez si vous activiez bp-default..
Puisque le thème enfant est maintenant actif et actif, pour éditer un modèle, nous procédons simplement comme suit:
Pour un exemple rapide, expliquons l’ajout du menu en-tête personnalisé que j’ai enseigné dans le didacticiel BuddyPress du mois dernier..
('Menu d'en-tête'))); add_action ('init', 'register_bp_default_menus'); ?>
'header-menu', 'container' => false,)); ?>
La meilleure partie de toutes est qu’il s’agit d’un changement permanent qui ne sera pas supprimé du fait d’une mise à niveau.!
En conclusion, comme j'espère l'avoir répété à maintes reprises, il s'agit d'un fondement sur lequel vous pouvez bâtir. J'espère que ce tutoriel vous a permis de mieux comprendre l'API de BuddyPress et qu'il vous a aidé à mieux vous familiariser avec les éléments qui composent un thème BuddyPress. Dans les sections à venir, nous développerons notre thème enfant actuel pour créer un thème qui ressemble à celui que nous souhaitons en utilisant des balises de modèle, des boucles et des conditions. En faisant cela ensemble, j'espère vous emmener dans un endroit où vous pourrez facilement créer de nouveaux thèmes avec BuddyPress..
Merci de m'avoir lu et j'espère vous avoir aidé à apprendre quelque chose de nouveau sur la thématisation avec BuddyPress et son API.!
