Alva Design web & print Maladão PT 3300-112 Arganil +351 235 205 239 Weerdsingel O.Z. 28 NL 3514 AB Utrecht +31 (0) 30 276 13 27 info@alva-design.com www.alva-design.com WordPress Themes Auteur: Winy Schalke www.alva-design.com 2010 Alva Design
Zet je eigen ontwerp om in een WordPress Theme In deze workshop leer je hoe je je eigen ontwerp voor een website kunt omzetten in een WordPress template. Je werkt hiervoor met HTML, CSS en een beetje PHP. Je maakt gebruik van de voordelen die een Theme Framework biedt. Docent Winy Schalke Alva design www.alva-design.com Assistenten Karin Bronwasser Bronwasser Websites www.bronwasserwebsites Marieke van de Pol Van de Pol Grafisch Ontwerp http://www.vandepolgrafischontwerp.nl 2
Deel 1 - inleiding Hoe werkt WordPress? Om een php-pagina te kunnen zien in een browser, heb je een server en een database nodig. Die zet de PHP om naar HTML. En dat is dan wat je ziet in de browser. Stukjes php-code roepen dingen uit de database op, en die dingen (tekst, plaatjes, menu-items) worden vervolgens in de pagina geplaatst. In de php-pagina staat bijvoorbeeld: Roep hier alle menu-items bij elkaar, en die komen dan als een keurig menu-lijstje in de browser tevoorschijn. Bijvoorbeeld: in de php-pagina staat: <?php wp_list_pages();?> Daardoor zie je in de browser een ongeordende HTML-lijst met list-items van links naar de pagina s: <ul class= navigation > <li class= page_item ><a href= title= >menuitem1</a></li> <li class= page_item ><a href= title= >menuitem2</a></li> <li class= page_item ><a href= title= >menuitem3</a></li> </ul> Zo n stukje php-code dat je gebruikt voor een WordPress-Template heet in WordPress, heel origineel, een Template Tag. In de Codex, het deel van de WordPress.org website waarin je alles kunt vinden over templates, het is een soort naslagwerk, zie je bij de afdeling wp_list_ pages() een heleboel voorbeelden van het gebruik daarvan: http://codex.wordpress.org/template_tags/wp_list_pages Je kunt namelijk allerlei dingen meegeven met de list-pages-template-tag; bijvoorbeeld dat de pagina-links/menuitems op alfabetische volgorde moeten komen, of dat alleen de hoofdmenuitems zichtbaar moeten zijn, en niet de submenu-items, en nog veel meer. Dat kan je allemaal lezen in de Codex, je ziet er ook voorbeelden. Wat is een Theme? Het Theme is de skin, die bepaalt hoe de WordPress website er uit ziet. Dit wordt geregeld met voornamelijk CSS en plaatjes, en eventueel nog extra functies. Scheiding van vorm, functies en inhoud Een Theme heeft niets te maken met de inhoud (content). In WordPress zijn de vorm en de inhoud strict gescheiden. Zo kun je bijvoorbeeld WordPress updaten zonder dat je iets aan je Theme hoeft te veranderen. Een Theme activeren Je kunt met één muisklik van Theme wisselen: via Dashboard > Weergave > Thema s > Activeren. Er verandert dan niets aan de inhoud van de website, alleen aan hoe die inhoud er uit ziet. Het standaard (default) Theme is TwentyTen. 3
Waaruit bestaat een Theme? Een Theme bestaat uit verschillende bestanden voor: 1. Presentatie Dit bepaalt de vormgeving Bestand: style.css 2. Content Dit bepaalt de inhoud (wat komt er op de homepage, op een single page, op een lijst van berichten, op de zoekresultaten-pagina, enz.). Bestanden: index.php, single.php, page.php, category.php, search.php, enz. 3. Functies Dit bepaalt hoe je Theme functioneert Bestand: functions.php Hoe werken WordPress templates? Als WordPress een pagina samenstelt kijkt het eerst in de actieve Theme directory voor het juiste template (afhankelijk van het type pagina). WordPress zoekt naar template files met specifieke namen in een specifieke volgorde. Meer hierover kun je lezen in de Codex. http://codex.wordpress.org/template_hierarchy Alle content wordt opgeslagen in de database. Aan elke post komen één of meer vlaggetjes: Een pagina is een bericht met het vlaggetje pagina. Verder heb je de berichten, daaraan zitten de vlaggetjes auteur, datum, categories en tags en het vlaggetje bericht. Het diagram op de volgende pagina laat zien welke template files worden aangeroepen om een WordPress pagina samen te stellen op basis van de WordPress Template hierarchy. 4
5
De anatomie van een Theme WordPress is een modulair systeem, dat wil zeggen dat de meeste pagina s zijn opgebouwd uit stukjes: header, sidebar, footer, enz. Deze stukjes worden op verschillende pagina s gebruikt. Al deze modules samen vormen het Theme. De Themes vind je in de directory /wp-content/ themes. De belangrijkste componenten zijn: Header Navigatiemenu Loop Paginering (onder posts, older, newer) Comments Sidebars en Widgets Footer header navigatiemenu bericht (de loop) widget bericht (de loop) widget sidebar widget bericht (de loop) paginering footer Het is goed om in je ontwerp al rekening te houden met al deze componenten en voor elk een vormgeving te bedenken. Header Identiteit, logo, mission statement. (eventueel: navigatiemenu, zoekveld, links naar RSS feed, etc.) Navigatiemenu Dit kan horizontaal of verticaal zijn, eventueel drop-down. Loop Dit is het belangrijkste onderdeel van een Theme. De Loop is het hart van WordPress. Met de Loop worden de berichten (en de pagina s) gegenereerd. In een loop worden net zoveel posts getoond als er zijn die aan een bepaalde vraag voldoen. En die vraag wordt bepaald door de vlaggetjes die aan de post hangen. Een pagina wordt altijd in zijn geheel op een webpagina getoond. De berichten echter staan altijd in een overzicht met alle berichten die aan de 6
gevraagde voorwaarden voldoen. Zo kun je een overzicht hebben van alle berichten door Jan geschreven, of alle berichten geschreven in januari 2009 of met de tag bericht of in de rubriek Groenten en fruit. Standaard worden alle berichten getoond op chronologische volgorde, tenzij er een andere vraag is. De loop gaat net zolang door tot er geen berichten meer zijn die aan de bepaalde vraag voldoen. Wat er in de loop staat, bepaal jij als Theme developer. Jij kunt door middel van PHP codes onderdelen van de loop bepalen, zoals auteur, datum, titel, content enz. Paginering Dit zijn links om vooruit en achteruit te navigeren door berichten. Wordt meestal onder een bericht geplaatst, na de loop. Comments De reacties op een bericht en het reactieformulier. Sidebars en Widgets De sidebar is niet per definitie een balk aan de zijkant, het is een element in de pagina waar widgets kunnen worden getoond. Wat er in de sidebar staat is afhankelijk van je Theme. Er zijn Themes waar geen widgets standaard staan ingesteld. In de code staat meestal zoiets: als er een dynamische sidebar is laat deze dan zien en toon anders het volgende. Maar er zijn ook Themes waar dat niet in staat. Dan heb je dus geen standaard widgets. Je ziet ze ook niet bij de widgets staan, ze staan in de code van de sidebar (of niet) en die widgets verdwijnen zodra je zelf widgets in de sidebar gaat zetten. Footer Deze komt meestal onderaan de pagina, na de content. Bevat meestal copyright informatie en enkele links. Wat is een Framework? Een Framework is een Theme waar zo ongeveer alle mogelijkheden verwerkt zijn in een op het oog redelijk neutrale basis. Een Framework biedt HTML, functies, en een aantal basis CSS regels, die je kunt gebruiken als uitgangspunt voor je eigen Theme. Je hoeft dus minder tijd te besteden aan het schrijven van basiscode, en houdt meer tijd over om je te concentreren op je ontwerp. Het enige wat je hoeft te doen is je te verdiepen in hoe je met CSS je Theme visueel naar je eigen hand zet, en eventueel hoe je met de juiste PHP code de juiste informatie uit de database tovert. Voordelen van het Thematic Framework: Ideaal om te gebruiken, zoals het is, of als een leeg WordPress Theme voor ontwikkeling Volledig Search Engine Optimized Extra widget-ready gebieden (13 in totaal) en nog veel meer mogelijk in je Child Theme Inclusief een voorbeeld WordPress Child Theme om snel mee te beginnen Een wiki handleiding voor het aanpassen van Thematic Klaar voor WordPress plugins zoals Subscribe to Comments, WP-PageNavi, and Commentlicense Volledig compatible met All-In-One SEO en Platinum SEO plugins Verschillende, makkelijk te gebruiken, cross-browser lay-outs voor 2 of 3 kolommen Modulaire CSS met resets en basis typografie Bewerkbare footer-tekst: Theme colofon makkelijk te verwijderen of aan te passen 7
Opties voor multi-author blogs Dynamic post and body classes maken het ideaal voor CSS kunstenaars Werken met een Child Theme op basis van het Thematic Framework Vroeger moest je, als je de output van een WordPress-Theme wilde wijzigen, de Theme template-bestanden aanpassen. Als het Theme waarmee je was gestart werd ge-upgrade, was je heel veel tijd kwijt om al je wijzigingen over te zetten naar de nieuwe versie. Met WordPress 2.7 is dat allemaal veranderd met de optie om Child Themes te gebruiken. Een Child Theme is een Theme dat de mogelijkheden van een ander Theme uitbreidt of aanvult. Een Child Theme bestaat ten minste uit een stylesheet (style.css) in de eigen directory, en een ander Theme gespecificeerd als de Parent. Als WordPress een pagina samenstelt, zal het de style sheet van het Child Theme gebruiken, en de templates van het Parent Theme. Een Child Theme werkt dus altijd in combinatie met een Framework (Parent Theme). WordPress Child Themes zitten gewoon in je /wp-content/themes/ directory, net als elk ander Theme wat je geïnstalleerd heb. Je activeert een Child Theme ook op dezelfde manier als elk ander Theme. In een Child Theme folder vind je vaak dezelfde mappen voor je afbeeldingen, je scripts en daarnaast vind je in ieder geval een style.css bestand en mogelijk ook een functions.php. Het enige verschil is dat een Child Theme geen Theme bestanden nodig heeft. Geen index. php, sidebar.php, header.php, footer.php. In feite heb je helemaal geen PHP nodig om een Child Theme te maken. Overigens is het goed mogelijk dat een Child Theme wel alle bovengenoemde bestanden heeft, maar ze zijn vaak niet nodig. Als je bijvoorbeeld een afwijkende pagina wilt, dan kopieer je het bestand page.php uit het Thematic Theme naar je Child Theme en doet daarin aanpassingen. WordPress gebruikt dan page.php uit je Child Theme, omdat dit voorrang krijgt in de hierarchie. functions.php en template files Maar Child Themes kunnen nog meer. Op twee manieren kan het gedrag van de Parent Theme genegeerd worden. 1. Je kunt het het bestand functions.php gebruiken voor het toevoegen van je eigen code aan het thema. 2. Template bestanden die zijn opgeslagen in de directory van het Child Theme krijgen voorrang boven die van de Parent. Als je wijzigingen wilt aanbrengen in de opmaak of de functionaliteit van de Parent Theme hoef je dus alleen een aangepaste PHP-functie te schrijven of je eigen versie van het desbetreffende template te maken. WordPress kijkt bij het samenstellen van de pagina eerst welke bestanden er staan in het Child Theme. Daar staat in elk geval de style.css die naar het Parent Theme verwijst. Bestanden die WordPress niet in het Child Theme vindt zal het zoeken bij de Parent. Maar als er in het Child Theme bijvoorbeeld een page.php staat dan krijgt deze voorrang boven de page.php in het Parent Theme. Elk Theme kan fungeren als een Parent. Je kunt dus jouw favoriete Theme gaan gebruiken als een Framework voor je eigen nieuwe thema, zonder het origineel te bewerken. Niets houdt je tegen om direct in je Framework te wijzigen, maar het is beter om alleen het Child Theme te wijzigen. Als de ontwikkelaar van je Framework Theme een update uitbrengt, is het installeren van de nieuwe versie van de Parent het enige dat je hoeft te doen. Je Child Theme is dan meteen ook bijgewerkt. 8
Het voorbeeld Theme: Biomarkt Voor de workshop heb ik een voorbeeld Theme gemaakt. Hieronder zie je voorbeelden van verschillende soorten pagina s. De homepage Template: home.php De homepage is een statische pagina. Instellingen > Lezen > De startpagina toont > Een statische pagina. Een pagina Template: page.php De pagina Nieuws Uittreksels van de nieuwste berichten. Template: index.php Dit is de blog-pagina. Instellingen > Lezen > Berichtenpagina > Nieuws Een pagina met één compleet bericht. Template: single.php 9
Bij deze je eigen ontwerp kun je de maten in pixels opschrijven. Die haal je uit het Photoshop bestand. sidebar 2 menu #primary.aside #header #branding #blog-title #blog-description #access content #main.hentry #comments #footer #siteinfo sidebar 2 widgets #secondary.aside 10
Deel 2 - Aan de slag Thematic installeren en een Child Theme aanmaken Download Thematic (http://themeshaper.com/thematic). Upload Thematic via ftp naar /wp-content/themes. In de map thematic vind je een map thematicsamplechildtheme. Kopieer deze map, geef hem een andere naam (die van je Child Theme) en verplaats hem naar de /wp-content/themes. Personaliseren en Parent aanwijzen Open nu het bestand style.css uit je Child Theme map in een html editor. Je ziet daar de volgende code: 01 /* 02 Theme Name: A Thematic Child Theme 03 Theme URI: 04 Description: Use thisname to start your Thematic Child Theme developent. 05 Author: Ian Stewart 06 Author URI: http://themeshaper.com/ 07 Template: thematic 08 Version: 1.0 09 Tags: Thematic 10. 11 Thematic is Ian Stewart http://themeshaper.com/ 12. 13 */ Je kunt deze informatie aanpassen. De belangrijkste regel is de volgende: 1 Template: thematic Hiermee geeft je in je Child Theme aan welk Theme de Parent Theme is. Alle CSS in de stylesheet van je Child Theme is óf aanvullend ten opzichte van je Parent Theme óf een wijziging hiervan. Een Child Theme moet minimaal bestaan uit een een style.css en een functions.php en het is handig om een screenshot.png te maken. Dan herkent WordPress het stylesheet bij weergave > thema s in het Dashboard. Activeer je Child Theme Ga naar het dashboard en activeer je Child Theme. Je zult nog geen verandering zien in de website, omdat je nog niets hebt aangepast. Maak wat content Maak even een paar pagina s met neptekst aan en een paar posts, categorieën en tags. CSS Om niets in het Parent Theme hoeven veranderen, doe je het volgende: Kopieer het bestand default.css uit wp-content/themes/thematic/library/styles naar je Child Theme map. In dit bestand ga je geen aanpassingen doen. Je kopieert dit alleen om te 11
zorgen dat als er bij een upgrade opeens veel gewijzigd wordt in het default.css van Thematic, je snel naar de oude versie kunt schakelen. Bij het maken van een Child Theme heb je de mogelijkheid om via functions.php alle wijzigingen ten opzichte van de Parent Theme te definiëren, maar uiteraard kun je ook je eigen versie van bijvoorbeeld header.php gebruiken. Ik maak meestal gebruik gemaakt van een combinatie van deze mogelijkheden. Zoals wel vaker, leiden er meerdere wegen naar Rome. Geen enkele is goed of fout. Ik laat het meeste in tact en verwerk alleen in de style.css wat ik wijzig. Dus als voor een div met veel css kenmerken alleen de kleur van de border wijzigt, is dat ook het enige dat ik in de style.css zet. Zo houd ik de style.css zo klein en overzichtelijk mogelijk. Iemand anders wil zo veel mogelijk bij elkaar houden en niet verdeeld over meerdere bestanden. Dat kan ook. Ieder moet zijn eigen weg hierin vinden. Zolang als je maar niets wijzigt in de Thematic bestanden, maar het gewijzigde bestand altijd direct als een kopie in de Child Themd map zet. De style.css (en functions.php) aanpassen Basis lay-out Je begint met het aanpassen van de basis lay-out in de CSS. Thematic heeft een aantal basis layouts, die vind je in de map wp-content/themes/thematic/library/layouts. Mijn ontwerp heeft 3 kolommen met sidebars links en rechts dus kies ik voor 3c-fixed.css. Je kunt dit als volgt activeren: Open style.css van je Child Theme in je html-editor. Je ziet nu dit:... /* Apply a basic layout */ @import url(../thematic/library/layouts/2c-r-fixed.css );... Verander deze regel in je style.css: /* Apply a basic layout */ @import url(../thematic/library/layouts/3c-fixed.css ); Bekijk het resultaat: je hebt nu 3 kolommen. Als deze lay-out je bevalt hoef je verder niets te doen. Ik wil echter ongelijke kolommen en aangezien ik niets in Thematic mag veranderen, doe ik het volgende: Open het bestand 3c-fixed.css uit Thematic. Kopieer alle code en plak deze in je style.css. WordPress gebruikt nu de layout uit je style.css in je Child Theme folder. Nu ga je de lay-out aanpassen. De afmetingen in pixels haal je uit je photoshop ontwerp. Alle wijzigingen zet je in je style.css. Dat maakt het voor jezelf veel overzichtelijker wat je heb aangepast. In de default.css staat zoveel, dat je dan niet meer zo snel kunt achterhalen wat je nu hebt aangepast. Ik heb #wrapper toegevoegd om dit een background color te kunnen geven en een vaste 12
breedte. #wrapper /* toegevoegd voor bg-color */ { overflow:hidden; background: #dddfd4 url(images/achtergrond.gif) repeat-y; width: 950px; margin: 0 auto; } Header In de broncode kun je zien hoe de header is opgebouwd. <div id= header > <div id= branding > <div id= blog-title ><span><a href= >biomarkt</a></span></div> <h1 id= blog-description >En nog een WordPress site</h1> </div><!-- #branding --> <div id= access ></div><!-- #access --> </div><!-- #header--> Een handig hulpmiddel hierbij is het werken met Firefox en Firebug. Je kunt dan heel makkelijk even wijzigingen in de css aanbrengen, kijken wat het resultaat is en dan vervolgens de aangepaste css toevoegen aan je stylesheet. De header bestaat uit 2 divs: #branding en #access. #access is het menu en #branding het logo. Je gaat nu eerst de branding stylen. In Child Theme maak je een nieuwe map aan: images. Hierin upload je het logo en eventueel andere plaatjes voor je Theme. Het logo van Biomarkt kun je uit het Photoshop bestand knippen. Ik kies ervoor om het logo als achtergrondplaatje te plaatsen. #header { background: #61674d url(images/logo.gif) no-repeat; height: 302px; } #branding { margin:0 auto; padding:0; height:302px; } Om de blog-title tekst niet wilt laten zien (maar wel in de code laten bestaan voor de zoekmachines): #blog-title { text-indent: -1000px; } Om het logo klikbaar te maken (link naar homepage): #blog-title a { width: 550px; height: 300px; display: block; } 13
Om de blog description onzichtbaar te maken: Geef eerst de Parent div (#header) een position relative (dat heeft deze toevallig al, door de layout). #header { position: relative; } Dan positioneer je de blog description absoluut, buiten beeld. #blog-description { position: absolute; left: -1000px; } De header is klaar. Bekijk het resultaat in verschillende browsers en pas eventueel nog wat aan. Menu Mijn menu wil ik verticaal i.p.v. horizontaal, in de linker sidebar. Bekijk het bestand sidebar.php in de Thematic folder. Niet bewerken! <?php // action hook for placing content above the main asides thematic_abovemainasides(); // action hook creating the primary aside widget_area_primary_aside(); // action hook for placing content between primary and secondary aside thematic_betweenmainasides(); // action hook creating the secondary aside widget_area_secondary_aside(); // action hook for placing content below the main asides thematic_belowmainasides();?> Hier kun je niet veel mee... Weghalen wat je niet wilt Eerst ga je de search functie weghalen. Dit is in Thematic een widget, dus kun je die verwijderen in het dashboard via weergave > widgets > primary aside. Categorieen en Archief kun je daar ook meteen weghalen. Nu blijft nog over: Koppelingenblok, RSS links en Meta. Deze widgets zitten in de secondaryaside, de rechter sidebar. Daaruit kun je alle 3 de widgets weghalen. Verticaal menu maken Je zou de pagina widget kunnen gebruiken om een menu in de sidebar te maken (die staat al in de primary aside). Deze heeft 2 beperkingen: de titel Pagina s de eventuele subpagina s wil ik niet zichtbaar hebben. Dus dit is geen optie. 14
Maak zelf een menu. In het dashboard: Weergave > menu s > menu aanmaken. Naam: Hoofdmenu Selecter de pagina s die moeten verschijnen. Klik Aan menu toevoegen. Menu opslaan. Primary menu: Hoofdmenu. Opslaan. Nu kun je de Widget aangepast menu in de primary-aside slepen en de widget pagina s eruit. Bekijk het resultaat in verschillende browsers en pas eventueel nog wat aan. Horizontale menu verwijderen Nu moet de horizontale navigatie nog weg. Je kunt die natuurlijk in de CSS op display: none; zetten, maar dan blijft het wel in de broncode staan. Niet zo aardig voor screenreaders, die zien dan een dubbel menu. Ik heb gegoogled op remove horizontal menu in Thematic en vond deze link: http://www.rcotton.net/web-dev/remove-horizontal-page-menu-in-thematic/ Kopieer de onderstaande code in je functions.php (van je Child Theme). Let op: vóór het laatste?> function thematic_custom_access() {?> <div id= access > <div> <a href= #content title= <?php _e( Skip navigation to the content, thematic );?> ><?php _e( Skip to content, thematic );?></a> </div> </div><!-- #access --> <?php } function thematic_remove_access() { remove_action( thematic_header, thematic_access, 9); remove_action( wp_head, thematic_head_scripts ); remove_filter( wp_page_menu, thematic_add_menuclass ); } add_action( init, thematic_remove_access ); add_action( thematic_header, thematic_custom_access, 9); Voor wie precies wil weten wat er gebeurt is hier de uitleg die op de website staat: I m creating two functions: thematic_custom_access is a straight clone of the standard thematic_access function that comes in the base Theme, except I ve removed the line that renders the page menu. The second function, thematic_remove_access is de-registering both the original thematic_ access function, and thematic_head_scripts; which inserts the JavaScript to drive the original page menu. Lastly it removes a filter that alters the output of the wp_page_menu function; 15
since we re likely going to want a normal page menu now, we don t want that change anymore. With those functions ready, we can just hook them in; thematic_remove_access gets hooked into the init stage, so that it removes the actions and filter before they run. thematic_custom_ access is simply hooked in where thematic_access used to be to replace the old #access div with our new one. In het algemeen werkt het zo: Als je iets in de functions wilt veranderen zoek je het betreffende stukje code in thematic/library/extensions. In de functions.php van je Child Theme maak je de bestaande functie (action) inactief en je voegt de gewijzigde functie (action) toe. Je hebt hoervoor wel enige PHP-kennis nodig. Skip to content onzichtbaar maken Nu moet Skip to content (goed voor accessibility, screenreaders) nog onzichtbaar worden. Kijk in de broncode: <div id= access > <div> <a href= #content title= Skip navigation to the content >Skip to content</a> </div> </div><!-- #access --> In de style.css van je child theme pas je dit aan: #blog-description, #access { position: absolute; left: -1000px; } Nu het menu nog stylen Kijk weer in de broncode hoe het menu is opgebouwd: <div id= primary class= aside main-aside > <ul class= xoxo > <li>...<div class= menu-hoofdmenu-container > <ul id= menu-hoofdmenu class= menu > <li id=... ><a href=... >Home</a></li> <li id=... ><a href=... >Locaties</a></li>... </ul></div> </li> </ul> </div><!-- #primary.aside --> Je kunt het menu stylen in style.css. Let op: het heet niet.sf-menu (dat was het horizontale menu) maar #primary en.aside. Kopieer de benodigde css code uit thematic/default.css in je style.css. /* =Asides, Sidebars & Widget-Ready Areas -------------------------------------------------------------- */ #primary {} 16
Content (loop) Kijk in de code en pas de CSS waar nodig aan. Als je iets niet in de default.css vindt, kijk dan in de images.css of typhography.css. Let op: verander niets in de Thematic-bestanden! Kopiëer wat je wilt aanpassen naar je style.css in je Child Theme folder en pas het daar aan. Je ziet dat sommige teksten nog in het Engels staan (de datum, auteur, etc. bij de berichten) Deze teksten zijn onderdeel van Thematic. Als je WordPress Nederlands hebt en zorgt dat beide taalbestanden hetzelfde heten gaat de vertaling van Thematic vanzelf. De taalbestanden in de map wp-content/themes/thematic/library/languages moeten hetzelfde heten als de taalbestanden van WordPress, in de map. wp-content/languages. (nl_nl.mo en nl_nl.po of nl.mo en nl.po). Sidebars en Widgets Sleep enkele widgets in de tweede sidebar. Kijk in de code en pas de CSS waar nodig aan. Widgets blijven helaas niet staan als je van Theme wisselt tenzij de beide Themes dezelfde benaming hebben voor de sidebars. Helaas is daar geen uniformiteit in. Gelukkig blijven ze wel staan in het vak net gebruikte widgets, dus je kunt ze altijd weer terugslepen. Tip: Maak eerst een screenshot van wat waar staat voor je van theme gaat wisselen om te testen. Footer Kijk in de code en pas de CSS waar nodig aan. Zo kun je eventueel ook nog de paginering (onder de posts, links voor oudere en nieuwere posts), de comments en andere elementen aanpassen. Als je de comments niet op pagina s wilt laten zien, maar wel op berichten: body.page #comments { display:none; } Bekijk na elke stap het resultaat in verschillende browsers en pas eventueel nog wat aan. Controleer alle paginasoorten De homepage Een lijst met berichten Een standaard pagina Voor pagina s met algemene info, niet tijdgebonden Een single post pagina Hierop staat een volledig bericht De archief, Auteur, Categorie en Tag pagina s Een lijst met berichten De zoekresultatenpagina De 404 pagina Als iets er (nog) niet uitziet zoals je wilt kijk je in de code en past de style.css aan. 17
Links WordPress Codex http://codex.wordpress.org http://codex.wordpress.org/template_tags/wp_list_pages http://codex.wordpress.org/template_hierarchy Thematic http://themeshaper.com/ http://themeshaper.com/forums/ http://themeshaper.com/action-hooks-wordpress-child-themes/ http://www.rcotton.net/web-dev/remove-horizontal-page-menu-in-thematic/ WordCamp presentatie over FrameWorks Website met veel tips voor Thematic http://www.wpdimensie.nl Website met veel ander WordPress nieuws http://www.hiranthi.nl FireFox Firebug addon https://addons.mozilla.org/en-us/firefox/addon/1843/ FireFox web developer toolbar addon https://addons.mozilla.org/en-us/firefox/addon/60/ Voor inspiratie qua design, en er zijn ook frisse WP-themes te koop http://www.forsitemedia.nl/272/wordcamp-nl-2010-presentatie-over-wordpress- Theme-frameworks/ http://webdesignledger.com/inspiration/15-impressive-and-beautiful-uses-ofwordpress The easiest way to use Real Fonts on your website http://www.typekit.com WordPress-plugins Typekit: http://wordpress.org/extend/plugins/tags/typekit Boeken Build your own Wicked WordPress Themes (SitePoint) Flexibele websites en blogs met WordPress (Easy Computing) Kickstart WordPress (Robbert Ravensbergen) 18