Support » Allgemeine Fragen » Einbinden von CSS- und JS-Dateien in WordPress

  • Hallo zusammen,

    leider komme ich bei meinem Thema nach zwei Tagen Arbeit immer noch nicht weiter. Ich hoffe ihr könnt mir helfen.

    Ich habe eine Vorlage zum Anzeigen einer Tabelle.
    Inhalt des Hauptordners:
    –index.html
    –Unterordner_CSS
    –Unterordner_JS
    –Unterordner_img

    Wenn ich die index.html lokal ausführe, zeigt es mir die Tabelle mit allen Filterfunktionen und eingebundenen Bildern einwandfrei an. Die Frage ist jetz, wie ich die CSS und JS Dateien nun in meine WordPress Website einbinden kann?

    Was ich bisher versucht habe:
    ———————–
    1.Inhalt hochgeladen
    ———————–
    Den gesamten Inhalt des Hauptordners in folgendes Verzeichnis kopiert:
    wp-content\themes\twentytwentytwo

    (nachdem ich es erst alle im /include-Ordner hatte und es nicht funktioniert hat, war ich nach meinen weiteren Recherchen der Ansicht, dass es im Theme-Ordner wahrscheinlich besser aufgehoben ist)

    ———————–
    2.Die Dateien „registriert“
    ———————–
    Hierzu habe ich in der functions.php im Ordner twentytwentytwo bzw. als zweiter Versuch in der functions.php im Ordner wp-includes folgendes eingetragen:

    function TabelleTest(){
    	wp_enqueue_script('cool_stuff', get_stylesheet_directory_uri() . '/js/jquery-2.1.4.js', array('jquery'), '1', false);
    	wp_enqueue_script('cool_stuff', get_stylesheet_directory_uri()  . '/js/main.js', array('jquery'), '1', false);
    	wp_enqueue_script('cool_stuff', get_stylesheet_directory_uri()  . '/js/mod2.js', array('jquery'), '1', false);
    	wp_enqueue_style('cool_stuff_style', get_stylesheet_directory_uri()  . '/css/style.css');
    	wp_enqueue_style('cool_stuff_style', get_stylesheet_directory_uri()  . '/css/reset.css');
    }
    
    add_action( 'wp_enqueue_scripts', 'TabelleTest');

    ———————–
    3. Einen neuen Beitrag erstellt
    ———————–
    Gesamten Inhalt von index.html eingetragen

    ——————-
    Ergebnis:
    ——————-
    – Beim Aufruf des erstellten Beitrags wird zwar der Inhalt (Text) des eingetragenen html-Codes ausgegeben, jedoch nicht in der gewünschten Darstellung und ohne die erwartete Funktion. Bilder werden auch nicht angezeigt, nur der standardmäßige Platzhalter bei fehlenden Bildern.

    ——————-
    Frage:
    ——————-
    – Wo müssen die Dateien (Punkt 1) kopiert werden? Sind sie im Theme-Verzeichnis richtig aufgehoben?
    – Hat jemand eine Idee, was ich machen muss, damit es auch mit der Darstellung funktioniert?

    Ich würde mich über eine Rückmeldung freuen.

    • Dieses Thema wurde geändert vor 1 Jahr, 8 Monaten von Bego Mario Garde. Grund: Code formatiert
Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Moderator Michi91

    (@michi91)

    Link zur Testseite wird dringend benötigt 🙂

    Thread-Starter michelino222

    (@michelino222)

    Hallo Michi,
    die Seite habe ich aktuell noch lokal für Testzwecke laufen. Falls es zwingend erforderlich ist, werde ich sie noch online stellen. Ich dachte, dass man mein grundsätzliches Vorgehen vielleicht durch meine Beschreibung schon bewerten kann.
    Viele Grüße

    Zu 1)
    Änderungen in Core-Files sind tabu, weil sie extrem schlecht zu pflegen sind (du hältst nach drei Wochen nicht mehr auseinander, welcher Teil von dir ist, musst einen aufwändigen Abgleich machen und beim nächsten Update des Core wird die Änderung auch noch überschrieben).
    Im Theme würde ich das auch nicht unterbringen, weil das Theme nur gestalterische Komponenten haben sollte. Sonst wechselst du irgendwann das Theme, weil dir ein anderes Layout besser gefällt und wunderst dich, wieso die Funktion nicht mehr enthalten ist.
    Wie du ein eigenes Plugin erstellst, ist im Plugin Developer Handbook ausführlich dokumentiert.

    Zu 2:
    In der Dokumentation kannst du die Funktion wp_enque_script() und wp_enqueue_style() nachschlagen. Das erste Argument, das du der Funktion übergibst, ist ein „handle“, also ein Bezeichner. In der Dokumentation steht dazu „Name of the script/the stylesheet). Should be unique.“ Du solltest also nicht den gleichen Bezeichner mehrfach verwenden.

    Tipp: Um grundsätzlich erst einmal die Funktionalität zu prüfen, solltest du eine JavaScript-Datei erstellen und einbinden, die erst einmal nur in der Konsole der Browser-Entwickler-Tools per console.log("hello world") eine Zeichenkette ausgibt. Du siehst dann, ob du bei der Einbindung den richtigen Pfad verwendest und ob die Einbindung funktioniert.

    Zu 3:
    Eine HTML-Datei enthält normalerweise einen Dokument-Header sowwie <html– und <body>-Tags, die du nicht in einen Beitrag oder eine Seite übernehmen möchtest, weil das Theme bereits die Tags und den Header einfügt und dein Plugin auch die Einbindung von Stylesheet und JavaScript übernimmt. Das HTML, dass sich innerhalb des <body>-Tag befindet, kannst du aber in einem HTML-Block übernehmen.

    Zu „die Seite habe ich aktuell noch lokal für Testzwecke laufen.“

    Ist OK, aber gib das bitte demnächst mit an, weil es uns Rückfragen erspart.

    Wir haben hier nur wenige Freiwillige, die regelmäßig Fragen beantworten und deren Zeit ist begrenzt. Ich sitze auch lieber im Garten und lese ein Buch, als diese Woche zum drölfzigsten Mal auf die Einhaltung der Forenregeln und unsere FAQ hinzuweisen (z.B.
    Warum ein Link zu deiner Website wichtig ist) oder auf den angehefteten, besonders markierten Beitrag Bevor du ein neues Thema (Thread) erstellst aufmerksam zu machen. Dort steht, dass wir Informationen benötigen, um Probleme mit einer Website beurteilen zu können und dass Benutzer bitte angeben sollen, wenn das Teilen von Website-Bericht und URL aus irgendwelchen Gründen nicht möglich ist. Weniger Rückfragen, mehr Zeit für ein schattiges Plätzchen im Garten. 😉

    Thread-Starter michelino222

    (@michelino222)

    Hallo Bego Mario Garde,
    herzlichen Dank für die ausführliche Rückmeldung. Dadurch habe ich jetzt schon viel dazugelernt und bin dann erst einmal beschäftigt, mich in die Plugin-Erstellung einzuarbeiten. Ich hatte gedacht, dass das Erstellen erstellen eines Plugins zu viel des Guten wäre für die Einbindung von 5 Dateien und der Darstellung einer Tabelle, aber OK, geht wohl nicht anders.
    Dann wünsche ich dir heute noch eine gute Zeit an einem schattigen Plätzchen im Garten.
    Den Hinweis mit dem Link zur Website habe ich zur Kenntnis genommen. Wird zukünftig berücksichtigt.
    Das Thema würde ich damit schließen, da die Plugin-Erstellung wahrscheinlich separat behandelt wird und ich mich erst einmal einarbeiten muss. Passt das?

    Ich hatte gedacht, dass das Erstellen erstellen eines Plugins zu viel des Guten wäre für die Einbindung von 5 Dateien und der Darstellung einer Tabelle, aber OK, geht wohl nicht anders.

    Kurz nch zwei Gedanken dazu:

    1. Ein Plugins ist kein großes Ding.
      Im Footer des Backend wird Danke für dein Vertrauen in WordPress angezeigt. Nehmen wir an, du möchtest das ändern, dann reichen diese vier Zeilen Code:

      add_action('admin_footer_text', 'my_admin_footer_function');
      function my_admin_footer_function() {
          return 'hello world';
      }

      Jetzt möchtest du daraus ein Plugin machen. Dazu reicht, dass du den Code etwas ergänzt:

      <?php
      /*
       * Plugin Name: Say Hello
       * Description: Gibt im Backend im Footer einen Text aus
       */
      
      // Code von oben
      add_action('admin_footer_text', 'my_admin_footer_function');
      function my_admin_footer_function() {
          return 'hello world';
      }

      Das speicherst du als sayhello.php in einem Verzeichnis sayhello auf deinem Computer und komprimierst das Verzeichnis als sayhello.zip. Schon hast du ein eigenes Plugin, das du per Upload installieren kannst.

    2. Du musst nicht notwendigerweise ein eigenes Plugin erstellen. Du kannst auch ein Plugin wie Code Snippets oder Insert Headers and Footers nutzen, um CSS und JavaScript im Header oder Footer zu platzieren. Nur hast du dann ein weiteres Plugin, das wahrscheinlich umfangreicher (und fehleranfälliger) ist, als die eigene Lösung.
    Thread-Starter michelino222

    (@michelino222)

    Hallo Bego Mario Garde,
    vielen Dank für die Hilfe. Nach einigen Stunden habe ich es durch deinen Hinweis nun auch hinbekommen. Es funktioniert wie gewünscht 🙂

    Was mich aktuell noch wundert ist, dass der relative Pfad zu meinen js-Dateien funktioniert, jedoch nicht zu den img- und css-Dateien. Es funktioniert nur, wenn ich hier den absoluten Pfad angebe. Würde es gar nicht funktionieren, würde es Sinn machen, aber wieso geht es bei den js-Dateien und bei den anderen nicht?

    Die js-,img- und css-Dateien liegen alle in Separaten Ordnern im Verzeichnis meines Plugins.

    plugins
    -eigenePlugin
    –css
    –js
    –img

    Vielleicht hast Du ja hier noch einen Einfall.

    Viele Grüße

    Du solltest dir angewöhnen, bei solchen Fragen in der Dokumentation nachzuschlagen. Dort wird nicht nur eine Funktion wie z.B. wp_enqueue_script() erklärt, sondern du bekommst auch Code-Beispiele, wie du das verwenden kannst, z.B.

    function my_load_scripts($hook) {
     
        // create my own version codes
        $my_js_ver  = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' ));
        $my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
         
        // 
        wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver );
        wp_register_style( 'my_css',    plugins_url( 'style.css',    __FILE__ ), false,   $my_css_ver );
        wp_enqueue_style ( 'my_css' );
     
    }
    add_action('wp_enqueue_scripts', 'my_load_scripts');

    (Quelle: https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-1558)

    Mit plugins_url( 'style.css', __FILE__ ) lädst du ein Stylesheet style.css, das sich im Plugin-Verzeichnis befindet. Die Funktion plugins_url() lädt dabei die URL des Plugin-Verzeichnisses wieder (selbst wenn du das warum auch immer mal ändern solltest).

    Thread-Starter michelino222

    (@michelino222)

    Danke für die Rückmeldung.
    Die Dokumentation habe ich mir angeschaut und meine Umsetzung gleicht auch deinem Vorschlag. Der relative Pfad im html-Code funktioniert jedoch noch nicht. Ich nutze jetzt einfach den absoluten Pfad. Ist sicher nicht die ideale Lösung, aber damit komme ich jetzt voran. Wahrscheinlich wird sich die Ordnerstruktur von WordPress in den nächsten Jahren nicht ändern und somit sollte es damit wahrscheinlich auch keine Probleme geben.
    Danke nochmals für deine Hilfe!

    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Das Thema „Einbinden von CSS- und JS-Dateien in WordPress“ ist für neue Antworten geschlossen.