Lijst met gebruikers tonen WordPress

Met WP CLI een gebruikerslijst opvragen

Het commando wp user list in WP CLI wordt gebruikt om een lijst van gebruikers op je WordPress website weer te geven. Je kunt verschillende filters en opties gebruiken om de output te specificeren, zoals het filteren op gebruikersrol. In dit geval bekijken we specifiek hoe je een lijst van alle gebruikers met de rol ‘administrator’ kunt opvragen.

Om een lijst van alle gebruikers met de rol ‘administrator’ weer te geven, gebruik je het volgende commando.

wp user list --role=administrator

Je kunt ook specifieke velden opvragen door de –fields optie te gebruiken. Bijvoorbeeld, om de gebruikersnaam, weergavenaam en e-mailadres van alle beheerders weer te geven, gebruik je:

wp user list --role=administrator --fields=ID,user_login,display_name,user_email

Extra tips

• Filtering en sortering: Je kunt extra opties toevoegen om de lijst te filteren of te sorteren op basis van andere criteria, zoals gebruikersmeta of aanmaakdatum.
• Exporteren van gegevens: door het formaat aan te passen naar csv of json, kun je de gebruikersgegevens eenvoudig exporteren voor verdere verwerking of analyse.

Om de lijst van beheerders te exporteren naar een CSV-bestand, gebruik je:

wp user list --role=administrator --fields=ID,user_login,display_name,user_email --format=csv > administrators.csv

Het commando wp core update in WP CLI wordt gebruikt om de kern van WordPress bij te werken naar de nieuwste stabiele versie. Dit is belangrijk om ervoor te zorgen dat je website profiteert van de nieuwste functies, beveiligingsupdates en bugfixes. In dit artikel vind je meer uitleg over dit commando.

WP CLI standaard versie WordPress bijwerken

Om de WordPress core naar de nieuwste stabiele versie bij te werken, gebruik je eenvoudig het volgende commando:

wp core update

WP CLI standaard versie WordPress bijwerken

Als je naar een specifieke versie van WordPress wilt updaten, kun je het –version argument gebruiken. Bijvoorbeeld, om naar versie 5.8 bij te werken:

wp core update --version=5.8

Ook kun je opnieuw installeren forceren als je de actieve versie opnieuw wilt installeren. Hiervoor gebruik je het volgende commando.

wp core update --force

Wat is WP-CLI?

WP-CLI (WordPress Command Line Interface) is een krachtig hulpmiddel voor WordPress ontwikkelaars en beheerders. Het biedt een reeks commando’s waarmee je taken kunt automatiseren en beheren zonder gebruik te maken van de grafische interface van WordPress.

Met WP-CLI kun je bijvoorbeeld WordPress plugins installeren, WordPress thema’s activeren, instellingen wijzigen, en databases beheren.

Dit bespaart tijd en maakt het beheer en website onderhoud van WordPress websites efficiënter, vooral bij het werken met meerdere websites of bij complexe taken.

WP-CLI: alle plugins updaten

Het updaten van alle plugins in WordPress kan eenvoudig worden uitgevoerd met WP-CLI. Hier is een kort overzicht van hoe je dit kunt doen:

wp plugin update --all

Met dit commando worden alle geïnstalleerde plugins naar hun nieuwste versies bijgewerkt. WP-CLI controleert automatisch of er updates beschikbaar zijn en voert deze uit. Dit is een efficiënte manier om ervoor te zorgen dat je site altijd up-to-date is en beveiligings- en prestatieverbeteringen bevat.

In de uitleg van WordPress over het plugin update commando vind je nog meer opties die je mee kunt geven.

Wat is WP-CLI?

WP-CLI (WordPress Command Line Interface) is een krachtig hulpmiddel voor WordPress ontwikkelaars en beheerders. Het biedt een reeks commando’s waarmee je taken kunt automatiseren en beheren zonder gebruik te maken van de grafische interface van WordPress.

Met WP-CLI kun je bijvoorbeeld WordPress plugins installeren, WordPress thema’s activeren, instellingen wijzigen, en databases beheren.

Dit bespaart tijd en maakt het beheer en website onderhoud van WordPress websites efficiënter, vooral bij het werken met meerdere websites of bij complexe taken.

Heb je een website waar regelmatig 404’s ontstaan door bijvoorbeeld het wisselen van een assortiment in een WooCommerce webshop? Ons advies is om als het kan een 301 redirect aan te maken in htaccess of een plugin als RankMath SEO.

404 redirect via PHP bestand

