WordPress Snippets

WordPress: Eigene CSS und JS Dateien hinzufügen ohne Plugin

WordPress: Eigene CSS und JS Dateien hinzufügen ohne Plugin

WordPress: für eigene CSS oder JavaScript Dateien brauchst Du kein Plugin. Ich zeige Dir, wie Du das mit WordPress ganz einfach selbst machen kannst.

Ich zeige Dir die verschiedenen Möglichkeiten.

WordPress: Eigenes CSS hinzufügen

Wichtig: Damit Deine Änderungen auch nach einem Theme-Update vorhanden sind, solltest Du ein Child-Theme für Dein Theme erstellen. Gehe einfach nach meiner Anleitung vor, es ist ganz einfach.

Wenn Du eigenes Custom CSS für Dein Theme nutzen möchtest und das nicht vom Theme-Entwickler vorgesehen wurde, so gibt es hierfür mehrere Möglichkeiten. Welche Du nutzen solltest, hängt ganz von der Menge des CSS ab.

Nur einige Zeilen CSS hinzufügen:

Wenn es nur wenige Zeilen sind, dann wird Dir dieses kleine Snippet für die functions.php Deines Child-Themes bereits ausreichen:

function ah_custom_css() {
?>
<style>
/* Hier Dein CSS einfügen, z.B.: */
background-color: #f5f5f5;
</style>
<?php }
add_action( 'wp_head', 'ah_custom_css' );

Mit dem obigen kleinen Snippet erstellst Du ein kleines Inline-CSS, das in den Header Deines Themes eingefügt wird. Das ist für einige wenige Änderungen optimal.

Ein komplettes Stylesheet hinzufügen:

Wenn Du bereits sehr viele Änderungen am Theme-CSS gemacht hast, dann wäre es empfehlenswert ein eigenes Stylesheet zu nutzen. Erstelle mit einem HTML-Editor eine neue Datei und nenne sie custom.css.

Falls Du noch keinen HTML-Editor besitzt, lade Dir kostenlos Brackets herunter. Auch ich benutze diesen wirklich guten Editor.

Alle Änderungen am CSS des Themes kommen in diese Datei hinein. Lade sie im Anschluss per FTP in den CSS Ordner Deines Child-Themes hinein. Sollte keiner existieren, lege einen an. Das macht die Sache übersichtlicher.

Folgender Code kommt nun in die functions.php hinein:

<?php
// Ab hier kopieren
/**
 * Ein eigenes CSS korrekt hinzufügen
 */
function ah_custom_css_file() {

 wp_enqueue_style('custom-css', get_stylesheet_directory_uri() . '/css/custom.css');
}
add_action('wp_enqueue_scripts', 'ah_custom_css_file');

WordPress: Ein eigenes JavaScript hinzufügen

Für eigenes JavaScript gibt es eine Besonderheit für WordPress, die Dir hilft, den berüchtigten TypeError: $ is undefined Fehler zu vermeiden. Dein JavaScript Code muss in den folgenden Wrapper hinein:

(function($) {
 
 // Hier Dein JavaScript einfügen
 
})( jQuery );

Auch hier gibt es je nach Aufwand wieder beide Lösungen. Für einige wenige Zeilen Code reicht ein einfaches Inline-Script aus:

<?php
// Ab hier kopieren
/**
 * JavaScript inline hinzufügen
 */
function ah_custom_js() {
?>
<script>
 // Dein JavaScript Code
</script> 
<?php }
add_action('wp_head', 'ah_custom_js');

Eine eigene JavaScript-Datei hinzufügen:

Wird der Code aufwändiger, lohnt es sich, eine eigene Datei zu erstellen. Diese wird in den JS-Ordner des Child-Themes geladen. Folgender Code kommt in die functions.php:

<?php
// Ab hier kopieren
/**
 * Ein eigenes JavaScript korrekt hinzufügen
 */
function ah_custom_js_file() {
 // Enqueue a custom JS file with jQuery as a dependency
 wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'ah_custom_js_file');

Fertig! So einfach ist das.

Andreas Hecht

Andreas Hecht

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Bleib informiert und abonniere den Newsletter

Hol Dir die neuesten Beiträge über WordPress und SEO direkt in Deinen Posteingang. Als Dankeschön bekommst Du Gratis meine Checkliste:

12 Dinge, die Du vor einem Theme-Wechsel beachten solltest.

Ja, ich bin einverstanden, dass meine Daten gespeichert werden und möchte den Newsletter abonnieren!

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

8 Kommentare Kommentar hinzufügen

  1. Danke für die ausführliche Beschreibung. Ich bin gerade dabei mir ein vernünftiges Child-Theme zu erstellen und habe nun zwei kleine Fragen:
    Warum sollte/muss man eine “custom.css” Datei in den Child-Ordner hinzufügen, wenn man im Child-Theme bereits eine “style.css” erstellt hat?
    Kann man nicht gleich in der “style.css” alle Änderungen hineinschreiben?

  2. Hallo Andreas,
    was kann ich den tun, dass „automatisch“ generiertes inline-css & inline js vermieden wird? Habe eine Website mit dem Page Builder von WP Bakery erstellt. Das Inline-css & inline-js sieht ryte als „Warnung“, daher frage ich mich wie ich das auslagern kann 🙂
    LG Julia

    • Hi Julia,

      die einfachste Lösung wäre das Plugin »Autoptimize«. Das kann die CSS- und JavaScript-Dateien zusammenfassen und komprimieren. Du kannst in den erweiterten Einstellungen auch angeben, ob das Plugin auch Inline-CSS / Scripte mit aufnehmen soll. Ansonsten muss die jeweilige ID der Dateien herausgefunden werden, die Inlines am Laden gehindert und in Dateien ausgelagert werden.

  3. Sehr gut erklärt und funktioniert ohne viel Schnickschnack oder Plugins. Vielen Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen