Visa dig själv med en anpassad författarebox

Multi-author bloggar blir alltmer populära och med goda skäl. Att skapa regelbundet, engagerande innehåll kan ofta vara en utmaning för en enskild bloggare. Med flera författare kan det bli mycket enklare och låter dig också täcka ett större antal ämnen som drar från kunskapen om flera personer. På webbplatser som Wptuts + får du läsa artiklar från ett massivt lag av författare och bloggare, vi har alla våra egna skrivstilar och personligheter. På samma sätt som Wptuts +, på de flesta webbplatser med flera författare, hittar du en bra liten författarinformationslåda någonstans på sidan. Idag ska jag visa dig hur du kan skapa en för din egen sajt.

WordPress är en färdig multi-author blogging och innehåll plattform. Alla verktyg vi behöver är inbyggda, vi behöver bara veta hur man använder dem.

Allt börjar med en profil

Dolda bort på WordPress-administratörsfältet (när du är inloggad) har alla användare tillgång till länken "Redigera min profil". Det tar dig till sidan där du ställer in hur ditt namn visas på webbplatsen, det är där du byter lösenord och e-postadress. Det är också den plats där du kan skriva in verkligen användbar, modern och aktuell kontaktinformation, som AIM, Yahoo IM och Google Talk detaljer (/ sarkasm). Jag vet, för jag gör detsamma, du har alltid ignorerat det mesta. Om du inte använder dessa fält varför fyller du i dem? Vår författare låda kommer att använda dessa fält och vi kommer att göra dem lite mer användbara!

Extra fält

Det är väldigt lätt för oss att ta bort de kontaktmetoder som vi inte vill använda och ersätta dem med något lite mer aktuellt. Så första saker måste du först öppna ditt tema functions.php (eller håll den i en plugin om du föredrar) och låt oss komma igång.

 funktion wptuts_contact_methods ($ contactmethods) // Ta bort vi vad vi inte vill ha unset ($ contactmethods ['aim']); unset ($ contactmethods ['yim']); unset ($ contactmethods ['jabber']); // Lägg till några användbara de $ contactmethods ['twitter'] = 'Twitter Användarnamn'; $ contactmethods ['facebook'] = 'Facebook-profiladress'; $ contactmethods ['linkedin'] = 'LinkedIn Public Profile URL'; $ contactmethods ['googleplus'] = 'Google + -profiladress'; returnera $ contactmethods;  add_filter ('user_contactmethods', 'wptuts_contact_methods');

Så första vi gör är att ta bort några ganska meningslösa fält, därefter lägger vi helt enkelt till de ytterligare fält vi vill ha. Den första delen måste vara unik för texten du kan skriva in vad du vill, eftersom det här är vad som kommer att visas bredvid fältet på profilsidan.

Om du besöker din redigeringsprofil sida bör du se att dina ytterligare fält har dykt upp och de värdelösa har försvunnit.

Nu har vi någonstans vi kan lagra vår extra information som vi kan fortsätta att arbeta med data och hur vi kan visa den i fronten på vår sida.

Visa sig själv

Så vi vill visa en bild av vår författare, en liten beskrivning / bio och några länkar till sociala medier.

WordPress hanterar användarprofilbilder med hjälp av Gravatar. Vi vill använda WordPress-funktionen get_avatar () Detta hämtar Gravatar för det angivna användar-ID eller e-postadress.

Du kan ange storleken på bilden och även vad som ska göras om användaren inte har en Gravatar. Den sista parametern låter dig ställa in alternativtexten för avataren. För nu ska vi använda följande kod:

Detta drar i Gravatar på 70px x 70px och använder användarens ID för författaren för det aktuella inlägget.

Vi vill också dra några av de grundläggande användarprofilinformationen genom att se användarens visningsnamn och beskrivning. Låt oss ta en titt på ett grundläggande exempel.

Det grundläggande

    
 
  "> →',' tuts_plus '), get_the_author ()); ?>

Ovanstående kod ger en bra utgångspunkt. Öppna din single.php (Jag använder tjugo tolv för syftet med denna artikel) och klistra in ovanstående kod inuti slingan men ovanför din kommentarmall. (Linje 25 om du använder också tjugo tolv.) Låt oss nu gå igenom vad vi gör.

Vi har redan pratat om get_avatar () funktion men längre ner kommer du att se get_the_author () fungera. Detta hämtar bara författaren. I vårt exempel skriver vi ut författarens namn högst upp i vår författarbox. Det kommer att visa vad som användaren har valt som "visningsnamn offentligt som". Du kan helt enkelt använda:

Jag föredrar emellertid att undkomma all min produktion och ge möjlighet till översättare.

Nästa vi ser get_the_author_meta (). Vi ska använda det här ganska lite. Den här funktionen returnerar den önskade metadata för den angivna användaren. Om vi använder det inom en slinga behöver vi inte ange användar-ID, men det kan användas utanför slingan genom att skicka användar-ID. Med den här funktionen kan du få en rad information, i det ovanstående exemplet använder vi den för att dra beskrivningen som är biografiboxen som du kan slutföra på användarprofilsidan. Precis som med författarnamnet flyr jag utmatningen för att se till att våra författare inte har gömt några nasties!

Slutligen har vi en länk längst ner som länkar till vår författarsida. Vi använder get_author_posts_url () funktion för att helt enkelt ge oss webbadressen. WordPress skapar automatiskt författarsidor för alla användare av webbplatsen som har publicerat inlägg.