Recent hebben wij zelf deze oplossing geimplementeerd, alle 404’s worden automatisch geredirect naar de homepage. Waarom? Dagelijks worden de producten in de affiliate webshop via Datafeedr geupdatet. Er komen dus dagelijks nieuwe producten bij en er verdwijnen ook dagelijks producten. Het is daarom niet te doen om handmatig alle redirects bij te houden.

Vandaar dat we ervoor gekozen hebben om het bestand 404.php uit het thema te downloaden en via FTP weer te uploaden naar de child-thema map. Gewoon in de hoofdmap. Alle content verwijderen en de onderstaande code plaatsen. Alle 404’s worden vanaf nu automatisch doorgestuurd naar de homepage. Uiteraard kun je door de code aan te passen ook een andere url invoeren.


header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();
?>

Gebruik je Mollie als betaalprovider in je WooCommerce webshop? Dan heb je waarschijnlijk een e-mail ontvangen van Mollie met daarin deze tekst:

Vanaf 1 juli brengt Mollie een update van je webshop plug-in uit. Zodra deze is uitgerold, moet je een van onderstaande acties ondernemen: 

• Schakel de optie voor de iDEAL issuer list/bankselectie uit. 
• Als dit menu niet zichtbaar is, verdwijnt de optie om in de checkout de bank te selecteren automatisch na de update.

iDEAL gaat veranderen, je hebt tot uiterlijk 1 maart 2025 om jouw bedrijf hierop aan te sluiten. Wat er precies veranderd, daarover vind je meer op de website van Mollie.

Mollie Payments for WooCommerce plugin

Waarom zou je deze aanpassing moeten maken volgens ons?

Afgelopen weken hebben we van een aantal klanten die WordPress onderhoud bij ons hebben, doorgekregen dat iDEAL in hun webshop niet meer werkt. Uiteindelijk bleek dit niet het geval, wat was er dan wel aan de hand?

Door de aanpassingen in de Mollie Payments for WooCommerce plugin voor iDEAL versie 2.0 is de dropdown die eerst te zien was bij het afrekenen in een WooCommerce webshop verdwenen. Zie onderstaand screenshot.

De keuze voor een bank wordt nu gemaakt in het Mollie betaalscherm wat je te zien krijgt na het plaatsen van de bestelling. Tot zo ver geen probleem. Het probleem is alleen dat de WooCommerce Mollie plugin niet correct aangepast is waardoor de tekst ‘selecteer een bank’ is blijven staan in de beschrijving. Dit is erg verwarrend voor klanten van een webshop.

Mogelijk wordt dit in een volgende update van de plugin weer opgelost maar voor nu leggen we je graag uit hoe je het zelf op kunt lossen.

iDEAL 2.0 in WooCommerce via Mollie

Om deze aanpassing te maken volg je de volgende stappen.

Log als eerste in op je WordPress dashboard. Navigeer vervolgens naar WooCommerce (1) > Instellingen (2) > Betalingen (3);

Klik op ‘beheren’ achter de iDEAL betaalmethode.

In het scherm met de instellingen van de betaalmethode Mollie -iDEAL vind je een veld met een beschrijving. En hier vind je dus ook de standaard tekst die je moet verwijderen. Dit veld leegmaken en de instellingen opslaan. Let op dat je de vervaltijd, het laatste veld onderaan aanpast naar 1 of een ander getal aangezien je anders niets op kunt slaan.

Wat is iDEAL 2.0?

In de e-mail van Mollie wordt ook uitgelegd wat iDEAL 2.0 onder andere is. Een aantal voordelen hiervan zijn de introductie van klantprofielen, betalingen via QR-code en meldingen voor bekende klant. Wat concreet de verbeteringen voor een webshop zijn daar zullen we later nog uitgebreid op terugkomen. Het doel is uiteindelijk ook om de conversie van webshops te verhogen, wat naast veiligheid zeker een belangrijk doel moet blijven.

CSS Animations laten je elementen op je webpagina vloeiend bewegen en veranderen zonder gebruik van JavaScript. Dit doe je door de eigenschap @keyframes te gebruiken, waarmee je de verschillende stappen van de animatie definieert. Vervolgens gebruik je de animation-eigenschap om de animatie aan een element toe te wijzen.

CSS Animations voorbeeld

Uitleg voorbeeld

Om dit vierkant te laten draaien hebben we de volgende code gebruikt. In de pagina hebben we een div geplaatst met de class rotating-square.

