Twenty Fifteen Thema Aanpassen en Gebruiken

Twenty Fifteen is de standaard voor iedere nieuwe WordPress installatie in 2015.

Dit thema heeft een aantal basis zaken die je direct aan kunt passen zoals kleuren, header en achtergrond afbeeldingen.

Twenty Fifteen is een zogeheten responsive theme, hij past zich dus aan aan de breedte van het scherm zoals bij Desktop, Tablets en Mobiele telefoon schermen. Dat zorgt er ook direct voor dat hij bij een Google test voor mobiele sites ook goedgekeurd wordt, wat dan weer goed is voor je Google zoekresultaten.

Mocht je nu meer aan willen passen dan de standaard opties van het thema zelf, gebruik dan een Child Theme!

Hieronder beschrijf ik een aantal opties zodat je kunt beginnen met je Twenty Fifteen thema aanpassen.

Twenty Fifteen Kleuren

Via de optie Weergave -> Aanpassen kun je kiezen uit diverse kleuren, het basis kleuren schema is grijs, maar je kun kiezen uit, zwart, geel, roze, paars en blauw.

Maar mocht dat nu niet passen, dan kun je vanuit een van die schema’s nog je eigen kleuren aanpassen.

Je kunt de kleuren aanpassen van de achtergrond, de Koptekst en zijmenu en de achtergrond kleuren van die twee opties.

Klik daarvoor op de optie Kleur selecteren en kies dan een kleur of voer de hexadecimale code in. Mocht je terug willen naar de basis kleur klik dan op Standaard

Twenty Fifteen Achtergrond Afbeeldingen

Bij Twenty Fifteen kun je ook achtergrond afbeeldingen toevoegen voor de ruimtes achter de inhoud en achter je zij-menu.

Zij-menu Achtergrond Afbeelding

Voor het zij-menu gebruik je een afbeelding in het formaat 954 x 1300 en die upload je via de Kopafbeelding optie. Die naam is wat verwarrend omdat het normaal echt voor een afbeelding bovenaan je lay-out is.

Let wel op dat je teksten van je menu nog leesbaar blijven, je kunt de kleuren daar natuurlijk weer op aanpassen.

Je kunt ook meer menu achtergrond afbeeldingen uploaden en ze daarna laten roteren. Let dan wel op dat bij alle afbeeldingen je menu teksten goed leesbaar blijven. Die rotatie optie heeft ook gevolgen voor de laadtijd van je website.

Inhoud Achtergrond Afbeelding

Je kunt ook kiezen voor een achtergrond afbeelding die achter de inhoud van je site komt te staan.

Een formaat van 1500px breedte is meestal voldoende en past goed achter de inhoud met deze opties aangezet.

Kies voor een dergelijke afbeelding natuurlijk iets wat goed bij het onderwerp van je site past en niet te druk is.

Twenty Fifteen Menu Opties

Zoals je hierboven hebt gezien staat in je menu de algemene tekst van je website bovenaan. Je kunt die optie uitzetten en eventueel een logo plaatsen via een tekst widget.

Je kunt de tekst aanpassen of uitzetten door de optie : Koptekst weergaven uit te vinken:

Zij-Menu (Sidebar) Menu

Om je menu keuze in je zij-menu (sidebar) aan te passen maak je eerst een nieuw basis menu aan via Weergave -> Menu en geef je het menu een naam. In dit geval heb ik het Hoofd Menu genoemd.

Alsje dat gedaan hebt, dan kun je het via de Navigatie optie instellen als je Hoofdmenu.

Ik heb daarna nog een extra menu aangemaakt en dat toegevoegd via een Aangepast menu widget met daaronder nog een zoeken widget.

Als je dat gedaan hebt, dan ziet het er zo uit.

Twenty Fifteen Sociale Links Menu

Twenty Fifteen heeft nog een speciale menu optie in petto, het sociale links menu met een speciale opmaak.

Om dat menu in orde te maken, ga je weer naar Weergave -> Menu en geef je het menu een naam.

