Support » Allgemeine Fragen » wp_enqueue_style(…array()) – CSS Datei erst nach bestimmter Datei laden

  • Gelöst ebody

    (@ebody)


    Hallo,

    in einer Plugin Datei möchte ich festlegen, welche CSS Datei und an welcher Stelle diese im <head> geladen werden soll.

        add_action('wp_enqueue_scripts','add_scripts');
        function add_scripts(){
            wp_enqueue_style( 'sym_style', plugins_url( 'css/template.css', __FILE__ ), array('elementor-global-css'));
        }

    Wenn ich es richtig verstanden habe, kann man im Paramter array() die ID des Stylesheets nennen, welches zu erst geladen werden muss und erst danach meine template.css geladen wird und vorher nicht.

    Es ist doch die ID die man nennen muss oder? Wenn ich im Quellcode sehe…:
    <link rel="stylesheet" id="elementor-global-css"...
    und meine CSS erst nach dieser Datei geladen werden soll, muss ich im array(‚elementor-global-css‘) angeben?

    Wenn ja, bisher funktioniert es leider nicht und weiß nicht warum.

    Gruß
    ebody

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Mit dem Plugin Query Monitor kannst du recht schnell herausfinden, mit welchen „Handles“ Stylesheets eingebunden werden. Diese Handles kannst du dann als Dependency in wp_enqueue_style() verwenden, z.B. elementor-global oder elementor-common.

    Alternativ kannst du deine eigenen CSS-Regel durch hinzufügen eines weiteren Selektors spezifischer machen, womit die Reihenfolge in der die Stylesheets geladen werden egal ist.

    Bei

    .wichtig { color: orange; }
    .wichtig { color: red; }

    wird Text mit der CSS-Klasse wichtig in rot ausgegeben, weil die Regel mit color:red; später geladen wird und die andere Regel damit überschreibt.

    Bei

    .entry-content .wichtig { color: orange; }
    .wichtig { color: red; }

    wird Text im Hauptinhaltsbereich mit der CSS-Klasse wichtig in orange ausgegeben, obwohl es eine später geladene CSS-Regel für wichtig gibt. Hier wird die zusätzliche Angabe des Selektors .entry-content stärker bewertet.

    Thread-Ersteller ebody

    (@ebody)

    Vielen Dank. Ich habe das Plugin installiert und konnte jetzt den richtigen handle finden und es funktioniert.

    Die Selektoren in der CSS habe ich dennoch zusätzlich genauer definiert.

    Gruß
    ebody

    Prima.

    Thread als „gelöst“ markiert.

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)