Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger

http://www.elmastudio.de/wordpress-theme-mit-bootstrap-entwickeln-tutorial-fuer-einsteiger/

Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger: Teil 2

 

Was brauchst du?

• 30 Minuten Zeit
• Text-Editor
• Grundkenntnisse in HTML, CSS und WordPress

Was ist das Ziel?

Am Ende des Tutorials solltest du verstehen, was ein Framework ist und wie Bootstrap und WordPress ineinandergreifen. Auf dieser Grundlage kannst du beginnen, dein eigenes Theme zu entwickeln.

Du weißt bereits, wie man ein eigenes Theme baut?

Umso besser, dann könnte dieses Tutorial dein größter Wissensboost sein, seitdem du CSS gelernt hast – zumindest war’s bei mir so. Und klar – ein paar Stunden musst du noch selbst rumbasteln. Also: Enter! Enter!

Fangen wir an: Was ist Bootstrap?

Ende Juli haben die Entwickler Version 3 von Bootstrap veröffentlicht.
Ende Juli haben die Entwickler Version 3 von Bootstrap veröffentlicht.

Bootstrap ist ein Framework, d.h. eine Art von Vorlage für eine Webseite. Solche Frameworks, auch Blank Themes genannt, gibt es eine ganze Reihe. Bootstrap gehört zu den bekanntesten und beliebtesten: Auf der Entwicklerplattform Gitub hat Bootstrap mehr als 50.000 Sterne – mehr als doppelt so viele, wie das zweitbeliebteste Projekt. Der große Vorteil von Bootstrap (und natürlich auch anderen Frameworks) ist: Du musst die Webseite nicht von Grund auf neu bauen. Es stehen bereits definierte Elemente zur Verfügung, zum Beispiel Boxen, Navigationen oder responsives Anpassen an die Bildschirmgröße des Nutzers – das spart eine Menge Zeit. Grundsätzlich kann Bootstrap mit und ohne Content-Management-System, statisch oder dynamisch verwendet werden.

Wer hat Bootstrap erfunden?

Mark Otto und Jacob Thornton von Twitter, die Bootstrap kostenlos zum Download unter der Apache-Lizenz freigaben. Seit Ende Juli gibt es den Release Candidate 1 der dritten Version. Otto erzählt im Podcast „The Big Webshow“ davon, wie er eine interne Guideline für das Design bei Twitter schreiben wollte. Doch es sollte ein Redesign geben, eine Richtlinie zum Design kurz vor einer Änderung – reine Arbeitsverschwendung. Stattdessen veröffentlichte er den Code als Framework.

Wo bekomme ich Bootstrap?

Auf der Bootstrap-Seite bei Github. Dort gibt einen Überblick über Bootstraps Fähigkeiten: Das Scaffolding erlaubt es, eine Webseite leicht zu gliedern, und integriertes CSS, sogenannte Komponenten, und JavaScript lassen viele Dinge, wie Slider Pop-ups, Tabs oder Navigationen recht schnell einbauen – all diese Dinge sind nur eine div-class entfernt.

Die Erläuterungen auf der Twitter-Bootstrap-Seite sind allerdings recht knapp, gerade für Einsteiger gibt es ausführlichere Hilfe zu allen Elementen bei der W3C.

Woraus besteht Bootstrap?

Wenn du Bootstrap runterlädst, wirst du sehen, dass Bootstrap aus zwei CSS- und zwei Java-Script-Dateien besteht. Diese bilden ein eigenständiges Design und sind das Grundgerüst für eine Webseite, die du optisch nach Belieben aufbauen kannst.

Aber eines fehlt für eine funktionierende Webseite: HTML bzw. PHP, in das CSS, Bilder und JavaScript integriert wird. Genau darum soll es in diesem Tutorial gehen: Bootstrap mit WordPress verbinden und so dein eigenes WordPress-Theme bauen.

Wie verbinde ich Bootstrap und WordPress?

