Share
Travailler avec BuddyPress sur WordPress est une chose très excitante, cela ajoute une toute nouvelle dimension à la plate-forme et démontre vraiment un énorme potentiel..
Comme d’autres plugins, BuddyPress étend les fonctionnalités de base proposées par WordPress. Bien qu’il soit important, en tant que pigiste ou entreprise, de reconnaître que BuddyPress, contrairement à d’autres plugins, ajoute des fonctionnalités épiques..
Ce tutoriel a pour but de vous montrer comment démontrer une preuve de concept rapidement et fonctionnellement sans faire de bonnes pratiques des péchés capitaux..
Au cours de ce didacticiel, nous utiliserons une combinaison de fonctions PHP, jQuery et WordPress pour étendre BuddyPress suffisamment loin pour illustrer un concept..
En travaillant sur les profils des membres, nous ajouterons sans aucun lien un lien permettant aux utilisateurs de visiter la zone de favoris d'un membre..
La zone des signets sera remplie par une liste de signets qu'un membre a décidé de sauvegarder tout en naviguant sur tout site activé par BuddyPress..
La portée des signets qui peuvent être enregistrés ne s'appliquera qu'aux publications WordPress pour le moment. Toutefois, vous pouvez envisager de l'exploiter davantage et de l'appliquer à d'autres zones d'un site Web utilisant le moteur de WordPress qui produit un permalien..
Nous allons construire sur le bp-default thème aujourd'hui et la création de notre propre thème de l'enfant. Ci-dessous la structure que vous devriez avoir créée.
style.css - Dans style.css il nous faut un minimum de code pour permettre la sélection de thèmes via wp-admin. Faisons-le maintenant.
/ * Nom du thème: Thème de signet Description: Thème enfant de bp-default avec un support supplémentaire pour les signets des membres. Version: 1.0 Auteur: WPTuts URI de l'auteur: http://wp.tutsplus.org Tags: buddypress Modèle: bp-default * /
Tags: buddypress informera BuddyPress que nous utilisons un thème activé pour BP.
Modèle: bp-default indiquera à BuddyPress que, lorsque ce thème est actif, héritera de ses fonctionnalités du bp-default thème sauf si un fichier de thème a été modifié.
Dans sidebar.php nous devons charger le widget.php.
Accentsconagua
Locate_template (array ('members / single / bookmarks / widget.php'), true); Allons-y et enregistrez le bookmarks.js fichier, il sera nécessaire sur chaque page à partir de maintenant. Dans functions.php ajouter ce qui suit.
function px_bookmark_scripts () if (! is_admin ()) wp_enqueue_script ('px-scripts-functions', get_stylesheet_directory_uri (). '/_inc/js/bookmarks.js', array ('jquery'), '1.0', true ) add_action ('wp_enqueue_scripts', 'px_bookmark_scripts'); wp_enqueue_script accepte 5 paramètres.
wp_head. Si défini à true, il se chargera avec wp_footer.
Les navigateurs de notre site pourront ajouter ou supprimer une publication WordPress à leurs favoris en cliquant sur une ancre indiquant "Ajouter aux favoris" ou "Supprimer des favoris" située au bas de chaque publication..
Lorsque l'on clique sur l'un ou l'autre point d'ancrage, nous utiliserons AJAX et adresserons une requête à un script PHP. Une fois exécuté, nous mettrons à jour le widget de la barre latérale.
Si le navigateur est connecté en tant que membre du site, il peut alors sauvegarder toutes les "listes de signets" actuellement stockées dans la session et affichées dans le widget..
functions.php…
fonction px_bookmark_link () global $ post; if (@in_array ($ post-> ID, $ _SESSION ['bookmarks']))): $ content. = 'ID.' "data-post-name =" '. get_the_title (). "> Supprimer des signets' ; else: $ content. = 'ID.' "data-post-name =" '. get_the_title (). ""> Ajouter aux favoris "; fin si; retourne $ contenu; add_filter ('the_tags', 'px_bookmark_link'); Cette fonction est appelée à chaque itération de "la boucle" en utilisant add_filter et les_tags comme notre crochet.
Nous avons informé WordPress que, dans cette fonction, nous souhaitons avoir accès aux éléments contenus dans $ wp_query et par conséquent $ post. Cela nous permettra de récupérer l identité, le titre et the_permalink.
Une certaine logique est appliquée lorsque ce code s'exécute pour déterminer le lien à afficher. Si l'utilisateur a déjà l'élément dans sa session en cours, nous afficherons une ancre "Supprimer des favoris" et vice versa.. in_array () nous permet de vérifier cela.
in_array () signalera les avis si error_reporting a cette directive, nous utilisons le @ symbole pour supprimer ces avis (hacky).
Utilisation des données renvoyées dans $ post nous formons deux ancres pour ajouter et supprimer des signets (tous Les données attributs importants ici) à utiliser ultérieurement avec nos appels AJAX dans bookmarks.js.
Pour une référence complète des filtres disponibles, visitez le codex.
Maintenant que notre lien est en place, créons le widget qui apparaîtra dans la barre latérale à tout moment et sera rempli ou vidé à la demande..
L'image ci-dessus reflète les états finaux du widget dans 3 scénarios..
Le prochain bloc de code est placé dans widget.php et imbriqué dans le balisage HTML.
if ($ _SESSION ['bookmarks'])): foreach ($ _SESSION ['bookmarks']] comme $ key => $ value): $ keys [] = $ key; $ start_count = min ($ keys); fin de chaque fin si; pour ($ i = $ start_count; $ i < $start_count + count($_SESSION['bookmarks']); $i++) : if($_SESSION['bookmarks'][$i]) : $bookmark = get_post($_SESSION['bookmarks'][$i]); echo '
Lors de la construction de ce projet, il y avait un problème avec les données de session qui continuaient à apparaître à la sortie. Certaines valeurs étaient supprimées mais la clé persistait. Définir un $ start_count à utiliser plus tard lors de l’impression des données de session a résolu ce problème.
La chose importante à noter ici est comment récupérer des éléments de $ _SESSION ['bookmarks'] qui sera créé dans la prochaine étape.
À chaque itération, nous utilisons get_post () interroger la base de données WordPress avec les valeurs entières stockées dans $ _SESSION ['bookmarks']. Ce qui retournera toutes les données lisibles par l'homme dont nous avons besoin.
if (is_user_logged_in ()): // Affiche le bouton SAVE, sinon: // Affiche le message "LOGIN TO SAVE". fin si; if ($ _SESSION ['bookmarks']]): // Affiche le bouton CLEAR endif;
Ce dernier morceau de logique au sein de widget.php détermine les boutons et le texte à afficher à côté du widget en fonction de l'état de la session en cours et
aussi si l'utilisateur est connecté ou déconnecté.
jQuery est génial, ici nous allons utiliser le déléguer méthode et écouter pour les clics sur nos ancres importantes. Nous allons vérifier si les éléments suivants sont cliqués.
ajouter un marque-page supprimer-signet effacer les signets En utilisant hasClass nous pouvons tester quel élément a été cliqué dans la méthode des délégués et servir le AJAX appel.
Si vous construisez cela dans un projet plus grand, envisagez d’utiliser un pubsub modèle.
var $ bookmark_widget = $ ('# px-bookmarks'), $ bookmark_form = $ ('# formulaire px-bookmarks'), $ bookmark_widget_list = $ ('# px-bookmarks .current-bookmarks'), $ vide_widget = $ ( '# px-bookmarks p'), $ widget_buttons = $ ('# px-bookmarks .widget-buttons'), $ login_notify = $ ('# px-bookmarks .login-notify'), // Ceci devrait être changé en reflète ton domaine. $ ajax_path = 'http://votresite.com/wp-content/themes/bookmark-theme/members/single/bookmarks/ajax.php'; Commencez par enregistrer certaines variables pour ne pas trop "éclabousser dans le DOM". Tous les sélecteurs DOM ci-dessus sont situés dans widget.php.
$ (". add-bookmark, .delete-bookmark, .clear-bookmarks"). delegate (this, 'click', function (e) e.preventDefault ();); Nous disons à jQuery d’écouter cliquer sur toutes les classes de la liste et via la fonction de rappel, nous lui dirons quoi faire. Les prochaines portions de code à ajouter seront placées directement après e.preventDefault ().
En utilisant preventDefault () est un moyen plus intelligent d’annuler l’action par défaut lorsque JavaScript est présent. Voici quelques discussions autour de preventDefault () débordement de pile.
Les prochaines portions de code à ajouter seront placées directement après e.preventDefault ().
var $ post_id = $ (this) .data ('post-id'), $ post_name = $ (this) .data ('post-name'), $ post_href = $ (this) .attr ('href'), $ que = $ (ceci); Une fois qu'un utilisateur a cliqué sur l'une des "ancres importantes", nous devons stocker les valeurs d'attribut de données qui étaient attachées aux ancres à l'étape 2. Cela nous permettra d'envoyer et de récupérer les données souhaitées..
Le code suivant peut devenir un peu prolixe, car nous allons afficher et masquer les éléments en fonction de l'élément sur lequel l'utilisateur a cliqué. Ce code est précédé du curseur.
Un strict minimum qui fonctionnera sans esthétique. Cependant, s'il vous plaît, téléchargez la source et regardez ces lignes.
if ($ that.hasClass ('add-bookmark')) $ .ajax (url: $ chemin_ajax + '? method = add', tapez: 'GET', données: 'post_id =' + $ post_id, succès: function (returndata) if ($ bookmark_widget_list.children (). length === 0) // Afficher / masquer $ bookmark_widget_list.prepend ('Ici nous utilisons hasClass pour distinguer quel élément a été cliqué à l'aide de jQuery pour rechercher notre élément cliqué.
Sur la base des résultats, nous avons configuré notre AJAX appeler un peu différemment à chaque fois. Avec le url et Les données étant demandé et envoyé chaque fois en changeant légèrement.
Remarquer ?méthode = ajouter annexé à $ ajax_path. Ceci est l'équivalent de http://site.com/path/to/ajax.php?method=add.
Lors de l’ajout d’un signet à la session en cours, le seul élément que nous devons transmettre à notre code PHP est l’id de cette publication qui a été stockée dans le fichier. $ post_id variable.
Lorsque jQuery reçoit une réponse positive, nous ajoutons ensuite cet élément à la liste de signets actuelle dans la zone du widget en tant qu'élément de liste. En utilisant $ post_id, $ post_name et $ post_href ici.
Lorsque la page est actualisée, le code ajouté à widget.php à l'étape 3 va entrer en.
Sur la ligne 7 du dernier extrait, il y a un petit sous-programme dans la Succès méthode qui détermine si des éléments de liste sont présents dans la zone du widget. Il s'agit du code mentionné précédemment, légèrement verbeux, qui ne fait rien d'autre que montrer et masquer certains éléments du DOM. Il a été supprimé pour la lisibilité ici sur Wptuts +. En mouvement…
if ($ that.hasClass ('delete-bookmark')) $ .ajax (url: $ chemin_ajax + '? method = delete', tapez: 'GET', données: 'post_id =' + $ post_id, succès: function (returndata) if ($ bookmark_widget_list.children (). length <= 1) // Show / hide $('#bookmark-'+ $post_id).remove(); ); Un peu comme if ($ that.hasClass ('add-bookmark')) Ici, nous vérifions les éléments cliqués qui ont la classe de supprimer-signet.
Une fois ce sous-programme entré, la url dans l'appel AJAX est légèrement modifié par l'envoi d'une chaîne de requête différente. À savoir ?méthode = supprimer.
Quand une réponse réussie est renvoyée, nous supprimons cet élément de la liste des signets actuels stockés dans le widget..
Appliquer une logique de la même manière que le ajouter un marque-page sous-routine pour déterminer si l’élément supprimé sera l’élément final. Sur la base de ce résultat, les éléments DOM sont à nouveau affichés ou masqués.
if ($ that.hasClass ('clear-bookmarks')) $ .ajax (url: $ ajax_path + '? method = clear', succès: function (returndata) // Afficher / masquer $ ('. postmetadata. delete-bookmark '). each (function (index) // La liste des signets est effacée, définissez les ancres attachées aux publications sur la valeur par défaut. $ (this) .removeClass (). addClass (' add-bookmark '). html (' Ajouter à signets '););); L’extrait de code final sert ici à effacer tous les signets du widget en définissant la url interroger une autre méthode et redéfinir les ancres de la page sur la valeur par défaut "Ajouter aux signets" afin de refléter un caractère vide. $ _SESSION. Ceci est fait en utilisant jQuery chaque méthode trouver toutes les occurrences de la classe supprimer-signet (ancre attachée aux poteaux en utilisant add_filter) et revenir à la valeur par défautajouter un marque-page.
Maintenant, nous allons créer le code PHP référencé dans les appels AJAX ci-dessus qui sera utilisé pour ajouter, supprimer et effacer tous les signets de la session..
Dans ajax.php nous allons créer les 3 fonctions suivantes.
ajouter un marque-page()delete_bookmark ()clear_bookmarks ()Créons d'abord ajouter un marque-page()
fonction add_bookmark () $ post_id = $ _GET ['post_id']; if (@! in_array ($ post_id, $ _SESSION ['bookmarks']))): $ _SESSION ['bookmarks']] [] = $ post_id; fin si;
D'abord nous stockons le $ post_id déjà passé dans bookmarks.js via data: 'post_id =' + $ post_id.
Ensuite, nous utilisons le in_array fonction à nouveau pour déterminer si cet élément doit être ajouté à la session des signets.
function delete_bookmark () $ post_id = $ _GET ['post_id']; foreach ($ _SESSION ['bookmarks']] comme $ key => $ value): $ keys [] = $ key; fin de chaque $ start_count = min ($ keys); if (@in_array ($ post_id, $ _SESSION ['bookmarks']))): pour ($ i = $ start_count; $ i < $start_count + count($_SESSION['bookmarks']); $i++) : if($_SESSION['bookmarks'][$i] === $post_id) : unset($_SESSION['bookmarks'][$i]); endif; endfor; endif;
Dans le delete_bookmark () fonction nous stockons à nouveau le $ post_id.
En utilisant la même technique pour afficher nos signets dans widget.php une $ start_count est établi.
Ensuite, nous déterminons si l'élément est passé ($ post_id) existe dans la session de signets via in_array, et désélectionner toutes les valeurs qui correspondent.
fonction clear_bookmark () session_start (); session_unset (); session_destroy ();
Finalement, le clear_bookmark () la fonction détruit toutes les données de session.
Nous aurons besoin d’un code supplémentaire pour que ce fichier soit complet. Allez en haut du fichier et ajoutez ce qui suit.
session_start (); $ method = $ _GET ['method']; switch ($ method) case "add": add_bookmark (); Pause; case "delete": delete_bookmark (); Pause; case "clear": clear_bookmark (); Pause;
Nous utilisons session_start () pour reprendre la session en cours. C'est crucial ici.
Ensuite, nous stockons la méthode qui est envoyée avec url dans notre $ .ajax appels.
Basé sur la valeur actuelle de méthode $ nous appelons la fonction appropriée.
Les fichiers que nous traiterons pour la suite de ce tutoriel sont énumérés ci-dessous..
À l'intérieur home.php nous allons ajouter un élément de la liste à la liste non ordonnée dans la div avec un identifiant de article-nav.
En utilisant le $ pb global, nous pouvons rapidement former l'URL requise.
$ bp global; écho '
C’est l’un des petits péchés que nous commettons tout au long de la route pour démontrer la preuve du concept. Cependant, il est important de réitérer la validation de principe et le développement rapide..
Si nous décidions d’étendre cette fonctionnalité davantage, nous utiliserions des hooks BuddyPress..
if ($ _ GET ['composant'] == 'bookmarks'): localiser_template (tableau ('members / single / bookmarks / view.php'), true); Toujours dans home.php nous vérifions par rapport à la chaîne de requête qui nous permettra de servir des modèles personnalisés.
if (! $ _ GET ['action']): Locate_template (array ('members / single / bookmarks / loop.php'), true); elseif ($ _GET ['action'] == 'enregistrer' && is_user_logged_in () && bp_is_home ()): localiser_template (tableau ('members / single / bookmarks / save.php'), true); elseif ($ _ GET ['action'] == 'remove' && is_user_logged_in () && bp_is_home ()): Locate_template (array ('members / single / bookmarks / remove.php'), true); fin si; Dans view.php (notre chargeur de modèles Make-Shift), nous vérifions 2 actions et si aucune n'a été définie, nous affichons la liste des signets enregistrés..
De retour à l'étape 3, une logique a été ajoutée pour déterminer les ancres à afficher dans le widget en fonction de l'état actuel de $ _SESSION ['bookmarks'] et si l'utilisateur était connecté ou non.
Créons une petite table dans la base de données qui servira à stocker une liste de signets correspondant à chaque membre..
DROP TABLE SI EXISTS 'bookmarks'; CREATE TABLE 'bookmarks' ('id' int (11) NOT NULL AUTO_INCREMENT, 'utilisateur_id' int (11) NOT NULL, 'date de création' NOT NULL, texte 'post_ids' NON NULL, texte 'nom_liste' NOT NULL, PRIMARY KEY ('id')) Le MySQL ci-dessus va créer une nouvelle table avec 5 champs pour que nous puissions stocker les données des signets.
Une fois créé, il est temps de passer à save.php.
Pendant que l'utilisateur accède save.php nous présenterons un formulaire avec une entrée de texte; ici, l'utilisateur devra attribuer une étiquette à la liste des signets qu'il souhaite enregistrer..
Une fois qu'une étiquette a été fournie, nous stockons chaque liste de signets sous forme de ligne dans la base de données (pour une récupération ultérieure) et effaçons la session en cours..
if (! $ _ POST ['px-bookmark-list-name']): // Formulaire actuel demandant à donner un nom à la liste // Stage 1 elseif ($ _ POST ['px-bookmark-list-name']): / / Label fourni magasin à la base de données. // Stage 2 endif;
Maintenant dans l'étape 1 de save.php…
// Si le formulaire est soumis mais qu'aucune étiquette fournie ne présente d'erreur. if ($ _ POST ['submit'] &&! isset ($ _ POST ['px-bookmark-list-name']))): echo 'Une étiquette est requise.
'; fin si; // Établit le compteur de début if ($ _ SESSION ['bookmarks']]): foreach ($ _SESSION ['bookmarks']] sous la forme $ key => $ value): $ keys [] = $ key; fin de chaque $ start_count = min ($ keys); fin si; // Boucle les éléments et stocke dans des champs de formulaire cachés. pour ($ i = $ start_count; $ i < $start_count + count($_SESSION['bookmarks']); $i++) : if($_SESSION['bookmarks'][$i] !== NULL) : $bookmark = get_post($_SESSION['bookmarks'][$i]); echo ''; echo ''; echo ''; Echo ''; fin si; endfor;
D'abord, nous affichons une erreur si aucune étiquette n'a été fournie..
Ensuite, nous utilisons la même technique de widget.php et ajax.php établir un compteur de début et parcourir les données de session.
Enfin, nous générons des champs de formulaire à l’aide de get_post.
$ bp global; foreach ($ _ POST ['px-post-id'] en tant que $ valeur): $ posts_to_save [] = $ valeur; fin de chaque $ posts = sérialiser ($ posts_to_save);
Au cours de l'étape 2 de save.php nous avons accès à la $ pb global.
Nous passons en boucle sur $ _POST les données et stocker les messages à enregistrer en tant que tableau. Ceci est ensuite sérialisé et stocké dans le $ posts variable.
$ list_name = $ _POST ['px-bookmark-list-name']; $ query = $ wpdb-> insert ('bookmarks', array ('user_id' => $ bp-> utilisateur_bonné->> id, 'created' => current_time ('mysql'), 'post_ids' => $ posts, ' nom_liste '=> $ nom_liste), array ('% d ', // id_utilisateur'% s ', // créé'% s ', // post_ids'% s '// nom_list)); Ensuite, nous stockons l’étiquette fournie par l’utilisateur pour cette liste de signets dans une variable et l’utilisons. WPDB insérer la ligne dans la base de données.
if ($ query): echo ''; écho ''; session_start (); session_unset (); session_destroy (); sinon: echo 'Liste sauvegardée.
'; écho ''; écho ''; fin si;Il y avait une erreur.
'; écho '
Enfin, nous vérifions si la requête a réussi et n'a pas défini les données de session, sinon nous affichons une erreur..
Rappelez-vous, dans view.php quand pas particulier action est réglé, nous allons charger loop.php. Dans ce dossier $ wpdb sera utilisé pour récupérer et afficher toutes les listes de signets.
$ bp global; $ utilisateur_affiche = $ bp-> utilisateur_affiche-> id; $ bookmark_lists = $ wpdb-> get_results ("SELECT * FROM signets WHERE id_utilisateur = $ utilisateur_affiche ORDER BY id id"); En utilisant le $ pb global, l'identifiant du profil affiché est stocké dans le $ affiché_utilisateur variable.
Ensuite, nous effectuons une requête sur la table des marque-pages avec le $ affiché_utilisateur comme condition où.
if ($ bookmark_lists): foreach ($ bookmark_lists en tant que $ bookmark_list): echo $ bookmark_list-> nom_liste; $ post_ids = unserialize ($ bookmark_list-> post_ids); foreach ($ post_ids en tant que $ post_id): $ bookmark = get_post ($ post_id); echo 'post_name.' "title =" Afficher le signet "> '. $ bookmark-> post_title.' '; endforeach; endforeach; endif;
Lorsque les résultats sont renvoyés, ils sont affichés en boucle sur les données et en sortie en conséquence. Ici nous utilisons désérialiser inverser les effets desérialiser qui a été utilisé pour stocker des signets précédemment.
Nous pouvons faire un ajout de plus au bloc de code précédent.
if (is_user_logged_in () && bp_is_home ()): echo 'utilisateur_affiché-> domaine.'? composant = signets & action = remove & id = '. $ bookmark_list-> id.' "> Supprimer la liste '; endif;
Ceci ajoutera une ancre au titre de chaque liste qui, une fois cliquée, transmettra une nouvelle action de retirer avec l'identifiant de la liste de signets.
Ce qui nous amène à notre étape finale… Supprimer une liste de signets. S'ouvrir remove.php et finissons cela.
if (isset ($ _GET ['action']) == 'remove' && isset ($ _GET ['id'])): $ id_liste = $ _GET ['id']; $ bp global; $ user_id = $ bp-> utilisateur connecté->> id; $ query = $ wpdb-> query ("SUPPRIMER DES signets WHERE id = $ id_liste AND id_utilisateur = $ id_utilisateur"); if ($ query): echo ''; écho 'Liste supprimée.
'; écho ''; sinon: echo ''; écho 'Il y avait une erreur.
'; écho ''; fin si; fin si; Premièrement, nous nous assurons que l’action est définie pour être supprimée et qu’il existe un identifiant pour construire une petite requête avec.
Ensuite, nous stockons des données utilisateur et exécutons la requête. Les utilisateurs ne devraient pouvoir supprimer que les listes qui leur appartiennent en utilisant $ bp-> utilisateur connecté-> id nous aide à atteindre cet objectif.
Enfin, nous servons un message en fonction du résultat.
Au cours de ce tutoriel, un certain nombre de techniques ont été appliquées. En utilisant jQuery, PHP brut, les conventions WordPress et BuddyPress, nous avons pu illustrer une fonctionnalité intéressante à ajouter à votre site de réseau social alimenté par WordPress et BuddyPress..
BuddyPress n'est pas livré avec un gestionnaire de favoris attaché aux profils des membres et il n'y a pas de plug-in qui fonctionne exactement comme ceci..
Un gestionnaire de favoris est un exemple, mais cela pourrait être n'importe quoi.
L’objectif principal de ce tutoriel était d’illustrer la rapidité et l’efficacité avec laquelle vous pouvez brancher BuddyPress afin de démontrer votre validité..
Avec un peu de savoir-faire, cela pourrait être mis en place lors d'une soirée sans problème. L'engagement de temps est tangible et pourrait être pris en compte dans un contrat de maintenance mensuel.
Cependant, si un client souhaitait davantage de fonctionnalités dans le gestionnaire de favoris, telles qu'un widget de tableau de bord et des fonctionnalités plus détaillées, vous pénétreriez dans le royaume des plugins..
Les données n'ont pas été désinfectées dans ce didacticiel, assurez-vous donc que si vous souhaitez les placer dans un environnement "réel", procédez à une validation préalable..
J'espère que vous avez apprécié ce tutoriel et que vous pouvez trouver des incohérences s'il vous plaît laissez un commentaire et fera de mon mieux pour vous aider à traverser.
