WordPress JavaScript und CSS einbinden ohne Plugin [Update]

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

Ich zeige Dir die verschiedenen Möglichkeiten, die Du für die jeweiligen Einsatzgebiete nutzen kannst.

WordPress CSS einbinden leichtgemacht:

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.

Übrigens: Ist Deine Website eigentlich sicher?

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:

<?php

//Ab hier kopieren
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 und kostenlosen 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 Deines Child-Themes hinein:

// 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 JavaScript einbinden leichtgemacht:

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.

Ein kleines Plugin, mit dem das Hinzufügen von JavaScript und CSS einfacher geht.

Download Plugin als ZIP-Datei

<?php
/*
Plugin Name: JavaScript und CSS Optionen
Plugin URI: https://seoagentur-hamburg.com/wordpress-custom-css-js/
Description: Mit diesem Plugin kannst Du JavaScript oder CSS in Deinen Header oder dem Footer einbinden.
Version: 1.1.0
Author: Andreas Hecht
Author URI: https://seoagentur-hamburg.com
License: GPL2 or higher
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

class EvolutionAnalyticsSettingsPage
{
    /**
     * Holds the values to be used in the fields callbacks
     */
    private $options;

    /**
     * Start up
     */
    public function __construct()
    {
        add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'page_init' ) );
    }

    /**
     * Add options page
     */
    public function add_plugin_page()
    {
        // This page will be under "Settings"
        add_options_page(
            'JavaScript und CSS Optionen', 
            'JavaScript und CSS Optionen', 
            'manage_options', 
            'ah-javascript-to-footer', 
            array( $this, 'create_admin_page' )
        );
    }

    /**
     * Options page callback
     */
    public function create_admin_page()
    {
        // Set class property
        $this->options = get_option( 'analytics_options' );
        ?>
        <div class="wrap">
            <?php screen_icon(); ?>
            <h2>JavaScript und CSS Optionen</h2>
              <div class="blaue-box">
               <div class="blaue-box-inner">
               <strong>Hier kannst Du schnell und einfach CSS- und JavaScript-Code hinzufügen. </strong>
               </div>
               </div>
                <div id="poststuff" class="metabox-holder has-right-sidebar">               
                    <div class="container postbox postbox-container" >
                    <h3 class="hndle">Die CSS-Snippets werden im Header <code>wp_head()</code> gespeichert, und die JavaScript-Snippets oder Dateien im Footer <code>wp_footer()</code></h3>
                    <div class="inside">          
                <form method="post" action="options.php">
            <?php
                // This prints out all hidden setting fields
                settings_fields( 'analytics_group' );   
                do_settings_sections( 'my-setting-admin' );
                submit_button(); 
            ?>
            </form>
            </div> 
            </div>
        </div>
        <?php
    }

    /**
     * Register and add settings
     */
    public function page_init()
    {        
        register_setting(
            'analytics_group', // Option group
            'analytics_options', // Option name
            array( $this, 'sanitize' ) // Sanitize
        );

        add_settings_section(
            'setting_section_id', // ID
            'Füge Deinen JavaScript- oder CSS Code in eines der Felder ein. Du musst Deinen Code in <code><style></code> oder <code><script></code> Elemente einfügen.', // Title
            array( $this, 'print_section_info' ), // Callback
            'my-setting-admin' // Page
        );  

        add_settings_field(
            'evolution_analytics_head', // ID
            'Speichere Deinen Code im <code>wp_head()</code> <strong>Nur CSS</strong>.', // Title 
            array( $this, 'evolution_analytics_head_callback' ), // Callback
            'my-setting-admin', // Page
            'setting_section_id' // Section           
        );    

        add_settings_field(
            'evolution_analytics_footer', 
            'Speichere Deinen Code im <code>wp_footer()</code> <strong>Nur JavaScript</strong>.', 
            array( $this, 'evolution_analytics_footer_callback' ), 
            'my-setting-admin', 
            'setting_section_id'
        );      
    }

    /**
     * Sanitize each setting field as needed
     *
     * @param array $input Contains all settings fields as array keys
     */
    public function sanitize( $input )
    {
        $new_input = array();
        if( isset( $input['evolution_analytics_head'] ) )
            $new_input['evolution_analytics_head'] = $input['evolution_analytics_head'];

        if( isset( $input['evolution_analytics_footer'] ) )
            $new_input['evolution_analytics_footer'] = $input['evolution_analytics_footer'];

        return $new_input;
    }

    /** 
     * Print the Section text
     */
    public function print_section_info()
    {
        print '';  // Nothing to say here
    }

    /** 
     * Get the settings option array and print one of its values
     */
    public function evolution_analytics_head_callback()
    {
        printf(
            '<textarea style="width: 800px; height: 250px;" type="text" id="evolution_analytics_head" name="analytics_options[evolution_analytics_head]">%s</textarea>',
            isset( $this->options['evolution_analytics_head'] ) ? esc_attr( $this->options['evolution_analytics_head']) : ''
        );
    }

    /** 
     * Get the settings option array and print one of its values
     */
    public function evolution_analytics_footer_callback()
    {
        printf(
            '<textarea style="width: 800px; height: 250px;" type="text" id="evolution_analytics_footer" name="analytics_options[evolution_analytics_footer]">%s</textarea>',
            isset( $this->options['evolution_analytics_footer'] ) ? esc_attr( $this->options['evolution_analytics_footer']) : ''
        );
    }
}

if( is_admin() )
    $my_settings_page = new EvolutionAnalyticsSettingsPage();


/**
 * 
 * Add analytics code to wp_head()
 * @uses wp_head()
 * 
 */ 
function evolution_print_analytics_code_header() 
{

    $my_options = get_option( 'analytics_options' );

            echo $my_options['evolution_analytics_head'];

}
add_action( 'wp_head', 'evolution_print_analytics_code_header' );


/**
 * 
 * Add analytics code to wp_footer()
 * @uses wp_footer()
 * 
 */
function evolution_print_analytics_code_footer() 
{

    $my_options = get_option( 'analytics_options' );

            echo $my_options['evolution_analytics_footer'];
}
add_action( 'wp_footer', 'evolution_print_analytics_code_footer' );



function ah_admin_css_to_head() {
?>
<style type='text/css'>
    div.blaue-box {
    background: #e0ecf8;
    padding: 10px;
    margin: 30px 0;
}
div.blaue-box-inner {
    background-color: #e0ecf8;
    padding: 20px;
    border: 1px solid #fff;
}    
</style>    
<?php }
add_action( 'admin_head', 'ah_admin_css_to_head' );