Bouw een WordPress-plugin om biografieën van auteurs aan uw berichten toe te voegen

Veel populaire blogs zijn tegenwoordig geschreven door meerdere bijdragers. Vandaag zullen we een eenvoudige WordPress-plugin maken waarmee we de biografie van de postauteur kunnen toevoegen aan het einde van elk bericht, net zoals je kunt zien op Nettuts.

1. Zorg dat je klaar bent voor de bio

Als u de biografische informatie van auteurs niet alweergeeft, kunt u biografische informatie toevoegen en bewerken door naar het gebruikerspaneel te gaan vanuit het WordPress-dashboard, een gebruiker te selecteren en een snelle bio in te vullen. We gaan ook een gravatar voor de auteur toevoegen, dus zorg ervoor dat je ook een e-mailadres instelt.

2. Maak de benodigde bestanden

We moeten één bestand maken dat de functionaliteit van onze plug-in bevat. Start uw FTP naar keuze op en, binnen de wp-content / plugins / map, maak een bestand aan met de naam ntauthorbio.php. Om ervoor te zorgen dat WordPress onze plug-in herkent, moeten we een snelle koptekst in ons bestand maken, net zoals u dat doet bovenaan styl.css. Plak de volgende code in uw bestand en pas deze uiteraard aan.

 / * Naam van de plug-in: Nettuts Auteur Bio-plug-in URI: http://www.nettuts.com/ Beschrijving: Deze plug-in voegt een auteur bio toe aan zijn / haar bericht Auteur: nettuts Versie: 0.1 Auteur URI: http: //www.nettuts .com / * /

3. Functies en acties

Vervolgens maken we de basis voor onze plug-in. Plak het volgende na de kop voor het openen van reacties.

 functie author_bio_display ($ content) // dit is waar we de bio functie zullen weergeven author_bio_style () // dit is waar we onze box zullen stijlen function author_bio_settings () // dit is waar we zullen weergeven onze admin opties functie author_bio_admin_menu () // dit is waar we onze plug-in toevoegen aan het admin menu add_action ('the_content', 'author_bio_display'); add_action ('admin_menu', 'author_bio_admin_menu'); add_action ('wp_head', 'author_bio_style');

"Hooks worden geleverd door WordPress zodat uw plug-in in de rest van WordPress kan" haken ", dat wil zeggen om functies in uw plug-in op specifieke tijden aan te roepen en daarmee uw plug-in in te stellen."

