Verschillende stylesheets voor verschillende pagina’s in WordPress

WordPress is nog steeds het meest gebruikte website CMS systeem ter wereld. Verreweg. Maar WordPress is niet flexibel wat betreft layout. Zeker niet in vergelijking tot Joomla. Om layout naar eigen wensen in te vullen, zijn vaak “hacks” nodig in theme bestanden. Daarbij is het dan handig om “snippets” (stukjes code) bij de hand te hebben. Probleem: WordPress gebruikt voor elke pagina hetzelfde theme en daarmee dezelfde stylesheet. Dat is anders in Joomla. Daar is het heel eenvoudig om aan te vinken welke template voor welke pagina of menu items gebruikt moet worden. Een groot gemis in WordPress. Zo zou je bijvoorbeeld voor elke pagina een andere achtergrond afbeelding willen gebruiken of andere kleuren of zoals in mijn geval: een andere “border class” voor de content. Hier een oplossing. Plaats de volgende snippet vlak boven  <?php wp_head(); ?>  binnen header.php file. Snippet: <?php if (is_page(‘contact’)) { ?> <link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/new-styles.css” type=”text/css”> <?php }; ?> Waar ‘contact’ staat, moet de pagina “slug” worden ingevuld. Om die te achterhalen moeten permalinks op “naam” gezet worden en vervolgens is de slug

Verder lezen

Generen artikel url voor Joomla artikel

De vraag is mogelijk waarom dit nodig zou zijn: een url voor een Joomla artikel. Een joomla artikel krijgt toch altijd automatisch een URL (link)? Nee, dat gebeurt alleen als een artikele gekoppeld wordt aan een menu item en dat wil je mogelijk niet altijd. Stel dat je een Joomla artikel niet wilt koppelen aan een menu item maar bijvoorbeeld wel aan een link in een artikel via een “lees meer” button. Dan is dit op zich makkelijk op te lossen via de JCE editor. Daarbij selecteer je de linktekst, klik je op het kettingsymbool voor het aanmaken van een link en zoek je binnen – content – naar het artikel. Na selecteren en opslaan wordt er een url aangemaakt voor het artikel. Maar er is nog een mogelijkheid: stel je wilt een artikel gekoppeld hebben aan een afbeelding of een icon. Of mogelijk wil je het artikel koppelen aan een menu item uit een andere website of wil je dat een artikel uit een andere website verwijst naar dit Joomla artikel. Stel: ik wil vanaf deze webkrant verwijzen naar

Verder lezen

Twitter bootstrap, css en structuur

Vandaag een korte introductie betreffende het gebruik van Twitter bootstrap. Om te starten heb je de bootstrap files nodig die eenvoudig zijn te downloaden via deze link. Vervolgens worden de files in de root van de website geplaatst en wordt er een verwijzing naar die files geplaatst in de head-sectie van de website. Wat betreft structuur gebruiken we (bijvoorbeeld) de volgende html: <div id=’content’ class=’row-fluid’> <div class=’span9 main’> <h2>Main Content Section</h2> </div> <div class=’span3 sidebar’> <h2>Sidebar</h2> </div> </div> Deze code geeft aan dat de main content 9 kolommen breed is en door de main content op te delen in kolommen, kunnen we ook een sidebar plaatsen. Dat is gedaan via de <div class=’span3 sidebar’> <h2>Sidebar</h2> </div> code. Dit alles betekent: van de 9 kolommen zijn er 3 een sidebar. Kortom 1/3 deel is sidebar. Bij gebruik van de code is het belangrijk om op te merken dat de sidebar code in zijn geheel na de main-content code komt en dus niet is opgenomen in de main-content. De sidebar maakt geen onderdeel uit van de main-content structuur maar staat er dus

Verder lezen

Website onderhoud

Het vraagt heel veel tijd om een website (goed) te onderhouden. Ik verbaas me daar zelfs dagelijks over. Ik verbaas me over mezelf dat ik dat nog steeds niet goed in de gaten heb en me nog steeds laat verassen door de enorme hoeveelheid werk die het onderhouden van een website met zich meebrengt. Mogelijkheden en aandachtspunten In deze webkrant heb ik al vaker aandacht gegeven aan het onderhoud van een website. De onderwerpen – backup – en – veiligheid – hebben extra aandacht gekregen. Maar deze twee onderwerpen verdienen nog veel meer aandacht (helaas). Maar daarnaast heb ik wat betreft eigen websites en wat betreft websites van klanten vooral te maken met conflicten in scripts en dan met name de conflicten in de javascripts. De twee websites waar ik de laatste jaren echt het meeste tijd aan heb gegeven om dit soort problemen op te lossen zijn www.dewebmeester.nl (Joomla 3, bedrijfswebsite) en www.projektduga.nl (Joomla 2.5, website van stichting). Overeenkomsten: ze zijn gebouwd met Joomla en maken gebruik van een veelheid van extensies die gebruik maken van een jquery script

Verder lezen

HTML in de post titel van een WordPress website