Ein gute Methode ist die Integration via Child-Theme, die Ellen schon in einem Videotutorial erklärt hat. Ein Vorteil dabei ist, dass du nicht in der langen Original-CSS-Datei von Bootstrap rumbastelst, sondern in einer neuen CSS-Datei nur die Elemente änderst oder erstellst, die du brauchst. Das ist übersichtlicher und du hast mit der unberührten Backup-Version der Bootstrap-CSS-Datei ein funktionierendes Design in der Hinterhand, falls etwas schief geht.

So geht’s:

1. Erstelle einen Ordner für dein Theme. In diesen kopierst du den Bootstrap-Ordner, in dem die Standard-Dateien liegen.

2. Erstelle eine style.css-Datei, die im gleichen Ordner wie die Boostrap-Dateien liegen.

Die Struktur in deinem Theme-Ordner.
Die Struktur in deinem Theme-Ordner bei Bootstrap 2.3.2. In der neuen Version 3 fallen die Unterteilung in responsive- und nicht-responsive-CSS-Dateien und der img-Ordner weg.

3. Öffne die style.css-Datei und erlaube ihr, auf die Bootstrap-CSS-Dateien zuzugreifen. Dazu kopierst du folgenden Code in die style.css:

1 /* Theme Name: DeinChild
2 Theme Description: Mein erstes Bootstrap-Theme
3 Author: Mein Name Author
5 Template: parentthemeordner Version: 1.0
6 */
7 @import url('bootstrap/css/bootstrap.min.css');

Deinen eigenen Code schreibst du unter die @import-Funktion.

Ein einfaches Beispiel mit der h1-Überschrift, deren Schriftgröße du ändern willst. In der style.css fügst du dann hinzu:

1 h1 {font-size: 3em;}

Jedes CSS-Element, das du in der CSS-Datei style.css definierst, überschreibt die Bootstrap-CSS-Datei. Gibt es deiner style.css keine Angabe zur h1-Überschrift, wird automatisch auf die h1-Überschrift in der Bootstrap-Datei zurückgegriffen.

Kurze Anmerkung zu den CSS-Dateien:

Bootstrap 3 beinhaltet zwei CSS-Dateien. Du kannst dich entscheiden, ob du durch die @import-Funktion die bootstrap.css oder bootstrap.min.css einbindest. Der Unterschied liegt darin, dass die „min“-Datei wesentlich kleiner ist. Zum Arbeiten eignet sich durch die saubere Darstellung dagegen die fast 5000 Zeilen lange Version besser.

Bis zum neuen Bootstrap 3 waren vier CSS-Dateien Teil des Frameworks: zwei davon für responsives Anpassen, zwei haben diese Funktion nicht. Bei Bootstrap 2.3.2 musst du als erstes klären, ob du responsives Verhalten möchtest und dann die dementsprechend benannte Datei wählen.

Wie kann ich eine WordPress-Seite machen?

Damit eine Webseite im Browser dargestellt werden kann, braucht es eine statische HTML-Datei oder dynamische PHP-Dateien. Im nächsten Schritt musst du deshalb die WordPress-typischen Dateien wie index.php, single.php, header.php oder footer.php erstellen und diese miteinander verknüpfen.

In der header.php-Datei greifst du standardmäßig nach deiner style.css, die wiederum die CSS-Datei von Bootstrap aufruft – durch den Befehl @import.

Beispiel für eine header.php-Datei:

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="<?php bloginfo( 'charset' ); ?>" />
5         <title><?php wp_title(); ?></title>
6         <meta name="description" content="<?php bloginfo( 'description' ); ?>">
7         <meta name="viewport" content="width=device-width, initial-scale=1.0">
8         <link href="style.css" rel="stylesheet">
9     </head>

Wichtig: Wenn du ein responsives Aussehen willst, dann musst du im Header-Bereich unbedingt einen Viewport festlegen. Denn Smartphones haben so unterschiedliche Auflösungen – ohne diesen Befehl könnten die Webseite auf einem Samsung-Smartphone ganz anders Aussehen als auf einem iPhone 5.

In der index.php-Datei holst du dir mit Hilfe des WordPress-Loops die Beiträge in deinem Blog und schließt mit footer.php-Datei deine Seite ab.

