Beiträge

Child-Theme erstellen – So wird es gemacht!

Wie und Wieso Sie ein Child-Theme erstellen sollten – erkläre ich Ihnen anhand von praktischen Beispielen im folgenden Tutorial.

Wieso ein Child-Theme erstellen?

Ein Child-Theme ist wohl der eleganteste Weg, Änderungen an ihrem Theme vorzunehmen, ohne die originalen Dateien zu überschreiben.

Das bringt zum einem den Vorteil, immer den Urzustand wiederherstellen zu können, aber viel wichtiger noch, bei einem Theme-Update die Änderungen nicht zu verlieren.

Diese Dinge können Sie mit einem Child-Theme ändern:

  • CSS Anweisungen einfügen oder ändern
  • Aufbau des Themes verändern
  • Theme Funktionen abändern oder hinzufügen
  • Spezielle Seiten-Templates anlegen

Doch Child-Themes haben auch Nachteile, welche das sind, finden Sie hier.

Die rote oder die blaue Pille?

Wie auch in der Matrix, müssen Sie sich für einen Weg entscheiden, gehen Sie den Weg mit einem WordPress Plugin oder erstellen Sie es selbst?

Ich habe für Sie 3 kostenlose Child-Theme-Plugins getestet, mehr dazu erfahren Sie am Ende dieses Beitrages.

Child Theme erstellen in 2 Schritten – Let´s Go!

Schritt 1: Die Child-Theme Grundstruktur

Als erstes verbinden Sie sich mit einem FTP-Programm mit ihrem Server/Webspace und navigieren zu ihrer WordPress-Installation in den Ordner /wp-content/themes . Hier sehen Sie alle Themes die installiert sind.

Auf dieser Ebene erstellen Sie nun einen neuen Ordner und benennen ihn nach folgender Struktur: themename_child
also z.B. twentyseventeen_child,
wenn Sie ein Child Theme für das neue Twenty Seventeen Theme erstellen wollen.

Erstellen Sie eine neue leere Datei mit der Bezeichnung „style.css“ in den eben angelegten Ordner.

Damit WordPress ihr Child-Theme als Theme erkennt, müssen Sie ein paar Zeilen Code in ihre neuen „style.css“ einfügen.

Hier ein Beispiel für das Twenty Seventeen Theme:

1

2

3

4

5

6

7

8

/*

Theme Name: Twenty Seventeen Child-Theme

Description: Ein Child-Theme für Twentyseventeen

Author: IB-IT

Author URI: https://ib-it.com

Template: twentyseventeen

Version: 1.0

*/

 

In Zeile 2 finden Sie den Namen, unter dem Sie Child-Theme später im Backend unter Design / Themen finden.

Am wichtigsten ist hier allerdings Zeile 6, denn hier müssen Sie den Verzeichnis-Namen ihres Parent-Themes, also des Themes für das Sie ein Child-Theme erstellten, einfügen.

Zur Grundstruktur eines Child-Themes gehört eine weitere Datei, die „functions.php“.

Legen Sie also eine neue, leere Datei mit dem Namen „functions.php“ in Ihrem Child-Theme Ordner an.

Mit der „functions.php“ können wir nun unsere CSS-Datei im Theme einbinden, da Sie aber sicherstellen müssen, dass ihre Child-CSS-Datei nach der originalen CSS-Datei geladen wird, müssen Sie erst die originale Datei deregistrieren und danach in der richtigen Reihenfolge wieder registrieren.

Wie das gemacht wird, zeige ich Ihnen hier:

1

2

3

4

5

6

7

8

9

10

<?php

function twentyseventeen_child_styles() {

wp_deregister_style( ‚twentyseventeen-style‘);

wp_register_style(‚twentyseventeen-style‘, get_template_directory_uri(). ‚/style.css‘);

wp_enqueue_style(‚twentyseventeen-style‘, get_template_directory_uri(). ‚/style.css‘);

wp_enqueue_style( ‚childtheme-style‘, get_stylesheet_directory_uri().’/style.css‘,

array(‚twentyseventeen-style‘) );

}

add_action( ‚wp_enqueue_scripts‘, ‚twentyseventeen_child_styles‘ );

?>

 

Der Code schnell erklärt:
In Zeile 2 erstellen Sie eine function, die Sie in Zeile 8 mit der Funktion add_action() einhängen/aufrufen.

In Zeile 3 deregistrieren Sie die Originale CSS-Datei ihres Themes, der Handler (in diesem Fall „twentyseventeen-style“) ist von Theme zu Theme unterschiedlich und muss aus der Parent-Theme functions.php herausgesucht werden.

