Hur man skapar en personalförteckning i WordPress (med medarbetarprofiler)

Under åren har vi hjälpt otaliga användare att bygga webbplatser, och en funktion som konsekvent är värdefull är en personalförteckning. Oavsett om du driver ett lokalt företag eller ett konsultföretag, låter en medarbetarförteckning potentiella kunder och klienter se ansiktena bakom ditt varumärke.

I den här artikeln visar vi hur du skapar en personalförteckning på din WordPress-webbplats.

Vi har tagit fram 2 sätt att göra detta på: använda en sidbyggare och ett dedikerat plugin för företagsförteckningar. Det du väljer beror till stor del på storleken på ditt företag och vad du vill göra med din personalförteckning.

Varför skapa en personalförteckning på din WordPress-webbplats?

Många WordPress-företagswebbplatser kan dra nytta av att lägga till en personalförteckning. Det är ett utmärkt sätt att knyta an till din publik och bygga förtroende.

Till exempel kan en lokal butik visa upp sin vänliga personal, vilket får kunderna att känna sig välkomna. Konsultföretag kan lyfta fram sitt teams kvalifikationer och övertyga potentiella kunder om att de har rätt kompetens för jobbet.

Även utbildningswebbplatser kan ha nytta av en personalförteckning. Tänk på en universitetswebbplats som inkluderar en förteckning över professorer med deras kontaktinformation och expertområden. Detta kan vara till stor hjälp för studenter som försöker hitta rätt fakultetsmedlem.

Med det i åtanke, låt oss titta på 2 nybörjarvänliga sätt att lägga till en personalförteckning på din WordPress-webbplats. Du kan använda snabblänkarna nedan för att hoppa till din föredragna metod:

• Metod 1: Skapa en enkel personalförteckning med SeedProd (för små team)
• Method 2: Use Business Directory Plugin (For Large Teams)

Metod 1: Skapa en enkel personalförteckning med SeedProd (för små team)

Den här metoden är perfekt om du bara har upp till 20 anställda och vill skapa en anpassad personal sida för att visa upp dem.

Här kommer vi att använda SeedProd, den bästa drag-and-drop-sidbyggarpluginen för att designa anpassade sidor och teman. Den erbjuder mycket mer flexibilitet, funktioner och tillägg än standardredigeraren i WordPress.

SeedProd inkluderar också ett dedikerat block för 'Teammedlem', som låter dig bygga en visuellt tilltalande personalförteckning.

För mer information om SeedProds funktioner och prissättning, kolla in vår omfattande SeedProd-recension.

Notera: Inte ett fan av SeedProd? Du kan också använda Thrive Architect för att skapa en anpassad sida med en personalförteckning.

Steg 1: Installera och aktivera SeedProd

Innan vi börjar måste du installera och aktivera SeedProd-pluginet. Vi kommer att använda Pro-versionen i den här handledningen, som låser upp ytterligare mallar och block, inklusive ‘Teammedlem’, för vår personalförteckning.

Om du är ny på att installera plugins kan du läsa vår guide om hur man installerar WordPress-plugins.

När det har aktiverats, navigera till SeedProd » Inställningar i din WordPress-admin och ange din licensnyckel från ditt SeedProd-konto. Efter att ha angett nyckeln, klicka på 'Verifiera nyckel' för att aktivera Pro-funktionerna.

Steg 2: Välj en mall för landningssida

Nu skapar vi en ny landningssida specifikt för din personalförteckning. Gå till SeedProd » Landningssidor och klicka på ‘Lägg till ny landningssida.’

SeedProd erbjuder olika fördesignade mallar organiserade efter kampanjtyper som 'kommande' eller '404-sidor'. Du kan filtrera mallar baserat på dessa kategorier med hjälp av flikarna högst upp på skärmen.

Håll bara muspekaren över en mall för att förhandsgranska den och klicka på förstoringsglaset för en närmare titt. När du hittar en mall du gillar, klicka på bockikonen för att välja den.

