Share
Avatar Manager pour WordPress est un plugin simple et agréable pour stocker des avatars localement et plus. Facilement.
Améliorez votre site Web WordPress en permettant à vos utilisateurs de choisir entre utiliser Gravatar ou une image d’avatar auto-hébergée directement à partir de leur profil. Flux de travail amélioré, génération d'images à la demande et autorisations utilisateur personnalisées sous une interface native. Dites bonjour au plugin Avatar Manager.
Un plugin WordPress est une application PHP qui ajoute un ensemble spécifique de fonctionnalités ou de services à WordPress, qui peut être intégrée de manière transparente à WordPress à l'aide de points d'accès et de méthodes fournies par l'API Plugin WordPress..
Cet article vous guidera tout au long du processus de création de votre propre plugin WordPress.
Remarque: Cet article suppose que vous connaissez déjà les fonctionnalités de base de WordPress et de la programmation PHP..
Pour commencer, accédez à wp-content / plugins / sous votre installation WordPress. Pour configurer l’espace de travail, commencez par créer la structure suivante de répertoires et de fichiers vides, comme illustré dans l’image ci-dessous:
Assurez-vous de choisir un nom unique pour le répertoire du plugin et pour le fichier PHP principal, tel que gestionnaire d'avatar et avatar-manager.php dans cet exemple, et mettre tous les fichiers du plugin dans ce répertoire.
Avant de commencer à écrire notre plugin, ouvrez avatar-manager / index.php et ajoutez le code suivant:
Vous pouvez voir ce fichier dans de nombreux endroits de WordPress. C'est un truc simple pour empêcher la navigation dans les répertoires.
Maintenant, il est temps de mettre quelques informations dans notre fichier PHP principal du plugin.
La partie supérieure du fichier PHP principal du plug-in doit contenir un en-tête d'informations de plug-in standard. Cet en-tête permet à WordPress de reconnaître l’existence du plug-in, de l’ajouter à l’écran de gestion du plug-in afin de l’activer, de le charger et d’exécuter ses fonctions; sans l'en-tête, le plugin ne sera jamais activé et ne fonctionnera jamais.
Ouvrir avatar-manager / avatar-manager.php et ajoutez les lignes suivantes:
Les informations minimales que WordPress a besoin de reconnaître notre plugin est le Nom du plugin ligne. Le reste des informations (le cas échéant) sera utilisé pour créer la table des plugins sur l'écran de gestion des plugins. L'ordre des lignes n'est pas important.
Pour que le mécanisme de mise à niveau puisse lire correctement la version de notre plug-in, il est recommandé de choisir un format pour le numéro de version et de le conserver entre les différentes versions..
Le slug de licence doit être un identifiant commun court pour la licence sous laquelle se trouve le plugin et se veut un moyen simple d’expliquer la licence du code..
Pour des raisons de transparence et de compréhension de notre cycle de publication, et pour nous efforcer de maintenir la compatibilité en amont, Avatar Manager sera maintenu autant que possible dans le respect des règles de versioning sémantique..
Les communiqués seront numérotés au format suivant:
Et construit avec les directives suivantes:
Pour plus d'informations sur SemVer, veuillez visiter semver.org.
Il est habituel de suivre l'en-tête standard avec des informations sur les licences pour le plugin. La plupart des plugins utilisent la même licence que celle utilisée par WordPress, à savoir la licence GPLv2 ou une licence compatible avec GPLv2. Pour indiquer une licence GPLv2, incluez les lignes suivantes dans notre plugin:
/ * Copyright © 2013 Cătălin Dogaru Ce programme est un logiciel libre. vous pouvez le redistribuer et / ou le modifier selon les termes de la licence publique générale GNU telle que publiée par la Free Software Foundation; soit la version 2 de la licence, soit (à votre choix) toute version ultérieure. Ce programme est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE GARANTIE; sans même la garantie implicite de QUALITÉ MARCHANDE ou d'ADÉQUATION À UN USAGE PARTICULIER. Voir la licence publique générale GNU pour plus de détails. Vous devriez avoir reçu une copie de la licence publique générale GNU avec ce programme; sinon, écrivez à la Free Software Foundation, Inc., 51 Franklin Street, cinquième étage, Boston, MA 02110-1301, USA. * /
Ensuite, ouvrez avatar-manager / LICENCE et collez-y la version en texte brut de GPLv2.
Après avoir terminé l’étape précédente, vous devriez pouvoir localiser le plug-in Avatar Manager sous l’écran Plugins..
Maintenant, il est temps de faire en sorte que notre plugin fasse réellement quelque chose. Activez-le et ajoutez les lignes de code suivantes au fichier PHP du plugin principal:
Accentsconagua
define ('AVATAR_MANAGER_VERSION', '1.0.0'); define ('AVATAR_MANAGER_PLUGIN_URL', plugin_dir_url (__FILE__)); define ('AVATAR_MANAGER_AVATAR_UPLOADS', 0); define ('AVATAR_MANAGER_DEFAULT_SIZE', 96); le définir() function définit une constante nommée au moment de l'exécution. le plugin_dir_url () fonction obtient l'URL (avec le slash final) pour le plugin __FICHIER__ transmis. La valeur de __FICHIER__ est le chemin complet et le nom du fichier courant. C'est l'une des huit constantes magiques fournies par PHP..
Allons plus loin et initialisons notre plugin:
/ ** * Configure les paramètres par défaut du plug-in et rend Avatar Manager disponible pour la traduction. * * @us load_theme_textdomain () Pour la prise en charge de la traduction / localisation. * @uses plugin_basename () Pour récupérer le nom de base du plugin. * * @since Avatar Manager 1.0.0 * / function avatar_manager_init () // Rend Avatar Manager disponible pour la traduction. load_plugin_textdomain ('avatar-manager', false, dirname (plugin_basename (__FILE__)). '/ languages /'); add_action ('init', 'avatar_manager_init'); le add_action () call accroche une fonction à une action spécifique. le init Cette action est exécutée après le chargement de WordPress, mais avant l’envoi des en-têtes. Également load_plugin_textdomain () appel doit être fait pendant init, sinon, les utilisateurs ne peuvent pas l’accrocher. Mais plus au sujet de ceci plus tard, quand je couvrirai l'internationalisation de notre plugin. le dirname () fonction renvoie le chemin du répertoire parent, alors que plugin_basename () fonction obtient le nom de base du plugin.
Des crochets sont fournis par WordPress pour permettre à un plugin de se connecter au reste de WordPress; c’est-à-dire d’appeler des fonctions du plug-in à des heures précises et de le mettre ainsi en mouvement. Il existe deux types de crochets:
Ensuite, nous allons ajouter les options du plugin. Permettre la personnalisation rend un plugin beaucoup plus flexible pour l'utilisateur.
/ ** * Enregistre les champs de rappel de désinfection et de réglage du plug-in. * * @ utilise register_setting () Pour enregistrer un paramètre et son asservissement *. * @us add_settings_field () Pour enregistrer un champ de paramètres dans une page et une section de paramètres *. * @usus __ () Pour récupérer la chaîne traduite à partir de translate (). * * @since Avatar Manager 1.0.0 * / function avatar_manager_admin_init () // Enregistre le paramètre du plug-in et son rappel de désinfection. register_setting ('discussion', 'avatar_manager', 'avatar_manager_sanitize_options'); // Enregistre le champ des paramètres de téléchargement d'Avatar sous l'écran de discussion // Paramètres. add_settings_field ('avatar-manager-avatar_uploads', __ ('Avatar Uploads', 'avatar-manager'), 'avatar_manager_avatar_uploads_settings_field', 'discussion', 'avatars'); // Enregistre le champ des paramètres de taille par défaut sous l'écran de discussion des paramètres //. add_settings_field ('avatar-manager-default-size', __ ('taille par défaut', 'avatar-manager'), 'avatar_manager_default_size_settings_field', 'discussion', 'avatars'); add_action ('admin_init', 'avatar_manager_admin_init'); le admin_init l'action est déclenchée avant tout autre raccordement lorsqu'un utilisateur accède à la zone d'administration. le register_setting () function enregistre un paramètre et son rappel de désinfection. le add_settings_field () fonction enregistre un champ de paramètres dans une page et une section de paramètres. Nous les avons utilisés pour ajouter nos options de plug-in dans l'écran de discussion des paramètres. le __ () la fonction sera expliquée plus tard, lorsque je couvrirai le processus d'internationalisation.
Avant d'écrire le rappel de désinfection, nous devons définir deux fonctions supplémentaires., avatar_manager_get_default_options () et avatar_manager_get_options ().
/ ** * Retourne les options par défaut du plugin. * * @since Avatar Manager 1.0.0 * * Les options par défaut du plugin @return. * / function avatar_manager_get_default_options () $ options = array ('avatar_uploads' => AVATAR_MANAGER_AVATAR_UPLOADS, 'default_size' => AVATAR_MANAGER_DEFAULT_SIZE); retourne $ options; le avatar_manager_get_default_options () fonction retourne les options par défaut du plugin.
/ ** * Retourne les options du plugin. * * @uses get_option () Pour obtenir les valeurs d'une option nommée. * @uses avatar_manager_get_default_options () Pour récupérer les options par défaut du plugin *. * * @since Avatar Manager 1.0.0 * * @return array Plugin options. * / function avatar_manager_get_options () return get_option ('avatar_manager', avatar_manager_get_default_options ()); le avatar_manager_get_options () fonction récupère les options actuelles du plugin. le get_otpion () la fonction retourne la valeur de l'option spécifiée ou la valeur par défaut si l'option n'est pas dans la base de données.
/ ** * Assainit et valide les options du plugin. * * @us avatar_manager_get_default_options () Pour récupérer les options par défaut du plugin *. * @uses absint () Pour convertir une valeur en un entier non négatif. * * @since Avatar Manager 1.0.0 * * @return array Options de plugin assainies. * / function avatar_manager_sanitize_options ($ input) $ options = avatar_manager_get_default_options (); if (isset ($ input ['avatar_uploads'])) && trim ($ input ['avatar_uploads'])) $ options ['avatar_uploads'] = trim ($ input ['avatar_uploads'])? dix; if (isset ($ input ['default_size'])) && is_numeric (trim ($ input ['default_size']))) $ options ['default_size'] = absint (trim ($ input ['default_size'])); if ($ options ['default_size'] < 1 ) $options['default_size'] = 1; elseif ( $options['default_size'] > 512) $ options ['default_size'] = 512; return $ options;
le avatar_manager_sanitize_options () fonction assainit et valide les options du plugin. le isset () appel détermine si une variable est définie et non NUL. le réduire() la fonction supprime les espaces du début et de la fin d'une chaîne. le is_numeric () function trouve si une variable est un nombre ou une chaîne numérique. le absint () fonction convertit une valeur en un entier non négatif.
Maintenant, il est temps d'ajouter les champs de réglage.
/ ** * Imprime le champ des paramètres de téléchargements Avatar. * * @us avatar_manager_get_options () Pour récupérer les options du plugin. * @uses _e () Pour afficher la chaîne traduite à partir de translate (). * @use vérifié () Pour comparer deux valeurs données. * * @since Avatar Manager 1.0.0 * / function avatar_manager_avatar_uploads_settings_field () // Récupère les options du plugin. $ options = avatar_manager_get_options (); ?>
le avatar_manager_avatar_uploads_settings_field () rappel imprime le champ des paramètres de téléchargement d’avatar. le vérifié() fonction compare deux valeurs données et, si les valeurs sont identiques, ajoute le vérifié attribut à la case à cocher actuelle. le _e () la fonction sera décrite plus tard, quand j'expliquerai le processus d'internationalisation.
/ ** * Imprime le champ des paramètres de taille par défaut. * * @us avatar_manager_get_options () Pour récupérer les options du plugin. * @uses _e () Pour afficher la chaîne traduite à partir de translate (). * * @since Avatar Manager 1.0.0 * / function avatar_manager_default_size_settings_field () // Récupère les options du plugin. $ options = avatar_manager_get_options (); ?>
le avatar_manager_default_size_settings_field () impression de rappel Champ de taille par défaut.
Après avoir ajouté les champs de réglage, vous devriez pouvoir localiser les options du plugin dans l’écran de discussion des paramètres..
La première option détermine si les utilisateurs disposant de faibles privilèges peuvent télécharger une image d'avatar ou non, tandis que la seconde option représente la taille par défaut d'une image d'avatar..
Pour permettre aux utilisateurs de gérer leur avatar, nous devons ajouter une nouvelle section à leur page de profil. Allons plus loin et ajoutons la section Avatar sous l’écran Utilisateur de ton profil:
/ ** * Imprime la section Avatar. * * @us avatar_manager_get_options () Pour récupérer les options du plugin. * @uses get_post_meta () Pour récupérer les champs méta des pièces jointes. * @use remove_filter () Pour supprimer une fonction attachée à une action spécifiée * hook. * @uses _e () Pour afficher la chaîne traduite à partir de translate (). * @use vérifié () Pour comparer deux valeurs données. * @uses get_avatar () Pour récupérer l'avatar d'un utilisateur. * @uses esc_attr () Pour échapper des attributs HTML. * @uses add_query_arg () Pour récupérer une chaîne de requête d'URL modifiée (avec). * @uses self_admin_url () Pour récupérer un lien URL d'administrateur avec le chemin optionnel * ajouté. * @use current_user_can () Pour vérifier si l'utilisateur actuel dispose d'une certaine * capacité. * @uses submit_button () Pour faire écho à un bouton d'envoi, avec le texte fourni et * la classe appropriée. * @usus __ () Pour récupérer la chaîne traduite à partir de translate (). * * @since Avatar Manager 1.0.0 * * * @param array $ profileuser Utilisateur à modifier. * / function avatar_manager_edit_user_profile ($ profileuser) // Récupère les options du plugin. $ options = avatar_manager_get_options (); $ avatar_type = isset ($ profileuser-> avatar_manager_avatar_type)? $ profileuser-> avatar_manager_avatar_type: 'gravatar'; if (isset ($ profileuser-> avatar_manager_custom_avatar)) // Récupère les champs de méta d'une pièce jointe en fonction de l'ID de la pièce jointe. $ custom_avatar_rating = get_post_meta ($ profileuser-> avatar_manager_custom_avatar, '_avatar_manager_custom_avatar_rating', true); $ user_has_custom_avatar = get_post_meta ($ profileuser-> avatar_manager_custom_avatar, '_avatar_manager_is_custom_avatar', true); if (! isset ($ custom_avatar_rating) || vide ($ custom_avatar_rating)) $ custom_avatar_rating = 'G'; if (! isset ($ user_has_custom_avatar) || vide ($ user_has_custom_avatar)) $ user_has_custom_avatar = false; if ($ user_has_custom_avatar) // Supprime la fonction attachée au hook d'action spécifié. remove_filter ('get_avatar', 'avatar_manager_get_avatar'); ?>
le show_user_profile et edit_user_profile les actions aident à la personnalisation de la page de profil utilisateur. le $ profileuser paramètre est un WP_User objet de l'utilisateur en cours de modification. le get_post_meta () La fonction retourne les valeurs des champs personnalisés avec la clé spécifiée à partir de la publication spécifiée. le vide() fonction détermine si une variable est vide. le remove_filter () function supprime une fonction attachée à un crochet de filtre spécifié; il est nécessaire de supprimer notre fonction personnalisée pour récupérer une image d'avatar.
Ensuite, nous allons ajouter un sélecteur d'avatar, un formulaire de téléchargement et un sélecteur de classement pour l'image d'avatar personnalisée de chaque utilisateur..
Le sélecteur d'avatar permet à l'utilisateur de choisir d'utiliser Gravatar ou une image d'avatar personnalisée. Pour l'ajouter, écrivez le code suivant:
le get_avatar () function récupère l'avatar d'un utilisateur qui a fourni un identifiant d'utilisateur ou une adresse électronique. Pour récupérer une image d’avatar personnalisée par un ID utilisateur, nous avons utilisé le avatar_manager_get_custom_avatar () fonction, que nous écrirons plus tard. le current_user_can () function vérifie si l'utilisateur actuel dispose d'une certaine capacité. Normalement, les utilisateurs à faible privilège tels que les abonnés ne sont pas autorisés à télécharger des fichiers; c'est pourquoi nous utilisons le $ options ['avatar_uploads'] variable. le esc_attr () la fonction échappe aux attributs HTML. le self_admin_url () function récupère un lien URL admin avec le chemin optionnel ajouté. le IS_PROFILE_PAGE constante nous indique si nous modifions notre profil ou le profil d'un autre utilisateur. le wp_nonce_url () fonction récupère l'URL avec nonce ajouté à la requête d'URL. Avant de supprimer un avatar, nous demandons à l'utilisateur de confirmer en appelant le showNotice.warn () méthode à la sur clic événement du lien Supprimer qui affiche un avertissement.
Le formulaire de téléchargement permet à un utilisateur de parcourir et de télécharger une image d’avatar personnalisée:
le bouton de soumission() fonction renvoie un bouton d'envoi, avec le texte fourni et la classe appropriée.
Le sélecteur de classement apparaît uniquement lorsqu'un avatar personnalisé est disponible. Pour l'ajouter, écrivez les lignes suivantes:
Il permet à l'utilisateur de choisir une note appropriée pour l'image d'avatar personnalisée utilisée..
Maintenant que nous avons ajouté la section Avatar, il est temps de la personnaliser. De plus, nous écrirons du JS pour changer le codage de la forme; cette étape est nécessaire car nous avons ajouté un contrôle de téléchargement de fichier.
Pour styler notre plugin, ouvrez avatar-manager / avatar-manager.css et écrivez les lignes suivantes:
# profil-page .avatar-manager img margin: 2px 0; alignement vertical: milieu; # profil-page .avatar-manager .delete color: red; rembourrage: 2px; # profil-page .avatar-manager .delete: hover background: red; couleur: #fff; texte-décoration: aucun;
Cela aligne une image d'avatar verticalement avec une radiobox et attribue un style au lien Supprimer en conséquence pour une intégration transparente avec l'interface native de WordPress..
Ensuite, ouvrez avatar-manager / avatar-manager.js et ajoutez le code suivant:
jQuery (document) .ready (function () jQuery ('# votre profil ») .attr (' enctype ',' multipart / form-data ');); le .attr () function définit la valeur d'un ou de plusieurs attributs pour chaque élément correspondant. le enctype attribut spécifie comment les données de formulaire doivent être codées lors de leur envoi au serveur. Nous devons changer sa valeur en multipart / form-data autoriser le téléchargement de fichiers.
La méthode sûre et recommandée d’ajout de scripts et de styles à une page générée par WordPress consiste à wp_enqueue_script () et wp_enqueue_style (). Ces fonctions incluent les scripts et les styles s'ils n'ont pas déjà été inclus, et gèrent en toute sécurité les dépendances.
/ ** * Enqueues des scripts et des styles de plug-in pour les utilisateurs Votre écran de profil. * * @us wp_register_style () Pour enregistrer un fichier de style CSS. * @uses wp_enqueue_style () Pour mettre en file d'attente un fichier de style CSS. * @us wp_register_script () Pour enregistrer un fichier de script JS. * @us wp_enqueue_script () Pour mettre en file d'attente un fichier de script JS. * * @since Avatar Manager 1.0.0 * / function avatar_manager_admin_enqueue_scripts () global $ hook_suffix; if ($ hook_suffix == 'profile.php' || $ hook_suffix == 'user-edit.php') // Enregistre le fichier de style du plugin CSS. wp_register_style ('avatar-manager.css', AVATAR_MANAGER_PLUGIN_URL. 'avatar-manager.css', array (), '1.0.0'); // Fichier de style CSS du plugin Enqueues. wp_enqueue_style ('avatar-manager.css'); // Enregistre le fichier script JS du plugin. wp_register_script ('avatar-manager.js', AVATAR_MANAGER_PLUGIN_URL. 'avatar-manager.js', array ('jquery'), '1.0.0'); // Fichier de script JS du plugin Enqueues. wp_enqueue_script ('avatar-manager.js'); add_action ('admin_enqueue_scripts', 'avatar_manager_admin_enqueue_scripts'); le admin_enqueue_scripts action est la première action liée aux actions des scripts d'administration. Ensuite, la variable globale $ hook_suffix est utilisé pour ajouter nos scripts et styles uniquement sur les pages nécessaires. Avant de mettre un script ou un style en file d'attente, nous devons d'abord l'enregistrer. le wp_register_style () function est un moyen sûr d’enregistrer un fichier de style CSS pour une utilisation ultérieure. la wp_enqueue_style () fonction est utilisée pour le mettre en file d'attente. De même, le wp_register_script () et wp_enqueue_script () les fonctions sont utilisées pour enregistrer et mettre en file d'attente notre fichier de script plug-in JS.
Après cette étape, vous devriez pouvoir localiser les options du plugin dans l’écran User Your Profile..
La première option vous permet de choisir d'utiliser Gravatar ou une image d'avatar auto-hébergée. Le second champ vous permet de parcourir et de télécharger une image d’avatar personnalisée. L'option Notation d'avatar s'affiche uniquement lorsqu'un avatar personnalisé est disponible. Mais plus à ce sujet plus tard, quand nous allons gérer les téléchargements d'avatar.
Ceci termine la première partie de notre tutoriel. J'espère que vous avez apprécié le temps que nous avons passé ensemble et que vous l'avez trouvé utile. Dans la partie suivante, nous allons terminer le plug-in Avatar Manager. nous allons gérer les téléchargements d'avatar et la génération d'images à la demande, internationaliser notre plugin et bien plus encore. Merci d'avoir lu!