Im Falle des Twenty Seventeen Themen finden Sie ihn in Zeile 376.
twentyseventeen_child slug

Danach (Zeile 4-6) registrieren Sie die gleiche Datei wieder und binden beide CSS-Dateien, also die Originale und die ihres Child-Themes, in der richtigen Reihenfolge wieder ein.

Schritt 2: Das Backend

Nachdem Sie nun die Grundstruktur ihres Child-Themes erstellt haben, loggen Sie sich in ihr WordPress-Backend ein und navigieren zu den Themes.

wordpress_backend_themes

Genau! Denn das müssen sie noch in ihren Child-Theme Ordner legen.
Hierbei ist lediglich zu beachten, dass die Datei „screenshot.png“ heißen muss und eine Auflösung von 600px mal 450px haben sollte.

Aktivieren Sie nun dein Child-Theme, wie jedes andere Theme auch, über den Button „Aktivieren“.

Schritt 3: Spezifische Seiten-Template erstellen

Wenn Sie spezifische Seiten wie z.B. Beitragsseiten ändern möchten, können Sie dies sehr einfach tun.

Kopieren Sie hierfür die Datei „single.php“ aus ihrem Parent-Theme in dem Child-Theme-Ordner und nehmen ihre Änderungen vor.

Ein Beispiel für einen kurzen Test.

Setzen Sie eine h3-Überschrift in die neue „single.php“ ein und laden diese in ihren Child-Theme-Ordner:

überschrift im child-theme

Öffnen Sie ihren Blog im Browser und navigieren zu einem ihrer Beiträge.

Je nachdem, wo Sie ihre Überschrift im Code platziert haben, sehen Sie sie nun bei jedem ihrer Beiträge.

frontend

Gibt es auch Nachteile von Child-Themes?

Warum legen wir doch gleich Child-Themes an?

Genau, damit Sie Änderungen am Theme vornehmen können, ohne sie bei einem Update zu verlieren.

Aber das heißt auch, eventuelle Sicherheitslücken im Theme werden bei einem Update zwar im Parent-Theme geschlossen, Sie überschreiben den Fix aber mit deiner alten anfälligen Datei im Child-Theme.

Damit ist die Sicherheitslücke praktisch von Ihnen konserviert und existiert auch nach einem Theme-Update.

Also doch kein Child-Theme?

Doch, allerdings mit einem zusätzlichen Plugin.

Mit dem Plugin „Template Checker“ können Sie ihr Child-Theme mit dem Parent-Theme vergleichen, wenn es Unterschiede gibt, bekommen Sie eine Warnung angezeigt und können so entscheiden, ob es Änderungen sind die Sie gemacht haben, oder ob Änderungen am Parent-Theme nach einem Update gemacht wurden.

Mehr Informationen gibt es in dieser Slideshow von Torsten Landsiedel:

Child-Theme erstellen – mit einem Plugin

Für alle die mit noch weniger Aufwand diese Aufgabe erledigen wollen, gibt es wie für alles andere natürlich auch Plugins.

Aus diesem Grund habe ich die 2 am meisten aktiv genutzten Plugins aus der WordPress.org Plugin Liste ausprobiert und mir den Code der produziert wird genauer angeschaut.

child-theme-plugins

Das Plugin mit den meisten aktiven Installationen ist Child Theme Configurator von Lilaea Media. Bereits ziemlich abgeschlagen liegt das Child Theme Creator by Orbisius von Svetoslav Marinov.

Child Theme Configurator

  • Sehr übersichtliches Backend
  • Optionen gut und einfach beschrieben
  • Spezifische Dateien können eingebunden werden
  • Sauberer Quellcode

Orbisius Theme Editor

  • Spezifische Dateien können eingebunden werden
  • Dateien können im Backend angepasst werden
  • Erstellt unnötig 3 Seiten im Backend – Unübersichtlich am Anfang
  • Erstellt ohne Nachfrage direkt header.php und footer.php im Child-Theme

Fazit

Mit wenigen Handgriffen ist ein Child-Theme erstellt – ganz egal ob mit oder ohne Plugin.

Die Vorteile liegen auf der Hand und ich empfehle jedem ein Child-Theme anzulegen. Auch wenn man bezüglich der oben genannten Möglichkeiten von Sicherheitslücken immer ein Auge darauf behalten sollte.
Ich wünsche dir viel Spaß beim editieren deines Designs!

 

Haben Sie noch Fragen zu diesem Thema?
Dann beantworte ich diese gerne in den Kommentaren!

 

WordPress Timeline Tutorial