För det här exemplet kommer vi att använda mallen 'Wealth Sales Page' och omvandla den till en lista över personal.

Ge sedan din landningssida ett beskrivande namn. SeedProd kommer automatiskt att generera en URL baserat på denna titel, men du kan anpassa den efter dina önskemål.

När du är nöjd med sidans namn och vald mall, klickar du helt enkelt på ‘Spara och börja redigera sidan’ för att börja bygga din personalförteckning.

Steg 3: Designa din anpassade sida

SeedProd kommer nu att starta gränssnittet för temabyggaren. Du kommer att se en liveförhandsgranskning av din front-end-mall på höger sida och blockinställningar till vänster. Här kan du anpassa sidans design efter dina behov.

Du kan ta en titt på dessa guider nedan för en mer detaljerad förklaring av sidbyggaren:

• Hur man skapar en landningssida med WordPress
• Hur man skapar en viral väntelista landningssida i WordPress
• Hur man skapar en squeeze page i WordPress som konverterar

I den här handledningen har vi ändrat en del av texten för att sidan ska se mer ut som en personalförteckning. Vi har också tagit bort några av blocken för att ge plats åt personalprofilerna.

Steg 4: Lägg till och anpassa teammedlemsblocket

För att lägga till sektionen för personalförteckningen, använd sökfältet i blocksektionen till vänster och välj blocket ‘Kolumn’. Detta gör att du kan visa flera personalmedlemmar på ett ställe. När du hittar det, dra och släpp bara det blocket där det ser bäst ut.

Välj nu en kolumnlayout.

Detta beror på hur många medarbetare du vill visa upp.

Därefter ser du alla block som erbjuds av SeedProd. Några exempel inkluderar en nedräkningstimer, en progressbar, en roterande testimonial-slider och mer.

Här letar du efter blocket ‘Teammedlem’. Dra och släpp helt enkelt detta block i var och en av kolumnerna.

Kanske räcker inte en kolumn för att visa alla dina teammedlemmar. Om så är fallet kan du helt enkelt kopiera och klistra in den.

För att göra det, för muspekaren över kolumnblocket tills den blå färgen visas runt alla block. Klicka sedan på knappen 'Duplicera rad' i verktygsfältet.

SeedProd kommer automatiskt att visa din duplicerade rad under den ursprungliga.

Nu kan du börja lägga till information för varje personalmedlem.

Låt oss börja med att lägga till en bild. För att göra detta, klicka på ett Team Member-block och välj 'Använd din egen bild' i sidofältet för blockinställningar.

Mediebiblioteket öppnas nu.

Välj en bild. Klicka sedan på 'Välj'.

När du är klar kan du anpassa fler bildinställningar.

Till exempel kan du infoga alt-text för bilder, anpassa bredden och/eller ändra bildens position från topp till vänster eller höger.

Om du skrollar ner kan du ändra standardnamnet, rubrikens tagg (till exempel från H1 till stycke) och justeringen av namnet.

Med SeedProd kan du också justera hur namnet visas beroende på om sidan med personalförteckningen visas på mobilen, datorn eller surfplattan.

Nästa är beteckning och beskrivning.

Beteckningen låter dig infoga personalens jobbtitel.

Å andra sidan är beskrivningen där du kan infoga viktig information om den anställde. Förutom vad personen gör, kanske du också vill ange deras kontaktinformation (som e-postadress eller företagets telefonnummer).

Precis som namnet, kan du justera layouten för denna beteckning och beskrivning baserat på var personalförteckningssidan visas.

När du går längre ner hittar du inställningar för att anpassa Teammedlem-blockets design.

Du kan till exempel ändra de rundade kanterna på bilden och aktivera en separator mellan bilden och personens beskrivning.

Om det behövs kan du lägga till medarbetarens sociala medier-information. Som standard lägger SeedProd till sociala ikoner för Facebook och Twitter, men du kan också infoga andra som är relevanta för din verksamhet, som LinkedIn.

För att göra det, klicka bara på '+ Lägg till nytt objekt'.

Sedan ser du en lista med inställningar för att anpassa sociala ikoner.

