Menu met tussenstreepjes

Op een nieuw te maken website heeft de vormgeefster leuk van die tussenstreepjes in het menu verzonnen. Van die streepjes | die je niet met een border kunt maken omdat ze dan te hoog worden.

Het menu is een ongeordende list (UL). Het is een WordPress websites en actieve elementen krijgen een eigen class. De streepjes zitten alleen tussen twee items in. Het begin en het eind van het menu kent dus geen streepje.
Ik heb gekozen om content in het list-element te gebruiken, en wel een | voor hetmenu-item [Lees meer...]

Fontface en internet explorer

Op een nieuwe website die ik aan het bouwen ben, had Karen Folkertsma (die de vormgeving weer voor haar rekening heeft genomen) een leuk lettertype voor het menu bedacht. Dat kan tegenwoordig, dacht ik, en ging er mee aan de slag. In firefox, chrome en safari natuurlijk geen probleem. Maar toen  ik in internet explorer ging kijken, zag ik daar slechts het vervangende font in het menu. Vele pagina’s en zoekpogingen verder heb ik eindelijk de oplossing. [Lees meer...]

Een submenu met de Gecka submenu plugin

Al een tijdje heeft WordPress de mogelijkheid tot het maken van custom menu’s via de menu-manager. Heel handig als je net als ik, pagina’s en berichten door elkaar gebruikt. Zonder veel moeite plak je die makkelijk allemaal in één menu, op een eigen volgorde, door elkaar. Handig van de menumanager is ook het meermalen laten terugkomen van een bepaalde pagina als deze in meerdere submenu’s moet terugkomen. Zoiets had ik bij de website van Socius, waar cursussen terugkwamen in de menuonderdelen van de diverse doelgroepen. Heel aardig, maar waar ik op die website tegenaan liep is het submenu wat ik wilde plaatsen in de sidebar. Nooit een punt bij het pagina-menu met de plugin Sub Page Menu, maar met dit menu?? Veel navragen en zoeken leverde niets op. We hebben hier zelf maar een aantal menu’s gemaakt. [Lees meer...]

WordPresswebsite op je mobiel

Nu de smartphones een beetje gemeengoed aan het worden zijn is het zaak om de website natuurlijk zo goed mogelijk te tonen op zo’n telefoon. Op de meeste telefoons kun je de website ‘normaal’ zien, zoals op een computerscherm. Maar om de teksten te kunnen lezen moet je wel steeds in- en uitzoomen. Iets wat natuurlijk niet wenselijk is. Daar komt bij dat de meeste websites niet meer zo zuinig zijn met bytes. De meeste mensen zitten immers tegenwoordig op de kabel.
Dit is echter anders op een mobiel. Daar is vooral de inhoud van de website belangrijk en dat hij lekker snel laadt en niet teveel van je eventueel surftegoed op verbruikt. Op dit moment heb ik op deze website de plugin WPTouch Pro geinstalleerd. Deze plugin is niet gratis, maar kost ca €22 voor één licentie. Voordeel van deze betaalversie is dat je zelf themes kunt toevoegen. Er is wel een gratis versie: WPTouch, werkt ook prima, maar hier kun je alleen gebruik maken van de bijgeleverde themes. [Lees meer...]

Pagina volgorde

Een vraag die vaak voorbij komt is het op volgorde zetten van de pagina’s in het menu. Nu zijn er verschillende manieren om ze op volgorde te zetten, te bepalen in de php code bij bijvoorbeeld de wp_list_pages. Hierbij kun je instellen of je de pagina’s alfabetisch of op eigen volgorde wilt zetten (sort_column: post_title of menu_order zie ook Codex). Alfabetisch op titel is natuurlijk duidelijk, maar voor de menu_order ofwel de eigen volgorde zijn er verschillende manieren: gebruik maken van de optie in WordPress zelf of gebruik maken van één van de plugins die dit regelt. [Lees meer...]

Louise Boelens

screenshot_louiseboelensLouise Boelens had een website onder de naam Bureau Boelens. Zij wilde graag een nieuwe site onder haar eigen naam in een nieuwe vormgeving. Deze vormgeving is verzorgd door Karen Folkertsma, die mij vroeg haar ontwerp om te zetten naar een WordPress website.

Hoewel Louise Boelens gebruik wilde maken van de weblogfunctie van WordPress, moest de website toch voornamelijk bestaan uit statische pagina’s. Om bepaalde pagina’s makkelijker te onderhouden, zoals bijvoorbeeld de pagina Artikelen onder Publicaties is ook voor deze pagina’s gekozen voor de weblogfunctie. Alleen is op deze pagina’s een overzicht te zien van slechts één rubriek.

Multilevel Navigation Plugin in IE6