Vervolgens hebben we in de stylesheet de volgende CSS toegevoegd om het roteren via een CSS animatie mogelijk te maken.

.rotating-square {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px auto;
animation: rotate 3s infinite linear;
}

@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

CSS media queries zijn een krachtige techniek die wordt gebruikt om de weergave van inhoud zoals bijvoorbeeld een WordPress website dynamisch aan te passen aan verschillende eigenschappen van het apparaat waarop de website wordt bekeken.

CSS media queries

Ze stellen webdesigners in staat om specifieke CSS-regels toe te passen op basis van kenmerken zoals schermbreedte, -hoogte, resolutie, oriëntatie en meer.

Media queries vormen de basis van responsive webdesign, waardoor een optimale gebruikerservaring op diverse apparaten mogelijk wordt.


/* Basis stijl voor alle apparaten */
body {
background-color: white;
color: black;
}

/* Media query voor apparaten met een schermbreedte van maximaal 600px */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}

Uitleg CSS media query

Wat zie je in de CSS terug? Dat leggen we hierna uit.

• Standaardstijlen: CSS-regels buiten de media query zijn van toepassing op alle schermgroottes en apparaattypen.
• Media query: @media (max-width: 600px) specificeert dat de CSS-regels binnen deze query alleen worden toegepast op apparaten met een schermbreedte van maximaal 600 pixels.
• Binnen de query: De body achtergrondkleur wordt ingesteld op lightblue wanneer de schermbreedte 600px of minder is.

Toepassing media queries

Er zijn verschillende scenario’s waarbij media queries handig zijn. Dit gaat met name om verschillende schermformaten. Maar je kunt bijvoorbeeld ook een speciale styling meegeven aan een recept met WP Recipe Maker of WooCommerce product op je website.

• Responsive design: Door verschillende layouts toe te passen voor mobiele apparaten, tablets en desktops, wordt de weergave geoptimaliseerd voor elk apparaat.
• High resolution displays: Specifieke stijlen kunnen worden toegepast voor retina- of high-DPI-schermen om visuele kwaliteit te verbeteren.
• Print stijlen: Aanpassen van de weergave bij het afdrukken van een webpagina om ervoor te zorgen dat de inhoud goed wordt geformatteerd voor papier.

CSS Flexbox of de Flexible Box Layout Module, is een CSS layout model dat het eenvoudig maakt om responsieve en dynamische layouts te creëren. Een ander voorbeeld hiervan is een CSS Grid Layout.

CSS Flexbox layout

In tegenstelling tot het twee-dimensionale CSS Grid is Flexbox vooral ontworpen voor het uitlijnen van items in een rij of kolom (één dimensie).

Het biedt een efficiënte manier om de ruimte te verdelen en elementen uit te lijnen binnen een container, zelfs als de grootte onbekend of dynamisch is.

Als je snel een Flexbox layout wilt maken kun je gebruik maken van de gratis Flexbox Generator van CSSPortal.com.

Voorbeeld CSS Flexbox layout

Hieronder vind je een voorbeeld en de uitleg van een CSS Flexbox.


.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.flex-item {
background-color: #8cacea;
padding: 20px;
margin: 10px;
text-align: center;
border: 1px solid #000;
}

Een CSS Grid Layout is een krachtige tool in CSS waarmee je complexe, responsieve webpagina-layouts kunt maken.

Het is een twee-dimensionaal raster-gebaseerd systeem, waarbij je elementen kunt plaatsen in rijen en kolommen. Dit maakt het makkelijker voor jou als webdesigner om ingewikkelde layouts te ontwerpen zonder afhankelijk te zijn van floats of positioning hacks in je CSS stylesheet.

CSS Grid Layout voorbeeld

Stel dat je een eenvoudige layout met drie kolommen en twee rijen wilt maken. Hier is hoe je dat kunt doen met CSS Grid:


.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
gap: 10px; }

.grid-item{
background-color: #8cacea;
padding: 20px;
text-align: center;
border: 1px solid #000; }

Uitleg CSS Grid Layout

• Grid Container: De .grid-container class gebruikt display: grid; om de grid layout te activeren.
• Grid Template Columns en Rows: grid-template-columns: repeat(3, 1fr); maakt drie kolommen die elk een gelijke breedte hebben. grid-template-rows: 100px 100px; maakt twee rijen van elk 100px hoog.
• Gap: gap: 10px; zorgt voor een ruimte van 10px tussen de grid items.
• Grid Items: Elke .grid-item is een item binnen de grid container en wordt automatisch geplaatst in de volgende beschikbare cel.