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

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' )

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' );

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() )

• $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' );

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

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');

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');

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 );

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' );

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' ) {
...
}