WordPress Timeline
Die Blogübersicht in einer Timeline darstellen

Worum geht es in diesem Tutorial und für wen ist es?
In diesem WordPress Timeline Tutorial zeigen wir euch, wie ihr aus einem HTML/CSS Snippet eine automatisierte Funktion für WordPress macht.
Ihr solltet hierfür Vorkenntnisse in HTML, CSS und PHP haben, wovon wir aber ausgehen, da dieses Tutorial wahrscheinlich
nur für Leute interessant ist, die ihr eigenes Theme schreiben wollen. Des Weiteren basiert der hier gezeigte Code auf dem Framework
Bootstrap, euer Theme solltet ihr also mit Bootstrap entwickelt haben, um dieses WordPress Tutorial erfolgreich absolvieren zu können.

Wie fangen wir also an?

Zuerst brauchen wir die Datei, die in unserem Theme verantwortlich für die Blog-Übersicht ist.
Dies ist die “index.php”, welche ohne jegliche Inhalte ersteinmal so aussehen sollte:

1
2
3
4
<?php get_header();?>
<body <?php body_class($class);?>>
<?php $permalink=get_permalink($id,$leavename);?>
<?php get_footer();?>

Die 4 Code-Zeilen schnell erklärt:
Zeile 1: Wir includen unsere “header.php” in die Seite.
Zeile 2: Wir geben unserem Body-Tag eine Klasse.
Zeile 3: Wir holen uns unseren Permalink
Zeile 4: Wir includen unsere “footer.php” in die Seite.

Das Snippet

Wo bekomme ich eigentlich Snippets her?
Hierfür gibt es sehr viele Anlaufstellen im Internet. Google spuckt tausende von Ergebnissen aus. Mit der Zeit jedoch sammeln sich Seiten an, auf denen man bevorzugt schaut. Eine dieser Seiten ist bei uns bootsnip.com, von der wir für dieses Tutorial auch ein Snippet verwenden werden.

Das WordPress Timeline Tutorial Snippet:
Zigzag Timeline Layout” von “andrewnite
(Thank´s for this nice snippet andrew!)

wordpress tutorial timeline
OK, wir haben jetzt ein Snippet und wollen diese Timeline für WordPress umsetzen.
Wir verzichten allerdings auf die Überschrift und den Text über der Timeline.

Als Erstes kopieren wir den Snippet-CSS-Code in unsere CSS-Datei. Danach reduzieren wir den Snippet-Code ersteinmal auf das Wesentliche.

Der Snippet HTML-Code auf das Wesentliche reduziert sieht dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/1" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step One</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

Diesen fügen wir nun in unsere index.php ein, um das Grundgerüst zu haben. Nun ist das Ganze aber noch statisch und bringt uns nicht viel. Bringen wir also unser Beitragsbild, den Titel, Post, Datum/Uhrzeit, etwas vom Content und natürlich den Link zum Blogbeitrag in´s Spiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
       <?php if(have_posts()):while(have_posts()):the_post();?>
        <li>
          <div class="timeline-image">
            <?php if(has_post_thumbnail()){?>
            <a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">
            <?php the_post_thumbnail('thumbnail',array('class'=>"img-circle img-responsive"));?>
            <?php }else{?>
            <a href="<?php the_permalink()?>">
            <img src="<?php echo get_template_directory_uri();?>/img/blog.jpg" class="img-circle img-responsive" />
            </a>
            <?php }?>
            </a>
          </div>
          <div class="timeline-panel">
            <div class="timeline-panel">
               <div class="timeline-heading">
                     <a href="<?php the_permalink()?>" style="color:#1e71b8" rel="bookmark" class="title">
                       <h3><?php the_title();?></h3>
                     </a>
                   <h4 class="subheading"><?php the_date();?> | <?php the_time();?></h4>
                 </div>
                 <div class="timeline-body">
                   <p class="text-muted"><?php the_excerpt();?></p>
                 </div>
               </div>
             <div class="line"></div>
        </li>
        <?php endwhile;endif;?>
      </ul>
    </div>
  </div>
</div>

Code-Erklärung:
Zeile 5: Der Standard WordPress Loop, welchen wir in Zeile 32 wieder schließen.

Zeile 8: Eine Bedingung stellen: Wenn der Beitrag ein Beitragsbild hat, dann….
Zeile 9:

1
<a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">

Wir erstellen einen Link zum Beitrag, inklusive des Titel-Tags, welcher den Blogbeitrags-Titel enthält.

Zeile 10:

1
<?php the_post_thumbnail('thumbnail',array('class'=>"img-circle img-responsive"));?>

