WordPress: JS und CSS Dateien gezielt einbinden (inkl. Cheatsheet)

Inhalt

CSS und JS Dateien gezielt in WordPress einbinden

Wozu sollte ich JS und CSS Dateien in WordPress einbinden? Mit der Möglichkeit, Skripte (JS) und Stylesheets (CSS) in WordPress einzubinden eröffnen sich schier unendliche Möglichkeiten der Anpassung und Erweiterung. Sie können das Aussehen, das Verhalten und die Funktionalität einer WordPress Seite verändern.

Zur Einbindung der Dateien gibt es verschiedene Möglichkeiten. Vor allem die Möglichkeit, die Dateien nur unter bestimmten Voraussetzungen oder auf bestimmten Seiten einzubinden. Wie das funktioniert und wozu das gemacht werden sollte, informiert dieser Artikel.

Wie binde ich JS und CSS Dateien ohne Plugin ein? Dieser Artikel behandelt die programmatischen Ansätze zum Einbinden solcher Dateien, jedoch werden auch Lösungen per Plugin eine Erwähnung erhalten.

Warum sollte ich CSS und JS Dateien in WordPress nur gezielt einbinden?

Warum sollten Dateien nur gezielt in WordPress eingebunden werden? Bei der Erstellung von WordPress Seiten sollte ein wichtiger Faktor darin liegen, die Seiten schnell und performant zu gestalten. Ein Kriterium dafür ist die Anzahl der zu ladenden Stylesheets bzw. Skripte. Hier gilt: je weniger, desto besser. CSS und JS Dateien sollten nur auf den Unterseiten eingebunden werden, wo sie auch wirklich benötigt werden.

Andernfalls laden wir einen unnötigen Balast an Dateien, die die Geschwindigkeit unserer Seite beeinträchtigen. Und von schnelleren Webseiten profitieren am Ende alle: die Benutzer:innen, die weniger warten müssen und die:der Webseitenbetreiber:innen, da dies potenziell mehr Benutzer:innen, Leads oder Kunden generieren kann.

Selbst für Google ist die Performance einer Webseite inzwischen ein Kriterium, nicht mehr nur der reine Content einer Seite.

Wie kann ich CSS und JS Dateien grundsätzlich in WordPress einbinden?

Zum Einbinden von CSS und JS Dateien brauchen Sie zwei Sachen. Zum einen die Funktionen wp_enqueue_style (für CSS Dateien) bzw. wp_enqueue_script (für JS Dateien), in der Sie jeweils die einzubindende Datei definieren. Zum anderen benötigen Sie einen Aufruf der Hook wp_enqueue_scripts, um unsere Dateien zu WordPress hinzuzufügen. Beide Teile können Sie in der functions.php Ihres Child-Themes hinterlegen.

Wie binde ich CSS und JS Dateien im WordPress Frontend ein?

Wenn Skripte und Stylesheets im Frontend Bereich geladen werden sollen, wird die Hook wp_enqueue_scripts angesteuert. Dateien, die Sie auf diese Methode einbinden, werden nicht im Admin- oder im Loginbereich geladen. Hierfür gibt es weitere Hooks, auf die später eingegangen wird. Die Syntax für das Einbinden von CSS und JS Dateien im Frontend sieht wie folgt aus:

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

Syntax für die Hook wp_enqueue_style

Die Parameter für diese Hook sind die folgenden:

  • $handle (Pflicht) = Name des Stylesheets (muss einzigartig sein)
  • $src (optional) = Pfad zum Stylesheet, welches eingebunden werden soll. Standardwert = ''
  • $deps (optional) = Array mit anderen Stylesheets, von denen das einzubindende Stylesheet abhängig ist. Standardwert = array()
  • $ver (optional) = Versionsnummer des Stylesheets. Wenn eine Versionsnummer angegeben ist, wird diese für Caches benutzt. Ist keine angegeben, wird die Versionsnummer der aktuellen WordPress Version angehangen. Standardwert = false
  • $media (optional) = Media CSS Regel, die auf das Stylesheet angewendet wird. Standardwert = 'all'

Wenn Sie von den optionalen Parametern keine brauchen bzw benutzen wollen, können Sie wie folgt eine CSS Datei einbinden:

function custom_styles() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
}

add_action( 'wp_enqueue_scripts', 'custom_styles' );

Beispiel für das Einbinden einer CSS Datei in WordPress in der functions.php

