Aanpassen Thema in WordPress over: Het aanpassen van o.a. de kleuren en andere elementen in uw gekozen thema. (Zonder een ander thema te moeten installeren.) Het gaat hier niet over hoe jouw wordpress thema moet aanpassen via de normale weg. Maar wel over aanpassingen die je normaal niet kan aanpassen. 😎 Of bijvoorbeeld het verwijderen van een storende banner in de footer.
Hoe verander je, hoe je thema eruit ziet.
Wel er zijn 1000-den thema’s om uit te kiezen. En je hebt er waarschijnlijk al een hoop geprobeerd. Maar eender welk thema je kiest. Er is altijd wel iets dat je anders zou willen.
SEO voor uw website.
Als je jouw website gewoon voor de fun maakt. Dan is dit allemaal niet van belang. SEO = Search Engine Optimalisation. Of zoekmachine optimalisatie.
Dit kan opgesplitst worden in verschillende technieken. Die we allemaal ondertussen wel kennen. Ik ga dus niet in herhaling vallen. En mij focussen op 1 punt. Eén zeer belangrijk punt.
Door de opkomst van steeds meer mensen die verslaafd zijn aan hun smart phone. (Wat eigenlijk een slechte, trage computer is. Met een veel te klein scherm 🙂 ) Dat heeft tot gevolg dat als mensen met hun GSM naar een trage site gaan. En deze laad niet snel genoeg naar hun zin. Dat ze dan snel op de back toets klikken. Het gevolg is dat als je van Google op die site komt en dan via back terug naar Google. Dan ZIET Google dit. En denkt dan, dat het geen interessante site is, die dus zijn hoge plaats niet verdiend in de zoekresultaten. (Omdat je dus de pagina verlaat nog voor ze volledig geladen is.)
Kies dus in de eerste plaats een thema dat ervoor gekend staat dat het snel is. Dat kan er minder mooi uit zien. Maar daar gaan we dus zelf iets aan doen.
Aanpassen thema in WordPress. 2 manieren.
Je kan natuurlijk geen thema gebruiken en gewoon werken met html zonder toeters en bellen. En een deftige webserver. Maar in dit artikel gaan we ervan uit dat we vast hangen aan wordpress.com
Gelukkig kunnen we de styles.css file overschrijven. Hiervoor moet je wel een duurder abonnement nemen. 🙁 (Als je werkt met wordpress.org heb je dat probleem niet als je bij een goede webhost zit.)
Nu, optie 1 (doen we niet 😉 ) :
Je gaat een cursus CSS volgen om te weten hoe dit allemaal werkt. Je kan dan je styles.css analyseren en gaan aanpassen. En het is ook leuk als je zonder wordpress werkt, en alles zelf wilt doen.
optie 2 (doen we wel 😎 ) :
Via de wordpress editor kan je extra css code toevoegen. Dit kan per pagina of voor de website in zijn geheel.
Nu, ik ken zogezegd niets van CSS. Hoe kom je dan te weten wat we moeten veranderen?
Daarvoor bestaan er de nodige analyse tools. Ikzelf maak gebruik van de Element Inspector. Die zit ingebouwd in FireFox. (De betere, EN veiligere internet exploier.)
Die moet je dus eerst installeren. (Als je verslaafd bent aan je Google chrome, moet je geen angst hebben, dat deze overschreven zal worden. Deze Firefox komt er gewoon als extra surf programma bij. En je kan die voorlopig beide gebruiken, tot je Firefox volledig gewoon bent. En dan kan je Chrome, alsnog van je PC verwijderen. Al je bookmarks, kan je gewoon importeren in Firefox. (En daar veel gemakkelijker sorteren en groeperen, net zoals je mappen hebt in de verkenner van windows.)
update: Zie ook het probleem met Google Chrome en hoe je dat kan oplossen. (ivm hoog processor gebruik en dus kortere batterij levensduur)
Thema aanpassen – concreet voorbeeld.
Na lang zoeken en proberen, met allerhande thema’s, ben ik uiteindelijk terug gekomen bij mijn eerste keuze. Het probleem met al dat veranderen is dat sommige thema’s geen zijkant menu ondersteunen en anderen dan weer wel. En telkens je veranderd, moet je dat dan allemaal opnieuw zitten sorteren en instellen. Daarom heb ik een thema gekozen dat goed aansloot bij mijn oude website van vroeger (de .BE versie die dus niet meer geldig is, en gestolen is. 🙁 En waarvan de nieuwe eigenaar de copyright wetgeving schendt, door mijn naam infonosity (tm) te misbruiken zonder mijn toestemming.)
Nota:
(P.S. moest je toevallig op uw website nog linken hebben die naar de oude infonosity.be verwijzen, gelieve die dan te verwijderen, want die doelpagina’s zijn corrupt, en dat is slecht voor uw eigen seo score!!! Je kan die aanpassen en naar infonosity.NET laten linken, naar een relevant artikel)
Probleem 1
Nu, ok. Ik heb een thema. Maar er zijn twee problemen met dit thema. Ik heb een wordpress.com pro abonnement genomen, om zo dat wordpress logo van mijn site te halen. En als dank krijg ik het logo van het thema in de plaats 🙁 Een grapje van 400Euro (voor 2 jaar) Dat gaan we dus ff fixen.
Probleem 2.
Je kan wel lettertypes kiezen. Maar niet hoe groot een H1,H2,… is. Ik bedoel de standaard grootte, want je kan dat wel artikel per artikel gaan aanpassen. Maar pffff 😉
Oh ja, en probleem 3
Bedenk ik juist. Ik wil dat mijn linken blauw onderlijnd zijn i.p.v. rood en niet onderlijnd. En een reeds gevolgde link moet paars zijn.
Dat was vroeger de standaard. En veel mensen zijn dat nog gewoon. Dat zorgt voor een meer vertrouwde omgeving voor de ouderen onder ons ;-). Maar dit helpt ook mensen, met een visuele beperking. Omdat het dan veel duidelijker is, wat een link is.
De oplossing : CSS aanpassen thema layout in wordpress.
Hoe Aanpassen thema in WordPress?
Nu start je dus Firefox en surft naar je eigen site. Daar kan je nu rechts klikken op het element dat je wil veranderen. Er opent dan een menu. En onderaan staat er ‘Element Inspecteren’. Daar klik je op. Resultaat (zie afbeelding) :
Dan opent onderaan je scherm de inspector. Daar kan je de volledige broncode van die pagina zien. Maar belangrijk voor ons is de rechter kant van het scherm. Daar zie je de code van de opmaak 🙂
Het leuke is.: Hier mag je prutsen zoveel je wilt. Je veranderd niets aan de bron op het internet. Maar enkel aan de pagina die je met je brouwser hebt binnen gehaald. Om bijvoorbeeld de kleur aan te passen zie je die #123456 Dit is een hexadecimaal getal. Het bestaat uit 3 groepjes van 2 hexa cijfers. (van 00 tot ff) (komt overeen met decimaal 0 tot 255) Dit zijn de grijswaarden per kleur. Je monitor heeft maar drie kleuren Rood-Groen-Blauw. En van elk van die kleuren kan je bepalen hoe helder die branden. In 256 stappen. (=8bit per kleur) of 24bit RGB. Of 256x256x256 = meer dan 16 miljoen kleuren combinaties. (Meer dan je oog kan zien)
Thema link Kleur kiezen.
Nu je kan daar natuurlijk veel tijd in steken om te bepalen welke code welke kleur geeft. Er zijn er een paar simpele die je kent uit de lagere school. Bijvoorbeeld om paars te krijgen moet je rood met blauw mengen. Dus ‘#ff00ff’ = max rood, geen groen, max blauw.
Maar zoals je in de foto hogerop ziet. Staat daar een gekleurd bolletje. Als je daar op klikt opent een pallet en kan je gewoon visueel je kleur kiezen, en de computer vult dan voor u de getallen in.
Je ziet dan ook het resultaat van wat je doet direct op je webpagina. (op de copy die je gedownload hebt).
Nu enkel nog de code invoeren in je thema.
Nu als je daar tevreden over bent, en je wilt dat resultaat ook echt op je site. Dan moet je dat stukje code kopiëren. En plakken in uw veld bij wordpress waar je jouw eigen CSS kan toevoegen.
En zo kan je dus al die bovenstaande problemen oplossen. Je kan nog veel verder gaan. Maar dan moet je toch eerst wat basis CSS leren, of experimenteren met die inspector. Daar kan je niets mee misdoen. En als iets niet meer werkt, refresh je gewoon je pagina en kan je opnieuw klooien 😎
Hieronder zet ik de CSS code die ik heb toegevoegd om het theme aan te passen.
Aanpassen thema in wordpress : wat doet deze css code :
Het past de kleuren aan van de hyper-linken. En zorgt dat ze onderlijnd zijn. Verder heb ik de kleuren en letter grootte van de share-tekst en like-tekst aangepast. En die stomme logo-link naar het thema onzichtbaar gemaakt. 🙂
Ik heb dit gepost als foto om de kleurcode te behouden. Zo is het duidelijker dan gewoon zwarte tekst. Met /* en */ kan je commentaar in je code zetten. (de groene tekst) Dit is altijd handig, zeker als je er maar zelden naar omkijkt. Zo weet je meteen waarover het ging.
Einde ‘Aanpassen thema in wordpress met css’
P.S.: update 21/01/2020 : BELANGRIJK : Maak op uw eigen pc ook een tekstdocument, waar je een copy van uw code plakt. Want als je toch van thema veranderd. Dan is uw extra css code weg. En als je dat thema dan alsnog terug zet, moet je opnieuw beginnen. Daarvoor is het dus handig om een copy op uw PC te hebben zodat je dat snel terug kan knippen en plakken. ‘T is maar een tip. Maar het kan een hoop stress besparen 😉
P.P.S: update 26/04/2020 DMY : Ik heb onlangs de ‘WP Meta and Data Remover’ plugin geïnstalleerd. Deze dient zoals de naam suggereert om bepaalde meta-data te verwijderen. MAAR deze voorziet ook dat je de CSS die deze plugin maakt, ook kan bewerken. 🙂 En dit kan dus ook gebruikt worden om daar zelf uw eigen CSS aan toe te voegen. Het handigste is gewoon op hoger vermelde manier. Maar dit kan een oplossing zijn als je een goedkoper abonnement hebt, en dus geen toegang hebt tot de normale css editor. 🙂 Voor elke oplossing is er een probleem. (Of was het andersom 😉 )
Terug naar Computer en elektronica. (index)