Annons

Många bloggare söker högt och lågt efter den perfekta WordPress-widgeten som gör exakt vad de vill ha, men med lite programmeringsupplevelse kanske du tycker det är lättare att skriva din anpassning widget.

Den här veckan skulle jag vilja visa hur man gör exakt det, och widgeten vi ska skriva är en enkel som väljer ut ett slumpmässigt inlägg från din webbplats, drar den visade bilden och visar den i sidofältet - en visuell "kolla in denna" widget som hjälper användare att hitta mer innehåll på din webbplats.

Detta är också en förlängning av en fortsatt serie där jag visar hur lätt det är att göra anpassa din WordPress-mall 2 nya coola Wordpress-plugins och förståelse av Wordpress-temstrukturenDenna vecka ska jag titta 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 som gör att du kan mata ut ... Läs mer .

Du kanske också är 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 uppdaterade tips och guider till världens favoritbloggsplattform.

Nyckelbegrepp: WordPress Queries and the Loop

Varje sida på din blogg består av en fråga till din databas med inlägg. Beroende på vilken sida du tittar på kommer frågan att ändras. Din bloggsida kan till exempel använda frågan "få de senaste 10 blogginläggen“. När du visar kategoriarkiv kan frågan ändras till "få endast de senaste 20 inläggen för kategorin familjefoton, beställ resultaten efter publicerat datum“. Varje fråga returnerar en uppsättning resultat, och beroende på vilken sidmall som används kommer varje resultat att köras genom mallens huvudslinga.

Men varje sida kan faktiskt bestå av mer än en fråga, och du kan till och med skapa dina egna frågor för att lägga till funktionalitet på 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 körs på varje sida som syftar till att visa relaterade artiklar du kanske är intresserad av, eller artiklar som trender detta vecka.

För att göra vår anpassade widget men vi behöver 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 visade redan förra veckan koden till ta tag i den visade bilden Ställ in din blogg med WordPress: The Ultimate GuideVill du starta din egen blogg men inte vet hur? Se till WordPress, den mest kraftfulla bloggplattformen som finns tillgänglig idag. Läs mer , så vi behöver egentligen bara veta hur man skapar en ny WordPress-widget och placerar den på sidofältet.

Grundläggande widgetkod

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

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

php. /* Plugin-namn: Slumpmässig postwidget. Plugin URI: http://jamesbruce.me/ Beskrivning: Slumpmässig postwidget tar ett slumpmässigt inlägg och den tillhörande miniatyren som du vill visa på din sidofält. Författare: James Bruce. Version: 1. Författare URI: http://jamesbruce.me/ * / klass RandomPostWidget utökar WP_Widget. {function RandomPostWidget () {$ widget_ops = array ('classname' => 'RandomPostWidget', 'description' => 'Visar ett slumpmässigt inlägg med miniatyrbild'); $ this-> WP_Widget ('RandomPostWidget', 'Random Post and Thumbnail', $ widget_ops); } funktionsform ($ instans) {$ instans = wp_parse_args ((array) $ instans, array ('title' => '')); $ title = $ instans ['title'];
Titel: 
php} funktionsuppdatering ($ new_instance, $ old_instance) {$ instans = $ old_instance; $ instans ['title'] = $ new_instance ['title']; returnera $ instans; } funktionswidget ($ args, $ instans) {extrakt ($ args, EXTR_SKIP); echo $ before_widget; $ title = tom ($ instans ['title'])? '': Apply_filters ('widget_title', $ instans ['title']); om (! tom ($ titel)) echo $ före_titel. $ Titel. $ After_title;; // WIDGET CODE GOES HERE echo "
 Detta är min nya widget! 
"; echo $ after_widget; } } add_action ('widgets_init', create_function ('', 'return register_widget ("RandomPostWidget");'));

Som det är gör inte plugin mycket utöver att skriva ut en stor titel med orden "Det här är min nya widget!“.

Det ger dig emellertid möjligheten att ändra titeln, vilket är ganska viktigt för alla widgetar. Att lägga till andra alternativ är lite utanför räckvidden för denna artikel idag, så för nu ska vi gå vidare för att ge den ett verkligt syfte.

En ny fråga & slingan

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

med följande:

// WIDGET CODE GÅR HÄR. query_posts ( ''); if (have_posts ()): while (have_posts ()): the_post (); titeln(); 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, kommer standard sannolikt att ta tag i de 10 senaste inläggen - då gör allt ovanstående kod att skriva ut titeln på varje inlägg. Det är ganska fult, men det fungerar:

Vi kan göra det lite bättre direkt genom att bara lägga till lite HTML-formatering till utgången med EKO och skapa en länk till inlägget med get_the_permalink () fungera:

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

• “; while (har_posts ()): the_post (); eko ”
  • ”.Get_the_title ().”

“; EndWhile; eko ”

“; endif; wp_reset_query ();

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

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

Naturligtvis kan du ändra det till valfritt antal inlägg - det finns faktiskt en hela utbudet av extra bitar som du kan överföra till frågan för att begränsa, utöka eller ändra ordningen på resultaten, men låt oss hålla fast vid det för tillfället. Om du uppdaterar bör du bara se ett inlägg som slumpmässigt sker varje gång du uppdaterar.

Nu för den visade miniatyren. Byt ut koden med denna, förhoppningsvis kan du se var vi tar tag i miniatyren och visar den:

query_posts ( 'posts_per_page = 1 & orderby = rand'); if (have_posts ()): echo "

• “; while (har_posts ()): the_post (); eko ”
  • ”.Get_the_title (); echo the_post_emonynail (matris (220.200)); eko "

“; EndWhile; eko ”

“; endif; wp_reset_query ();

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

Slutsats:

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