Die Syntax zum Einbinden eines Skripts sieht sehr ähnlich aus:

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, array|bool $args = array() )

Syntax für die Hook wp_enqueue_script

  • $handle (Pflicht) = Name des Skripts (muss einzigartig sein)
  • $src (optional) = Pfad zum Skript. Standardwert = ''
  • $deps (optional) = Array mit Skripten, von denen das einzubindende Skript abhängig ist. Standardwert = array()
  • $ver (optional) = Versionsnummer des Skripts. Standardwert = false
  • $args (optional) = Array mit zusätzlichen Strategien zum Laden des Skripts. Kann die Eigenschaften strategy mit den Werten defer oder async besitzen, sowie in_footer mit den Werten true oder false. Standardwert = array().

Auch hierfür ein Beispiel für die kurze Variante ohne zusätzliche Parameter:

function custom_scripts() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js');
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Beispiel für das Einbinden einer JS Datei in WordPress in der functions.php

Wie Sie sicher bereits festgestellt haben, werden die Funktionen mit den Skripten mit der Funktion add_action aufgerufen. Auch diese besitzt neben den zwei erforderlichen Parametern für die aufzurufende Hook und die Callbackfunktion, die dafür eingebunden wird, noch zwei weitere.

Die erste ist die Priorität. Diese gibt an, wann ein Skript in WordPress aufgerufen wird. Der Standardwert hier ist 10. Wenn Sie eine niedrigere Priorität angeben, dann wird das Skript früher aufgerufen. Bei einer höheren Priorität, entsprechend später. Besitzen mehrere Skripte die gleiche Priorität so werden sie aufgerufen in der Reihenfolge, in der sie hinzugefügt wurden.

Der letzte optionale Parameter ist die Anzahl der akzeptierten Argumente. Diese liegt standardmäßig bei 1.

add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1 ): true

Syntax für die add_action Funktion

Wie binde ich CSS und JS Dateien im WordPress Adminbereich ein?

Das Einbinden von Dateien im Adminbereich gestaltet sich ähnlich, wie das Einbinden im Frontend. Jedoch wird hierfür die Funktion admin_enqueue_scripts genutzt. Skripte und Stylesheets die auf diese Weise eingebunden werden, wirken nur im Adminbereich und weder im Frontend, noch im Loginbereich.

// Hinzufügen von Skripten und Stilen im Admin-Bereich
function custom_admin_scripts() {
    // Einbinden eines benutzerdefinierten Skripts
    wp_enqueue_script('custom-admin-script', get_template_directory_uri() . '/js/admin-script.js');
    
    // Einbinden eines benutzerdefinierten Stils
    wp_enqueue_style('custom-admin-style', get_template_directory_uri() . '/css/admin-style.css');
}
add_action('admin_enqueue_scripts', 'custom_admin_scripts');

Einbinden von CSS und JS Dateien im Adminbereich in der functions.php

Wie binde ich CSS und JS Dateien im WordPress Loginbereich ein?

Auch das Einbinden von Dateien im Loginbereich gestaltet sich ähnlich, wie das Einbinden im Frontend. Jedoch wird hierfür wiederum die Funktion login_enqueue_scripts genutzt. Auch hierbei gilt, Dateien die auf diese Weise eingebunden werden, wirken sich nur auf den Loginbereich aus. Nicht hingegen auf die Bereiche Frontend oder Admin.

// Hinzufügen von Skripten und Stilen auf der Anmeldeseite
function custom_login_scripts() {
    // Einbinden eines benutzerdefinierten Skripts
    wp_enqueue_script('custom-login-script', get_template_directory_uri() . '/js/login-script.js');
    
    // Einbinden eines benutzerdefinierten Stils
    wp_enqueue_style('custom-login-style', get_template_directory_uri() . '/css/login-style.css');
}
add_action('login_enqueue_scripts', 'custom_login_scripts');

Einbinden von CSS und JS Dateien im Loginbereich in der functions.php

Funktionen für Dateipfade

Die Funktionen get_theme_file_uri(), get_template_directory_uri() und get_stylesheet_directory_uri() sind alle drei Funktionen, um verschiedene Arten von Dateipfaden in WordPress zu ermitteln. Sie alle funktionieren unterschiedlich. Neben diesen drei Funktionen gibt es auch noch die Möglichkeit, absolute Pfade zu benutzen.

get_template_directory_uri()

