Minifierade stilmallar, WordPress och Sass

Ett snabbt inlägg med några tips för den som vill använda Sass tillsammans med WordPress.

Häromdagen lyssnade jag på avsnitt 36 av ShopTalk där en lyssnare tog upp problematiken kring att Sass tar bort den obligatoriska kommentaren i början ett WordPress-temas stilmall när koden minifieras.

Jag började titta på Sass för något år sedan och stötte på samma problem när jag ville kombinera detta med WordPress. Chris Coyier gjorde ett bra jobb med att täcka in de möjliga lösningarna men jag tänkte ändå summera och visa det sätt jag löst det på och använder mig av.

Det enklaste sättet är att inleda kommentarsblocket med ett utropstecken då detta instruerar Sass att inte ta bort kommentaren vid kompilering. Denna lämnas då intakt och WordPress accepterar stilmallen.

/*!
Theme Name: Tema
Theme URI: http://jorhult.se
Author: Mikael Jorhult
Author URI: http://jorhult.se
Description: Beskrivning av temat
Version: 1.0
Tags: translation-ready
Text Domain: tema
*/

En annan lösning, som jag själv föredrar, är att låta style.css endast innehålla temats information och sedan ha en separat stilmall som innehåller alla stilregler som sedan är den fil som man anropar i dokumenten.

På detta sätta kan man ha alla stilmallar i en egen mapp och hålla temamappen ren och enkel samtidigt som WordPress känner igen temat.

Jag använder nedanstående mappstruktur i mina teman.

temamapp
- assets
-- css
--- main.css
--- print.css
-- scss
--- main.scss
--- print.scss
- config.rb
- functions.php
- index.php
- style.css

Följande PHP-kod kan sedan användas i temats functions.php för att lägga till stilmallen.

function tema_init() {
	wp_enqueue_style('main', get_bloginfo('template_directory') . '/assets/css/main.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'tema_init');
Publicerad:

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *