Share
Les blogs multi-auteurs sont de plus en plus populaires et à bon escient. Créer un contenu régulier et engageant peut souvent être un défi pour un blogueur individuel. Avec plusieurs auteurs, cela peut être beaucoup plus facile et vous permet également de couvrir un plus grand nombre de sujets tirés des connaissances de plusieurs personnes. Sur des sites tels que Wptuts +, vous pouvez lire des articles rédigés par une énorme équipe d'écrivains et de blogueurs. Nous avons tous notre propre style d'écriture et nos personnalités. Comme Wptuts +, sur la plupart des sites multi-auteurs, vous trouverez une jolie petite boîte d'informations sur les auteurs quelque part sur la page. Aujourd'hui, je vais vous montrer comment vous pouvez en créer un pour votre propre site..
WordPress est une plateforme de contenu et de blogs multi-auteurs prête à l'emploi. Tous les outils dont nous avons besoin sont intégrés, nous devons juste savoir comment les utiliser..
Dissimulés dans la barre d'administration de WordPress (une fois connectés), tous les utilisateurs ont accès au lien "Modifier mon profil". Cela vous amène à la page où vous définissez comment votre nom est affiché sur le site, où vous changez votre mot de passe et votre adresse email. C'est également l'endroit où vous pouvez entrer des informations de contact réellement utiles, modernes et actuelles, telles que les informations AIM, Yahoo IM et Google Talk (/ sarcasm). Je sais, parce que je fais la même chose, vous avez toujours ignoré la majeure partie de celle-ci. Si vous n'utilisez pas ces champs, pourquoi les remplir? Notre boîte d'auteur va utiliser ces champs et nous allons les rendre un peu plus utiles!
Il est très facile pour nous de supprimer les méthodes de contact que nous ne souhaitons pas utiliser et de les remplacer par quelque chose d'un peu plus actuel. Alors tout d'abord, vous devez ouvrir votre thème functions.php (ou coller ceci dans un plugin si vous préférez) et mettons-nous au travail.
Accentsconagua
function wptuts_contact_methods ($ contactmethods) // Supprimons ce que nous ne voulons pas perdre ($ contactmethods ['objectif']); unset ($ contactmethods ['yim']); unset ($ contactmethods ['jabber']); // Ajouter des informations utiles $ contactmethods ['twitter'] = 'Nom d'utilisateur Twitter'; $ contactmethods ['facebook'] = 'URL du profil Facebook'; $ contactmethods ['linkedin'] = 'URL du profil public LinkedIn'; $ contactmethods ['googleplus'] = 'URL du profil Google+'; return $ méthodesde contact; add_filter ('user_contactmethods', 'wptuts_contact_methods'); Donc, la première chose que nous faisons est de supprimer des champs assez inutiles, ensuite nous ajoutons simplement les champs supplémentaires que nous voulons. La première partie doit être unique pour le texte; vous pouvez entrer ce que vous voulez, car c'est ce qui sera affiché à côté du champ sur la page de profil..
Si vous revenez sur votre page de profil modifié, vous devriez voir maintenant que vos champs supplémentaires sont apparus et que les champs inutiles ont disparu..
Maintenant, nous avons un endroit où nous pouvons stocker nos informations supplémentaires que nous pouvons utiliser pour travailler avec les données et comment les afficher au début de notre site..
Donc, nous voulons montrer une photo de notre auteur, une petite description / bio et des liens vers des sites de médias sociaux.
WordPress gère les photos du profil de l'utilisateur à l'aide de Gravatar. Nous voulons utiliser la fonction WordPress get_avatar () ceci récupère le Gravatar pour l'ID utilisateur ou l'adresse email spécifié.
Vous pouvez spécifier la taille de l'image et aussi quoi faire si l'utilisateur n'a pas de Gravatar. Le dernier paramètre vous permet de définir le texte de remplacement pour l'avatar. Pour l'instant nous allons utiliser le code suivant:
Cela tire le Gravatar à 70px x 70px et utilise l'ID utilisateur de l'auteur pour le poste actuel.
Nous souhaitons également extraire certaines informations de base du profil utilisateur, telles que le nom d'affichage et la description de l'utilisateur. Regardons un exemple basique.
"> →',' tuts_plus '), get_the_author ()); ?>
Le code ci-dessus donne un bon point de départ. Ouvrez votre single.php (J'utilise Twenty Twelve pour les besoins de cet article) et collez le code ci-dessus dans la boucle mais au-dessus de votre modèle de commentaires. (Ligne 25 si vous utilisez également Twenty Twelve.) Voyons ce que nous faisons maintenant..
Nous avons déjà parlé de la get_avatar () fonction mais plus bas, vous verrez la get_the_author () une fonction. Ceci récupère simplement l'auteur du post. Dans notre exemple, nous inscrivons le nom de l'auteur en haut de la zone de l'auteur. Il affichera tout ce que l'utilisateur a sélectionné comme "Nom public en tant que". Vous pouvez simplement utiliser:
Cependant, je préfère échapper à toutes mes sorties et laisser l’option aux traducteurs..
Ensuite nous voyons get_the_author_meta (). Nous allons utiliser cela un peu. Cette fonction renvoie les métadonnées souhaitées pour l'utilisateur donné. Si nous l'utilisons dans une boucle, nous n'avons pas besoin de spécifier l'ID utilisateur. Toutefois, il peut être utilisé en dehors de la boucle en transmettant l'ID utilisateur. En utilisant cette fonction, vous pouvez obtenir une gamme d'informations. Dans l'exemple ci-dessus, nous l'utilisons pour extraire la description, qui correspond à la boîte de biographie que vous pouvez compléter sur la page de profil de l'utilisateur. Comme pour le nom de l'auteur, j'échappe à la sortie pour m'assurer que nos auteurs n'ont pas caché les méchants!
Enfin, nous avons un lien en bas qui mène à notre page d’auteur. Nous utilisons le get_author_posts_url () fonction pour nous donner simplement l'URL. WordPress crée automatiquement des pages d'auteur pour tous les utilisateurs du site qui ont publié des articles..
Ajoutons du CSS et voyons à quoi ça ressemble:
.média, .bd débordement: caché; _ débordement: visible; zoom: 1; .media img, .media .img float: left; marge droite: 10px; .media img display: block; .media .imgExt float: right; marge gauche: 10px; .profile margin-top: 10px; rembourrage: 20px 10px; bordure: solide mince # c6c6c6; -webkit-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0,75); -moz-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0,75); boîte-ombre: 7px 7px 5px rgba (50, 50, 50, 0,75); .profile-links padding: 5px 0;
Nous avons donc une boîte de base, mais qu'en est-il de tous les champs supplémentaires que nous avons ajoutés? Nous pouvons utiliser le get_the_author_meta () fonction pour récupérer ces champs personnalisés comme nous l’avons fait avec la description. Voyons ensemble l'exemple suivant, qui remplace notre précédente div "profile-links":
"> →',' tuts_plus '), get_the_author ()); ?>
- ">
- ">
- ">
- ">
Nous avons créé une liste non ordonnée et chaque élément de la liste constituera nos champs supplémentaires que nous avons ajoutés au début de l'article. Premièrement, nous effectuons une vérification grossière pour nous assurer qu’une valeur est entrée pour chacun d’entre eux, car nous ne voulons pas que des liens apparaissent qui ne fassent rien. Ensuite, nous créons un lien en fonction des informations entrées dans le profil de l'utilisateur. Comme vous pouvez le voir dans l'exemple, nous formons le lien en utilisant le même get_the_author_meta () fonction, mais en fonction de ce que nous produisons, nous utilisons une fonction de validation différente. Pour le lien Twitter, nous entrons seulement un nom d'utilisateur et ajoutons qu'à notre lien, nous supprimons tout code HTML à l'aide de wp_kses () pour les autres, nous entrons des URL de profil complet dans notre page de profil que nous utilisons esc_url () pour s'assurer qu'ils sont correctement formés URL. Je vous ai montré deux façons différentes de le faire afin que vous puissiez voir à quel point il peut être flexible.
En ajoutant un peu plus de CSS, nous pouvons le nommer et nous avons presque terminé!
.liens sociaux li padding: 5px; affichage: en ligne; style de liste: aucun; retrait du texte: -9999px; float: gauche; .social-links li a background-position: 0 0; répétition de fond: non répétée; largeur: 16px; hauteur: 16px; bloc de visualisation; .twitter-link background: url (images / twitter.png) no-repeat; .facebook-link background: url (images / facebook.png) no-repeat; .linkedin-link background: url (images / linkedin.png) no-repeat; .google-link background: url (images / google-plus.png) no-repeat;
Le CSS que j'utilise à des fins de démonstration uniquement, vous pouvez bien sûr faire ce que vous aimez avec votre propre style!
Maintenant que nous avons notre boîte de base, nous pouvons ajouter toutes sortes de fonctionnalités supplémentaires. Nous allons créer une carte de profil LinkedIn dynamique en survolant l'icône LinkedIn..
Tout d'abord, nous devons créer des fonctions. Nous devons mettre en file d'attente la bibliothèque JavaScript de LinkedIn sur nos articles de blog et nos pages d'auteurs (pour plus d'informations à ce sujet plus tard!).
fonction wptuts_linkedin_js () if (is_single () || is_author ()): wp_enqueue_script ('linkedin', '//platform.linkedin.com/in.js', null, null, true); fin si; add_action ('wp_enqueue_scripts', 'wptuts_linkedin_js'); Ajoutez le code ci-dessus à votre thème functions.php ou partout où vous avez ajouté le code pour changer vos méthodes de contact. Cela garantira que le code JavaScript requis est chargé, mais uniquement sur les pages où il est requis..
Ensuite, nous allons créer une petite fonction pour exécuter la fonctionnalité de survol en fonction de l'auteur que nous examinons:
fonction wptuts_linkedin ($ author) $ authorinfo = get_user_meta ($ author); $ linkedin = $ authorinfo ['linkedin'] [0]; if (isset ($ linkedin)):?>La première chose que vous devriez remarquer est que nous devons en fait passer un paramètre à cette fonction lorsque nous l'appelons. Nous voulons transmettre l'ID utilisateur de l'auteur pour lequel nous souhaitons créer la carte de survol. Essentiellement, nous obtenons les métadonnées de l'utilisateur à l'aide de
get_user_meta ()nous extrayons ensuite l'URL de LinkedIn que nous avons créée dans la première moitié de l'article. Ensuite, ajoutez simplement cette variable dans notre JavaScript LinkedIn afin qu’elle renvoie la bonne carte de survol d’utilisateur. Voici la mise à jour single.php extrait:"> →',' tuts_plus '), get_the_author ()); ?>
- ">
- ">
- ">
Comme vous pouvez le constater, nous appelons notre fonction LinkedIn en utilisant
wptuts_linkedin (get_the_author_meta ('ID'))ceci passe par l'ID utilisateur de l'auteur correct à utiliser dans notre fonction. Quelques ajustements CSS simples pour le faire apparaître correctement:.linkedin-link text-indent: 0! important;Comme vous pouvez le voir maintenant, nous avons notre boîte d'auteur avec une belle carte de survol pour notre profil LinkedIn!
Page auteur
Il est souvent agréable de montrer à cet auteur une boîte en haut de la page d'archive d'un auteur. Twelve Twelve fait déjà une partie du travail pour nous author.php. Donc, nous pouvons ajouter ce que nous avons appris ci-dessus pour ajouter nos informations supplémentaires.
- ">
- ">
- ">
Conclusion
Donc là nous l'avons. Vous savez maintenant comment modifier vos méthodes de contact, comment extraire différentes informations d'un profil d'utilisateur et les afficher dans les messages de leur blog. Il y a tellement de choses que vous pouvez faire en fonction de vos objectifs. Essayez d'ajouter un lien sur le site Web de l'utilisateur, d'afficher ses derniers Tweets, d'extraire un historique de validation de GitHub. les options sont infinies. Tout le code final peut être trouvé ci-dessous.
Icônes de médias sociaux vectorielles par IconDock.com & Double-J Design
URL: http://icondock.com/free/vector-social-media-icons