Klicka här på bildsymbolen för att ändra sociala ikonen.

Ikonbiblioteket öppnas nu.

Sök efter din önskade plattform för sociala medier och klicka på '+' -knappen för att använda den.

Bläddra nu lite ner för att lägga till sociala medier-titeln och personens sociala länk.

Du kan också ändra ikonernas färger.

I det här skedet kan du gå ner i inställningssidofältet.

Det här är där du kan ändra storlek, justering, färger och form på alla sociala ikoner.

Om du vill anpassa Team Member-blocket ytterligare, byt till fliken 'Avancerat'.

Här hittar du fler inställningar för att ändra blockets design. Du kan till exempel anpassa marginaler och utfyllnad, lägga till en skuggeffekt, aktivera CSS-animationer och mer.

Allt du behöver göra nu är att upprepa samma steg med resten av dina personalprofiler.

När du är nöjd med det slutliga utseendet på din personalförteckningssida, klickar du helt enkelt på knappen 'Spara' för att spara dina framsteg.

Slutligen, för att göra din personalförteckningssida live på din webbplats, klicka på 'Publicera'-knappen.

Det var allt! Din personalförteckning är nu igång med SeedProd.

Här är hur vår ser ut på vår demosida:

Metod 2: Använd Business Directory Plugin (för stora team)

Om du har ett litet team kan metod 1 räcka. Men för större team kan det bli överväldigande för besökare att se dussintals profiler på en enda sida.

Det är här ett dedikerat plugin för personalförteckning kommer väl till pass. Vi kommer att använda den kostnadsfria versionen av Business Directory Plugin.

Detta plugin låter dig skapa en dedikerad personalförteckning på din WordPress-webbplats, komplett med en sökfält, filter och individuella profilsidor för varje medarbetare. Du kan också använda det för att skapa andra typer av förteckningswebbplatser.

Med det sagt kan du också uppgradera till premium Business Directory Plugin. Det ger dig tillgång till proffsfunktioner som betalningsgateways för betalda kataloger, premiumteman, betyg/recensioner och mer.

För mer information, kolla in vår recension av Business Directory Plugin.

Steg 1: Installera och konfigurera Business Directory-pluginet

Först måste du installera och aktivera Business Directory-pluginet. Du kan läsa vår guide om hur man installerar ett WordPress-plugin för mer information.

När den har aktiverats, gå till Directory » Directory Content och sedan ‘Form Fields.’ Här ser du de fördefinierade fälten som du kommer att använda för att infoga din personalinformation senare, som beskrivningar, webbplatser, telefonnummer och adresser.

Dessa fält är en bra utgångspunkt, men du kan anpassa dem ytterligare. Låt oss klicka på 'Lägg till nytt formulärfält' för att skapa nya fält.

Låt oss börja med fältassociationen. Som standard lämnar plugin för personalförteckning det som Post Metadata, vilket innebär att fältet visas som ett anpassat fält under huvudredigeringsområdet i blockredigeraren. Vi lämnar detta alternativ som det är.

Du kan också ändra fälttypen från text till radioknappar, länkar till sociala medier, kryssrutor och mer beroende på vilken information du vill samla in.

Ange sedan en tydlig etikett för varje fält (som 'LinkedIn-profil'). Du kan också lägga till en valfri beskrivning för att guida användarna genom processen att fylla i den.

För fält som kräver specifika dataformat kan du ställa in en fältvalidering för att säkerställa att korrekt information anges.

Det finns flera alternativ att välja mellan, som e-postadresser, URL:er och telefonnummer.

Nedan kan du göra vissa fält obligatoriska genom att markera rutan 'Krävs'. Detta kan vara användbart för väsentlig information.

I 'Field Display Options' kan du styra var fältet visas. Till exempel kan du välja om det gäller alla katalogkategorier eller bara specifika, om endast administratörer kan redigera dem, eller om fältvärdet ska döljas på front end.

När du har anpassat fältinställningarna, fortsätt och scrolla hela vägen ner.