Wenn du das HTML- und PHP-Grundgerüst mit Inhalten füllst, egal ob mit handgetippten Text im Texteditor oder durch WordPress, wird es sich im typischen Bootstrap-Aussehen zeigen. Wie vor ein paar Absätzen mit der h1-Überschrift gezeigt, kannst du über die style.css-Datei das Aussehen deiner Seite ändern.

Du willst weiter machen?

Du willst eine Sidebar bauen und WordPress-Beiträge einlesen? Dann hat Elmastudio das richtige für dich: Ellen macht in einem Screencast vor, wie ein Theme-Layout anlegt wird.

Gibt es Fragen?

Wenn im Tutorial etwas unklar geblieben ist und du Fragen zu WordPress und Bootstrap hast: Dann stell‘ sie doch in den Kommentaren – ich versuche sie dann dort zu beantworten. Dort kannst du auch Anregegungen oder Kritik unterbringen: Ich freue mich über jedes Feedback!

Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger: Teil 2

Bootrstrap für WordPress Tutorial Teil 2

Was brauchst du?

• 50 Minuten Zeit
• Text-Editor
• Grundkenntnisse in HTML, CSS und WordPress

Was ist das Ziel?

Am Ende dieses Tutorials hast du ein WordPress-Theme erstellt, das einen fixen Header und eine Sidebar hat. Dabei wird Bootstrap als Framework dienen, d.h. die Webseite wird sich responsiv an verschiedene Displaygrößen anpassen und die typische Bootstrap-Optik haben. Anschließend kannst du anfangen, in der CSS-Datei das Aussehen zu verändern und es so deinen Wünschen anzupassen.

Am Ende des Tutorials hast du ein Theme erstellt, das so aussieht: Das typische Bootstrap-Design
Am Ende des Tutorials hast du ein Theme erstellt, das so aussieht: Das typische Bootstrap-Design

Wo sind wir im ersten Teil des Tutorials stehengeblieben?

Im ersten Teil des Tutorials hast du das Framework Bootstrap kennengelernt und erste Schritte hin zu einem eigenen Theme gemacht: Du hast die Bootstrap-CSS-Datei mittels der @import-Funktion in dein Stylesheet eingebunden.

Wie ist das Vorgehen?

Der erste Schritt besteht darin, die benötigten Dateien zu erstellen und sie gemeinsam mit dem Stylesheet aus dem ersten Teil und den CSS und JavaScript-Dateien von Bootstrap in einen Ordner zu packen.

In Bootstrap 3 sind die CSS- und JavaScript-Dateien im Ordner "dist" untergebracht.
In Bootstrap 3 sind die CSS- und JavaScript-Dateien im Ordner „dist“ untergebracht.

Danach wirst du jede dieser leeren PHP-Dateien mit Code füllen, indem die Struktur des Bootstrap-Systems mit den WordPress-spezifischen PHP-Befehlen kombiniert wird. Generell soll die Webseite den HTML-5-Standards genügen.

1. Leere Dateien erstellen

Als erstes erstellst du folgende Dateien in einem Texteditor deiner Wahl:

• index.php
• header.php
• footer.php
• single.php
• content.php
• page.php

Diese sechs Dateien reichen aus, damit das Theme funktioniert. Allerdings man noch viele weitere Dateien in die Theme-Struktur integrieren.

2. Fangen wir oben an: header.php

Wie der Name bereits sagt, betrifft, diese Datei den Kopfbereich deiner Webseite. Typischerweise befinden sich in ihr sämtlich Metadaten, Links zu Stylesheets und die Navigation.

Bootstrap gibt mit den CSS-Klassen .navbar die Möglichkeit, eine horizontale Navigationsleiste zu verwenden. Fügt man auch .navbar-fixed-top hinzu, bleibt sie am oberen Browserrand fixiert. Durch die Kombination eines Buttons und der Klasse .navbar-collapse staucht sich die Navigation bei Browserfenstern, die schmaler als 768 Pixel sind, also in der Regel Smartphones, zu einem Menübutton. Klickt man diesen Button, öffnen sich die Menüpunkte – diese Form hat sich in den letzten Monaten zum Standardmenü auf mobilen Geräten gemausert.