Diese Funktion gibt die URI des Theme Verzeichnisses zurück, welches als Vorlage für das aktuelle Theme genutzt wird. Sprich, bei der Nutzung eines Child-Themes gibt get_template_directory_uri() die URI des Parent-Themes zurück. Diese Funktion kann genutzt werden, um auf Dateien im Parent-Theme zuzugreifen. Diese Funktion nimmt keine Parameter entgegen.

get_stylesheet_directory_uri()

Diese Funktion gibt die URI des Theme Verzeichnis zurück, das als Stylesheet-Verzeichnis für das aktive Theme genutzt wird. Wenn ein Child-Theme aktiv ist, dann gibt diese Funktion die URI des Child-Themes zurück. Auch diese Funktion nimmt keine Parameter entgegen.

get_theme_file_uri()

Diese Funktion gibt die URI der Datei zurück, die als Parameter übergeben wurde. Wenn kein Parameter übergeben wurde, gibt sie die URI des aktuell verwendeten Themes zurück. Wird sie in einem Child-Theme verwendet, dann gibt sie die URI des Child-Themes zurück. Wird eine Datei als Parameter übergeben, so durchsucht die Funktion innerhalb des aktuellen Themes nach der Datei und gibt die URI zu der Datei zurück.

absolute Pfade

Eine weitere Möglichkeit, neben den hier aufgeführten Funktionen für die Pfade, ist die Verwendung von absoluten Pfaden zur Datei. Auf diese sollte nach Möglichkeit verzichtet werden. Pfade können sich ändern, wenn beispielsweise Themes umbenannt werden oder Dateien in einem anderen Theme benutzt werden. Oder auch, wenn beispielsweise der Hostingtarif gewechselt wird. Dadurch ist die Nutzung von absoluten Pfaden eine potenzielle Fehlerquelle, die von Anfang an vermieden werden kann.

Im folgenden ein Beispiel für die Verwendung von absoluten Pfaden zur Einbindung von CSS Dateien in WordPress:

/* Stylesheet mit absolutem Pfad einbinden */
function scripts_fonts_local() {
    wp_enqueue_style( 'fonts', '/wp-content/themes/twentytwentythree-child/css/fonts.css');
  }
  add_action( 'wp_enqueue_scripts', 'scripts_fonts_local', 20 );

functions.php

tl;dr: Wie binde ich CSS und JS in WordPress ein?

Hier nochmal kurz zusammengefasst, wie man CSS und JS Dateien in WordPress einbindet:

/* Dateien in WordPress einbinden */
/* Code kann in die functions.php des */

