JavaScript-Datei im Theme-Editor sichtbar machen

Wer JavaScript-Dateien in seinem WordPress-Blog verwenden möchte, der möchte diese Dateien eventuell auch über den eingebauten Theme-Editor bearbeiten. Das Problem ist allerdings, dass der Theme-Editor solche Dateien nicht auflistet die in Unterverzeichnissen liegen oder deren Dateinamen nicht auf .css oder .php enden. In diesem Artikel zeige ich eine Möglichkeit, dieses Problem in drei Schritten zu umgehen.

  1. Verschiebe die Datei aus dem Unterverzeichnis direkt in das Wurzelverzeichnis deines Themes oder Child-Themes.
  2. Ändere die Endung der Datei auf .php.
  3. Schreibe zu Beginn der Datei folgenden PHP-Befehl:
    <?php
    header("Content-type: text/javascript; charset=UTF-8");
    ?>

    Mit diesem Befehl sendet PHP an den Browser, dass es sich um eine JavaScript-Datei handelt. Wenn vom Server keine (oder falsche) Informationen über den Inhalt der Datei gesendet würden, dann würde insbesondere Firefox diese Datei ignorieren. Solltest Du beim Erstellen der JavaScript-Datei einen anderen Zeichensatz als UTF-8 verwendet haben, musst Du die Angabe das charset entsprechend ändern.

JavaScript und jQuery in einem WordPress-Blog verwenden

Wie man JavaScript in einem WordPress-Blog einbindet, erschließt sich dem Anfängen nicht ohne weiteres. Insbesondere dann, wenn man die Bibliothek jQuery für seine Skripte verwenden möchte. In diesem Artikel werde ich zunächst zeigen, wie man JavaScript direkt in den Quelltext einfügt. Im zweiten Teil zeige ich, wie man JavaScript-Dateien in einen WordPress-Blog einbaut.

Direkter Einbau in den Quelltext

Es wird oftmals davon abgeraten, Skripte direkt in den Quelltext einzubauen. Dennoch werde ich diese Methode kurz vorstellen, um einen Fallstrick beim Einbau von jQuery in WordPress-Blogs zu zeigen.

Das folgende JavaScript kann direkt in den Quelltext einen Artikels oder einer Seite kopiert werden. Beim neu laden der Seite wird dann ein Fenster mit der Nachricht „JavaScript funktioniert!“ angezeigt.

<script>
alert('JavaScript funktioniert!');
</script>

In WordPress-Blogs wird jQuery im No Conflict Mode gestartet (siehe auch Blog von Matthew Ruddy). Daher funktioniert das $-Zeichen als Alias für jQuery() nicht mehr. An den entsprechenden Stellen muss man jQuery() verwenden.

Im folgenden Beispiel wird beim Klicken auf den Text jedes Mal das Wort „neu“ vor den eigentlichen Text gestellt:

<p id="meinTest">Klicke auf diesen Text.</p>
<script>
  jQuery("#meinTest").click(function(){
    jQuery(this).before("neu ");
  });
</script>

Um das Dollarzeichen wieder als Alias für jQuery() in den eigenen Skripten verwenden zu können, muss man beim registrieren seiner Funktionen (mittels jQuery(document).ready) der ersten Funktion das Dollarzeichen als Parameter mitliefern.

<p id="meinTest">Klick auf diesen Text</p>
<script>
jQuery(document).ready(function($) {
  $("#meinTest").click(function(){
    $(this).before("neu ");
  });
})
</script>

Einbinden von Skript-Dateien

Wenn man eigene JavaScript-Dateien einbauen möchte, sollte man die von WordPress zur Verfügung gestellten Funktionen nutzen. Mit ihnen kann man relativ leicht seine Skripte hinzuladen und aktivieren. Zudem stellt man sicher, dass alle benötigten Skript-Dateien (z.B. jQuery) rechtzeitig und in der richtigen Reihenfolge geladen werden.

  1. Zunächst erstellt man sich eine JavaScript-Datei (z.B. meinScript.js) mit der gewünschten Funktion. Durch das folgende Skript werden die H1-Überschriften versteckt, sobald man auf sie klickt.
    jQuery(document).ready(function($) {
      $("h1").click(function(){
        $(this).hide();
      });
    });

    Die Datei meinScript.js habe ich in den Ordner js/ meines eigenen Child-Themes gelegt (siehe auch StackOverflow).

  2. Im Anschluss kann man die Datei zu WordPress hinzufügen, indem man folgenden Quelltext in seine functions.php-Datei schreibt:
    function mein_script_laden() {
    wp_enqueue_script(
      // Name des Scripts (benötigt man z.B. zum Entfernen, etc.)
        'handlerMeinesScripts',
      // Ort der Script-Datei
        get_stylesheet_directory_uri() . '/js/meinScript.js',
      // Liste der Scripts, welche von der Script-Datei benötigt werden.
      // In diesem Falle das von Wordpress geladene jqeury
        array('jquery')
    );
    }
     
    add_action( 'wp_enqueue_scripts', 'mein_script_laden' );

    Da ich ein Child-Theme verwende, habe ich zur Ermittlung des Theme-Pfades die Funktion get_stylesheet_directory_uri() verwendet. Erstellt man ein komplett eigenes Theme, sollte man die Funktion get_template_directory_uri() verwenden.

  3. In Deinem Blog kannst Du auch andere Versionen von jQuery einbinden. Siehe hierzu: Die netzialisten.de und den Blog von Wlad Leirich.
  4. Du kannst auch die JavaScript-Datei im Theme-Editor sichtbar machen. Danach hast Du die Möglichkeit, die JavaScript-Datei direkt aus WordPress heraus zu editieren.

