Meerdere stylesheets in één

Fotografie door patpitchaya.

patpitchaya

De nieuwste artikelen rechtstreeks in je inbox?

Meerdere stylesheets in één

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 Molhoek, 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 Molhoek, 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! 😉

Je e-mailadres wordt niet gepubliceerd.

Reacties worden gemodereerd, het kan dus even duren voor jouw reactie echt geplaatst is.
Zou je dat wat je in je reactie wilt plaatsen niet zeggen tegen iemand die je na staat? Dan is het hier ook niet gepast.

*