Een stylesheet specifiek voor mobiel. Dit kan bijvoorbeeld ook een stylesheet zijn voor WooCommerce of voor de styling van Gravity Forms. Bijkomend voordeel is dat je dit voor één website kunt maken en vervolgens bij andere websites kunt integreren. Hiermee bespaar je dus op termijn tijd en ontwikkel je een eenduidige werkwijze binnen je WordPress agency.

Extra stylesheet inladen

We gaan er vanuit dat je een child-theme gebruikt voor de website. Voeg de onderstaande code toe aan je functions.php.

De eerste regel staat er waarschijnlijk al, voeg dan alleen het stukje ‘wp_enqueue’ toe aan de bestaande code.

function theme_enqueue_styles() {
		wp_enqueue_style( 'mobile-style', get_stylesheet_directory_uri() . '/css/mobile.css');
}

Zorg dat je in je child-theme folder een map ‘CSS’ hebt en dat hier een CSS-bestand in staat met de naam die je definieert in de functions.php.

@media screen and (max-width: 600px) {
a {
color: #ff0000;
}
}

De bovenstaande code kun je plaatsen in mobile.css. Alle links zullen dan op schermgroottes tot 600 pixels rood zijn. Als je in je thema opties of een andere stylesheet ook de a gedefinieerd hebt zal vanaf 600 pixels die kleur getoond worden. Eventueel zou je deze nog kunnen overschrijven met !important. Je code zal dan worden.

a {
color: #000 !important;
}
}

Je bent klaar om verder te werken naar een professionelere webdesign standaard.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.