Så här lägger du till medlemssidor för anställda i WordPress

Att visa människorna bakom din webbplats är ett bra sätt att tjäna kundernas förtroende. Tidigare visade vi dig hur man skapar en enkel personallista i WordPress. Några av våra användare ville förlänga sina personallistor genom att lägga till länkar bredvid enskild personal som leder till deras profilsidor. I den här artikeln visar vi hur du lägger till medarbetarprofilsidor i WordPress.

Notera: Denna handledning kräver viss grundläggande kunskaper om WordPress-teman och HTML / CSS. Observera också att eftersom vi kommer att redigera temafiler rekommenderas det att du åtminstone säkerhetskopierar dina temafiler innan du ändrar dem.

Det första du behöver göra är att installera och aktivera plugin-programmet Simple Staff Lists. Lägg till dina anställda genom att besöka Personalmedlemmar »Lägg till nytt. För mer instruktioner om hur du lägger till medarbetare, se denna handledning.

När du har lagt till dina medarbetare kan du visa dem genom att skapa en ny WordPress-sida och lägga till denna kortnummer:

[Enkel personallistan]

Hittills har vi skapat en enkel personallista sida med alla anställda.

Nästa del är att skapa en enda sida för varje anställd för att visa sina fullständiga profiler.

Den enkla personalen listar plugin skapar en anpassad posttyp som heter anställd att lagra personalen profiler. Genom att placera kortnumret på en sida har vi blivit den aktuella sidan till en anpassad posttyp arkivsida för den anställdes posttyp.

I WordPress får varje inlägg en egen enskild sida oavsett vilken posttyp den är lagrad i. Som standard visar plugin inte den enda sidan. I nästa steg kommer vi att ändra vårt WordPress-tema för att visa den enskilda personalsidan.

Först måste du gå till Medarbetare Medlemmar »Mallar. Byt ut mallen som du ser under Personal Loop Mall med den här koden:

 [Staff_loop]     [personal-name-formatted] [personal-position-formaterad] [personal-bioformaterad] [personal-email-link] [/ staff_loop] 

Glöm inte att ersätta example.com med ditt eget domännamn.

Öppna nu din personals lista sida, så ser du att personalen profiler och foton kommer att kopplas till sina enskilda profilsidor. Om du klickar på dessa sidor visas emellertid bara en sida med anställdens namn på den.

Lägga till en personalmedlemsprofilmall i ditt WordPress-tema

För att visa din enda anställd måste du skapa en mall i ditt WordPress-tema för att hantera personalen posttyp. Börja med att skapa en ny fil i WordPress-temakatalogen (wp-innehåll / teman / ditt namn /).

Namnge den här filen enda personal member.php. Använda anpassat posttypnamn med ordet enda, Vi har skapat en enda postmall för personalen anpassad posttyp.

Den här personalen är fortfarande tom, så vi kan fylla den. Öppna ditt temas single.php fil och kopiera klistra in innehållet i single-staff-member.php-mallen.

Ett problem som du kommer att stöta på när du kopierar innehållet i din single.php filen är att vissa teman kan använda innehållsmall i filen single.php. Till exempel använder temat för standard tjugo tretton innehållsskärmar i single.php-filen så här:

Om ditt tema använder malldelar måste du öppna mallfilen (content.php) och kopiera klistra in innehållet i filen single-staff-member.php, ersätta get_template_part-linjen.

Vid denna tidpunkt kommer din single-staff-member.php-fil att vara exakt densamma som din single.php-fil. Nu måste vi förbereda den så att den kan visa fälten från personalen.

Här är vår enda personal member.php filen, den är baserad på Twenty Thirteen single.php-fil. Ta en titt på koden först.

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

I den första delen av koden direkt efter att ha laddat rubriken har vi samlat in data från vår anpassade post till variabler. Sedan har vi använt dessa variabler för att visa fält från den anpassade posttypen.

Det är allt. Du kan behöva justera utseendet på dina profilsidor med hjälp av CSS. Vi har använt denna CSS för att passa personalen bio kring fotot.

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

Vi hoppas att den här artikeln hjälpte till att du lägger till personalsprofilsidor i WordPress. Känn dig fri att leka med mallarna för att få önskat resultat.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för fler WordPress-videotutorials. Du kan också hitta oss på Twitter och Google+.