Advertentie

Veel bloggers zoeken hoog en laag naar de perfecte WordPress-widget die precies doet wat ze willen, maar met een beetje programmeerervaring vind je het misschien makkelijker om je custom te schrijven widget.

Deze week wil ik laten zien hoe je precies dat doet, en de widget die we zullen schrijven is een eenvoudige widget die één willekeurig bericht uit je site, trekt de afgebeelde afbeelding en geeft deze weer in de zijbalk - een visuele "check this out" -widget die gebruikers helpt meer inhoud op uw site te vinden site.

Dit is ook een uitbreiding van een doorlopende serie waarin ik je laat zien hoe makkelijk het is pas uw WordPress-sjabloon aan 2 nieuwe coole WordPress-plug-ins en inzicht in de WordPress-themastructuurDeze week ga ik een kijkje nemen naar een superieur alternatief voor de vaak geprezen All-In-One SEO; een plug-in die u de kracht van een Wordpress-publicatiesysteem geeft, maar waarmee u kunt uitvoeren ... Lees verder .

Wellicht ben je ook blij te weten dat we een nieuwe hebben toegevoegd

Categorie WordPress-zelfstudies naar MakeUseOf, dus zorg ervoor dat je dat bekijkt voor een steeds groeiend archief met up-to-date tips en gidsen voor 's werelds favoriete blogplatform.

Sleutelbegrippen: WordPress Queries and the Loop

Elke pagina op uw blog bestaat uit een zoekopdracht naar uw database met berichten. Afhankelijk van de pagina die u bekijkt, zal de vraag veranderen. Uw blogstartpagina kan bijvoorbeeld de vraag 'ontvang de laatste 10 blogposts“. Wanneer u het categoriearchief bekijkt, kan de query veranderen in "ontvang alleen de laatste 20 berichten voor de categorie familiefoto's, bestel de resultaten op publicatiedatum“. Elke query retourneert een set resultaten en afhankelijk van de paginasjabloon die wordt gebruikt, wordt elk resultaat door de hoofdlus van de sjabloon gehaald.

Elke pagina kan in feite uit meer dan één query bestaan ​​en u kunt zelfs uw eigen query's maken om functionaliteit toe te voegen aan verschillende plaatsen in uw sjabloon. Onderaan dit artikel ziet u een voorbeeld hiervan in gebruik - we hebben een paar extra vragen die worden uitgevoerd elke pagina die tot doel heeft u gerelateerde artikelen te tonen waarin u mogelijk geïnteresseerd bent, of artikelen die dit trending zijn week.

Om onze aangepaste widget te maken, hoeven we alleen maar een extra query te maken die het X-aantal willekeurige berichten plus hun afbeeldingen pakt en ze op de een of andere manier op de zijbalk weergeeft. Ik heb je vorige week de code al laten zien pak de afgebeelde afbeelding Stel uw blog in met WordPress: de ultieme gidsWil je je eigen blog starten, maar weet je niet hoe? Kijk naar WordPress, het krachtigste blogplatform dat vandaag beschikbaar is. Lees verder , dus we hoeven alleen maar te weten hoe we een nieuwe WordPress-widget moeten maken en deze in de zijbalk moeten plaatsen.

Basic Widget Code

Begin met het maken van een nieuw .php-bestand in uw wp-content / plugins directory. Je kunt de tutorial ook offline volgen en vervolgens uploaden met de WordPress-interface, maar ik vind het gemakkelijker om te schrijven terwijl we verder gaan voor het geval je moet debuggen. Noem je bestand hoe je maar wilt, maar ik ga mee random-post-widget.php

Plak het volgende in het bestand en sla op. Voel je vrij om de sectie bovenaan met mijn naam erin te veranderen, maar pas de rest van de code nog niet aan. Dit is in feite een skelet-lege widget en je kunt zien waar het staat // WIDGET CODE GAAT HIER is waar we later onze functionaliteit zullen toevoegen.

php. /* Plugin-naam: Random Post Widget. Plug-in URI: http://jamesbruce.me/ Beschrijving: Random Post Widget pakt een willekeurig bericht en de bijbehorende miniatuur om op je zijbalk weer te geven. Auteur: James Bruce. Versie 1. URI van auteur: http://jamesbruce.me/ * / class RandomPostWidget breidt WP_Widget uit. {function RandomPostWidget () {$ widget_ops = array ('classname' => 'RandomPostWidget', 'description' => 'Toont een willekeurig bericht met miniatuur'); $ this-> WP_Widget ('RandomPostWidget', 'Random Post and Thumbnail', $ widget_ops); } functieformulier ($ instantie) {$ instantie = wp_parse_args ((array) $ instantie, array ('title' => '')); $ title = $ instantie ['titel'];
Titel: 
php} functie-update ($ new_instance, $ old_instance) {$ instance = $ old_instance; $ instance ['title'] = $ new_instance ['title']; $ instantie retourneren; } functie widget ($ args, $ instance) {extract ($ args, EXTR_SKIP); echo $ before_widget; $ title = leeg ($ instance ['title'])? '': apply_filters ('widget_title', $ instance ['title']); if (! empty ($ title)) echo $ before_title. $ titel. $ after_title;; // WIDGET CODE GAAT HIER echo "
 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 het afdrukken van een grote titel met de woorden "Dit is mijn nieuwe widget!“.

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

A New Query & The Loop

Om een ​​nieuwe zoekopdracht in uw blogdatabase te maken, moet u de gebruiken query_posts () functioneren samen met een paar parameters en doorloop vervolgens de uitvoer met behulp van een while-lus. Laten we dit proberen - een heel eenvoudige query en lus om te demonstreren. Vervang de coderegel die zegt:

met het volgende:

// WIDGET CODE GAAT HIER. query_posts (''); if (have_posts ()): while (have_posts ()): the_post (); de titel(); uiteindelijk; stop als; wp_reset_query (); 

Dit is een absoluut eenvoudige query met standaardopties en nulopmaak van de uitvoer. Afhankelijk van hoe je blog is opgezet, zal de standaard waarschijnlijk de 10 laatste berichten zijn - en alle bovenstaande code doet de titel van elk bericht. Het is best lelijk, maar het werkt:

We kunnen het meteen een beetje beter maken door wat HTML-opmaak toe te voegen aan de uitvoer met de ECHO commando en het maken van een link naar het bericht met get_the_permalink () functie:

 query_posts (''); if (have_posts ()): echo "

• “; while (have_posts ()): the_post (); echo ”
  • ".Get_the_title ()."

“; uiteindelijk; echo ”

“; stop als; wp_reset_query ();

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

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

Je kunt het natuurlijk wijzigen in een willekeurig aantal berichten - in feite is er een hele reeks extra bits die u in de query kunt doorgeven om de volgorde van de resultaten te beperken, uit te breiden of te veranderen, maar laten we dat voorlopig even doen. Als je vernieuwt, zou je slechts één bericht moeten zien dat elke keer dat je vernieuwt willekeurig wordt weergegeven.

Nu voor de aanbevolen miniatuur. 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 "

“; uiteindelijk; echo ”

“; stop als; wp_reset_query ();

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

Conclusie:

Zie je hoe gemakkelijk het is om je eigen aangepaste widget te maken die precies kan doen wat je wilt? Zelfs als u 90% van de code die ik u vandaag heb getoond niet begrijpt, moet u deze toch enigszins kunnen aanpassen door alleen variabelen te wijzigen of verschillende HTML uit te voeren. We hebben vandaag een hele widget geschreven, maar u kunt eenvoudig alleen de nieuwe query- en luscode gebruiken op al uw paginasjablonen.