Klicka sedan på ‘Lägg till fält’ för att spara dina ändringar.

Upprepa gärna detta steg tills du har skapat de fält du behöver för din personalförteckningslista.

Tillbaka i menyn Form Fields kan du ta bort alla fördefinierade fält som inte gäller för din personalförteckning.

Håll helt enkelt muspekaren över det oönskade fältet och klicka på ‘Ta bort.’

Gå sedan till fliken 'Kategorier'. Du kommer att se en standardkategori som heter 'Allmänt'.

För vår personalförteckning, låt oss byta namn på detta till något mer beskrivande, som 'Anställd'. Detta kommer att kategorisera alla dina listor i personalförteckningen.

För att göra detta, klicka på ‘Snabbreducera’.

Ändra sedan namnet från Allmänt till Anställd.

Glöm inte att ändra sluggen också och klicka på ‘Uppdatera kategori.’

Om ditt företag har flera avdelningar och du vill organisera dina listor ytterligare, kan du skapa olika kategorier genom att klicka på ”Lägg till ny kategori”.

En popup-ruta visas då. Fyll här bara i kategorinamnet och överordnad kategori (om tillämpligt). Klicka sedan på ‘Lägg till ny kategori’.

Byt nu till fliken 'Planer'. Eftersom vi fokuserar på att visa upp ditt team och inte skapa en betald företagsförteckning, bör du ta bort alla onödiga standardalternativ för betalda planer.

Håll bara muspekaren över en plan och klicka på 'Ta bort'.

När det gäller gratislistningen kommer vi bara att lämna den som den är eftersom vi inte kan ta bort den.

Steg 2: Skapa din medarbetarkatalogssida

Vid någon tidpunkt kan du se ett meddelande som säger: "Business Directory Plugin kräver en sida med kortkoden [businessdirectory] shortcode för att fungera korrekt. Du kan skapa den här sidan själv eller låta Business Directory göra det åt dig automatiskt."

Vi rekommenderar att du klickar på ‘Skapa nödvändiga sidor åt mig’ för en snabb och enkel installation. Den här katalogssidan kommer automatiskt att anpassa sin design till ditt nuvarande WordPress-tema.

Som standard kommer pluginet att skapa en sida som heter ‘Business Directory’, vilket inte är korrekt för vad vi skapar.

För att ändra den här sidan, navigera till Sidor i WordPress-instrumentpanelen och hitta katalogposten. Håll sedan muspekaren över den och klicka på 'Redigera'.

I blockredigeraren, byt helt enkelt namn på sidan till något som ‘Personalregister’ eller något annat som bättre återspeglar dess syfte.

Du kan också lägga till ytterligare block för att förbättra sidans visuella utseende. Men se till att lämna kortkoden [businessdirectory] som den är.

Fortsätt gärna att anpassa sidan, som att ändra färgschemat eller teckensnitten för att få sidan att sticka ut.

Klicka slutligen på 'Uppdatera' för att spara dina ändringar.

Steg 3: Skapa din personalförteckning

Nu när allt är inställt, låt oss skapa de enskilda listningarna för personalmedlemmar. Gå till Katalog » Kataloginnehåll och öppna fliken 'Listningar'. Klicka på 'Lägg till ny listning' för att börja.

Du kommer till blockredigeraren med anpassade fält från Business Directory-pluginet. I avsnittet Titel, ange personalens namn eller smeknamn.

I det dedikerade avsnittet nedan kan du lägga till en detaljerad beskrivning av deras roll och expertis. Denna beskrivning kan vara längre eftersom den endast kommer att visas på deras individuella profilsida, inte i katalogen.

Bläddra ner till 'Fält / Bilder för förteckning' och använd de anpassade fälten du skapade eller modifierade tidigare för att fylla i personalmedlemmens information.

Detta kan inkludera kontaktuppgifter eller länkar till sociala medier.

Växla nu till fliken ‘Bilder’.

Här kan du ladda upp en bild för personalprofilen från ditt mediabibliotek eller din dator.

