Dostałem pytanie o to, czy można by w pliku style.css w WordPressie wykonać kod PHP. Wbrew temu, co się na początku może wydawać, nie jest to takie głupie, bo poza np. obsługa zmiennych (co zresztą w CSS też jest), można wykonywać dodatkowe operacje, bazując na różnych elementach, nawet tych zewnętrznych. I choć nie da się w standardowej konfiguracji webserwera w pliku CSS wykonać kodu PHP, to można CSS upakować do pliku PHP.

Plik PHP udający plik CSS

I choć metoda ta jest uniwersalna i będzie działać w przypadku właściwie każdej strony, to z racji tego, że pytanie dotyczyło WordPressa, zaczniemy od wczytania pliku “style.php” zapisanego w motywie potomnym jako pliku z CSSem do nagłówka strony. W tym celu np. w pliku functions.php motywu potomnego dodajemy taki kod:

function webinsider_wp_add_stylesheet_to_head() {
      echo '<link href="' . get_stylesheet_directory_uri() . '/style.php" rel="stylesheet" type="text/css">';
}
add_action( 'wp_head', 'webinsider_wp_add_stylesheet_to_head' );

W przypadku gdy strona nie jest na WordPressie, krok ten należy zastąpić innym, który doda do nagłówka wywołanie pliku “style.php” jako CSS.

W pliku “style.php” musimy dodać odpowiedni nagłówek, by to, co z niego wyjdzie, mogło być traktowane jako CSS:

<?php
header("Content-type: text/css; charset: UTF-8");
?>

W tym momencie można już korzystać z niego prawie jak ze zwykłego pliku CSS:

<?php
header("Content-type: text/css; charset: UTF-8");
?>
/* Komentarz w CSS, który będzie widoczny */
a {
  color: #88b15b;
}
<?php /* Komentarz w PHP, który nie będzie widoczny */ ?>
a:hover {
  color: #a8cd60;
}

Jak widać, nie ma problemy, by CSS mieszać z PHP. Nie tylko, by ukryć komentarze (przydatne :-)), ale też np. korzystać ze zmiennych:

<?php
header("Content-type: text/css; charset: UTF-8");

// Firmowe kolory:
$PrimaryBrandColor = '#88b15b';
$SecondarBrandColor = '#a8cd60';
?>

/* Komentarz w CSS, który będzie widoczny */
a {
	color: <?php echo $PrimaryBrandColor; ?>;
}
<?php /* Komentarz w PHP, który nie będzie widoczny */ ?>
a:hover {
	color: <?php echo $SecondarBrandColor; ?>;
}

Ogólnie można sobie pozwolić na sporo, ważne by wynik działania pliku PHP był zgody ze standardem CSS.

Zmienne w CSSie

A skoro na początku wspomniałem, że w samym CSSie też można korzystać ze zmiennych, to od razu mały przykład:

:root {
  --PrimaryBrandColor: #88b15b;
  --SecondarBrandColor: #a8cd60;
}
a {
  color: var(--PrimaryBrandColor);
}
a:hover {
  color: var(--SecondarBrandColor);
}

Choć oczywiście nie ma tu aż takich możliwości jak w PHP, to warto o tym wiedzieć, bo może się przydać, nie tylko do definiowania firmowych kolorów… ;-)