Hier lassen wir das Beitragsbild darstellen, fügen jedoch die CSS-Klassen “img-circle” und “img-repsonsive” hinzu.
Zeile 11: Wir schließen die if-Bedingung und geben mit else eine Anweisung, was passieren soll, wenn kein Bild vorhanden ist.

Zeile 12-15:

1
2
3
4
<a href="<?php the_permalink()?>" title="<?php the_title_attribute();?>">
            <img src="<?php echo get_template_directory_uri();?>/img/blog.jpg" class="img-circle img-responsive" />
            </a>
            <?php }?>

Ich denke zum Link muss ich nichts mehr sagen, da wir ihn bereits bei Zeile 9 besprochen haben. In Zeile 13 lassen wir nun ein Bild darstellen, welches wir uns selbst aussuchen und mit in unseren Themeordner legen. In unserem Fall haben wir im Themeordner noch einen Unterordner mit dem Titel “img” angelegt. In Zeile 15 schließen wir unsere Else-Bedingung.
Wenn wir dies jetzt aufrufen würden, würde das Beitragsbild vom vorhandenen Beitrag schon in unseren Kreisen sein. Sollte kein Beitragsbild im Backend definiert sein, erscheint unser ausgewähltes Standardbild.

Zeile 21-23:
Unser Beitragstitel als simple H3 Überschrift verlinkt mit dem Beitrag.

Zeile 24:
Ausgegeben wird eine H4-Überschrift, welche das Erstelldatum und Uhrzeit unseres Beitrages beinhaltet.

Zeile 27:
the_exerpt gibt den Beitragsinhalt aus. Achtung diesen müssen wir noch über unsere functions.php limitieren.

Zeile 32:
Wir schließen den WordPress Loop.

Die Länge des Beitragsausschnitts beeinflussen

Damit in unserer WordPress Timeline nicht der gesamte Inhalt unserer Blogbeiträge erscheint, müssen wir diesen limitieren. Am einfachsten machen wir das über die functions.php unseres Themes.
Der Quellcode hierfür sieht wie folgt aus:

1
2
3
4
5
6
<?php
function custom_excerpt_length( $length ) {
    return 30;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
?>

Nun haben wir unsere WordPress Inhalte in das statische Snippet gebracht und daraus eine dynamische Seite gemacht.
Dann ist das WordPress Timeline Tutorial hier wohl zu Ende, oder?

Nicht wirklich! Habt ihr euch eure Seite schon angeschaut?
Richtig, alle Beiträge sind auf der Linken Seite und nicht im ZigZag wie das Snippet verspricht.

Wir haben auch etwas ganz Entscheidendes weggelassen, denn wie im Snippet zu sehen ist, hat jedes zweite Timeline-Element eine zusätzliche CSS-Klasse.
Doch wie sollen wir Elementen, die wir in unserer index.php gar nicht geschrieben haben, sondern dynamisch erzeugen, eine zusätzliche CSS-Klasse geben?

Wir behelfen uns mit einem kleinen Trick!
Was wissen wir?
Wir wissen, dass jeder zweite Beitrag betroffen ist. Zusätzlich wissen wir, dass die Klasse “timeline-inverted” heißt.

Na dann lassen wir doch unsere Elemente erstmal zählen, teilen sie dann durch 2 und geben den Elementen die teilbar sind unsere CSS-Klasse.
Und wie geht das? 🙂

1
2
3
4
<ul class="timeline">
   <?php $i=0;?>
    <?php if(have_posts()):while(have_posts()):the_post();?>
     <li class="<?php $i++;if($i % 2!=1){echo "timeline-inverted";}?>">

Vor unserem Loop setzen wir unsere Variable i (die Beitragszahl), welche 0 beträgt. In unseren Timeline li-Elementen addieren wir dann jeweils unsere Variable um eins ($i++). Mit einer if-Abfrage fragen wir nun ob unsere Variable “i” durch 2 teilbar ist ($i % 2!=1) und geben nur wenn sie es ist “timeline-inverted” aus.

F5 oder Refresh!

Nachdem wir nun auch jedem zweiten Beitrag eine zusätzliche Klasse gegeben haben, funktioniert unsere “ZigZag-Timeline” wie gewünscht. Nun solltet ihr noch die Standard-Elemente einer Website einfügen, wie z.B. euer Seitenmenü und so weiter…
Ich hoffe wir konnten euch helfen und ihr habt ein bisschen was gelernt. Dies ist nun das erste Tutorial welches wir veröffentlichen und hoffen auf ein bisschen Feddback in den Kommentaren 😉

Schöne Grüße und Ahoi!