WordPress Theme Development Training Wheels Dag fyra

Nu har vi tagit hand om egna menyer, låt oss fokusera på dynamiska sidfält och hur de kan användas inom ett tema.

Vad är en dynamisk sidobalk exakt? Det finns 3 delar av namnet vi behöver hantera när det gäller detta ämne.

Dynamisk

För det första, "dynamisk". Dynamiskt hänvisar till det faktum att sidofältet kan styras från administrationens instrumentpanel och enkelt ändras. Dessutom kan dess innehåll dras från ständigt uppdaterad WordPress-information som inlägg, kommentarer och andra regelbundna uppdaterade innehållstyper så att varje gång ett nytt inlägg läggs till kan det dras in i ett nytt inläggsblok med innehåll eller widget (vi kommer att hantera med termen widget i en bit.).

Sidebar

För det andra, "Sidofält" avser ett innehållsområde, vilket inte nödvändigtvis behöver placeras vid sidan av layouten (konstigt jag vet). Termen arvades från de tidiga dagarna av bloggstilformat där widgets var ganska mycket alltid placerade vid sidan. Sidofältet innehåller ytterligare innehållsbloggar eller plugins genererade data som visas i form av "widgets" vanligen vid sidan, i sidhuvudet eller i sidfoten av WordPress-teman men kan också placeras på något sätt som önskas inom temat layout.

widget

En widget är ett litet innehållsblock, som i allmänhet innehåller länkar eller innehåll som är associerade med sidor eller inlägg. Dessa kan innehålla listor med inlägg, kommentarer, taggar, kategorier och en rad andra innehållsinställningar som är inbyggda och vissa genereras av ytterligare plugins.

Widgets kan läggas till "widget ready" -teman via Appearance -> Widgets i administrationspanelen med hjälp av det inbyggda dra och släpp widgethanteringsområdet. Teman stöder inte widgets automatiskt och måste göras widget redo genom att registrera en speciell funktion, på samma sätt som vi registrerade de anpassade menyerna.


Steg 1 Registrering av sidobalkar - via functions.php

Innan vi registrerar sidfält i något WordPress-tema, ser vi följande när du besöker Appearance -> Widgets.

I likhet med de anpassade menyerna i vår tidigare lektion, för att den dynamiska sidobarfunktionen ska fungera i ditt tema behöver ditt tema en functions.php-fil som registrerar sidofältet. Den enkla functions.php-filen ska innehålla följande kod:

 

Var försiktig så att du inte lämnar tomma mellanslag efter kod i din funktionsfil eftersom det ibland orsakar problem som kan leda till vita skärmar när du tittar på ditt tema på framsidan.

Den enda aspekten av den här koden som skulle behövas för att redigera i början skulle vara mängden dynamiska sidospårsområden att registrera i "register_sidebars (1);". Vi behandlar namngivna sidfält på lite. För närvarande har vår kod ovan registrerat 2 sidofält identifierade endast av deras nummer.

Om du vill ha 5 dynamiska sidospårsområden i ditt tema ändras numret till 5 - "register_sidebars (5);". I det fallet skulle du ha 5 dynamiska sidobar områden numrerade 1 - 5.

Funktionen har ett "if" -förklaring eller villkorligt argument som kontrollerar om register_sidebarsfunktionen finns i den här versionen av WordPress. Om svaret kommer tillbaka med ett ja, körs register_sidebars-funktionen. Med tanke på sidfält har stöds från version 2.2 av WordPress, är det förmodligen onödigt att oroa sig för denna aspekt av koden.

När din funktionsfil är klar kan du fortsätta lägga in widgets i de nya sidofältet som vi har skapat.

Du kan nu fånga widgets från området "Tillgängliga widgetar till vänster" och släppa dem i sidofältet 1 eller 2 områden till höger.


Steg 2 Placering av numrerad sidofält

När din funktionsfil är klar kan du fortsätta att infoga den dynamiska sidfältkoden i områdena i ditt tema där du vill dynamiskt lägga till WordPress-widgets. Koden nedan är den mest grundläggande formen av sidospärrplaceringskoden. Den enda aspekten som behöver ändras är numret som återspeglar vilket numrerat sidofält du vill placera på den specifika platsen.

 

Vi placerar denna kod i vår vänstra sidofält

Koden ovan bör räcka till för att den registrerade sidofältet ska visa widgetinnehållet inom temat. Så vi går vidare och lägger till några widgets.

