Comment ajouter des pages de profil de membre du personnel dans WordPress

Présenter les personnes derrière votre site Web est un excellent moyen de gagner la confiance de vos clients. Auparavant, nous vous avons montré comment créer une liste de personnel simple dans WordPress. Certains de nos utilisateurs souhaitaient élargir leur liste de personnel en ajoutant des liens à côté de chaque membre du personnel menant aux pages de leur profil. Dans cet article, nous allons vous montrer comment ajouter des pages de profil de membre du personnel dans WordPress..

Remarque: Ce tutoriel nécessite des connaissances de base sur les thèmes WordPress et HTML / CSS. Notez également que, comme nous allons modifier les fichiers de thème, il est vivement recommandé de sauvegarder au moins vos fichiers de thème avant de les modifier..

La première chose à faire est d’installer et d’activer le plugin Simple Staff Lists. Ajoutez vos membres du personnel en visitant Membres du personnel »Ajouter un nouveau. Pour plus d'instructions sur l'ajout de membres du personnel, consultez ce tutoriel..

Une fois que vous avez ajouté vos membres du personnel, vous pouvez les afficher en créant une nouvelle page WordPress et en ajoutant ce shortcode:

[simple-staff-list]

Jusqu'à présent, nous avons créé une simple page de liste du personnel, répertoriant tous les membres du personnel..

La partie suivante consiste à créer une page unique pour que chaque membre du personnel affiche son profil complet..

Le plugin simple Staff lists crée un type de message personnalisé appelé membre du staff pour stocker les profils des membres du personnel. En plaçant le shortcode sur une page, nous avons transformé cette page en une page d'archive de type de message personnalisée pour le type de message membre du personnel..

Dans WordPress, chaque publication obtient sa propre page, quel que soit le type de publication dans lequel elle est stockée. Par défaut, le plug-in n'affiche pas cette page unique. Dans les prochaines étapes, nous modifierons notre thème WordPress pour afficher la page de membre unique du personnel..

Vous devez d'abord aller à Membres du personnel »Modèles. Remplacez le modèle que vous voyez sous le Modèle de boucle de personnel avec ce code:

 [staff_loop]     [nom-personnel-formaté] [personnel-position-formaté] [personnel-bio-formaté] [staff-email-link] [/ staff_loop] 

N'oubliez pas de remplacer exemple.com par votre propre nom de domaine..

Ouvrez maintenant votre page de liste du personnel et vous verrez que les profils et les photos du personnel seront liés à leurs pages de profil individuelles. Cependant, cliquer sur ces pages ne vous montrera qu'une page avec le nom du membre du personnel..

Ajout d'un modèle de profil de membre du personnel dans votre thème WordPress

Pour afficher votre seul membre du personnel, vous devez créer un modèle dans votre thème WordPress afin de gérer le type de publication de membre du personnel. Commencez par créer un nouveau fichier dans votre répertoire de thèmes WordPress (wp-content / themes / yourthemename /).

Nommez ce fichier single-staff-member.php. Utilisation du nom de type d'article personnalisé avec le mot unique, nous avons créé un modèle de publication unique pour le type de publication personnalisé des membres du personnel.

Ce modèle de membre du personnel est toujours vide, nous allons donc le remplir. Ouvrez votre thème single.php copier et coller coller son contenu dans le template single-staff-member.php.

Un problème que vous rencontrerez lors de la copie du contenu de votre single.php fichier est que certains thèmes peuvent utiliser un modèle de contenu dans le fichier single.php. Par exemple, le thème par défaut Twenty Treize utilise des modèles de contenu dans un fichier single.php, comme suit:

Si votre thème utilise des parties de modèle, vous devez ouvrir le fichier de modèle (content.php) et copier-coller son contenu dans votre fichier single-staff-member.php en remplaçant la ligne get_template_part..

À ce stade, votre fichier single-staff-member.php sera exactement le même que votre fichier single.php. Maintenant, nous devons le préparer afin qu’il puisse afficher les champs des membres du personnel..

Voici notre single-staff-member.php fichier, il est basé sur le fichier single.php de Twenty Thirteen. Regardez d'abord le code.

 ';  else $ t_photo_url = "; $ t_photo =";  $ email_mailto = '' .antispambot ($ email). ''; ?> 
            
Facebook | Gazouillement
      

Dans la première partie du code, juste après le chargement de l'en-tête, nous avons rassemblé les données de notre publication personnalisée dans des variables. Ensuite, dans la boucle, nous avons utilisé ces variables pour afficher les champs du type de message personnalisé..

C'est tout. Vous devrez peut-être ajuster l'apparence de vos pages de profil à l'aide de CSS. Nous avons utilisé ce CSS pour adapter la biographie du membre du personnel autour de la photo.

 img.staff-member-page-photo float: left; marge: 5px;  

Nous espérons que cet article vous a aidé à ajouter des pages de profil de membre du personnel dans WordPress. N'hésitez pas à jouer avec les modèles pour obtenir le résultat souhaité.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour plus de tutoriels vidéo sur WordPress. Vous pouvez aussi nous trouver sur Twitter et Google+.