På en kundsajt under utveckling har jag en så kallad ”masthead” längst ner i headern. Innehållet där består av tre widgets och jag brottas med tanken om innehållet ska visas överallt eller om jag ska villkora bort visningen på vissa sidor.
Skulle jag välja att villkora bort synligheten av min masthead kan jag göra det enkelt för mig och t.ex. bara visa den på sidor (WordPress:Pages) men inte ovan enskilda inlägg (WordPress:Single Posts).
Ett annat sätt att villkora visningen är att matcha permalänken eller ID-numret för att avgöra om masthead ska visas eller inte. Detta gör jag isåfall med en include.
Men så kikade jag på mitt gamla inlägg om jQuery och testade slideDown. Det fungerade direkt men det blev lite grötigt med en stängningslänk (slideUp). Så jag gick istället vidare med toggle-funktionen. På så vis kan jag ”toggla” (visa och dölja) synligheten av innehållet i mina tre widgets.
Så här gjorde jag
Först adderade jag tre nya widgets för enkel uppdatering av innehållet. Varje widget ges ett unikt namn och det namnet anger jag i functions.php-filen för mitt WordPress-tema. Här är koden där ”Top Left” är det unika namnet på widgeten:
register_sidebar(array('name'=>'Top Left','before_widget'=>'','after_widget'=> '','before_title'=>'
','after_title'=>'
'));
Därefter skapade jag min masthead-div i header.php och i tre separata boxar adderade jag (visar bara en rad här):
För att ”toggla” synligheten av dessa tre widgets – eller hela masthead om du vill – la jag till en snutt javascript i header.php (inläsning av scriptet från extern källa är dock att föredra):
För att där ska fungera måste du ha en div-tagg med box som ID. Dessutom bör du se över din CSS-fil för styling av utrymmet som du togglar. Där är jag nu men jag tänkte att ett blogginlägg om ämnet var på sin plats först. Hoppas du gillar det.
Uppdatering 1
Kodsnutten ovan gör att alla länkar på webbplatsen kontrollerar toggle-funktionen. Trial & Error rox!
Uppdatering 2
Lösningen är att ”klassa” länken som styr synligheten av masthead. Jag gav länken klassen ”toggla” och det ger detta:
4000 är millisekunder för hur lång tid det ska ta att expandera masthead. Förmodligen finns det någon annan lösning men jag nöjer mig med detta så länge.