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.