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'=>'<h3>','after_title'=>'</h3>'));

Därefter skapade jag min masthead-div i header.php och i tre separata boxar adderade jag (visar bara en rad här):

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Top Left') ) : else : ?><?php endif; ?>

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):

1
2
3
4
5
6
7

<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').toggle('4000');
});
});
</script>

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:

1
2
3
4
5
6
7

<script type="text/javascript">
$(function() {
$('a[class=toggla]').click(function() {
$('#box').toggle('4000');
});
});
</script>

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.

Uppmaningen kommer eftersom det trillar in en hel del besökare till min blogg efter googlesökningar på ”jquery”. Men mitt enda inlägg om jquery suger sannolikt i jämförelse med vad du har att komma med?!

Om du vill får du gästblogga här om jQuery…kontaktinformation högst upp till höger.

Mer om jquery, gästblogga, googlesökningar

Jag följer videoguiderna @ In the Woods och om du inte känner för att kolla på avsnitt ett och två, kan du hämta hem lite ”jQuery-kod” här:

• jquery-appendto.htm
• jquery-css-selectors.htm
• jquery-fadein.htm
• jquery-fadeout.htm
• jquery-hide.htm
• jquery-show.htm
• jquery-slidedown.htm
• jquery-slideup.htm

Implementera jQuery från Google AJAX Library
Besök Andreas Karman som skriver om för- och nackdelar med extern hantering av javascript.

Problemet som uppstod var att TinyMCE inte visades när jag skulle till att redigera ett inlägg om Synsam Örebro. En sökning på Google gav varierande resultat men efter en kort stund hittade jag rätt:

Problemet låg i att en del mappar saknades i ”wp-includes/js” vilket uppmärksammandes i den här tråden på det officiella supportforumet för WordPress.

Felet uppstod när jag använde FileZilla och det kan vara någon inställning som jag missat. Vad jag kan se finns inga brister i den nedladdade ZIP-filen från WordPress.org.

Mer om tinymce, filezilla, jquery