In wenigen Schritten ein „eigenes“ WordPress Theme erstellen

WordPress erlaubt es einem, das Aussehen des eigenen Blogs durch sogenannte „Themes“ zu verändern. In der Standard-Installation werden bereits einige dieser Designs („TwentyTwelve“, „TwentyThirteen“) mitgeliefert und können im Administrationsbereich under Design / Themes aktiviert werden.

Die im Theme enthaltenen Dateien können über den Editor (Design / Editor) verändert werden. Am häufigsten werden vermutlich die Stylesheets (style.css), die Kopf- und Fußzeilen (header.php und footer.php), die Vorlage für Beiträge (single.php) sowie Theme-Funktionen (functions.php) an die eigenen Bedürfnisse angepasst bzw. erweitert.

Problemtaisch wird es, wenn es ein Update des Themes gibt. Dabei gehen in der Regel alle Änderungen (z.B. geänderte Farben im StyleSheet) verloren.

Um ein Theme zu verändern, ohne die ursprünglichen Dateien zu verändern, kann man in sogenanntes „Child-Theme“ erstellen. Ein Child-Theme ist ein eigenes Theme, enthält allerdings nur diejenigen Dateien, die Du tatsächlich verändern möchtest. Die übrigen Dateien werden aus einer von Dir benannten Vorlage („Template“, „Eltern-Theme“) verwendet.

  1. Erstelle zunächst einen neuen Ordner (z.B. mit dem Namen „Mein_Design“) im Verzeichnis /wp-content/themes.
  2. Jedes Child-Theme benötigt eine Datei mit dem Namen style.css. Diese Datei wird von WordPress nach den Informationen über das Theme (Name, Autor, Eltern-Theme,…) durchsucht.
    Erstelle also eine Datei mit dem Namen style.css und folgendem Inhalt:

    /*
    Theme Name:     Twenty Thirteen (Fenon)
    Theme URI:      http://fenon.de/
    Description:    Mein eigenes Theme basierend auf Twenty Thirteen
    Author:         Vorname Nachname
    Author URI:     http://fenon.de/infos/
    Template:       twentythirteen
    Version:        0.1
    */

    In diesem Beispiel wird das Theme „twentythirteen“ aus dem Ordner /wp-content/themes als Vorlage (Template) verwendet.

  3. Das neue Theme ist jetzt bereits mit den von Dir gemachten Angaben in den Design-Einstellungen sichtbar und kann aktiviert werden. Allerdings überschreibt diese neue style.css-Datei alle CSS-Angaben, die in der verwendeten Vorlage („twentythirteen“) gemacht wurden. In Deiner eigenen style.css-Datei stehen allerdings noch keine CSS-Angaben drin.
    Ein einfacher Weg ist, zunächst alle Angaben der Theme-Vorlage hinzu zu laden und im Anschluss eigene Angaben zu schreiben. Der Inhalt Deiner style.css-Datei könnte also folgendermaßen aussehen:

    /*
    Theme Name:     Twenty Thirteen (Fenon)
    Theme URI:      http://fenon.de/
    Description:    Mein eigenes Theme basierend auf Twenty Thirteen
    Author:         Vorname Nachname
    Author URI:     http://fenon.de/infos/
    Template:       twentythirteen
    Version:        0.1
    */
    /* Alle Angaben aus Template hinzuladen */
    @import url("../twentythirteen/style.css");
     
    /* Eigene Angaben machen */
    header#masthead {
    	background: #D0E5B7;
    }
     
    code {
    	background: #ccc;
    }
     
    h1.entry-title {
    	margin: .5em 0;
    	padding: .5em .25em;
    	border-radius: 10px;
    	background: #D0E5B7;
    }
  4. Bei einem Update des Themes „twentythirteen“ bleiben von nun an Deine Änderungen erhalten. Allerdings kann es durchaus passieren, dass sie unwirksam werden. Zum Beispiel dann, wenn sich durch das Update die HTML-Struktur oder die Namen von Elementen ändern.
  5. Wie bereits bei der Datei style.css, überschreiben auch alle hinzugefügten *.php-Dateien die Inhalte der PHP-Dateien der verwendeten Vorlage – mit Ausnahme der Datei functions.php. Falls Du eine eigene functions.php-Datei erstellen solltest, werden beide Dateien geladen. Dabei wird Deine eigene functions.php-Datei vor der functions.php-Datei aus der Vorlage geladen.
    Daher eignet sich die functions.php besonders gut um neue Funktionen zum Template hinzuzufügen, da man keine Angaben aus der Vorlage kopieren muss. Das gilt insbesondere dann, wenn man sie im Zusammenhang mit Action-Hooks verwendet (siehe auch: add_action()):

    <!--?php 
    function nach_fusszeile( $name ) {
    	?-->
    	Eigener Text nach der Wordpress-Fusszeile
    	<!--?php 
    } // ENDE: nach_fusszeile()
    add_action( 'wp_footer', 'nach_fusszeile' );
    ?-->

Weitere Informationen findest Du auf der WordPress Homepage, auf ThemeShaper oder Im Blog von Wlad Leirich