function custom_files() {
    wp_enqueue_script( 'custom-script', get_theme_file_uri() . '/js/custom-script.js');
	wp_enqueue_style( 'custom-style', get_theme_file_uri() . '/css/custom-style.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_files' );

Einbinden von Dateien in WordPress, functions.php

If-Statements zum Einbinden von Dateien auf spezifischen WordPress Seiten

WordPress bietet eine ganze Reihe an Möglichkeiten, um die Dateien lediglich auf spezifischen Seiten einzubinden. Im Folgenden gibt es eine Übersicht mit einer Vielzahl von Statements, um CSS und JS Dateien nur auf spezifischen Seiten einzubinden. Die Kriterien hierbei sind sehr vielfältig. Von der Einbindung nur auf bestimmten Seiten, über die Einbindung die abhängig von der Rolle des Nutzers ist bis hin zu Statements die nur wirken, wenn ein Beitrag älter als eine bestimmte Anzahl an Tagen ist, ist alles dabei.

Eindeutige Namensgebung für einzubindende Dateien

Mit der spezifischen Einbindung kann verhindert werden, dass unnötiger Code auf Seiten eingebunden wird, der auf diesen Seiten nicht benötigt wird. Dies ist sehr förderlich, da es die notwendigen Ressourcen zum Laden einer Webseite reduziert.

Außerdem kann die Organisation des Codes hiermit modularer und übersichtlicher erfolgen. Beispielsweise kann für jede notwendige Datei, die auf bestimmten Seiten eingebunden werden soll, ein aussagekräftiger Name vergeben werden. So kann eine spätere Bearbeitung und Ergänzung von Code in den Dateien ohne eine große Einarbeitungszeit erledigt werden.

Ich persönlich benenne meine Dateien immer so, dass ich auf den ersten Blick erkenne, für welche Seiten sie benötigt werden. So nenne ich eine CSS Datei, die beispielsweise ausschließlich auf Beitragsseiten eingebunden wird, „custom-post.css“. Hierdurch ist sofort auf den ersten Blick ersichtlich, für welche Seiten die CSS eingebunden wird.

Eine CSS Datei, die nur auf der Startseite eingebunden werden soll, kann beispielsweise „custom-front.css“ benannt werden. Hierbei gibt es natürlich keine feste Vorgabe. Eine eindeutige und aussagekräftige Namensgebung hilft jedoch ungemein, bei der Wartung und Ergänzung von Code. Dies gilt neben den Dateinamen natürlich auch für die Arbeit innerhalb des Codes.

Eindeutige und aussagekräftige Namen für Funktionen sowie eine gute Kommentarstruktur können hilfreich sein und sich zeitsparend auswirken.

Cheatsheet: Einbinden von CSS und JS Dateien in WordPress auf spezifischen Seiten

Die Liste besitzt keinen Anspruch auf Vollständigkeit. Wenn Sie noch weitere Statements haben, die Ihrer Meinung nach in dieser Liste gut aufgehoben wären, dann schreiben Sie sie gerne in den Kommentarbereich.

/* Dateien nur auf Startseite einbinden */
    if ( is_front_page() ) {
...
}


/* Dateien auf spezifischer Seite einbinden */
    if ( is_page( 'page-slug' ) ) {
...
}


/* Dateien auf mehreren spezifischen Seiten einbinden */
 if( is_page( array( 'about-us', 'contact', 'management' ) ) {
...
}


/* Dateien auf WooCommerce Seiten einbinden */
    if ( function_exists( 'is_woocommerce' ) ) {
...
}


/* Dateien für bestimmte Kategorien einbinden */
    if ( is_category( 'your-category-slug' ) ) {
...
}


/* Dateien für Custom Post Type einbinden */
    if ( is_singular( 'your_custom_post_type' ) ) {
...
}


/* Dateien für Custom Post Type einbinden (Variante 2) */
    if ( get_post_type() == 'custom_post_type' ) {
...
}


/* Dateien für bestimmte Custom Taxonomie einbinden */
    if ( is_tax( 'your_custom_taxonomy' ) ) {
...
}


/* Dateien nur auf Mobil einbinden */
    if ( wp_is_mobile() ) {
...
}


/* Dateien nur für angemeldete User einbinden */
    if ( is_user_logged_in() ) {
...
}


/* Dateien nur für nicht angemeldete User einbinden */
    if ( ! is_user_logged_in() ) {
...
}


/* Dateien für bestimmte Nutzerrollen einbinden */
 $user = wp_get_current_user();
    if ( in_array( 'editor', (array) $user->roles ) ) {
...
}


/* Dateien für Beiträge eines bestimmten Autors einbinden */
 global $post;
    $author_id = $post->post_author;
    if ( $author_id == 4 ) { // Austauschen Sie '4' mit der ID des Autors
...
}


/* Dateien für Beiträge, die älter sind als eine bestimmte Anzahl an Tagen, einbinden */
 $post_date = get_the_time('Y-m-d');
    $days_ago = 30; // Anzahl der Tage
    if ( ( time() - strtotime( $post_date ) ) / ( 60 * 60 * 24 ) > $days_ago ) {
...
}


/* Dateien für Seiten mit bestimmten Template einbinden */
    if ( is_page_template( 'template-custom.php' ) ) {
...
}


/* Dateien für Seiten mit bestimmten benutzerdefinierten Feldern einbinden */
    if ( get_post_meta( get_the_ID(), 'custom_field_name', true ) == 'specific_value' ) {
...
}


/* Dateien für Seiten mit bestimmten Tag einbinden */
    if ( has_tag( 'technology' ) ) {
...
}


/* Dateien für Seiten die eine bestimmte URL beinhalten einbinden */
    if ( strpos( $_SERVER['REQUEST_URI'], 'specific_string' ) !== false ) {

...
}


/* Dateien für Seiten mit bestimmten Metawerten einbinden */
    if ( get_post_meta( get_the_ID(), 'meta_key', true ) == 'specific_value' ) {
...
}

Statements zum Einbinden von Dateien, functions.php

Info

November 1, 2023

weitere Artikel
Brauchst du Hilfe?

Benötigst du Hilfe bei der Umsetzung, der Korrektur oder Optimierung deiner WordPress Seite?

Nimm gerne mit uns Kontakt auf und wir schauen, wie wir dir behilflich sein können!

Teile deinen Fund!

Schreibe einen Kommentar

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