01 <!-- HTML5 -->
02 <!DOCTYPE html>
03 <html>
04 <head>
05     <meta charset="utf-8">
06     <meta name="viewport" content="width=device-width, initial-scale=1.0">
07     <meta name="description" content="<?php bloginfo('description'); ?>" />
08     <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
09     <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
10     <?php wp_head(); ?>
11 </head>
12 <body <?php body_class(); ?>>
13 <!-- Fixed navbar -->
14     <div class="navbar navbar-fixed-top">
15         <div class="container">
16             <div class="navbar-header">
17                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
18                 <span class="icon-bar"></span>
19                 <span class="icon-bar"></span>
20                 <span class="icon-bar"></span>
21                 </button>
22           <a class="navbar-brand" href="#">Project name</a>
23         </div>
24         <div class="navbar-collapse collapse">
25           <ul class="nav navbar-nav">
26             <li><a href="http//www.deinedomain.de/">Home</a></li>
27             <li><a href="http//www.deinedomain.de/about">About</a></li>
28             <li><a href="http//www.deinedomain.de/kontakt">Kontakt</a></li>
29           </ul>
30         </div><!--/.nav-collapse -->
31       </div>
32     </div><!--/.navbar -->

3. Das Herz deines Themes: index.php

Die Datei names index.php ist so etwas wie das Herz deines Themes. Ruft ein User die Domain deiner Seite auf, landet er auf der index.php. Wie du am Code erkennen kannst (Zeilen 1 und 17), holt sich die index.php den Inhalt der header.php und der footer.php.

Dazwischen werden dem WordPress-Loop die Beiträge geladen. Der Befehl get_template_part( ‚content‘, get_post_format() ); ist nicht zwingend notwendig, allerdings erlaubt er, Templates für verschiedene Typen von Posts zu verwenden.

Jetzt kommst du zum ersten Mal mit dem Bootstrap-Grid in Berührung: Diese Spaltenstruktur erlaubt es dir festzulegen, wieviel Platz deine Posts oder deine Sidebar bekommen.

Grundsätzlich hat Bootstrap zwölf Spalten. Mit dem Update auf Bootstrap 3 kannst du genau festlegen, wie viele Spalten deine Content-Bereiche haben sollen. Mit der CSS-Klasse .col-lg-? kontrollierst du große Displays, mit .col-md-? kleinere Desktop-Bildschirme, mit .col-sm-? Tablets und mit .col-? Smartphones. Das Fragezeichen steht dafür für eine Zahl zwischen eins und zwölf – und damit für die Anzahl der Spalten, die sich dynamisch, im Bootstrap-Sprech „fluid“, anpassen. Die Spalten müssen sich immer auf zwölf addieren. Auf einem iPhone ist also eine Spalte viel schmaler als auf einem Desktop-PC.

Die Werte für die Klassen .col-lg-?, .col-sm-? und .col-? müssen nicht gleich sein, d.h. je nach Gerät kannst du das Aussehen auch in den Grundstrukturen verändern.

Damit die Bereich nebeneinander dargestellt werden, also eine Sidebar zum Beispiel rechts von deinem Bereich für Artikel, musst du die Klassen mit den Spaltengröße in ein div mit der Klasse .row und .container packen.

1 <div class="container">
2     <div class="row">
3         <!-- Artikelbereich links, Sidebar rechts -->
4         <div class="col-9">Artikelbereich</div>
5         <div class="col-3">Sidebar</div>
6     </div>
7 </div>

Willst du dagegen die Sidebar auf der linken Seite haben, musst du die .col-Klassen einfach umdrehen:

1 <div class="container">
2     <div class="row">
3         <!-- Artikelbereich rechts, Sidebar links -->
4         <div class="col-3">Sidebar</div>
5         <div class="col-9">Artikelbereich</div>
6     </div>
7 </div>

