Toon jezelf uit met een aangepaste auteur

Blogs met meerdere auteurs worden steeds populairder en met goede reden. Het maken van reguliere, boeiende inhoud kan vaak een uitdaging zijn voor een individuele blogger. Met meerdere auteurs kan het een stuk eenvoudiger zijn en kunt u ook een groter aantal onderwerpen bespreken die te maken hebben met de kennis van meerdere mensen. Op sites zoals Wptuts + krijg je artikelen te lezen van een enorm team van schrijvers en bloggers, we hebben allemaal onze eigen schrijfstijl en persoonlijkheden. Net als Wptuts +, vindt u op de meeste sites met meerdere auteurs een aardig klein informatie-venster voor auteurs ergens op de pagina. Vandaag laat ik je zien hoe je er een kunt maken voor je eigen site.

WordPress is een kant en klaar blog- en contentplatform met meerdere auteurs. Alle hulpmiddelen die we nodig hebben, zijn ingebouwd, we moeten alleen weten hoe we ze moeten gebruiken.

Het begint allemaal met een profiel

Verborgen op de WordPress-beheerbalk (wanneer ingelogd) hebben alle gebruikers toegang tot de link "Mijn profiel bewerken". Hiermee gaat u naar de pagina waar u instelt hoe uw naam wordt weergegeven op de site. Hier wijzigt u uw wachtwoord en e-mailadres. Het is ook de plaats waar u echt nuttige, moderne en actuele contactgegevens kunt invoeren, zoals AIM, Yahoo IM en Google Talk-details (/ sarcasme). Ik weet het, omdat ik hetzelfde doe, je hebt altijd het grootste deel ervan genegeerd. Als u deze velden niet gebruikt, waarom zou u ze dan invullen? Onze auteur zal deze velden gebruiken en we zullen ze een beetje nuttiger maken!

Extra velden

Het is heel gemakkelijk voor ons om de contactmethoden die we niet willen gebruiken te verwijderen en ze te vervangen door iets wat actueler. Dus eerst dingen eerst moet je je thema's openen functions.php (of stop dit in een plug-in als je dat liever hebt) en laten we aan het werk gaan.

 functie wptuts_contact_methods ($ contactmethods) // We verwijderen wat we niet willen uitschakelen ($ contactmethods ['aim']); niet ingesteld ($ contactmethods ['yim']); niet ingesteld ($ contactmethods ['jabber']); // Voeg enkele handige toe $ contactmethods ['twitter'] = 'Twitter gebruikersnaam'; $ contactmethods ['facebook'] = 'Facebook Profiel URL'; $ contactmethods ['linkedin'] = 'LinkedIn Public Profile-URL'; $ contactmethods ['googleplus'] = 'Google+ profiel-URL'; retourneer $ contactmethoden;  add_filter ('user_contactmethods', 'wptuts_contact_methods');

Dus het eerste wat we doen is het verwijderen van een aantal tamelijk nutteloze velden, daarna voegen we gewoon de aanvullende velden toe die we willen. Het eerste deel moet uniek zijn voor de tekst die u kunt invoeren wat u maar wilt, aangezien dit wordt weergegeven naast het veld op de profielpagina.

Als u uw bewerkingsprofielpagina opnieuw bezoekt, ziet u nu dat uw aanvullende velden zijn verschenen en de nutteloze zijn verdwenen.

Nu hebben we ergens waar we onze aanvullende informatie kunnen opslaan om door te gaan met het werken met de gegevens en hoe we dit aan de voorkant van onze site kunnen laten zien..

Toon jezelf af

Daarom willen we een foto laten zien van onze auteur, een kleine beschrijving / bio en enkele links naar sociale-mediasites.

WordPress verwerkt gebruikersprofielfoto's met Gravatar. We willen de WordPress-functie gebruiken get_avatar () dit haalt de Gravatar op voor het opgegeven gebruikers-ID of e-mailadres.

U kunt de grootte van de afbeelding opgeven en ook aangeven wat u moet doen als de gebruiker geen Gravatar heeft. Met de laatste parameter kunt u de alternatieve tekst voor de avatar instellen. Voor nu gaan we de volgende code gebruiken:

Dit trekt de Gravatar in op 70px x 70px en gebruikt de gebruikers-ID van de auteur voor het huidige bericht.

We willen ook enkele basisgebruikersprofielinformatie doorhalen, zoals de weergavenaam en beschrijving van de gebruiker. Laten we een eenvoudig voorbeeld bekijken.

De basis

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

De bovenstaande code geeft een goed startpunt. Open je single.php (Ik gebruik Twenty Twelve voor de doeleinden van dit artikel) en plak de bovenstaande code in de lus, maar boven je reactiesjabloon. (Regel 25 als u Twenty Twelve ook gebruikt.) Laten we nu eens kijken wat we aan het doen zijn.

We hebben het al gehad over de get_avatar () functie, maar verderop zie je de get_the_author () functie. Dit haalt eenvoudig de auteur van het bericht op. In ons voorbeeld drukken we de naam van de auteur bovenaan onze auteur. Het zal weergeven wat de gebruiker heeft gekozen als zijn "Toon naam publiekelijk als". Je zou gewoon kunnen gebruiken:

Ik geef er echter de voorkeur aan al mijn uitvoer te ontvluchten en de optie voor vertalers toe te staan.

Vervolgens zien we get_the_author_meta (). We gaan dit nogal gebruiken. Deze functie retourneert de gewenste metagegevens voor de gegeven gebruiker. Als we het binnen een lus gebruiken, hoeven we het gebruikers-ID niet op te geven, maar het kan buiten de lus worden gebruikt door het gebruikers-ID door te geven. Met behulp van deze functie kun je een bereik van informatie krijgen, in het bovenstaande voorbeeld gebruiken we het om de beschrijving te trekken die de biografiekader is die je kunt voltooien op de gebruikersprofielpagina. Net als bij de auteursnaam ontsnap ik aan de uitvoer om te zorgen dat onze auteurs geen nasties hebben verborgen!

Eindelijk hebben we onderaan een link die linkt naar onze auteurspagina. Wij gebruiken de get_author_posts_url () functie om ons eenvoudig de URL te geven. WordPress maakt automatisch auteurspagina's voor alle gebruikers van de site die gepubliceerde berichten hebben gepubliceerd.

Laten we wat CSS toevoegen en zien hoe het eruit ziet:

 .media, .bd overflow: verborgen; _overloop: zichtbaar; zoom: 1;  .media img, .media .img float: left; margin-right: 10px;  .media img display: block;  .media .imgExt float: right; marge links: 10 px;  .profile margin-top: 10px; opvulling: 20px 10px; rand: vast dun # c6c6c6; -webkit-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0,75); -moz-box-shadow: 7px 7px 5px rgba (50, 50, 50, 0,75); box-shadow: 7px 7px 5px rgba (50, 50, 50, 0,75);  .profile-links opvulling: 5px 0;

Social Shizzle Wizzle

Dus we hebben een standaarddoos, maar hoe zit het met al die extra velden die we hebben toegevoegd? We kunnen de gebruiken get_the_author_meta () functie om die aangepaste velden op te halen, net als bij de beschrijving. Laten we samen het volgende voorbeeld doornemen, een vervanging voor onze vorige divisie "profielkoppelingen":

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

We hebben een ongeordende lijst gemaakt en elk item in de lijst is onze extra velden die we aan het begin van het artikel hebben toegevoegd. Ten eerste doen we een grove controle om ervoor te zorgen dat er een waarde wordt ingevoerd voor elk van hen, omdat we niet willen dat er links verschijnen die niets doen. Vervolgens maken we een koppeling op basis van de informatie die is ingevoerd in het gebruikersprofiel. Zoals je aan het voorbeeld kunt zien, vormen we de link door dezelfde te gebruiken get_the_author_meta () functie, maar afhankelijk van wat we uitvoeren, gebruiken we een andere validatiefunctie. Voor de Twitter-link hoeven we alleen een gebruikersnaam in te voeren en die aan onze link toe te voegen wp_kses () voor de anderen terwijl we volledige profiel-URL's invoeren in onze profielpagina die we gebruiken esc_url () om ervoor te zorgen dat ze correct samengestelde URL's zijn. Ik heb je twee verschillende manieren getoond om het te doen, zodat je kunt zien hoe flexibel het kan zijn.