Nu kies je voor Aangepaste links en voer je de link in naar jouw profiel pagina van bijvoorbeeld Twitter, Instagram, Facebook, etc.

Vergeet niet om je menu op te slaan als je klaar bent!

Als je dat allemaal gedaan hebt kun je dat menu koppelen aan de optie Socialelinksmenu.

Je zult nu zien dat Twenty Tifteen nu de iconen van de betreffende site overneemt gebaseerd op de URL.

Het Sociale Links Menu komt automatisch onder je Hoofdmenu te staan.

Je kunt linken naar allerlei sites, maar er zijn iconen voor:

Menu Omschrijvingen laten zien

Bij je standaard menu onderdelen kun je ook omschrijvingen toevoegen bij Twenty Fifteen.

Omdat te kunnen doen, kies je eerst bij de schermindelingen in je Weergave -> Menu scherm voor de optie om dat onderdeel te laten zien.

Als je die optie aangezet hebt dan krijg je een extra veld te zien bij je Menu onderdeel.

Hieronder zie je een voorbeeld hoe dat in je menu zichtbaar wordt.

De titelattribuut optie is alleen zichtbaar als je met je muis over het menu item gaat.

Twenty Fifteen Widgets

Voor widgets volg je de basis opties voor Widgets, eventeel via het de aanpassen optie en Widget toevoegen, of via Weergave -> Widgets

Je hebt alleen de ruimte om widgets te plaatsen in je zij-menu.

Twenty Fifteen Uitgelichte Afbeelding

Bij het schrijven van berichten en pagina’s heb je bij veel thema’s de mogelijkheid om een uitgelichte afbeelding te gebruiken of toe te voegen.

Ook bij Twenty Fifteen heb je die optie. Ga daarvoor naar je schrijfscherm en kies in je rechter menu voor Uitgelichte afbeelding instellen en kies dan uit je Media bibliotheek of kies voor uploaden van een nieuwe afbeelding.

De afbeelding wordt dan weergeven boven de inhoud van je site.

De optimale / maximale afbeelding grootte voor die optie is 825 x 510, maar je kunt hem ook kleiner maken. De basis breedte voor de inhoud is 660 pixels, dus probeer dat als minimale afbeelding breedte te gebruiken.

Belangrijker is echter dat je consistent bent in de afmetingen van de uitgelichte afbeelding per artikelen en pagina’s

Snelle Specificaties (alle afmeetingen in pixels)

1. De hoofd inhoud breedte is 660px.
2. De zijmenu breedte is 248px.
3. Uitgelichte afbeeldingen zijn 825px breedt en 510px hoog.

Aanpassen Voet tekst Twenty Fifteen

Zoals ik in het begin als schreef, als je code aan gaat passen in je thema, gebruik dan altijd een Child Theme zodat je aanpassingen blijven bestaan als het hoofd thema een update krijgt. In 2015 hebben we op dit moment al twee updates gezien van Twenty Fifteen.

Om een child thema te maken, kun je de plugin Child Theme Configurator gebruiken.

Als je dat gedaan en je child thema geactiveerd hebt, kopieer dan het bestand footer.php.

Ga vervolgens naar Weergave Editor en kies het bestand Voettekst (footer.php) en pas de onderstreepte URL en de tekst aan. Zorg ervoor dat %s’ wel blijft staan, die zorgt ervoor dat de link naar je homepage gaat.

Bovenstaande geeft je de basis om je Twenty Fifteen Thema aan te passen en te gebruiken. Binnenkort meer voor de specialisten onder ons die fonts willen veranderen of je menu aan de rechter zijde willen hebben. Dat gaan we doen met plugins en het aanpassen van css code.

Voor de meeste van ons zullen de bovenstaande opties genoeg zijn om Twenty Fifteen een eigen gezicht voor onze sites te geven.

Mocht jij al suggesties hebben voor plugins of vragen over aanpassingen, gebruik dan de reactie mogelijkheid hieronder.