Ben je, net als ik, gewend aan het gebruiken van meerdere stylesheets en heb je geen zin om ze telkens handmatig onder elkaar te plakken (of dat door een programma’tje te doen) voor je het op de FTP kan gooien? Dan is deze post iets voor jou 😉
Voor WordPress heb je sowieso de style.css nodig, want daar komt de informatie van je CSS bestand in te staan. Het enige dat bij mij in zo’n bestand staat is het volgende:
/* Theme Name: NAAM THEME Author URI: https://www.onexa.nl/ Version: 1.0 Author: Onexa Description: BESCHRIJVING THEME */
En daaronder importeer ik dan de CSS bestanden één voor één. Maar, zoals Joost ook heeft gezegd op WordCampNL, je browser vraagt dan wel meerdere stylesheets op. Of je het nu allemaal importeert in header.php of dat je het zo in het CSS bestand doet: het zijn meerdere stylesheets.
Nu ben ik zelf behoorlijk verknocht aan het gebruiken van aparte stylesheets. Ik gebruik eigenlijk standaard het volgende:
- style.css voor de gegevens hierboven;
- css/reset.css mijn standaard reset stylesheet
- css/global.css de global stylesheet
- Eventueel nog browserspecifieke stylesheets (voor bijv. IE6), een widgets.css of een cforms.css (ik heb liever een cforms.css in m’n theme zitten dan in de cforms_custom map).
Ik stop mijn stylesheets dus altijd in een aparte map ‘css’ genaamd (voor JavaScripts doe ik dat overigens ook, maar dan in de map ‘js’). Houdt het overzichtelijk, vind ik.
Maar goed, het is dus veel beter om al die bestanden te kopiëren en te plakken in style.css, maar eerlijk gezegd heb ik daar geen zin in (irritant als je 1 klein dingetje hebt geüpdate etc.). Dus, ik dacht ‘dat moet beter kunnen’. En heb er ook wat op gevonden 🙂
Stylesheet.php
Maak een nieuw bestand aan, noem deze stylesheet.php en zet daar het volgende in:
/* Style.php - merge all stylesheets into one sheet */ $sheets = array( 'style.css', 'css/rest.css', 'css/global.css', ); ob_start(); header ( "content-type: text/css; charset: UTF-8" ); /* loops through all sheets */ foreach ( $sheets as $sheet ) { $sheet = trailingslashit( get_stylesheet_directory() ) . $sheet; if ( file_exists( $sheet ) ) { $handle = fopen( $sheet, "r" ); if ( $handle ) { $contents = @fread( $handle, filesize( $sheet ) ); $contents = str_replace( '../img/', trailingslashit( get_stylesheet_directory_uri() ) . 'img/', $contents ); // strip ../ from image URL's in the sheets $contents = str_replace( '../fonts/', trailingslashit( get_stylesheet_directory_uri() ) . 'fonts/', $contents ); // strip ../ from font URL's in the sheets $codes = array( '%%defaultcolor%%', ); $replace = array( '#74baa0', /* default color */ ); // replace the codes $contents = str_replace( $codes, $replace, $contents ); // if the sheet isn't style.css if ( $sheet !== 'style.css' ) { $contents = str_replace( array( "\n", "\r", "\t"), '', $contents ); // strip new lines and tabs $contents = str_replace( array( " {", "{ ", " }", "} ", "; ", " ;", ": ", " :" ), array( '{', '{', '}', '}', ';', ';', ':', ':' ), $contents ); // strip unneccessary spaces $contents = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $contents ); // strip comments from all stylesheets } // echo the contents of the stylesheet echo $contents . "\n"; // close the file fclose( $handle ); } } else { echo "/* $sheet could not be opened */\n"; } } // end foreach
In de array $sheets
zet je dus alle sheets die je gebruikt. Als je je afbeeldingen niet in een aparte map zet (ik zet ‘t altijd in een map genaamd ‘img’) zoals ik kun je de volgende regel weghalen (of aanpassen als je bijv. je stylesheets weer wel in een andere map gooit):
$contents = str_replace( '../img/', trailingslashit( get_stylesheet_directory_uri() ) . 'img/', $contents ); // strip ../ from image URL's in the sheets
Voor lettertypes (fonts) geldt hetzelfde.
$contents = str_replace( '../fonts/', trailingslashit( get_stylesheet_directory_uri() ) . 'fonts/', $contents ); // strip ../ from font URL's in the sheets
Aanpassingen header.php
Uiteraard moet je ook nog wat wijzigen in je header.php (anders heeft het aanmaken/aanpassen van stylesheet.php zo weinig nut ;-)) en we beginnen met het weghalen van de zin waar je de CSS van je theme mee in de header zet. Dit zal waarschijnlijk zoiets zijn:
Dit voeg je toe aan de functions.php:
/** * Query var for loading the Theme-specific CSS * * @var $vars (array) the query vars * * @return $vars (array) the query vars * * @author Hiranthi Herlaar, Onexa */ function onx_theme_add_trigger( $vars ) { $vars[] = 'onx-theme-css'; return $vars; } // end added query var add_filter( 'query_vars', 'onx_theme_add_trigger' ); /** * Code for the Theme-specific CSS * * @author Hiranthi Herlaar, Onexa */ function onx_theme_trigger_check() { if ( intval( get_query_var( 'onx-theme-css' ) ) == 1 ) { include( trailingslashit( get_stylesheet_directory() ) . 'stylesheet.php' ); exit; } } // end meba_theme_trigger_check add_action( 'template_redirect', 'onx_theme_trigger_check' ); /* * Desc: add the style.php to the header of every page **/ function onx_stylesheets() { global $is_IE; if ( ! is_admin() ) { wp_register_style( 'onx-stylesheet', home_url('/').'?onx-theme-css=1' ); wp_enqueue_style( 'onx-stylesheet' ); } } // end shoppnl_stylesheets add_action( 'wp_print_styles', 'onx_stylesheets', 999 );
Als je dan nu de bestanden op je FTP gooit en je blog/site ververst zie je als het goed is geen verschil. En dat hoort ook! 😉