Vilket resulterar i

Jag har fått lägga till ytterligare CSS för att ta hänsyn till de nya tilläggen. I huvudsak har jag lagt till i sidobar widget CSS från tjugo elva temat. Du kan behöva skriva anpassad CSS för dina egna teman så att de passar in i layouten, styling & coloring för ditt tema. Jag lägger in CSS i slutet av lektionen.

För att säkerställa att vårt sidofält fortfarande visar något i de fall där widgets ännu inte har lagts till eller i den utomstående händelsen som sidfält inte har registrerat, (vi hoppas att ingen kör pre-version 2 WordPress) måste vi utöka placeringskoden med följande. Lägga märke till dynamic_sidebar (1) är fortfarande i den första raden av kod!

   

Vad gör koden ovan?

Linje 1 av koden kontrollerar för att se om du har registrerat några sidfält i din functions.php-fil och i så fall vilket sidfältnummer som ska infogas på den här platsen.

Linje 2 fungerar som en standard widget som visar en lista över dina webbplatsens inläggskategorier om inga dynamiska widgets har lagts till. När en dynamisk widget läggs till i ditt sidofält i din instrumentpanel, kommer standard widgeten att ersättas av den dynamiska.

Linje 3 avslutar om argumentet som linje 1 startade. I PHP-argument som om, vilket är ett villkorligt uttalande, måste också avslutas så argumentet påverkar inte någon PHP-kod som följer. Avsluta inte om med endivet; kommer att bryta ditt tema!

Den enda delen av de 3 raderna med dynamisk sidfält kod som verkligen behöver redigeras är numret, för att ange vilket specifikt numrerat sidofält som ska infogas vid denna speciella plats.

Standard, hårdkodade widgets

Från WordPress Documentation (The Codex) är det några av de funktioner som kan användas för att "hårddiska" widgets i sidofält och att inkludera som standard widgets i sidobar placeringsnummer.

wp_list_authors () - Visar en lista över webbplatsens författare (användare), och om användaren har skrivit några inlägg visas författarens namn som en länk till sina inlägg.

wp_list_categories () - Visar en lista över kategorier som länkar. När en kategorilänk klickas visas alla inlägg i den kategorin

wp_dropdown_categories () - Visa eller hämta HTML-listrutan för kategorier.

wp_tag_cloud () - Visar en lista med taggar i det som kallas ett "tag cloud", där storleken på varje tag bestäms av hur många gånger den särskilda taggen har tilldelats inlägg.

wp_list_pages () - Visar en lista med WordPress-sidor som länkar.

wp_list_bookmarks () - Visar bokmärken som finns i Administration -> Länkar-panelen.

get_comments () - Lista kommentarer baserat på nummer, ordning och andra parametrar.

wp_get_archives () - Den här funktionen visar en datumbaserad arkivlista.

Dessa funktioner kan också användas var som helst i temat för att skapa listor med olika innehåll från webbplatsen för att hjälpa användarna att hitta innehåll lättare.

Inklusive standard hårdkodade widgets

Vi kan då använda denna placeringskodskonvention för att placera vårt sidofält nummer 2 i höger sida av vårt tema.

  

kategorier

Arkiv

    'en gång i månaden' ) ); ?>

Vi kan också inkludera annat HTML-innehåll som standard widget innehåll som ska visas innan dynamiska widgets läggs till via widgeten admin. Det här kan innehålla ett meddelande som påminner webbplatsägare om att lägga till widgets fysiskt när de aktiverat det nya temat.

Inklusive HTML Standard Innehåll

  

Inga widgets tillagda

Vänligen logga in och lägg till några widgets till det här sidofältet

Som vi kan se nedan har vi infogat sidospårplaceringskod till standardinnehållet antingen av widgets som illustreras i vänster sidofält eller annat HTML-innehåll som illustreras i det högra sidofältet. Detta kommer att visas så länge som inga dynamiska widgets läggs till via widgetens instrumentpanel. När dynamiska widgets läggs till kommer de automatiskt att ersätta dessa standardinställningar.

Nu för att testa några dynamiska widgets lade vi till följande 2 dynamiska widgets:

Vilket resulterar i följande utseende.

För närvarande har vi 2 placeringskoder med olika standardinnehåll, men dra samma sidoregion till både vänster och höger sida av vårt tema. För att avhjälpa detta ändras eller ändras sidkodsplaceringskoden i det högra sidofältet för att placera sidfältet nummer 2 istället för sidofältet 1 enligt följande. Som vi kan se behöver vi bara ändra numret till vilken numrerad sidofält vi vill placera.

  

Inga widgets tillagda

Vänligen logga in och lägg till några widgets till det här sidofältet

Vi kan nu hantera våra vänster och höger sidofält oberoende.


Registrera namngivna sidofält

När du har lagt till en viss mängd sidor i ditt tema, inser du snabbt behovet av att ha namn istället för bara siffror. Det här hjälper dig att komma ihåg vilka områden av din sida eller mallar som den specifika sidofältet placeras i.

För att registrera namngivna sidfält måste följande kod användas för att registrera sidfält i din functions.php-fil:

 

Den enda skillnaden vad gäller vad som registreras här är för tillfället namnet på sidofältet. Ett antal parametrar finns för att ytterligare anpassa HTML-utmatningen på sidobar widgets enligt följande:

  • namn - Sidpanelens namn.
  • id - Sidvägs-id - Måste vara i små bokstäver, utan mellanslag.
  • beskrivning - Textbeskrivning av vad / var sidofältet är. Visas på widgethanteringsskärmen. (Sedan 2,9)
  • before_widget - HTML för att placera före varje widget.
  • after_widget - HTML för att placera efter varje widget.
  • before_title - HTML för att placera före varje titel.
  • after_title - HTML för att placera efter varje titel.

Källa: register_sidebar

Använda några av dessa i arrayformat resulterar i följande kodstruktur.

 'Vänster sida', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'

',' after_title '=>'

',)); ?>

Detta resulterar i följande HTML-utmatning.

Vi kan ändra HTML-omslag för widgetbehållaren och titeln med andra HTML, klasser, ID-er etc..

För att registrera mer än ett Dynamic Sidebar-område dupliceras vi register_sidebar område av koden tillsammans med dess uppsättning parametrar så många gånger som behövs för att registrera ytterligare sidofält.

 'Vänster sida', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'

',' after_title '=>'

',));
register_sidebar (array ('name' => 'Right Side', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'

',' after_title '=>'

',)); ?>

Med dessa ytterligare parametrar kan vi lättare styra HTML-utgången så att vi kan matcha strukturen vi behöver för den stil som vi försöker uppnå. Vi använder koden ovan för att ersätta våra numrerade sidfält med namngivna.

Det är viktigt att notera att när du ändrar sidfältregistreringar, så har jag just gjort det, eller när du lägger till ytterligare sidfält, särskilt för teman som körs på levande webbplatser, kan widgets eventuellt vara felaktigt allokerade av WordPress

WordPress försöker generellt hålla widgets i sidofält baserat på deras order, så om ett sidobalkområde tas bort eller läggs till kan WordPress omfördela dina befintliga widgets till sidofält som motsvarar föregående sidobalkbestämning. I vårt fall just nu är detta inte ett problem eftersom vi fortfarande bara har 2 sidor, så våra widgets blir där de var.

För närvarande har vi ändrat namnen i vår registreringskod, för att vi har en enkel 2-sidig inställning, kan WordPress fortfarande placera våra namngivna sidfält i vårt tema baserat på deras order. Vi behöver dock redigera vår sidobarplaceringskod för att återspegla namnen som vi har skapat för att undvika eventuella problem i framtiden.


Placering av namngivna sidfält

Om du placerar namngivna sidfält måste du ändra numret, i vår placeringskod, till sidofältets namn. Så använder vi den allra första placeringen kod som vi började med, det är den enklaste:

 

Namnet vi använder måste vara identiskt med namnet vi får sidofältet i vår registreringskod.

När det gäller den mer utökade placeringskoden vi använde för våra numrerade sidfält:

  

Inga widgets tillagda

Vänligen logga in och lägg till några widgets till det här sidofältet


Sidofält Widget CSS

Med hjälp av HTML-utmatningen genererad av registreringskoden kan vi nu utforma våra sidobarelement till vårt hjärtans innehåll.

Länken nedan beskriver några av de viktigaste sidobar / widget-CSS-elementen vi måste överväga när vi förbereder teman för offentliggörande. Det här är så att användare som lägger till de vanligaste widgetsna kommer att ha dem pre-styled för att matcha tematets utseende och layout.

WordPress Standard CSS Styles - Jeff Star, DigWP

Gå nu vidare och widgetize!