Door een beetje meer CSS toe te voegen, kunnen we het stijlen en zijn we bijna klaar!

 .sociale links li opvulling: 5px; weergave: inline; lijststijl: geen; text-indent: -9999px; zweven: links;  .social-links li a background-position: 0 0; achtergrondherhaling: geen herhaling; breedte: 16 px; hoogte: 16 px; weergave: blok;  .twitter-link background: url (images / twitter.png) geen herhaling;  .facebook-link background: url (images / facebook.png) geen herhaling;  .linkedin-link background: url (images / linkedin.png) geen herhaling;  .google-link background: url (images / google-plus.png) geen herhaling;

De CSS die ik gebruik voor demonstratiedoeleinden, je kunt natuurlijk doen wat je wilt met je eigen styling!

Fancy worden

Nu hebben we onze basisdoos en kunnen we allerlei extra functies toevoegen. We gaan een dynamische LinkedIn Profile-kaart maken wanneer u de muisaanwijzer over het LinkedIn-pictogram beweegt.

Eerst moeten we enkele functies maken. We moeten de LinkedIn JavaScript-bibliotheek in de wachtrij plaatsen op onze blogposts en onze auteurspagina's (hier later meer over!).

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

Voeg de bovenstaande code toe aan uw thema functions.php of waar je de code hebt toegevoegd om je contactmethoden te wijzigen. Dit zorgt ervoor dat we nu het vereiste JavaScript hebben geladen, maar alleen op pagina's waar het nodig is.

Vervolgens gaan we een kleine functie maken om de hover-functionaliteit uit te voeren op basis van de auteur waar we naar kijken:

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

Het eerste wat je moet opmerken is dat we eigenlijk een parameter aan deze functie moeten doorgeven als we het noemen. We willen de gebruikers-ID doorgeven van de auteur waarvoor we de hover-kaart willen maken. Wat we in essentie doen is de gebruikersmetadata gebruiken get_user_meta () we halen dan onze LinkedIn-URL tevoorschijn die we in de eerste helft van het artikel hebben gemaakt. Voeg dan eenvoudig die variabele toe aan onze LinkedIn JavaScript zodat deze de juiste gebruikerskaart geeft. Dit is het bijgewerkte single.php extract:

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

Zoals je ziet, bellen we onze LinkedIn-functie door te gebruiken wptuts_linkedin (get_the_author_meta ('ID')) dit gaat door de gebruikers-ID van de juiste auteur om in onze functie te gebruiken. Een paar eenvoudige CSS-aanpassingen om het goed weer te geven:

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

Zoals je nu kunt zien, hebben we onze authorbox met een mooie hover-kaart voor ons LinkedIn-profiel!

Auteur pagina

Het is vaak leuk om dit auteurvak boven aan de archiefpagina van een auteur te laten zien. Twenty Twelve doet al een deel van het werk voor ons in author.php. Dus we kunnen toevoegen wat we hierboven hebben geleerd om onze extra informatie toe te voegen.

Conclusie

Dus daar hebben we het. U weet nu hoe u uw contactmethoden kunt wijzigen, hoe u verschillende informatie uit een gebruikersprofiel kunt trekken en deze op hun blogberichten kunt weergeven. Er is zoveel meer dat je kunt doen, afhankelijk van wat je wilt bereiken. Probeer een link naar de website van de gebruiker toe te voegen, hun nieuwste tweets weer te geven, een commit-geschiedenis uit GitHub te trekken; de opties zijn eindeloos. Alle definitieve code kan hieronder worden gevonden.

Vector sociale media iconen door IconDock.com & Double-J Design

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

Code