Opgraderingen gik helt smertefrit. Udover det sædvanglige problem med topmenuen der ikke længere virker. Det må jeg fikse på et andet tidspunkt… nu skal der nemlig laves noget aftensmad.

/Dann

Derfor er hjemmesiden nu blevet opgraderet til WordPress 2.6. Opgraderingen til 2.5 var klart den største ændring for WordPress i nyerer tid. 2.5 virkede desværre ikke super godt for mig. Men med opgraderingen til 2.6 virker de mange nye features men fik med 2.6 rent faktisk som de skal.

Eneste ulempe ved opgraderingen er at jeg skal rette lidt i det “hack” der er lavet for at lave topmenuen på siden.

Min sandkasse er også opdateret til WordPress 2.6.

/Dann

Opgraderingen gik helt efter bogen. Eneste lille ulempe er at mit tidligere “hack” for at lave en topmenu skulle tilpasses lidt. Alt i alt tog det maks 20 minutter.

/Dann

Billeder

Forbedringen af vores billeder går på at vi nu har fået implementeret et plugin til WordPress der hedder FAlbum. Pointen hermed er at man kan se alle de billeder vi har på Flickr direkte integreret i vores hjemmeside. På denne måde behøver man ikke forlade hjemmesiden for at se vores billeder. Hvorfor har vi dog brugt tid på det? Jo, vi ville gerne have at de besøgende fik en integreret oplevelse. Derudover havde vi et stort ønske om at have et 100% dansk interface til brugerne. Det har vi nu. Klik ind under billeder i menuen. I bunden af den side kan du se en oversigt over alle vores albums (sets) direkte fra Flickr.

Integrationen er sket ved først at installer et plugin med navnet FAlbum. Dette plugin fungere ved at det autorisere sig mod ens konto hos Flickr hvorefter man kan integrer sine billeder ind i en seperat del af sin hjemmeside – altså en slags galleri. Heldigvis er der en masse gode muligheder for at kalde koden direkte så man kan integrer ind i andre områder så som sidebar, en normal side osv.

De gode muligheder for integration har vi udnyttet så i bunden af vores sektionsforside under billeder, ja der kan man se alle vores sets fra Flickr.

Desværre findes der ikke en dansk udgave af dette plugin så det var nødvendigt at oversætte det. Det har vi så gjort. Oversættelsen er lavet på den dovne måde, således at det kun er brugerinterfacet og ikke administrationsinterfacet der er oversat. Har du lyst til at få de nødvendige filer (.mo og .po) for at gøre FAlbum dansk, så ta’ fat i os.

FAlbum ser ud til at virke rigtig godt. Indtil nu er vi kun stødt på tre dårlige ting:

1. Det understøtter ikke Flickrs collections (som kommer med en Flickr Pro konto)
2. Geo-tagging er ikke understøttet, så vil man se hvor billederne er taget skal man til Flickr
3. Man kan ikke helt selv styre hvad den viser på alle siderne. Den forsøger at gætte hvad man vil se og viser så det (man kan rette det direkte i koden til FAlbum hvis man vil)

Favicon

Vi har tilføjet et favicon til siden således at der dukker et specielt ikon op når man besøger vores hjemmeside eller tilføjer den til sine foretrukne.

Håndteringen af det var utroligt nemt. Tilføjede den nødvendige HTML kode i header.php og derefter var det bare at lave og uploade en favicon.ico fil (se nedenfor).

Favicon – hvilket billede og hvordan?

Et favicon har en meget lille størrelse. Vi havde derfor meget svært ved at finde ud af hvad det skulle være. Dann fik dog en idé som vi endte med at bruge.

Et af de mange gode billeder vores fotografer har taget til vores bryllup er hvor brudebuketten og ringene ligger på Lene slæb.

Her har vi beskåret billedet lidt og derved lavet et kvadratisk billede af ringene. Det billede kan ses nedenfor. Taget i betregtning af hvor lille en del af de orginale billede der er tale om, så er det simpelthen nogle fantastiske skarpe og højopløselige billeder vores fotografer har taget.

Dette billede har så været gennem FavIcon from Pics fra Chami  (der også laver den ret populære HTML-Kit).

Nu har vi både et rigtig godt billede af vores ringe og samtidig et favicon på hjemmesiden.

