Profielpagina's voor medewerkers toevoegen in WordPress

De presentatie van de mensen achter uw website is een geweldige manier om klantenvertrouwen te winnen. Eerder hebben we u laten zien hoe u een eenvoudige personeelslijst kunt maken in WordPress. Sommige van onze gebruikers wilden hun personeelslijst uitbreiden door links toe te voegen naast individuele medewerkers die naar hun profielpagina's gingen. In dit artikel laten we u zien hoe u profielpagina's voor personeel toevoegt in WordPress.

Notitie: Deze tutorial vereist enige basiskennis van WordPress-thema's en HTML / CSS. Houd er ook rekening mee dat, aangezien we themabestanden gaan bewerken, het ten zeerste wordt aanbevolen dat u ten minste een back-up maakt van uw themabestanden voordat u er wijzigingen in aanbrengt.

Allereerst moet u de plug-in Simple Staff Lists installeren en activeren. Voeg uw medewerkers toe door te bezoeken Medewerkers »Nieuw toevoegen. Raadpleeg deze zelfstudie voor meer instructies over het toevoegen van personeelsleden.

Nadat u uw medewerkers hebt toegevoegd, kunt u ze weergeven door een nieuwe WordPress-pagina te maken en deze shortcode toe te voegen:

[Eenvoudige-staff-list]

Tot nu toe hebben we een eenvoudige personeelslijstpagina gemaakt met alle personeelsleden.

Het volgende deel is om een ​​enkele pagina te maken voor elk personeelslid om hun volledige profielen weer te geven.

De plug-in voor eenvoudige personeelstabellen maakt een aangepast berichttype met de naam personeelslid om medewerkersprofielen op te slaan. Door de shortcode op een pagina te plaatsen, hebben we die pagina omgezet in een aangepaste archiefpagina van het posttype voor het posttype van het personeelslid.

In WordPress krijgt elk bericht zijn eigen enkele pagina, ongeacht het berichttype waarin het is opgeslagen. Standaard toont de plug-in die ene pagina niet. In de volgende stappen zullen we ons WordPress-thema wijzigen om de pagina voor één personeelslid weer te geven.

Eerst moet je gaan Personeelsleden »Sjablonen. Vervang de sjabloon die u ziet onder de Staff Loop-sjabloon met deze code:

 [Staff_loop]     [personeelsnaam-geformatteerd] [personeels-positie-geformatteerd] [personeel-bio-geformatteerd] [personeel-e-mail-link] [/ staff_loop] 

Vergeet niet om example.com te vervangen door uw eigen domeinnaam.

Open nu uw personeelslijstpagina en u zult zien dat de personeelsprofielen en foto's worden gekoppeld aan hun individuele profielpagina's. Als u echter op deze pagina's klikt, wordt alleen een pagina weergegeven met de naam van het personeelslid erop.

Een sjabloon voor personeelsleden toevoegen aan uw WordPress-thema

Om uw enige medewerker weer te geven, moet u een sjabloon in uw WordPress-thema maken om het posttype van het personeelslid af te handelen. Begin met het aanmaken van een nieuw bestand in je WordPress themadirectory (wp-content / themes / yourthemename /).

Geef dit bestand een naam single-personeel-member.php. Aangepaste berichttypenaam gebruiken met het woord single, we hebben een enkele berichtsjabloon gemaakt voor het aangepaste berichttype van het personeelslid.

Deze medewerkerssjabloon is nog steeds leeg, dus laten we deze vullen. Open uw thema's single.php file en copy plak de inhoud in single-staff-member.php template.

Een probleem dat u tegenkomt bij het kopiëren van de inhoud van uw single.php bestand is dat sommige thema's inhoudsjabloon kunnen gebruiken in het single.php-bestand. Het standaard Twenty Thirteen-thema gebruikt bijvoorbeeld inhoudssjablonen in single.php-bestanden als volgt:

Als uw thema sjabloondelen gebruikt, moet u het sjabloonbestand (content.php) openen en de inhoud ervan in het bestand single-staff-member.php plakken, waarbij de regel get_template_part wordt vervangen.

Op dit punt zal uw single-staff-member.php bestand exact hetzelfde zijn als uw single.php bestand. Nu moeten we het voorbereiden, zodat het de velden van stafleden kan weergeven.

Hier is onze single-personeel-member.php bestand, het is gebaseerd op het single.php-bestand van Twenty Thirteen. Bekijk eerst de code.

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

In het eerste deel van de code direct na het laden van de header hebben we gegevens uit onze aangepaste post verzameld in variabelen. Vervolgens hebben we binnen de lus die variabelen gebruikt om velden weer te geven van het aangepaste berichttype.

Dat is alles. Mogelijk moet u het uiterlijk van uw profielpagina's aanpassen met behulp van CSS. We hebben deze CSS gebruikt om het personeelslid bio rond de foto te plaatsen.

 img.staff-member-page-photo float: links; margin: 5px;  

We hopen dat dit artikel u heeft geholpen profielpagina's voor medewerkers in WordPress toe te voegen. Voel je vrij om met de sjablonen te spelen om het gewenste resultaat te krijgen.

Als je dit artikel leuk vond, abonneer je dan op ons YouTube-kanaal voor meer tutorials over WordPress-video's. U kunt ons ook vinden op Twitter en Google+.