Der gesamte Code für die index.php sieht so aus: Innerhalb des Spaltenlayouts von Bootstrap packst du den WordPress-Loop, der auf die content.php-Datei (siehe Punkt 6) verweist. Danach kommen Buttons, mit denen User zwischen älteren und neueren Artikel navigieren können. Auf der rechten Seiten reserviert ein drei Spalten breiter Platzhalter den Bereich für eine Sidebar.

01 <?php get_header(); ?>
02     <div class="container">
03         <div class="row">
04             <div class="col-lg-9 col-md-9 col-sm-9 col-9">
05                 <div class="content">
06                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
07                     <?php get_template_part( 'content', get_post_format() ); ?>
08                     <?php endwhile; else: ?>
09                     <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
10                     <?php endif; ?>
11                     <div id="nav-post"><?php posts_nav_link('  ', __('<button class="button">« Neuere Beiträge</button>'), __('<button class="button">Ältere Beiträge »</button>')); ?></div>
12                 </div> <!-- /.content -->
13             </div> <!-- /.col-lg-9 /.col-md-9 /.col-sm-9 /.col-9 -->
14             <div class="col-lg-3 col-md-3 col-sm-3 col-3">Hier kommt die Sidebar hin</div><!-- /.col-lg-3 /.col-md-3 /.col-sm-3 /.col-3 -->
15         </div> <!-- /.row -->
16     </div> <!-- /.container -->
17 <?php get_footer(); ?>

4. Wenn es ein header.php gibt, braucht es auch eine footer.php

Die footer.php-Datei ist das Gegenstück zur header.php: In ihr befindet sich der untere Teil deiner Webseite. Zudem werden dort unmittelbar vor dem sich schließenden body-Tag die JavaScript-Dateien geladen.

1     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
3     <?php wp_footer(); ?>
4   </body>
5 </html>

5. Einen einzelnen Artikel anzeigen: single.php

Mit der Datei single.php wird die Einzelansicht eines Artikel aufgerufen. Auch hier werden die Inhalte mit dem Grid gestaltet.

01 <?php get_header(); ?>
02     <div class="container">
03         <div class="row">
04             <div class="col-lg-9 col-md-9 col-sm-9 col-12">  
05                 <div class="content">
06                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
07                     <?php get_template_part( 'content', get_post_format() ); ?>
08                     <?php endwhile; else: ?>
09                     <p><?php _e('Diese Seite gibt es nicht :('); ?></p>
10                     <?php endif; ?>
11                 </div> <!-- /.content -->
12             </div> <!-- /.col-lg-9 /.col-md-9 /.col-sm-9 /.col-9 -->
13             <div class="col-lg-3 col-md-3 col-sm-9 col-9"> <h2>Sidebar</h2> <!-- Hier ist Platz für deine Sidebar--></div><!-- /.col-lg-3 /.col-md-3 /.col-sm-3 /.col-3  -->
14         </div> <!-- /.row -->
15     </div> <!-- /.container -->
16 <?php get_footer(); ?>

6. Das Content-Template content.php

Wenn du dir den Code der single.php genau angesehen hast, wirst du festgestellt haben, dass sie die Überschrift und den Inhalt deiner Posts nicht abruft. Das passiert mit der content.php, auf die die single.php zugreift. Da das Theme HTML-5-Standards genügen soll, sind bestimmte Klassen nicht in divs, sondern benutzen die section-, article-, aside– und footer-Tags.

Innerhalb dieser werden mit the_title();die Überschrift und mit echo the_content(); der Inhalt und darunter bestimmte Metadaten auf der Seite dargestellt.

01 <?php
02 /**
03  * The default template for displaying content.
04  */
05 ?>
06 <section class="main">
07     <article class="post" id="post-<?php the_ID(); ?>">
08         <section class="post-content">
09             <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
10             <p><?php echo the_content(); ?></p>
11         </section>
12             <aside class="meta">
13                 <p><time datetime="<?php echo get_the_time(Y-m-d-g-i-s); ?>"><?php echo get_the_date(); ?></time></p>
14                 <p>Kategorie:<?php the_category(',') ?></p>
15                 <p>Schlagworte <?php the_tags(""); ?></p>
16                 <p><a href="#comments"><?php comments_number( 'Kommentieren', '1 Kommentar', '% Kommentare' ); ?></a></p>
17             </aside>
18     
19 <footer>Kommentare</footer>
20     
21     </article><!-- /.post-->
22 </section><!-- /.main-->