1. Åbn “page.php” i temaredigering. (her hedder den Side)
2. Efter den første DIV med ID content indsættes følgende kode:
   </p> <style> <p>a.bleekerHtmlBreadcrums {</p> <p> text-decoration: none;</p> <p>}</p> </style> <p>< ?php</p> <p>$bleekerHtmlBreadcrums = '';</p> <p>if(is_page()) {</p> <p> // Find ID pÃ¥ topparent</p> <p> $postParentFind = get_post(get_the_ID(), OBJECT);<br /> $bleekerHtmlBreadcrums = '<a href="'.get_permalink($postParentFind->ID) .’” title=”‘.$postParentFind->post_title.’”>’.$postParentFind->post_title.”;</p> <p> while ($postParentFind->post_parent <> 0) {</p> <p> $postParentFind = get_post($postParentFind->post_parent , OBJECT);<br /> $bleekerHtmlBreadcrums = ‘<a href="'.get_permalink($postParentFind->ID) .’” title=”‘.$postParentFind->post_title.’”>’.$postParentFind->post_title.’</a> > ‘ . $bleekerHtmlBreadcrums;</p> <p> }</p> <p> $bleekerHtmlBreadcrums = ‘<span style="color: #CCCCCC;">Placering: </span><a href="'.get_option('home').'" Title="Forsiden" class="bleekerHtmlBreadcrums">Forside</a> > ‘ . $bleekerHtmlBreadcrums; </p> <p>echo $bleekerHtmlBreadcrums;<br /> }</p> <p>?><br />
3. Gem siden.
   Der er nu en breadcrumb navigation på alle dine sider/pages.

Opdateret kode til undersider
Koden til at lave undersider på pages er opdateret så der nu kun er en overskrift hvis der rent faktisk er undersider:
<br /> < ?php</p> <p>$html_subpages_html = wp_list_pages("echo=0&title_li=&child_of=".$post->ID);</p> <p>if($html_subpages_html <> ”) {</p> <p> echo “<b>Undersider</b> <ul>$html_subpages_html</ul> <p>“;</p> <p>}</p> <p>?><br />
Erstat den eksisterende kode. Det virker nu lidt bedre.

Lille visningsfejl ved visning af enkelte indlæg i bloggen
Hvis de indlæg der er før og efter et givent indlæg har lange titler, så ender det med at se mærkeligt ud i Internet Explorer. For at rette det skal siden “single.php” der i temaredigering hedder Enkelt indlæg. I denne finder du den DIV der har ID post Lige før denne DIV indsættes nedenstående:
<br style="clear: both; line-height: 0; display: block;" />

Den lille bug er nu rettet.

Administrationen af siden skal være så nem som mulig. Det betyder at alt på hjemmesiden skal administreres i et system. Det troede jeg umidelbart at WordPress kunne håndtere idet det for nylig har fået tilføjet en lille funktion til at lave “pages”. Det var bare ikke lige så nemt som jeg troede. [ Inden nogen siger at det er grimt at bruge blog software som CMS: Det er grimt, men det er funktionelt - det er et hack ].

Efter at have installeret WordPress DK ver 2.2.1 (som gik utrolig nemt) var det tid til at få står på CMS delen. At lave sider er utrolig nemt. Det er også muligt at få siderne til at være placeret i et træ (dvs. en side er en underside til en anden osv.). Problemet kommer når man får den (efter min mening ret fornuftige) idé at der skal være en horisontal menu til de sider der er øverst i træet. Der skulle også helst være en mulighed så man kan se hvor i hierakiet (på øverste niveau) man er.

Det lyder jo som noget der må være nemt, da det er standardfunktionalitet i selv det mest simple CMS. Helt nemt var det nu ikke. Google og WordPress.net kunne ikke hjælpe. Så jeg begyndte at bladre kildekoden til WordPress igennem og her kommer en vejledning trin for trin. Jeg antager at man benytter “default” temaet.

N.B. Det er et hack, hvorfor det ikke vil virke efter en opgradering!

1. Gå ind og rediker koden i filen /wp-includes/classes.php og find linien med følgende kode:
   $output .= $indent . ‘<br> <li class=”‘ . $css_class . ‘”><a href=”‘ . get_page_link($page->ID) . ‘” title=”‘ . attribute_escape(apply_filters(‘the_title’, $page->post_title)) . ‘”>’ . apply_filters(‘the_title’, $page->post_title) . ‘</a>’;
   Den erstatter du med følgende linie:
   $output .= $indent . ‘<br> <li id=”liPageID-’.$page->ID.’” class=”‘ . $css_class . ‘”><a href=”‘ . get_page_link($page->ID) . ‘” title=”‘ . attribute_escape(apply_filters(‘the_title’, $page->post_title)) . ‘”>’ . apply_filters(‘the_title’, $page->post_title) . ‘</a>’;

   Hos mig er det linie 517 i classes.php.

   Formålet med denne ændring er at lave et unikt ID til hvert menupunkt. (se nedenfor)

   Det var hacket, resten kan klare en opgradering da der rettes i temaer.

2. Gå ind og rediger i temaet. Vælg filen “Header”
   Her skal vi have tilføjet en hel del kode. Start med at copy pase nedenstående ind lige over php wp_head();

   <br /> <style> <p>#bleeker-header-menu {</p> <p>padding: 0; border: 0; margin: 0; float: bottom; } </p> <p>#bleeker-header-menu ul {</p> <p>font: bold 11px Arial; margin: 0; padding: 0; list-style: none; margin-left: 40px; }</p> <p>#bleeker-header-menu li {</p> <p>display: inline; margin: 0 0 0 0; padding: 0; text-transform:uppercase; }</p> <p>#bleeker-header-menu a {</p> <p>float: left; display: block; color: white; margin: 0 2px 0 0; /*Margin between each menu item*/ padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; /*Default menu color*/ }</p> <p>#bleeker-header-menu a:hover{ background-color: gray; /*Menu hover bgcolor*/ }</p> <p>< ?php</p> <p>if(is_page()) { // Find ID på topparent</p> <p>$postParentFind = get_post(get_the_ID(), OBJECT); while ($postParentFind->post_parent <> 0) {</p> <p>//echo $postParentFind->post_title . "(".$postParentFind->ID.")<br />";</p> <p> $postParentFind = get_post($postParentFind->post_parent , OBJECT);</p> <p>} /* if( $postParentFind->post_parent == 0) { echo $postParentFind->post_title . "(".$postParentFind->ID.")";</p> <p> echo " Vi er i toppen"; } */ echo "#liPageID-".$postParentFind->ID; } else {</p> <p>echo "#bleeker-header-menu-current"; } ?> a{ /*currently selected tab*/ background-color: transparent; border-color: white; }</p> <p>#bleeker-header-menu-searchform { float: right; margin: 0; padding: 0; //padding-bottom; 2px; margin-right: 10px; dispalay: inline; }</p> <p>#bleeker-header-menu-searchform .textinput { width: 190px; //border: 1px solid gray; }</p> <p>#bleeker-header-menu-searchform .submit { font: bold 11px Verdana; //border: 1px solid gray; background-color: lightyellow; }</p> </style> <p>

   Ovenstående giver al den CSS kode der er nødvendig for at få det til at virke. Det er nødvendigt at koden er på denne side. Den kan altså ikke flyttes til et eksternt stylesheet (det skyldes at der er noget PHP kode blandet ind der hjælper lidt til).

3. Nu skal vi have tilføjet selve menuen
   Der hvor headerimg DIV’en afsluttes skal nedenstående indsættes
   </p> <div id="bleeker-header-menu"> <ul> <li <?php if(is_page() == false) { echo 'ID="bleeker-header-menu-current"'; } ?> ><a href="<?php echo get_option('home'); ?>/”>Forside (Blog)</a></li> <p>< ?php wp_list_pages('depth=1&title_li='); ?> </ul> <form id="bleeker-header-menu-searchform" method="get" action="<?php bloginfo('url'); ?>/”></p> <input type="text" value="<?php the_search_query(); ?/>” name=”s” /></p> <input type="submit" value="Søg" /> </form> </div> <p>
   Nu er der indsat den nødvendige kode til at lave menuen.
4. Gem siden
   Hvis du har lavet nogle sider/pages i WordPress, ja så vil de nu dukke op i toppen af din side.
5. Men, der er en bug i visse browsere (IE) der viser CSS’en lidt forkert.
   Den kan vi fikse ved at åbne style.cssfilen i Temaredigering. Herinde skal du finde de to ting der piller direkte iheaderimg. I den første erstatter du height så den nu hedder height: 200px;. I den anden slette du height angivelsen. Gem filen.
6. Du er nu helt færdig

Bonus – Lav en “underside menu”

1. Åbn filen “Side” til temaredigering
2. Lige før koden php endwhile; endif; indsættes nedenstående
   <br /> < ?php</p> <p>echo "<b>Undersider <ul>“;<br /> wp_list_pages(“title_li=&child_of=”.$post->ID);<br /> echo “</ul> <p>“;</p> <p>?></p> <p>

3. Gem siden
   Nu er der en “undermenu” på alle dine sider.