Låt oss lägga till några CSS och se hur det ser ut:

 .media, .bd översvämning: dold; _överflöde: synligt; zoom: 1;  .media img, .media .img float: left; marginal-höger: 10px;  .media img display: block;  .media .imgExt float: right; marginal-vänster: 10px;  .profile margin-top: 10px; vaddering: 20px 10px; gräns: fast tunn # c6c6c6; -webkit-box-skugga: 7px 7px 5px rgba (50, 50, 50, 0,75); -moz-box-skugga: 7px 7px 5px rgba (50, 50, 50, 0,75); boxskugga: 7px 7px 5px rgba (50, 50, 50, 0,75);  .profile-länkar vaddering: 5px 0;

Social Shizzle Wizzle

Så vi har en grundläggande låda, men hur är det med alla de extra fälten vi lagt till? Vi kan använda get_the_author_meta () funktionen för att hämta de anpassade fälten precis som vi gjorde med beskrivningen. Låt oss gå igenom följande exempel tillsammans, en ersättning för vår tidigare "profil-länkar" div:

    ">
   ">
   ">
   ">
  
 "> →',' tuts_plus '), get_the_author ()); ?>

Vi har skapat en oorderad lista och varje listobjekt blir våra extra fält som vi lagt till i början av artikeln. För det första gör vi en oljekontroll för att se till att det finns ett värde inmatat för var och en av dem eftersom vi inte vill att länkar uppträder som inte gör någonting. Därefter skapar vi en länk baserat på informationen som anges i användarprofilen. Som du kan se från exemplet bildar vi länken genom att använda samma get_the_author_meta () funktion, men beroende på vad vi skriver ut använder vi en annan valideringsfunktion. För Twitter-länken eftersom vi bara skriver in ett användarnamn och bifogar det till vår länk, identifierar vi all HTML från den med wp_kses () för de andra när vi anger fullständiga webbadresser till vår profil sida vi använder esc_url () för att säkerställa att de är korrekt formade webbadresser. Jag har visat dig två olika sätt att göra det så att du kan se hur flexibel det kan vara.

Genom att lägga till lite mer CSS kan vi stile det och vi är nästan färdiga!

 .sociala länkar li vaddering: 5px; display: inline; listestil: none; textindelning: -9999px; flyta till vänster;  .social-länkar li a bakgrundsposition: 0 0; background-repeat: no-repeat; bredd: 16px; höjd: 16px; display: block;  .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-länk background: url (images / google-plus.png) no-repeat;

CSS Jag använder för demonstration bara du kan självklart göra vad du vill med din egen styling!

Fancy

Nu har vi vår grundläggande låda, vi kan lägga till alla typer av extrafunktioner. Vi ska skapa ett dynamiskt LinkedIn-profilkort när du sveper över LinkedIn-ikonen.

Först måste vi skapa några funktioner. Vi måste skaffa LinkedIn JavaScript-biblioteket på våra blogginlägg och våra författarsidor (mer om det senare!).

 funktion wptuts_linkedin_js () if (is_single () || is_author ()): wp_enqueue_script ('linkedin', '//platform.linkedin.com/in.js', null, null, true); endif;  add_action ('wp_enqueue_scripts', 'wptuts_linkedin_js');

Lägg till ovanstående kod till ditt tema functions.php eller var du än har lagt till koden för att ändra dina kontaktmetoder. Detta kommer att se till att vi nu har nödvändig JavaScript laddad men endast på sidor där det behövs.

Nästa upp kommer vi att skapa en liten funktion för att utföra svängfunktionen baserat på författaren vi tittar på:

funktion wptuts_linkedin ($ author) $ authorinfo = get_user_meta ($ author); $ linkedin = $ authorinfo ['linkedin'] [0]; om (isset ($ linkedin)):?>

Det första du bör märka är att vi faktiskt behöver skicka en parameter till den här funktionen när vi kallar den. Vi vill vidarebefordra användar-ID för författaren som vi vill skapa hover-kortet för. I huvudsak gör vi användaren metadata med get_user_meta () vi drar sedan ut vår LinkedIn-URL som vi skapade i första halvan av artikeln. Lägg sedan enkelt till den variabeln i vår LinkedIn JavaScript så att den returnerar rätt användarhuver-kort. Här är den uppdaterade single.php extrahera:

    ">
   ">
   
   ">
  
 
 "> →',' tuts_plus '), get_the_author ()); ?>

Som vi kan se ringer vi vår LinkedIn-funktion genom att använda wptuts_linkedin (get_the_author_meta ('ID')) Detta passerar genom användarens ID för den rätta författaren som ska användas i vår funktion. Ett par enkla CSS-tweaks för att få det att visas korrekt:

 .linkedin-link text-indent: 0! important;

Som du kan se nu har vi vår författarbox med ett fint hover-kort för vår LinkedIn-profil!

Författare

Det är ofta trevligt att visa denna författarbox högst upp på en författares arkivsida. Tjugo tolv gör redan en del av arbetet för oss i author.php. Så vi kan lägga till vad vi har lärt oss ovan för att lägga till vår extra information.

Slutsats

Så där har vi det. Du vet nu hur man ändrar dina kontaktmetoder, hur man tar olika uppgifter från en användarprofil och visar den på sina blogginlägg. Det finns så mycket mer du kan göra beroende på vad du vill uppnå. Prova att lägga till en länk till användarens webbplats, visa deras senaste tweets, dra en commithistorik från GitHub; alternativen är oändliga. Alla sista koden finns nedan.

Vektor sociala medier ikoner av IconDock.com och Double-J Design

URL: http://icondock.com/free/vector-social-media-icons

Koda