WordPress Snippets Theme-Tuning: CSS und JS Dateien hinzufügen

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.

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

Mit diesem kleinen Plugin bekommst Du eine eigene Seite im WordPress Admin-Menü. Du findest sie dann unter Einstellungen => JavaScript und CSS Optionen.

Download Plugin als ZIP-Datei

<?php
/*
Plugin Name: JavaScript und CSS Optionen
Plugin URI: https://wordpress.org/plugins/evolution-google-analytics-code/developers/
Description: With this plugin you can add the Google Analytics Code (or any other) in no time to your header or footer.
Version: 1.0.7
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 auf die schnelle JavaScripte und CSS zu Deinem Theme hinzufügen. CSS solltest Du immer im Header 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', // 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>. Hier kommt CSS hinein. das <code><style></code> Tag wird automatisch hinzugefügt', // 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>', 
            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]"><style>%s</style></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="max-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' );
Andreas Hecht

Andreas Hecht

Andreas hat 2010 die SEO Agentur Hamburg gegründet und bringt kleine und mittlere Unternehmen mit laufender SEO Betreuung in die Top-10 Platzierungen bei Google. Er ist zudem Experte in WordPress Entwicklung und Performance.

Jetzt den Newsletter abonnieren!

Hol Dir die neuesten Beiträge über WordPress und SEO direkt in Deinen Posteingang. Als Dankeschön bekommst Du Gratis mein neues E-Book:

E-Book: Wie Du Dein WordPress raketenschnell machst

Ich muss Deine Daten für den Versand des Newsletters speichern. Du kannst Dein Abo jederzeit kündigen. Danach lösche ich Deine Daten zeitnah.

Und keine Angst, ich spamme Dich nicht voll, auch ich hasse Spam.

Das könnte auch interessant sein...

Seobility SEO Tool

12 Kommentare Kommentar hinzufügen

  1. Hallo Andreas,
    ich habe dein Plugin installiert. Aber ich finde es nicht im Dashboard.
    Kannst du mir bitte helfen.

    vielen Dank und Grüße
    Micha

    • Ich habe Dir doch bereits geschrieben, wo das zu finden ist. Ich zitiere mich mal eben:

      Guckst Du vielleicht mal, was im Beitrag oben direkt oberhalb des roten Download-Buttons steht?

  2. Hallo,
    ich habe mir dein Plugin installiert, nur kann ich es nicht bedienen, denn ich finde es nicht im Dashboard?

    Kannst du mir helfen?

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

  4. 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.

  5. 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?

Schreibe einen Kommentar

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

Teilen
Teilen
Teilen