Support » Allgemeine Fragen » Alternatives Stylesheets je nach Verlinkung laden

  • TaddyWP

    (@taddywp)


    Hallo zusammen,

    ich würde gerne dass je nach Link über den ein Besucher auf meine Webseite kommt ein individuelles Stylesheet geladen wird. Wie kann ich das realisieren?

    Gruß,
    TaddyWP

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 30)
  • Moderator Bego Mario Garde

    (@pixolin)

    Interessante Frage. Würde ich vermutlich sinngemäß so lösen:

    function referer_body_class($classes) {
    
    $ref = wp_get_referer();
    switch ($ref) {
        case "http://google.de/":
          $classes[] = 'google';
          break;
        case "http://bing.com/":
            $classes[] = 'bing';
            break;
    }
    
    return $classes;
    }
    add_filter('body_class','referer_body_class');

    Im Stylesheet kannst du dann unterschiedliches Styling für .google, .bing, etc. unterbringen.

    Nachtrag: ich hab den Code noch etwas abgeändert, weil WordPress für den Referer eine eigene Funktion bereit hält. Bego

    Thread-Starter TaddyWP

    (@taddywp)

    Hallo,

    danke soweit. Wo wird in dem Code festgelegt welches Stylesheet geladen werden soll? Oder wird in dem Code festgelegt dass je nach Adresse (referer) wo der Besucher herkommt ein bestimmter Bereich aus dem Standard-Stylesheet geladen werden soll?

    Moderator Bego Mario Garde

    (@pixolin)

    In Themes wird üblicherweise im Body-Tag die Funktion body_class() verwendet:

    <body <?php body_class( $class ); ?>>

    Während WordPress damit selber Klassen hinzufügt (etwa „home“ für die Startseite, „page“ für Seiten, „single-post“ für einen einzelnen Beitrag, etc.) kann man den Hook dieser Funktion auch nutzen, um eigene Klassen hinzuzufügen.

    Das Code-Beispiel oben fügt also, wenn jemand von Google kommt, eine CSS-Klasse „google“ ein. Das 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 die Style-Regeln nun aus einem Stylesheet kommen (besser für die Performance, da weniger Dateien abgerufen werden müssen), oder du für jeden Referer ein eigenes Stylesheet anlegst (übersichtlicher), macht dabei wenig Unterschied. (Lässt sich auch sehr hübsch in SASS mit @import umsetzen, weil du dann getrennte Dateien verwenden kannst, die beim Kompilieren zusammengefügt werden.)

    Moderator Torsten Landsiedel

    (@zodiac1978)

    Das funktioniert natürlich nur dann, wenn auch ein Referrer übertragen wird. Manche Seiten entfernen den Referrer aus Sicherheitsgründen. Das solltest du also unbedingt vorher mal testen.

    Gruß, Torsten

    Thread-Starter TaddyWP

    (@taddywp)

    Hallo,

    ich habe die switch-Anweisung um eine case-Anweisung erweitert um auszuschließen dass es an einem nicht übertragenen Referrer scheitert wie empfohlen:

    Den Teil:

    function referer_body_class($classes) {
    
    $ref = wp_get_referer();
    switch ($ref) {
        case "http://www.meine_andere_testseite.de":
          $classes[] = 'testseite';
          break;
        case "http://google.de/":
          $classes[] = 'google';
          break;
        case "http://bing.com/":
            $classes[] = 'bing';
            break;
    }
    
    return $classes;
    }
    add_filter('body_class','referer_body_class');

    hab ich also in die functions.php meines Child-Themes eingefügt, und die body-klassen in die style.css des Child-Themes. Habe natürlich noch eine body.testseite Klasse der style.css hinzugefügt.

    Leider funktioniert es nicht. Weder wenn ich über meine testseite über einen Link meine Seite besuche noch über Google. Was könnte ich falsch gemacht haben?

    Moderator Bego Mario Garde

    (@pixolin)

    Leider funktioniert es nicht.

    Diese Formulierung lese ich so häufig. Aber auch wenn ich meine Glaskugel poliere und anstarre, erfahre ich von ihr selten, was denn nun nicht funktioniert und wo das Problem liegen könnte. Du musst mir also ein bisschen weiterhelfen. 🙂

    Es gibt viele Gründe, warum der Code nicht funktioniert könnte. Z.B. wenn du eine CSS-Regel an die falsche Stelle geschrieben hast und diese Regel später durch eine weitere Regel überschrieben wird.

    Abgesehen davon war mein Code wie gesagt auch nur „sinngemäß“ (und nicht getestet). Du müsstest also z.B. mal prüfen, welcher Referrer dir in den Developer Tools deines Browsers angezeigt werden:

    In Chrome:

    • Google aufrufen
    • Suchbegriff für eigene Website eingeben
    • Rechtsklick > Prüfen, öffnet Developer Tools.
    • Link anklicken, eigene Website wird geöffnet
    • in Developer Tools Tab Network anklicken
    • die oberste (zuerst geladene) Datei anklicken
    • In der rechten Spalte unter Headers > Request Headers > Referrer nachschauen
    • Aha-Effekt: die URL ist ja mit https!
    • Code entsprechend abändern: case "https://google.de/":
    • Erneut ausprobieren
    • andere Referer entsprechend testen. 🙂

    Probier’s doch mal so. Wenn’s dann immer noch nicht klappt, schreib mal, was nicht klappt.

    Karl Silver

    (@karlfox2014akakldkarl)

    Hallo, TaddyWP.

    Schau‘ doch mal, ob du im Quellcode deiner Site im Body-Tag eine Ausgabe einer der neuen zusätzlichen CSS-Klassen siehst.

    Mir sind auch schon öfter (ältere) Themes untergekommen, die Ihre eigene Logik im Body-Tag verwendeten, weshalb der Filter „body_class“ gar nicht wirksam war.

    Du solltest deiner Funktion (zum Testen) evtl. in der switch-Anweisung auch noch einen Wert für „default“ geben, für den Fall, dass kein Referrer erkannt wird.

    Wenn du vor die Zeile return $classes; auch noch ein

    $classes[] = 'meine-test-klasse';

    schreibst, solltest du in jedem Fall eine Zusatzklasse in deinem Body-Tag erhalten.

    Wenn du trotzdem gar keine zusätzliche Klasse in deinem Body-Tag siehst, hakt es entweder an der Einbettung deines neuen Codes in die functions.php oder dein Theme unterstützt evtl. den Filter „body_class“ nicht.

    Gutes Gelingen für die Anpassungen.

    Moderator Bego Mario Garde

    (@pixolin)

    Du solltest deiner Funktion (zum Testen) evtl. in der switch-Anweisung auch noch einen Wert für „default“ geben, für den Fall, dass kein Referrer erkannt wird

    Wir kein Referrer aus der Liste erkannt, wird auch keine zusätzliche CSS-Klasse eingefügt.

    Karl Silver

    (@karlfox2014akakldkarl)

    Stimmt, ich hätte in meiner Antwort genauer angeben müssen, dass die genannten Infos nur temporär zum Testen der Funktion bzw. des Filters eingesetzt werden sollten.

    Daher: Um die Funktions-Einbettung zu testen, sollte man
    a) einen default-Wert bei der Switch-Anweisung vergeben oder
    b) standard-mäßig eine Klasse („meine-test-klasse“) mit ausgeben.

    So arbeite ich mich immer von einer möglichen Fehlerursache zur nächsten. Zweifel daran, ob die Funktion überhaupt greift, könnten dadurch bereits im ersten Durchlauf ausgeschlossen werden.

    Monika

    (@monika)

    über Google kommend

    Google nutzt https als Protokoll und nicht http

    und was passiert, wenn ich von google.at surfe?

    Moderator Bego Mario Garde

    (@pixolin)

    Google nutzt https als Protokoll und nicht http

    Genau. Hab ich ja auch so geschrieben.

    und was passiert, wenn ich von google.at surfe?

    Dann passt der Code, den ich sinngemäß vorgeschlagen habe, nicht.

    Thread-Starter TaddyWP

    (@taddywp)

    Hallo,

    möchte mich bei euch allen für die Antworten bedanken.

    @ Bego Mario Garde:
    wie vorgeschlagen hab ich über Developer Tools die Referrer-Addresse überprüft, und über Google kommt ‚https://www.google.de/&#8216; raus. Daran lag es scheinbar vorerst zumindest noch nicht aber es werden dafür die Werte (Hintergrundfarbe, Schriftfarbe etc.) aus der hinzugefügten body-Klasse geladen.

    Der Referer über bing.com ist im Gegensatz zu Google und meiner Testseite sehr lang. Da sieht er in etwa so aus:
    http://www.bing.com/search?q=www.meine_andere_testseite.de&go=Submit&qs=n&form=QBLH&pq=www.meine_andere_testseite.de&sc=0-11&sp=-1&sk=&cvid=7240F7D976A84940A33AC1C8F5497A64&#8216;

    @ Karl Silver:
    Die body-Klasse kann ich über Firebug bei „Styles“ sehen. Die Werte werden auch wie oben erwähnt geladen.
    Nachdem ich jetzt ein default-Wert zugewiesen habe,

    default:
        $classes[] = 'standardtest';
    body.standardtest {
    	color: red;
    	background-color: yellow;
    }

    werden dessen Werte geladen.

    Bzgl. der Zuweisung die ich vor die Zeile return $classes; hinzufügen soll: Welche Klasse soll ich ihr dann zuweisen? Die Klasse die ich in der Default-Anweisung angegeben habe?

    Gruss, TaddyWP

    Karl Silver

    (@karlfox2014akakldkarl)

    Hallo, TaddyWP.

    Ah, sehr gut, dass die Zuweisung der Body-Klassen bereits klappt.

    Zur Frage: Die Zuweisung vor der Zeile return $classes; ist somit unnötig. Ich habe in meiner Antwort nur zwei Möglichkeiten beschreiben wollen, einen Standard-Wert mit zu vergeben. Sodass man diesen im Body-Tag kontrollieren kann. Das klappt aber nun ja schon.

    Bezügl. Referrer:
    Ich würde hier mit einer PHP-Funktion zur String-Suche – wie z.B. strpos() – arbeiten. Damit ist es möglich, z.B. auf das Vorhandensein von „https://www.bing.com&#8220; zu prüfen oder nur „https://www.bing.&#8220;

    Vorteil davon sollte sein, dass egal wie lange die Referrer-Information ist, man sicher sagen kann, der gesuchte Teil ist vorhanden.

    Testen ist hier aber natürlich definitiv wichtig, da es ja auch eine Reihe von Sonderfällen geben könnte, wie z.B. Such-Ergebnisse auf bing.com, die aber auch „www.google.de“ im Ergebnis träg usw.

    LG
    Karl

    Thread-Starter TaddyWP

    (@taddywp)

    Hallo Karl Silver,

    ich bin mir nicht ganz sicher ob ich genau verstanden habe was du meinst, aber ich habe den Code folgendermaßen abgeändert:

    function referer_body_class($classes) {
    
    	$ref = wp_get_referer();
    
    	if (strpos($ref, "www.meine_andere_testseite.") !== false) {
    		$linkpos = 1;
    	}
    	if (strpos($ref, "https://www.google.") !== false) {
    		$linkpos = 2;
    	}
    	if (strpos($ref, "https://www.bing.") !== false {
    		$linkpos = 3;
    	}
    
    	switch ($linkpos) {
        		case 1:
          			$classes[] = 'testseite';
          			break;
        		case 2:
          			$classes[] = 'google';
        			break;
        		case 3:
            		$classes[] = 'bing';
        	    		break;
        		default:
            		$classes[] = 'standardtest';
    	}
    
    	return $classes;
    }
    add_filter('body_class','referer_body_class');

    Dass ich einen Fehler gemacht habe erkenne ich alleine schon daran dass ich nicht mehr auf meine Seite komme und auch nicht aufs Dashboard :O. Werde ich vermutlich durch Filezilla durch Zurücksetzen des Codes in der functions.php wieder beheben können. Aber ich müsste jetzt raten wo der Fehler liegt. Wo habe ich Murks eingebaut?

    LG
    TaddyWP

    Karl Silver

    (@karlfox2014akakldkarl)

    Hallo, TaddyWP.

    Sieht gut aus.
    In der Zeile mit

    if (strpos($ref, "https://www.bing.") !== false {

    fehlt hinter dem „false“ eine schließende runde Klammer.

    $linkpos könnte man eingangs – ausserhalb der if-Schleife – auch noch mal
    mit 0 initialisieren.

    LG

    Karl

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 30)
  • Das Thema „Alternatives Stylesheets je nach Verlinkung laden“ ist für neue Antworten geschlossen.