Veel bloggers zullen hoog en laag zoeken naar de perfecte WordPress-widget die precies zal doen wat ze willen, maar met een beetje programmeerervaring is het misschien makkelijker om je aangepaste widget te schrijven.

Deze week wil ik laten zien hoe precies dat te doen, en de widget die we gaan schrijven is een eenvoudige die een willekeurig bericht van je site uitzoekt, de afgebeelde afbeelding trekt en deze op de zijbalk weergeeft - een visuele “kijk hier eens naar” widget die gebruikers helpt meer inhoud op uw site te vinden.

Dit is ook een uitbreiding van een doorlopende serie waarin ik u laat zien hoe eenvoudig het is om uw WordPress-sjabloon aan te passen. 2 Nieuwe coole WordPress-plugins & Understanding De Wordpress-themastructuur 2 Nieuwe coole WordPress-plugins & Understanding De Wordpress-themastructuur Deze week zal ik een kijkje nemen naar een superieur alternatief voor de vaak geprezen All-in-One SEO; een plug-in die je de kracht van een Wordpress-publicatiesysteem geeft, maar waarmee je ... Lees meer .

U kunt ook blij zijn te weten dat we een nieuwe categorie WordPress Tutorials hebben toegevoegd aan MakeUseOf, dus zorg ervoor dat u dit controleert voor een steeds groter wordend archief met up-to-date tips en handleidingen voor 's werelds favoriete blogplatform.

Sleutelbegrippen: WordPress Queries en de Loop

Elke pagina op uw blog bestaat uit een query naar uw database met berichten. Afhankelijk van de pagina die u bekijkt, verandert de query. Uw blog-startpagina kan bijvoorbeeld de query gebruiken “ontvang de laatste 10 blogberichten“. Wanneer u de categoriearchieven bekijkt, kan de query veranderen naar “ontvang de laatste 20 berichten voor de categorie alleen familiefoto's, bestel de resultaten op datum gepubliceerd“. Elke query retourneert een set resultaten en afhankelijk van de paginasjabloon die wordt gebruikt, wordt elk resultaat door de hoofdtest doorlopen “lus” van de sjabloon.

Elke pagina kan in feite uit meerdere query's bestaan ​​en u kunt zelfs uw eigen query's maken om functionaliteit aan verschillende plaatsen in uw sjabloon toe te voegen. U kunt een voorbeeld hiervan in gebruik aan de onderkant van dit artikel zien - we hebben een paar aanvullende zoekopdrachten die op elke pagina worden weergegeven en die bedoeld zijn om gerelateerde artikelen te tonen, of artikelen die deze week trending zijn.

Om onze aangepaste widget echter te maken, hoeven we alleen maar een extra query te maken die X-aantal willekeurige berichten plus hun afbeeldingen pakt en op de een of andere manier op de zijbalk weergeeft. Ik heb je vorige week al de code getoond om het afgebeelde plaatje te pakken How To Jazz Up Your Wordpress Door aanbevolen afbeeldingen toe te voegen Hoe je Wordpress Jazzed door aanbevolen afbeeldingen toe te voegen Featured Images zijn in versie 2.9 geïntroduceerd in Wordpress en je kunt het gemakkelijk weergeven een afbeelding die is gekoppeld aan uw blogpost in verschillende delen van uw thema. Vandaag wil ik laten zien ... Lees meer, dus we moeten echt weten hoe je een nieuwe WordPress-widget maakt en deze op de zijbalk plaatst.

Basis Widget-code

Begin met het maken van een nieuw .php-bestand in uw wp-content / plugins directory. Je zou de tutorial ook offline kunnen volgen en uploaden via de WordPress-interface, maar ik vind het makkelijker om te schrijven als we verder gaan in het geval je moet debuggen. Bel je bestand wat je wilt, maar ik ga met random-post-widget.php

Plak het volgende in het bestand en sla het op. U kunt het gedeelte bovenaan met mijn naam wijzigen, maar pas de rest van de code nog niet aan. Dit is eigenlijk een skeleton lege widget, en je kunt zien waar het staat // WIDGET CODE GAAT HIER is waar we onze functionaliteit later zullen toevoegen.

  'RandomPostWidget', 'description' => 'Geeft een willekeurig bericht weer met thumbnail'); $ this-> WP_Widget ('RandomPostWidget', 'Random Post and Thumbnail', $ widget_ops);  functieformulier ($ instantie) $ instance = wp_parse_args ((array) $ instantie, array ('title' => ")); $ title = $ instance ['title'];?> 
 Titel: 
 Dit is mijn nieuwe widget!"; echo $ after_widget; add_action ('widgets_init', create_function (", 'return register_widget ("RandomPostWidget");'));?> 

Zoals het is, doet de plug-in niet veel anders dan een grote titel met de woorden uitprinten “Dit is mijn nieuwe widget!“.

Het geeft je echter de mogelijkheid om de titel te veranderen, wat voor elke widget essentieel is. Het toevoegen van andere opties is een beetje buiten het bestek van dit artikel vandaag, dus laten we nu verder gaan om het een echt doel te geven.

Een nieuwe zoekopdracht en de loop

Als u een nieuwe query voor uw blogdatabase wilt maken, moet u de query_posts () functie samen met een paar parameters, loop vervolgens de uitvoer door met een while-lus. Laten we dit proberen - een zeer eenvoudige query en loop om te demonstreren. Vervang de regel met code die zegt:

Dit is mijn nieuwe widget!

met het volgende:

 // WIDGET CODE GAAT HIER query_posts ("); if (have_posts ()): while (have_posts ()): the_post (); the_title (); endwhile; endif; wp_reset_query (); 

Dit is een absoluut eenvoudige query met behulp van standaardopties en nul-opmaak van de uitvoer. Afhankelijk van hoe je blog is ingesteld, zal de standaard waarschijnlijk de 10 laatste berichten zijn - dan is de bovenstaande code het uitvoeren van de titel van elk bericht. Het is best lelijk, maar het werkt:

We kunnen het meteen een beetje beter maken door alleen wat HTML-opmaak toe te voegen aan de uitvoer met de ECHO opdracht en een koppeling naar de post maken met behulp van get_the_permalink () functie:

 query_posts ("); if (have_posts ()): echo"
"; while (have_posts ()): the_post (); echo"
".Get_the_title ()."
"; intussen; echo"
"; endif; wp_reset_query (); 

Het ziet er al veel beter uit. Maar we willen slechts één bericht, willekeurig gekozen. Om dit te doen, specificeren we enkele parameters in de query:

 query_posts (posts_per_page = 1 & orderby = rand "); 

Natuurlijk kunt u dit in een willekeurig aantal berichten veranderen - in feite is er een hele reeks extra bits die u in de query kunt invoeren om de volgorde van de resultaten te beperken, uit te breiden of te wijzigen, maar laten we dat doen voor nu. Als u vernieuwt, zou u slechts één bericht moeten zien dat willekeurig wordt elke keer dat u het ververs.

Nu voor de aanbevolen thumbnail. Vervang de code hiermee, hopelijk kunt u zien waar we de miniatuur pakken en weergeven:

 query_posts (posts_per_page = 1 & orderby = rand "); if (have_posts ()): echo "
"; while (have_posts ()): the_post (); echo"
".get_the_title (); echo the_post_thumbnail (array (220.200)); echo"
"; intussen; echo"
"; endif; wp_reset_query (); 

Je kunt de voltooide resultaten opnieuw bekijken op mijn ontwikkelingsblog Self Sufficiency Guide, hoewel ik misschien dingen heb verplaatst tegen de tijd dat je dit leest.

Conclusie:

Zie hoe eenvoudig het is om je eigen aangepaste widget te maken die precies kan doen wat je wilt? Zelfs als je 90% van de code niet begrijpt die ik je vandaag heb laten zien, zou je het nog steeds enigszins kunnen aanpassen door alleen variabelen te veranderen of andere HTML uit te voeren. We hebben vandaag een hele widget geschreven, maar je kunt eenvoudig de nieuwe vraag- en luscode gebruiken voor al je paginasjablonen.

Problemen? Heb je wat andere WordPress-gerelateerde hulp nodig? Ik ben altijd bij de hand om te helpen bij MakeUseOf Answers, dus ga erheen en post daar een nieuwe vraag.

Ontdek meer over: Bloggen, Programmeren, Wordpress.