Mijn vorige artikel ging over de mogelijkheid om de titel van een WordPress post te gebruiken om een video te embedden. Dat lukte. Wat ik toen nog niet wist was dat ik daarmee ook de post pagina (waar het artikel getoond wordt) totaal in de war had gegooid. HTML in de titel van een WordPress post levert allerlei ongewenste bij effecten op. En dus was ik van plan om de vorige blogpost te verwijderen en af te stappen van het idee. Totdat ik de volgende oplossing werkende kreeg: Custom post types om HTML in post titels toe te laten Als eerste heb ik een extra custom post type aan moeten maken binnen de blogpost waar ik html (video embed) code in de titel wil gebruiken. Ik noem die HTML_title en als waarde gebruik ik de code die ik in de titel wil gebruiken: de HTML code. De blogpost zelf krijgt een gewone titel. Vervolgens ga ik naar de editor van het WordPress thema dat ik gebruik en kies de pagina template waarop ik de html titel wil gebruiken. En daar

Verder lezen

Foto album met preview afbeeldingen bij mouse on hover zoals op Facebook…..

Nou, deze blogpost lijkt mogelijk op Arabisch meer de functie is dat ik hier mijn gedachten en ideeen probeer weer te geven betreffende een opdracht in de hoop dat ik dit opdracht succesvol zal kunnen uitvoeren: Opdracht: klant heeft WordPress website en een leuke gallery via een gallery plugin. Nu is hij daar niet tevreden mee. Hij wil extra functionaliteit. De home pagina van de gallery toont een aantal categorieen. Die kunnen we beschouwen als fotoalbums over een bepaald onderwerp. Hij wil dat als de bezoeker met zijn muis over de voorkant van dit fotoalbum beweegt, dat dan automatisch, achter elkaar, een preview getoond wordt van de afbeeldingen binnen dat fotoalbum. Nee, niet onmogelijk. Maar wel moeilijk. Om het nog leuker te maken heeft hij een voorbeeld: de weergave van de fotoalbums in Facebook. Spioneren van de code binnen Facebook Dat doe ik meestal: even spieken binnen de code van de website waar de klant het voorbeeld gevonden heeft. Facebook in dit geval. Wat zie ik: <div id=”u_0_3b” class=”_30l”><span id=”u_0_2f” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/p206x206/530465_10151320424569284_27191678_n.jpg);”></i></span><span id=”u_0_2g”

Verder lezen

Openen video’s van youtube in Lightbox binnen WordPress slider

Vandaag bijt ik mijn tanden in een nieuwe opdracht van tweaky.com: De klant wil dat video’s geopend worden in een Lightbox binnen dezelfde pagina. Het probleem lijkt me dat de video al geintegreerd is in een slider en niet in een bericht. Mijn stappenplan: – plugin lightbox video installeren (WP Video Lightbox) – testen binnen een WordPress bericht – code controleren en kijken of dit te integreren is in slider. Deze slider is overigens onderdeel van de template en heeft een eigen beheerspanel en de klant wil natuurlijk het beheer over deze video’s binnen dit beheerspanel behouden. Kortom: ik moet niet teveel in de broncode gaan veranderen maar zoveel mogelijk werken binnen bestaande admin panel van WordPress. Na stap 1 ga ik eerst naar de support pagina van deze plugin: http://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700#!prettyPhoto . Daar vind ik een demonstratie van de werking van de plugin en kijk via Firebug naar de code (mogelijk kan ik stap 2 overslaan?) en dan zie ik dit: &lt;a title="" href="" rel="wp-video-lightbox"&gt;&lt;img class="video_lightbox_anchor_image" alt="" src="<a href="http://www.tipsandtricks-hq.com/wp-content/uploads/2010/08/wp-video-lightbox-demo.png"> http://www.tipsandtricks-hq.com/wp-content/uploads/2010/08/wp-video-lightbox-demo.png</a>"&gt;&lt;/a&gt; Deze code plak ik in een Notepad+ document om te

Verder lezen

debugmeester.nl, dewebmeester repareert via tweakweb.nl

Sinds een week ben ik als ontwikkelaar werkzaam bij tweaky.com. Een grappige uitdaging gezien het feit dat ik tweaky.com op mijn eigen website benoem als concurrent met 3 maal zo hoge tarieven als dewebmeester. (Zie: http://www.dewebmeester.nl/index.php/tarieven-overzicht-van-opties) Hun werkwijze spreekt mij echter erg aan en ook na afronding van de eerste opdrachten ben ik erg te spreken over het idee achter tweaky.com. Idee: iedereen met een website heeft zo nu en dan een ontwikkelaar nodig om kleinere aanpassingen of reparaties te doen. Dan wil men niet direct teveel uitgeven maar heeft ment nog wel 39 Euro over voor zo’n aanpassing. Zo’n aanpassing heeft een Tweak en ik ben dus een Tweaker. Daarom begin ik direct met een eigen concept en dat heet tweakweb.nl. Via de opdrachten die bij tweaky.com binnenkomen (en waar je dus 3 maal zoveel betaald om vervolgens door dezelfde persoon – “dewebmeester”- geholpen te worden), is veel te leren. Elke opdracht is een ontdekkingstocht. Dus dacht ik: laat ik nou eens uitleggen via dit blog hoe ik als dewebmeester tot oplossingen kom. Omdat ik ongeveer elke werkdag 1

Verder lezen