Willekeurige achtergrondkleuren WordPress site pagina

Er zijn een aantal dingen die bijdragen aan de manier waarop gebruikers uw website bekijken en ermee omgaan. En kleuren spelen een zeer belangrijke rol in de interactie met gebruikers.

Een gebruiker kan op een andere manier reageren op basis van de WordPress achtergrondkleur van de website, dus het is belangrijk om het juiste kleurenschema te kiezen. Hiervoor heb ik een aantal tips:

Achtergrondkleur van webpagina veranderen

Er is altijd de mogelijkheid om de achtergrondkleur van je WordPress site te veranderen, maar we willen een stap verder gaan. In dit artikel zal ik je laten zien hoe je een aantal willekeurige WordPress achtergrondkleuren kunt veranderen.

Er zijn een paar verschillende methoden om dit in te bouwen. Laten we beide manieren eens bekijken.

Willekeurige kleurveranderingen toevoegen met code

Deze eerste methode vereist dat u een beetje code toevoegt aan uw WordPress site bestanden om de WordPress achtergrondkleur verandering te krijgen die u zoekt.

functions aanpassen

Het eerste wat u moet doen is naar het bestand functions.php van de website gaan. U kunt daar komen door te klikken op
Weergave > Editor.

U komt dan in het bestandsgedeelte van het thema en dan wilt u klikken op Themafuncties (functions.php) om bij het gedeelte te komen waar u code kunt toevoegen.

Klik op het bestand thema functies.php

In het bestand functions.php voegt u de volgende code toe:

function wpb_bg() {
$rand = array(‘0', ‘1', ‘2', ‘3', ‘4', ‘5', ‘6', ‘7', ‘8', ‘9', ‘a', ‘b', ‘c', ‘d', ‘e', ‘f');
$color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
echo $color;

Deze code genereert de willekeurige hexadecimale kleurwaarden en geeft deze weer. Als deze code er eenmaal in zit kun je naar het tweede deel van de WordPress achtergrondkleur veranderen.

header aanpassen

Ga nu verder en klik op het header.php bestand van het thema.

Klik op de header van het thema (header.php) om code toe te voegen.

Eenmaal in het bestand wil je de “body” tag regel vinden. Die ziet er zo uit zoals bij punt 1:

Vervang die regel code door de regel code bij punt 2

Sla nu uw wijzigingen op en ga een kijkje nemen om de achtergrondkleurverandering van WordPress in actie te zien op uw live site.

Gebruik CSS om vaste achtergrondkleur te veranderen

Er zijn een paar eenvoudige manieren om CSS toe te voegen aan uw WordPress website. Zowat elk standaard en conform WordPress thema gebruikt de “body_class()” functie in de body tag. Deze tag voegt een aantal CSS klassen toe aan de body tag in uw thema.

Deze standaard klassen kunnen worden gebruikt om dingen als berichten, categorieën, tags, enz. te stylen. Je kunt ook andere dingen doen, zoals het maken van CSS-animaties en meer.

Laten we voor dit snelle voorbeeld een categorie gebruiken. De categorienamen op uw WordPress website zullen natuurlijk variëren op basis van waar uw site over gaat. Laten we voor dit codevoorbeeld de categorie “webdesign” gebruiken.

Als uw blog een categorie “webdesign” heeft, dan kunt u deze CSS classes vinden in de body tag van de categorie archiefpagina.

Om de achtergrondkleur van die bepaalde categorie te veranderen, voeg je gewoon wat aangepaste CSS toe aan het Stylesheet (style.css) bestand van je WordPress thema.

Klik op stylesheet (style.css) om aangepaste css toe te voegen

Wanneer je je style.css bestand hebt gevonden en erin hebt geklikt voeg je de volgende aangepaste CSS toe:

body.category-webdesign {
background-color:#f2f2f2;
}

2 tips over kleur

Je kunt de hexadecimale kleur veranderen in elke kleur die je wilt.
De categorie “webdesign” kun je veranderen in de categorie waarin je de achtergrondkleur van WordPress laat veranderen.

Ik hoop dat dit artikel u een gemakkelijke manier heeft getoond om een aantal willekeurige en niet-willekeurige WordPress achtergrondkleurwijzigingen in uw website aan te brengen.

Heb je gemerkt dat het veranderen van de kleuren op je website de interactie en betrokkenheid verhoogt? Gebruik je liever een actuele WordPress plugin om deze veranderingen aan te brengen?

Meer over achtergrondkleur

Links en bronnen

https://www.geeksforgeeks.org/how-to-pick-a-random-color-from-an-array-using-css-and-javascript/

https://medium.com/web-dev-survey-from-kyoto/change-the-background-color-with-transition-animation-web-dev-survey-from-kyoto-ef2f65756e9a

stackoverflow.com/questions/71624574/how-do-i-convert-a-color-to-an-rgb-value

stackoverflow.com/questions/52832232/generate-random-colors-for-each-box-individually-all-at-the-same-time-using-jque

Kleur voor gevorderden Javascript en jQuery

Voor gevorderden Javascript en jQuery

Links over willekeurige kleuren

https://jsfiddle.net/56nmf6nc/

https://stackoverflow.com/questions/68969060/get-random-number-of-colors-from-a-list-instead-of-8

https://copyprogramming.com/howto/javascript-utils-get-random-color-js-code-example

Kleurveranderingen op CSS tricks

Super random kleuren op CSS tricks