När det är gjort, låt oss navigera till fliken 'Listning' i inställningssidofältet. I avsnittet 'Katalogkategorier', markera rutan bredvid 'Anställd' eller den kategori du skapade tidigare.

Du kan också lägga till ytterligare taggar om det behövs.

I avsnittet ' Utdrag ', kan du skriva en kort men informativ beskrivning. Detta kommer att visas på huvudkatalogsidan för personal där alla profiler listas.

Vi rekommenderar också att du inaktiverar kommentarer i avsnittet 'Diskussion'.

Detta är för att undvika onödigt rörigt på sidan, eftersom pluginet redan har lagt till ett kontaktformulär på sidan som standard.

I avsnittet 'Listningsinformation', välj planen 'Gratis listning' och klicka på 'OK'.

Du kommer inte att kunna publicera listningen om du inte först tilldelar den en plan.

När du är nöjd med allt, klicka på 'Publicera' för att göra personalprofilen live.

Upprepa helt enkelt dessa steg för att skapa profiler för alla dina teammedlemmar.

Steg 4: Anpassa sidan för anställdas listor

När du förhandsgranskar sidan Employee Directory ser du en sökformulär för att filtrera igenom anställningslistningar.

Nedan finns en tydlig och organiserad lista över dina teammedlemmar.

Om du öppnar en personalprofilsida ser du din medarbetarinformation och ett kontaktformulär som besökaren kan använda för att kontakta dem.

Så här ser det ut:

Om du inte är nöjd med hur dessa sidor ser ut och vill anpassa dem, gå sedan till Katalog » Inställningar i WordPress-instrumentpanelen. Klicka sedan på 'Listningar'.

Här kan du ändra antalet listningar som visas per sida, ändra inställningarna för sökformuläret, inaktivera kommentar- och/eller kontaktformulär, justera knapparna och så vidare.

Glöm inte att klicka på ‘Spara ändringar’ när du är klar.

Du kan också navigera till menyn ‘Utseende’.

Det här är där du kan ändra knappstilen och primärfärgen för katalogsidan. Du kan också installera Font Awesome-ikoner eller uppgradera till en pro-plan för att anpassa listningslayouten.

Om du byter till fliken 'Bilder' kan du ändra hur personalprofilbilderna ser ut.

Du kan till exempel aktivera en ljuslådaeffekt, inaktivera miniatyrbilder på huvudsidan för listningen och ändra storleken på miniatyrbilderna. Kom ihåg att klicka på 'Spara ändringar' igen.

För mer information om att skapa kataloger med WordPress, kolla bara in dessa artiklar:

• Hur man skapar en webbkatalog i WordPress (steg för steg)
• Hur man skapar en sökbar medlemskatalog i WordPress
• Bästa WordPress-plugins för företagsregister

Bonustips: Använd WPForms för att samla in din anställningsinformation

Oavsett om du hanterar ett litet eller stort team kan det vara en utmaning att samla all nödvändig personalinformation för din katalog. Att manuellt få tag på detaljer via e-post eller kalkylblad kan vara tidskrävande.

För att effektivisera denna process rekommenderar vi att du använder WPForms, ett kraftfullt men ändå användarvänligt plugin för WordPress-formulärbyggare. Det levereras med en förbyggd mall för personalförteckningsformulär så att du snabbt kan komma igång.

Mallen innehåller redan många relevanta fält, som namn, e-postadress, telefonnummer, avdelning, roll och så vidare. Du kan också använda den praktiska kontaktformulärbyggaren för att lägga till fler fält som är relevanta för dina behov.

Du kan välja mellan en mängd olika fältformat, från radio-knappar och bilduppladdningar till CAPTCHA för att förhindra spamiga formulärinlämningar.

För att lära dig mer om WPForms kan du läsa vår fullständiga WPForms-recension.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en personalförteckning i WordPress. Du kanske också vill kolla in vår guide om hur du skapar en anpassad WooCommerce-varukorgssida utan kod och våra experttips om verktyg för att skapa och sälja digitala produkter.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.