Frage: Meine Website soll je nach Referrer ein unterschiedliches Layout haben. Kann ich dazu unterschiedliche Stylesheets laden?
Ein Referrer ist die Internetadresse der Webseite, von der der Benutzer durch Anklicken eines Links zu der aktuellen Seite gekommen ist (englisch to refer „verweisen“). (Quelle: Wikipedia)
In WordPress Themes wird üblicherweise im Body-Tag die Funktion body_class() verwendet:
<body <?php body_class( $class ); ?>>
WordPress fügt mit dieser Funktion CSS-Klassen für unterschiedliche Inhalte hinzu (etwa „home“ für die Startseite, „page“ für Seiten, „single-post“ für einen einzelnen Beitrag, etc.). Man kann aber auch den Hook dieser Funktion nutzen, um eigene Klassen hinzuzufügen:
function referer_body_class($classes) {
$ref = $_SERVER["HTTP_REFERER"];
switch (true) {
case (stripos( $ref, 'google' ) !== false ):
$classes[] = 'google';
break;
case (stripos( $ref, 'bing' ) !== false ):
$classes[] = 'bing';
break;
default:
$classes[] = 'nix';
}
return $classes;
}
add_filter('body_class','referer_body_class');
Dieser Code fügt, wenn jemand zum Beispiel bei Google einen Link auf die eigene Webseite angeklickt hat, im Body-Tag die CSS-Klasse „google“ ein. Diese Klasse kann man für eine abweichende Gestaltung im Stylesheet nutzen:
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #444;
background-color: #fff;
}
body.google {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000;
background-color: #e0e0e0;
}
body.bing {
font-family: "Comic Sans MS", cursive;
font-size: 20px;
color: #e00;
background-color: #32CD32;
}
Ob dabei die Style-Regeln nur aus einem Stylesheet kommen (besser für die Performance, da weniger Dateien abgerufen werden müssen), oder du für jeden Referrer ein eigenes Stylesheet anlegst (übersichtlicher), macht dabei wenig Unterschied.
(Ideal wäre die Verwendung von SASS, weil einzelne Stylesheets je Referrer mit @import integriert werden könnten. Beim Kompilieren werden die Dateien dann zu einem Stylesheet zusammengefügt.)