Op een aantal websites heb ik met veel plezier de Multilevel Navigation Plugin gebruikt. Dat ging overal ook goed, ook in IE6. Totdat zowel wordpress als de plugin een upgrade hadden en het menu opeens in IE6 (internet Explorer 6) niet meer werkte. Nu is deze browser wellicht oud en ontzettend achterhaald, maar veel mensen en vooral ook bedrijven hebben de overstap nog niet gemaakt. Het is dus zaak het menu in orde te krijgen. Gelukkig wist de ontwikkelaar van de plugin de oplossing. Deze oplossing werkt vanaf versie 2.3.3 van de plugin. [Lees meer...]

Multi level navigation plugin

Gisteren schreef ik over het uitklapmenu en dat ik daarvoor de multi-level-navigation plugin had gebruikt. Helaas was gisteren de css generator uit te lucht, maar vandaag was deze weer beschikbaar. Je kunt hier gebruik maken van een aantal standaards, waaronder een wordpress standaard, en verder ook aangeven dat je het menu geoptimaliseerd wilt hebben voor wordpress. Van een gekozen standaard kun je dan de kleuren ed aanpassen. Heel handig. Maar helaas is voor de gewone bezoeker alleen het horizontale dropdownmenu beschikbaar, terwijl ik juist geinteresseerd was in het verticale flyout menu. Dat is helaas alleen voor members. Gelukkig kun je ook per week member worden. Wat ik dus ook maar gedaan heb. Dit kost $4,99 en dit abonnement wordt automatisch elke week verlengd, tenzij je voor het verstrijken van die week opzegt. Dat opzeggen heb ik dan ook maar gelijk weer gedaan. Het aanpassen van de kleuren in de css lukt me prima zelf. Ook het aanpassen van de css voor het uitvouwen lukt wel, maar met hulpgrepen. Nu ben ik dus in het bezit van 3 css bestanden met de hoofdlijnen van de drie menu’s die worden aangeboden (horizontal dropout, vertical flyout en horizontal slider)

Uitklapmenu in wordpress

Iemand wil graag een uitklapmenu in wordpress. Nu heb ik al vaker gewerkt met de fold_page_list plugin, maar deze schuift alleen uit naar beneden als je erop klikt en de bedoeling was eigenlijk dat hij op mouseover al zou uitschuiven en dat je dan op een item kon klikken. En dan moest het menu liever niet naar onderen, maar naar opzij uitschuiven. Het Suckerfish menu wordt hier vaak voor gebruikt, dus op zoek naar een plugin. Ik kwam in eerste instantie terecht bij de ryans-suckerfish-wordpress-dropdown-menu plugin, maar eenmaal geinstalleerd en geactiveerd gaf hij aan dat er een opvolger voor deze plugin is:  de multi-level-navigation-plugin. Dus deze dan maar geinstalleerd in plaats van de suckerfish. Overal kom ik tegen dat er een css-generator zou moeten zijn waarmee je de css kunt generen voor je menu, maar helaas, deze blijkt onvindbaar. De plugin is gemaakt om een horizontaal menu te krijgen bij de header, maar dat wil ik niet. Ik wil een vertikaal menu in de sidebar. Een widget voor deze plugin is er niet, dus installeer ik de execphp plugin, waarmee ik een widget in de sidebar kan zetten waar ik de code voor het menu in kan zetten. Het vergt wat aanpassingen in de css, maar na veel gepuzzel staat het menu eindelijk netjes onder elkaar en schuift het keurig naast het menu uit. Kleur ed zijn nog niet aangepast, maar dat is van later zorg. Het schuift nu nog naar links uit in een rechter sidebar, maar naar rechts uitschuiven in een linkersidebar lijkt me nu ook wel te doen.

Zelf sleutelen aan wordpress

Voor een opdrachtgever moet er even een website uit de grond gestampt worden. Ik bied aan deze in wordpress op te zetten, zodat ze hem zelf kunnen vullen. Alles goed en wel. Maar er is ook een vormgeefster die de vormgeving van de site maakt. Een mooie vormgeving, maar wel met wat haken en ogen. Zo is er een sidebar waarin een submenu moet komen, een andere sidebar waarin afhankelijk van de tekst in het hoofdvak een foto of een introtekstje komt. En nog een paar kleine dingen. Ik ga optimistisch aan de slag. Er lukken een aantal dingen vrij redelijk, maar dan gaat het mis. Het begint met het submenu. Dat wil ik uitklapbaar hebben (dat lukt) en dat de link in het hoofdmenu actief blijft (lukt ook). Maar wat niet lukt is dit vol te houden tot het laatste niveau. Zodra ik bij het derde niveau aan kom is het mis. Ik gebruik een script waarbij het hoofditem (de hoofdpagina) in een topnavigatie staat en de subpagina’s in het submenu. Zodra ik bij het laatste niveau aankom is het script vergeten dat de pagina waar de subpagina onderhangt eigenlijk ook weer een subpagina is. Het is duiken in de database en in de code. Moeilijk als je maar een heel klein beetje php kent. Maar uiteindelijk met wat hulp gaat het goed. Niet perfect. Bij het laatste niveau is het hoofditem niet meer gekleurd, maar het menu klapt netjes uit. [Lees meer...]