Kleine veranderingen waardoor je WordPress installatie er anders gaat uitzien.

Spiekbriefje met stijl snippets voor een WP CMS.

Deze kleine stukjes code voor in de stylesheet zijn hier voornamelijk voor eigen gebruik geplaatst. 
Het zijn handige snippets die ik af en toe gebruik voor een aangepast sjabloon.

Zoekmachine optimalisatie, tools en SEO tips. Maak altijd eerst een Child Theme aan om niet het risico te lopen dat je een vergissing maakt die niet meer gecorrigeerd kan worden.

De stijl veranderingen staan vaak op meerdere websites vermeld, het is  echt niet allemaal mijn eigen werk.
Een kleine maar groeiende verzameling met handige modificaties die geschikt zijn voor universeel gebruik in WordPress themes.

Maak een child theme in WordPress. *

Voor een correcte toepassing van modificaties in je stylesheet moet je eerst een sub-thema aanmaken.
Dit wordt in WP een child theme genoemd.

Maak een map aan met dezelfde naam als je hoofdthema met als toevoeging -child .
Een thema met naam mijndesign heeft als childtheme dus een map met de naam mijndesign-child.
In die map plaats je een css met daarin bovenaan het volgende child theme bepalende stukje.
Alle onderdelen van het originele sjabloon waar je iets aan wilt veranderen plaats je eerst in het child theme.

Op die manier zijn aanpassingen aan een WordPress thema snel en veilig te doen.
Als er een fout in de code is geslopen dan kun je dat onderdeel gewoon uit het child theme verwijderen.
Zo zorg je ervoor dat het originele script de taak weer overneemt.

Voorbeeld van een leeg child theme stylesheet in WordPress. *

/*
 Theme Name:     mijndesign
 Theme URI:      http://voorbeeld.com/mijndesign-child/
 Description:    mijndesign Child thema
 Author:         Degene die het thema heeft gemaakt
 Author URI:     http://voorbeeld.com
 Template:       mijndesign
 Version:        1.0.0
*/

@import url("../mijndesign/style.css");

/* =Hieronder plaats je de stukjes code om het thema mee aan te passen. Je kunt ook de hele originele stylesheet hieronder plakken voor een groter gebruiksgemak.
-------------------------------------------------------------- */

CSS stijl voor een vaste kop van de pagina. *

Een fixed header is handig in meerdere opzichten.
Op deze site gebruik ik een vast gedeelte bovenaan de webpagina.
Zo is op deze site de homepage altijd gemakkelijk binnen bereik.
Een andere reden kan zijn dat je altijd een navigatie menu binnen handbereik wilt hebben.

Omdat veel sjablonen een andere opbouw hebben is het meestal nodig om de id van het onderdeel op te zoeken.
In het geval van veel sjablonen is dit de header.
Je moet daarvoor in de pagina broncode kijken welke div er om het element zit, de kop die je statisch wilt maken.

In het standaard classic sjabloon van WordPress is dat deel de header. 
Open de style.css van het sjabloon en zoek die #header definitie.
Plak daarin, net voor de accolade, het volgende stukje stijl:

position:fixed; top:0px; margin:auto; z-index:1000; width:100%;

Upload de stylesheet in een child theme en activeer dat sub sjabloon.
Nu blijft je kop vast staan, de pagina inhoud glijdt eronderdoor tijdens het scrollen.
Als je een menu binnen de header hebt dan kan het nodig zijn om ook bij die menu stijlen dezelfde definitie toe te voegen.

CSS stijl voor een vast menu. *

Als je wilt dat het menu niet mee naar beneden gaat tijdens het scrollen dan kun je daarvoor het volgende stukje gebruiken.

position:fixed; top:70px; z-index:1000;

In dit geval is het menu op een afstand van 70px gezet omdat de header de bovenste 70 in beslag neemt.
Pas je child theme css aan waar nodig.
Het grote voordeel van een Child Theme is een snelle verandering zonder het risico dat je een fout niet meer kunt herstellen.

Lees onze optimalisatie tips voor een CMS en analyseer je website op zoekmachine vriendelijkheid.