Damit dein Theme funktioniert, ist diese Datei nicht notwendig. Damit du aber Custom Post Formats benutzen kannst, muss der WordPress-Loop über die content.php laufen.

7. Eine Seite anzeigen: page.php

Ganz ähnlich der Einzelansicht von Artikeln, gibt es auch ein Template für Seiten. Der Unterschied: Der konkrete Inhalt wird nicht wie bei der single.php in die content.php-Datei ausgelagert.

01 <?php
02 /**
03  * The default template for displaying a page.
04  */
05 ?>
06 <?php get_header(); ?>
07     <div class="container">
08         <div class="row">
09             <div class="col-lg-9 col-md-9 col-sm-9 col-9">
10                 <div class="content">
11                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
12                         <section class="main">
13                             <article class="post" id="post-<?php the_ID(); ?>">
14                                 <section class="post-content">
15                                     <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
16                                     <p><?php echo the_content(); ?></p>
17                                 </section>
18                             </article>
19                         </section>
20                     <?php endwhile; else: ?>
21                     <p><?php _e('Diese Seite gibt es nicht :('); ?></p>
22                     <?php endif; ?>
23                 </div> <!-- /.content -->
24             </div> <!-- /.col-lg-9 /.col-md-9 /col-sm-9 /.col-9 -->
25             <div class="col-lg-3 col-md-3 col-sm-3 col-3">Hier kommt die Sidebar hin</div><!-- /.col-lg-3 /.col-md-3 /.col-sm-3 /.col-3 -->
26         </div> <!-- /.row -->
27     </div> <!-- /.container -->
28 <?php get_footer(); ?>

8. Das Stylesheet style.css

Im ersten Zeil des Tutorials hast du bereits eine Datei mit dem Namen style.css erstellt. Diese ist mit der CSS-Datei von Bootstrap verknüpft. Als erste Veränderung gegenüber des Standard-Bootstrap-Stylesheets wird ein Abstand zum oberen Rand erstellt. Die fixe Navigation würde sonst einen Teil des Inhalts überlagern.

01 /*
02 Theme Name: Mein erstes Theme mit Bootstrap
04 Description: Mein erstes Theme mit Bootstrap, nach einem Tutorial bei Elmastudio.de
05 Author URI: http://www.deinedomain.de
06 Version: 1.0
07 */
08 @import url('bootstrap/css/bootstrap.css');
09
10 body {margin-top: 70px;}

Alternativ zur @import-Befehl kannst du die Bootstrap-CSS-Datei zusammen mit deiner eigenen Datei verwenden, indem du im Header-Bereich zuerst auf deine eigene und danach auf das Bootstrap-Stylesheet verlinkst.

Fast fertig: Das Theme hochladen und aktivieren

Wenn du jetzt den Ordner mit deinem Theme in den Ordner „themes“ deiner WordPress-Installation kopierst, erscheint es im Backend unter dem Menüpunkt „Themes“ und du kannst es aktivieren. Dein Blog hat nun und das Aussehen von Bootstrap.

Im WordPress-Backend kannst du das Theme aktivieren.
Im WordPress-Backend kannst du das Theme aktivieren.

Selbstverständlich kannst du nun auch weitere eingebaute Funktionen, wie zum Beispiel Tooltips oder Tabs in dein Theme oder deine Posts einbauen.

Wie kannst du das Aussehen verändern?

Die Optik veränderst du, indem du die style.css-Datei bearbeitest. Schreibst du dort neue Anweisungen hinein, zum Beispiel, dass alle h2-Überschriften rot sein sollen, überschreibt es die Regel für h2-Überschriften in der bootstrap.min.css. Für alle Klassen und IDs, die du in deinem Stylesheet nicht erwähnst, wird automatisch auf die Bootstrap-Version zurückgegriffen. Selbstverständlich kannst du auch komplett neue Klassen hinzufügen.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

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