Hiranthi's weblog

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: http://www.illutic.nl/
Version: 1.0
Author: illutic <a title="Zie ook Legaal webdesign (gerectificeerd)" href="http://hiranthi.nl/ondernemen/legaal-webdesign/">WebDesign</a>
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:

<?php
/*
 Stylesheet.php - merge all stylesheets into one sheet
*/

$sheets = array( 'style.css', 'css/reset.css', 'css/global.css' );

header("Content-Type: text/css");

/* loopt through all sheets */
foreach ( $sheets as $sheet )
{
  if ( file_exists($sheet) )
  {
    $handle = fopen($sheet, "r");
    if ($handle)
    {
      $contents = fread($handle, filesize($sheet));
      $contents = str_replace('../img/', 'img/', $contents); // strip ../ from image URL's in the sheets
      echo $contents."nn";

      fclose($handle);
    }
  }
  else
  {
    echo "/* $sheet could not be opened */n";
  }
}

?>

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):

<?php
$contents = str_replace('../img/', 'img/', $contents); // strip ../ from image 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:

<<a title="Zie ook Makkelijk linken naar WordPress functies" href="http://hiranthi.nl/wordpress/makkelijk-linken-wordpress-functies/">link</a> rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

Als je die regel hebt verwijdert voeg je het volgende toe aan de header.php (helemaal bovenaan, dus boven de doctype etc.):

<?php wp_enqueue_style('themesheets'); ?>

En dit voeg je toe aan de functions.php:

<?php wp_register_style('themesheets', get_bloginfo('stylesheet_directory').'/stylesheet.php', false, '', 'all'); ?>

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!

Print PDF

Ben je op zoek naar een makkelijke manier om je Shopp™ webshop uit te breiden? Dan is Shopplugin.nl voor jou het juiste adres!

Shopplugin.nl geeft jou de mogelijkheid om snel functionaliteiten aan je webshop toe te voegen. Of het nu voor het uitbreiden van je webwinkel is, of om je workflow te vereenvoudigen: het is allemaal mogelijk!

Bekijk snel de webshop – uiteraard ook gebaseerd op Shopp – om te zien wat we jou te bieden hebben!