Så här skapar du dina egna grundläggande WordPress-widgets

Så här skapar du dina egna grundläggande WordPress-widgets / Wordpress & Webbutveckling

Många bloggare kommer att söka högt och lågt för den perfekta WordPress-widgeten som gör exakt vad de vill, men med lite programmeringserfarenhet kan det hända att det är lättare att skriva din anpassade widget.

Den här veckan vill jag visa hur jag gör just det och widgeten som vi skriver är en enkel som plockar ut ett enda slumpmässigt inlägg från din webbplats, drar den presenterade bilden och visar den på sidofältet - en visuell bild “kolla in det här” widget som hjälper användare att hitta mer innehåll på din webbplats.

Detta är också en förlängning av en fortlöpande serie där jag visar dig hur enkelt det är att anpassa din WordPress-mall 2 Nya Cool Wordpress-plugins och förståelse av Wordpress Theme Structure 2 Nya Coola Wordpress-plugins och förståelse av Wordpress Theme Structure Den här veckan ska jag var en titt på ett överlägset alternativ till den ofta berömda Allt-i-ett-SEO; ett plugin som ger dig kraften i ett Wordpress-publiceringssystem men låter dig producera ... Läs mer .

Du kan också vara glad att veta att vi har lagt till en ny WordPress Tutorials-kategori till MakeUseOf, så se till att kolla in det för ett ständigt växande arkiv med aktuella tips och guider till världens favoritbloggar.

Viktiga begrepp: WordPress-frågor och Loop

Varje sida på din blogg består av en fråga till din databas med inlägg. Beroende på vilken sida du tittar kommer frågan att ändras. Din blogg hemsida kan till exempel använda frågan “få de senaste 10 blogginläggen“. När du tittar på kategorin arkiv kan frågan ändras till “få de senaste 20 inläggen för kategorin familjefoton bara, beställa resultaten efter datum som publicerats“. Varje fråga kommer att returnera en uppsättning resultat, och beroende på vilken sidmall som används kommer varje resultat att köras genom huvudet “slinga” av mallen.

Varje sida kan faktiskt bestå av mer än en fråga, och du kan till och med skapa egna frågor för att lägga till funktionalitet till olika platser i din mall. Du kan se ett exempel på detta som används längst ned i den här artikeln. Vi har några ytterligare frågor som går ut på varje sida som syftar till att visa relaterade artiklar du kanske är intresserade av eller artiklar som trender denna vecka.

För att göra vår anpassade widget måste vi helt enkelt skapa en ytterligare fråga som tar tag i X antal slumpmässiga inlägg plus deras bilder och visar dem på något sätt i sidofältet. Jag har redan visat dig förra veckan koden för att fånga den utvalda bilden Hur man jazzar upp ditt WordPress genom att lägga till utvalda bilder Hur man jazzar upp ditt WordPress genom att lägga till utvalda bilder Utvalda bilder introducerades i Wordpress i version 2.9 och det gör att du enkelt kan visa en bild som är associerad med ditt blogginlägg i olika delar av ditt tema. Idag vill jag visa ... Läs mer, så vi behöver verkligen bara veta hur man skapar en ny WordPress-widget och lägger den på sidofältet.

Basic Widget Code

Börja med att skapa en ny .php-fil i din wp-content / plugins katalogen. Du kan också följa handledningen offline och ladda upp den med WordPress-gränssnittet, men jag tycker att det är lättare att skriva när vi går vidare om du behöver felsöka. Ring din fil oavsett vad du vill, men jag går med random-post-widget.php

Klistra in följande i filen och spara. Gärna byta avsnittet överst med mitt namn i det, men justera inte resten av koden än. Detta är i grunden en skelett tom widget, och du kan se var det står // WIDGET CODE GÅR HÄR är där vi lägger till vår funktionalitet senare.

  'RandomPostWidget', 'description' => 'Visar ett slumpmässigt inlägg med miniatyrbild'); $ this-> WP_Widget ('RandomPostWidget', 'Slumpmässig post och miniatyrbild', $ widget_ops);  -funktionsform ($ instans) $ instance = wp_parse_args ((array) $ instans, array ('title' => ")); $ title = $ instance ['title']; 

Det här är min nya widget!"; echo $ after_widget; add_action (" widgets_init ", create_function (", "returnera register_widget (" RandomPostWidget "); '));?>

Som det är, gör plugin inte mycket bortsett från att skriva ut en stor titel med orden “Det här är min nya widget!“.

Det ger dig dock möjlighet att ändra titeln, vilket är viktigt för vilken widget som helst. Att lägga till i andra alternativ är lite bortom omfattningen av den här artikeln idag, så för nu går vi vidare för att ge det ett riktigt syfte.

En ny fråga och loppet

För att göra en ny fråga till din bloggdatabas måste du använda query_posts () funktionen tillsammans med några parametrar, och kör sedan ut genom utgången med en stundslinga. Låt oss försöka med det här - en mycket grundläggande fråga och loop för att visa. Byt kodlinjen som säger:

Det här är min nya widget!

med följande:

 // WIDGET CODE GÅR HÄR query_posts ("); if (have_posts ()): while (have_posts ()): the_post (); the_title (); endwhile; endif; wp_reset_query (); 

Detta är en helt grundläggande fråga med standardalternativ och nollformatering av utgången. Beroende på hur din blogg är konfigurerad är det troligtvis att standardinställningen är att fånga de 10 senaste inläggen - då är allt ovanstående kod att utföra titeln på varje inlägg. Det är ganska ful, men det fungerar:

Vi kan göra det lite bättre direkt genom att bara lägga till lite HTML-formatering i utmatningen med EKO kommandot och skapa en länk till posten med get_the_permalink () fungera:

 query_posts ("); om (have_posts ()): echo"
    "; medan (have_posts ()): the_post (); echo"
  • ".Get_the_title ()."
  • "; äntligen, eko"
"; endif; wp_reset_query ();

Redan ser det mycket bättre ut. Men vi vill bara ha ett inlägg, valt slumpmässigt. För att göra detta anger vi några parametrar i frågan:

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

Självklart kan du ändra det till ett antal inlägg. Det finns faktiskt en hel del extra bitar som du kan passera in i förfrågan för att begränsa, expandera eller ändra ordningens resultat, men låt oss hålla fast vid det för nu. Om du uppdaterar bör du bara se ett inlägg som är randomiserat varje gång du uppdaterar.

Nu för den presenterade miniatyrbilden. Ersätt koden med detta, förhoppningsvis kan du se var vi tar miniatyren och visar den:

 query_posts ( 'posts_per_page = 1 & orderby = rand'); om (har_posts ()): echo "
    "; medan (have_posts ()): the_post (); echo"
  • ".get_the_title (); echo the_post_thumbnail (array (220,200)); echo"
  • "; äntligen, eko"
"; endif; wp_reset_query ();

Du kan se de färdiga resultaten igen på min utvecklingsbloggar självförsörjningsguide, även om jag kanske har flyttat saker runt när du läser detta.

Slutsats:

Se hur lätt det är att skapa din egen anpassade widget som kan göra exakt vad du vill ha? Även om du inte förstår 90% av koden jag har visat dig idag, borde du fortfarande kunna anpassa den något genom att bara ändra variabler eller skriva ut olika HTML. Vi skrev en hel widget idag, men du kan enkelt använda bara den nya sök- och slingkoden på någon av dina sidmallar.

Problem? Behöver du någon annan WordPress-relaterad hjälp? Jag är alltid till hands för att hjälpa till i MakeUseOf Svar, så gå vidare och lägg upp en ny fråga där.

Utforska mer om: Blogging, Programmering, Wordpress.