JavaScript in WordPress einbinden per Child Theme

Am Beispiel eine Child-Themes für http://www.wp-stripped.com/

Theme-Name: stripped
Child-Theme-Name: child-theme-s

In einen neuen Ordner unter wp-content/themes/ fügst du einen neuen Ordner ein mit dem Namen „child-theme-s“ ein. (wp-content/themes/child-theme-s/) In den Ordner brauchen nur zwei Dateien + deine JavaScript Datei im Unterordner /includes/js/

Hier der Code für die zwei Dateien:

Code für die style.css

/*
Theme Name: child-theme-s
Description: Childtheme
Author: Phillip Roth
Author URI: https://www.philliproth.de
Template: stripped
Version: 1.0
Tags:
*/

 

Code für die functions.php. In der functions.php wird zuerst das Stylesheet des Parent-Themes geladen, dann das Stylesheet des Child-Themes und dann deine JavaScript-Datei.

<?php
/**
 * Functions and definitions for child-theme-s
 *
 * @package WordPress
 * @subpackage child-theme-s
 * @version 1.0
 * @author https://www.philliproth.de
 */


/* Enqueue parent stylesheet first, child stylesheet second*/
function child_theme_s_enqueue_styles() {

 $parent_style = 'parent-style';

 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style )
 );
}
add_action( 'wp_enqueue_scripts', 'child_theme_s_enqueue_styles' );


/* Enqueue Javascript in /child-theme-s/includes/js/ */
function child_theme_s_scripts(){
 
 wp_enqueue_script('child-theme-s-js', get_stylesheet_directory_uri() . '/includes/js/child-theme.js');
 
 }
 
add_action( 'wp_enqueue_scripts', 'child_theme_s_scripts' );

6 Antworten auf “JavaScript in WordPress einbinden per Child Theme”

  1. Schöner kurzer Artikel. Dürfte ich ein paar Anmerkungen machen? 😉

    1. Verwende get_stylesheet_directory_uri() und nicht get_bloginfo()
    2. Binde auch die CSS-Datei des Parent-Theme per wp_enqueue_styles ein, statt einen Import zu verwenden (siehe auch kein Blogbeitrag von heute)
    3. korrigiere mal die Einrückungen in der functions.php Datei 🙂

    P.S. CapitalS 😀

    Antworten

  2. Vielen Dank Bernhard, ich habe deine berechtigten Anmerkungen eingearbeitet 😉

    Antworten

  3. Bonus-Frage: Was machst du, wenn du aus Performancegründen das JavaScript nur auf einer statischen Startseite eingebunden haben möchtest?
    https://gist.github.com/pixolin/e64cc7af969d22389c34

    Antworten

    1. Bonus-Antwort: Kein WordPress benutzen!

      Antworten

  4. Weit aus performanter und aktueller:

    function custom_global_scripts() {
    wp_enqueue_script(
    ‚custom-script‘,
    get_stylesheet_directory_uri() . ‚/js/child-theme.js‘,
    array( ‚jquery‘ )
    );
    }

    add_action( ‚wp_enqueue_scripts‘, ‚custom_global_scripts‘ );

    Antworten

  5. Hallo zusammen,

    wie kann man zusätzlich den ALT-Attribut für jedes einzelne Bild hinzufügen?

    Danke im Vorraus!

    MfG, Sam

    Antworten

Schreibe einen Kommentar

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