Hierboven hebben we vier functies gemaakt die onze plug-in nodig heeft om goed te werken. Elke functie heeft een specifiek doel (zoals hierboven beschreven) en ook is elke functie gekoppeld aan een specifieke actie (afgezien van author_bio_settings, die vanuit een andere functie wordt gebeld.

Bij het ontwikkelen van plug-ins is het belangrijk om te begrijpen wat een 'haak' is. Een haak is een plaats in de loopcyclus waar we in WordPress kunnen haken en onze functies kunnen bellen. Bijvoorbeeld de haak die hierboven wordt gebruikt, voor author_bio_display, is de inhoud; dit betekent dat wanneer WordPress gebruikt de inhoud (gebruikt voor het weergeven van de hoofdinhoud van een bericht / pagina), zal het eerst de functie bellen die we het hebben gegeven.

• de inhoud - de inhoud van de pagina / het bericht wordt weergegeven
• ADMIN_MENU - aangeroepen wanneer de zijbalk in het beheerdersdashboard is gemaakt
• wp_head - laat ons code toevoegen aan de head-tags van de pagina. Dit is waarom u wp_head () opneemt bij het ontwerpen van uw thema's.

4. De weergavefunctie

De belangrijkste functie in onze plug-in is de weergavefunctie, die het proces van het feitelijk weergeven van de informatie na de inhoud afhandelt. Voordat we beginnen, is het belangrijk op te merken dat deze functie een parameter accepteert, genaamd $ inhoud. Dit betekent dat de inhoud van de pagina / post wordt doorgegeven aan onze functie, zodat we vervolgens onze auteur bio kunnen toevoegen.

Laten we beginnen met een eenvoudige if / else-verklaring.

 function author_bio_display ($ content) // dit is waar we de bio zullen weergeven if (is_single () || is_page ()) $ bio_box = // placeholder; return $ inhoud. $ Bio_box;  else return $ content; 

Hierboven controleren we om te zien of de inhoud wordt weergegeven op één bericht met is vrijgezel(), of een pagina die gebruikt is_page (). Als of waar wordt geretourneerd, kunnen we onze box plaatsen die in de. Wordt geplaatst $ bio_box variabel. Anders moeten we, als we op een andere pagina staan, zoals de archieven of de voorpagina, de inhoud gewoon retourneren.

Nu moeten we onze code toevoegen om het vak te laten verschijnen, uw naam wijzigen $ bio_box om overeen te komen met de volgende code.

 $ bio_box = '
 '.get_avatar (get_the_author_meta (' user_email '),' 80 ').' '.Get_the_author_meta ( 'display_name').' 
'.Get_the_author_meta ( 'beschrijving').'
 
 
';

Uiteraard kan de styling later worden aangepast aan uw eigen smaak, maar voor nu gebruiken we een eenvoudige box en voegen we wat CSS toe om het snel te stijlen.

We gebruiken enkele functies hierboven om onze vereiste gegevens op te halen. get_avatar () is een ingebouwde functie in WordPress die de gravatar van een gebruiker retourneert, als deze er een heeft, volgens hun e-mailadres. We passeren de get_avatar () functie twee parameters; de e-mail van de auteur en een grootte voor de afbeelding (80px * 80px in ons geval).

De functie get_the_author_metakan elk stukje informatie over een geregistreerde WordPress-gebruiker ophalen. Een volledige lijst van de items die u kunt retourneren is te vinden op WordPress Codex.

Als we nu onze plug-in uitvoeren, zouden we iets moeten zien dat hierop lijkt:

Het is niet de mooiste biografie, maar we hebben nu de basisfunctionaliteit waar we naar op zoek zijn. Als je nog steeds problemen ondervindt, zorg er dan voor dat de auteur van de post / pagina een biografie en / of gravatar heeft en ook zorg ervoor dat de plug-in is geactiveerd in het gedeelte plug-ins van het dashboard. Laten we de stijl een beetje stijlen.

5. Het mooi maken

Als je een ontwerper bent, hier is je kans om te doen wat je wilt! Mijn code hieronder is net genoeg om onze box er schoon en eenvoudig uit te laten zien. Om een ​​voorbeeld te geven van hoe wp_head () kan worden gebruikt, zullen we de CSS voor dit vak invoegen in de head-tag van ons document. U kunt dit echter ook gewoon in uw stylesheet plaatsen.

Deze author_bio_style () -functie moet een eenvoudig CSS-blok retourneren.

 functie author_bio_style () // dit is waar we onze box-echo zullen stylen ''; 

De bovenstaande code vereist niet veel uitleg; CSS valt buiten het bestek van deze tutorial. Over het algemeen maken we alleen een kader met een rand en zweven de afbeelding naar links. Ten slotte voegen we een spatie toe om ervoor te zorgen dat het vak groot genoeg is om in de afbeelding en tekst te passen. Je kunt ook de clearfix-hack gebruiken of zelfs overlopen: verborgen om dit effect te bereiken. Uiteindelijk hangt dat af van uw specifieke lay-out.

Je nieuwe fangled-box zou nu op de mijne moeten lijken; zie hieronder.

6. Een instellingenpagina maken

Voordat we afsluiten, laten we eens kijken naar het toevoegen van een instellingenpagina in het dashboard voor onze plug-in. De meeste plug-ins zijn afhankelijk van een soort instellingensectie om een ​​beetje meer flexibiliteit te bieden zonder dat de gebruiker een code hoeft te bewerken.

Er zijn talloze opties die we zouden kunnen toevoegen; zoals, waar het vak verschijnt (boven of onder), de gebruikte kleuren, bepaalde gebruikers uitsluiten, enzovoort. Voor deze zelfstudie heb ik ervoor gekozen om aan te geven of de plug-in alleen op pagina's mag verschijnen, alleen op berichten of beide. Hopelijk is dit voldoende om je de touwen te laten zien. Op dat moment kunt u de functionaliteit uitbreiden zoals u wilt.

De pagina maken

We moeten een pagina instellen in het beheerdersdashboard. Om dit te doen, moeten we WordPress vertellen wat te doen wanneer het ADMIN_MENU actie triggers. Ter compensatie bewerken we onze author_bio_admin_menu () functie om eruit te zien als de onderstaande code:

 functie author_bio_admin_menu () // dit is waar we onze plug-in toevoegen aan het admin-menu add_options_page ('Author Bio', 'Author Bio', 9, basename (__ FILE__), 'author_bio_settings'); 

De bovenstaande code maakt een optiepagina in het dashboard en geeft de volgende parameters door:

• Menunaam - Auteur Bio
• Pagina titel - Auteur Bio
• Toegang Privilege - 9 - of, alleen beheerderstoegang
• Handvat
• De vereiste functie - author_bio_settings ()

Vervolgens moeten we de pagina wat inhoud bieden. Omdat we belden author_bio_settings () bij het maken van de pagina, dat is de functie die we zullen gebruiken om ons optiesformulier weer te geven en de database bij te werken.

De functie Instellingen

Simpel gezegd, deze functie moet een formulier weergeven met de opties. Het moet ook controleren of het formulier is ingediend en, zo ja, de nieuwe waarden in de database opslaan. Laten we eerst ons concentreren op het maken van het formulier.

 functie author_bio_settings () // dit is waar we onze admin opties $ options ['page'] = get_option ('bio_on_page') zullen tonen; $ options ['post'] = get_option ('bio_on_post'); echo ' 
 '$ Boodschap.' 

 
Auteur Bio-instellingen
 
  
Wanneer moet auteur Bio worden weergegeven
  Pages
  berichten
 
  
 
'; 

We beginnen met het grijpen van een aantal opties uit de database. Natuurlijk hebben we momenteel nog geen methode om ze in te stellen, dus ze zijn voorlopig nog leeg. Vervolgens tonen we het formulier, dat al is gestileerd door de dashboard-CSS van WordPress. U zult merken dat we een (momenteel niet-ingestelde) variabele weergeven $ message; dit is zodat we de gebruiker op de hoogte kunnen stellen wanneer we de instellingen bijwerken als deze succesvol was.

We drukken onze opties af aan het einde van het selectievakje. Als de gebruiker een optie inschakelt, moeten we deze in de database opslaan als 'aangevinkt' om het selectievakje in te schakelen. De functies die we gebruiken om opties te krijgen en in te stellen zijn get_option () en update_option () respectievelijk. De get-functie vereist de naam van de optie (dus het is belangrijk om uniek te zijn) en de update-optie heeft de naam van de optie en de nieuwe waarde nodig. Als de update-functie de optie niet vindt, wordt er eenvoudig een nieuwe gemaakt.

Tot nu toe zou je pagina er uit moeten zien als:

Laten we nu onze code toevoegen om de waarden op te nemen die door het formulier zijn verzonden en de opties in de database bijwerken. Het formulier bevat een verborgen waarde, genaamd actie, die is ingesteld op 'bijwerken'. We controleren of die waarde is ingesteld en zo ja, werken we onze opties bij. Deze code moet bovenaan onze lijst worden geplaatst autor_bio_settings () functie.

 if ($ _POST ['action'] == 'update') $ _POST ['show_pages'] == 'on'? update_option ('bio_on_page', 'checked'): update_option ('bio_on_page', "); $ _POST ['show_posts'] == 'on'? update_option ('bio_on_post', 'checked'): update_option ('bio_on_post', "); $ message = '
Opties opgeslagen
'; 

Als het formulier is ingediend, gebruiken we de ternaire operator (als u niet zeker weet hoe deze werken, zoek ze op - ze zijn een eenvoudige vorm van if / else) om te controleren of de selectievakjes zijn aangevinkt of niet. Als dat het geval is, stellen we de optie in als 'checked;' anders plaatsen we het als leeg. Ten slotte stellen we het bericht in voor een succesvol dialoogvenster, al gestileerd door WordPress.

De uitvoer wijzigen

Nu zouden we in staat moeten zijn om opties in te stellen en ze te zien veranderen op onze optiepagina; De functionaliteit van onze plug-in zal echter nog niet veranderen, omdat we dit niet hebben verteld. De laatste stap in ons project is dus om de weergavefunctie op deze opties te laten reageren. In onze author_bio_display () functie, plaats de volgende code bovenaan om de eerder ingestelde opties te krijgen.

 $ options ['page'] = get_option ('bio_on_page'); $ options ['post'] = get_option ('bio_on_post');

Nu we deze waarden hebben, hoeven we alleen de weergavecode uit te voeren als de optie is ingesteld. Om dit te doen, veranderen we onze if-verklaring dienovereenkomstig.

 if ((is_single () && $ options ['post']) || (is_page () && $ options ['page']))

Hier hebben we twee voorwaarden geïmplementeerd die, indien voldaan, onze box zullen weergeven. Niet te moeilijk, toch? Dit is onze volledige plugin:

  ".get_avatar (get_the_author_meta (" user_email ")," 80 ")." ".Get_the_author_meta ( "display_name")." 
".Get_the_author_meta ( "description")."