Advertisement
  1. Web Design
  2. WordPress

Die Erstellung eigener WordPress-Themes auf Basis einer HTML-Vorlage

Scroll to top
Read Time: 11 min

German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)

Benutzerfreundliche Systeme wie WordPress haben die Art und Weise, wie wir Online-Inhalte erstellen, völlig revolutioniert. Jetzt ist es möglich, eine hochleistungsfähige, professionell gestaltete WordPress Website zu erstellen, ohne eine einzige Zeile Code schreiben zu müssen. Das war jedoch nicht immer der Fall!

Bevor es Systeme wie WordPress gab, war es Standard, eine Website mit HTML zu erstellen, mit etwas JavaScript und CSS-Formatierungen. Wenn Sie eine statische HTML-Seite besitzen, sollten Sie vielleicht über einen Wechsel zu WordPress nachdenken.

Die gute Nachricht ist, dass Sie nicht bei Null anfangen müssen. Es ist möglich, Ihren statischen HTML-Code in eine moderne WordPress-Website umzuwandeln. In diesem Beitrag werden wir zwei verschiedene Methoden vorstellen. Aber zuerst müssen wir kurz die wichtigste Frage beantworten: 

Was ist WordPress?

Hier ist eine ausführliche Erklärung zum Thema WordPress. Kurz gesagt, gibt es zwei Definitionen:

  1. Die erste und einfachste Definition ist, dass WordPress eine Software ist, die Sie installieren und verwenden können, um einen Blog, eine App, eine Website usw. zu erstellen.. 
  2. Die zweite und komplexere Definition ist, dass WordPress ein CMS—Content Management System ist. Ich denke, dass Sie aus dieser Beschreibung ableiten können, dass es um die Verwaltung von Inhalten geht.

Im Wesentlichen bietet WordPress eine Plattform, um Inhalte mit der Welt zu teilen. Und es gibt Ihnen die Werkzeuge an die Hand, die Sie brauchen, um dies effizient und mühelos zu tun, ohne in die Programmierung eingreifen zu müssen. 

Auf einen Blick

Zunächst zeige ich Ihnen, wie Sie ein eigenes WordPress-Theme erstellen und dann jeder HTML-Code in die entsprechende WordPress-Vorlage einfügen. Grundlegende CSS- und HTML-Kenntnisse sind zwar nicht unbedingt erforderlich, aber wünschenswert, um diesen Prozess zu erleichtern. 

Anschließend zeige ich Ihnen einen weniger technischen Ansatz, bei dem Sie ein übergeordnetes WordPress-Theme finden, das Ihrer HTML-Website sehr ähnlich ist. Sie können dann ein Child-Theme erstellen und dieses verwenden, um das Aussehen Ihrer HTML-Website nachzubilden.

Unabhängig davon, für welche Methode Sie sich entscheiden, werden Sie am Ende dieses Artikels den Sprung vom zeitaufwändigen Programmieren zu einem benutzerfreundlichen Content Management System (CMS) geschafft haben.

Schritt 1: Ein lokales Theme-Verzeichnis erstellen

Zunächst müssen Sie einen lokalen Ordner erstellen, in dem Sie alle Ihre Themendateien speichern werden. Wir werden während des gesamten Tutorials in diesem Verzeichnis arbeiten, daher ist es sinnvoll, es in Reichweite zu platzieren, zum Beispiel auf Ihrem Desktop. Schließlich werden wir diesen Theme-Ordner auf Ihre Website hochladen, also geben Sie ihm einen aussagekräftigen Namen.

Erstellen Sie in diesem Verzeichnis die folgenden Dateien:

  • style.css. In dieser Datei erstellen Sie alle Regeln, die das Design und Layout Ihrer neuen WordPress-Website bestimmen.
  • index.php. Diese Datei ist eine Ausweichdatei, die WordPress nur verwendet, wenn kein geeigneteres Theme verfügbar ist. Einige Theme-Entwickler verwenden index.php, um eine generische Vorlage bereitzustellen, die für die Anzeige beliebiger Inhalte geeignet ist.
  • header.php. Hier wird der Inhalt definiert, der als Teil der Kopfzeile Ihrer Website angezeigt wird, wie Titel und Beschreibung.
  • footer.php. Definiert den Inhalt der Fußzeile Ihrer Website, die unterhalb des Hauptinhaltsbereichs erscheint.
  • sidebar.php. Dies ist der Inhalt, der in der Seitenleiste Ihrer Website angezeigt wird, also in der vertikalen Spalte, die auf vielen WordPress-Websites eine wichtige Rolle spielt.

Im Moment können Sie alle diese Dateien leer lassen. Wir werden sie in den nächsten Schritten mit Inhalten füllen.

Schritt 2: Kopieren Sie die vorhandene CSS-Formatierung in Ihr WordPress-Stylesheet

Wenn Sie Ihr ursprüngliches Webdesign beibehalten möchten, müssen Sie Ihre aktuelle CSS-Formatierung in WordPress kopieren. Sie können diesen Code in die Datei style.css einfügen, die Sie im vorherigen Schritt erstellt haben.

Öffnen Sie zunächst die Datei style.css und fügen Sie Folgendes hinzu, wobei Sie die Werte durch Ihre eigenen Angaben ersetzen müssen:

1
/*Theme Name: Your theme’s name.
2
Theme URI: Your theme’s URI. 
3
Description: Describe your theme. 
4
Version: 1.0
5
Author: Your name.
6
Author URI: Your website’s address.*/

Sie können nun das CSS Ihrer HTML-Site unten in diese Datei einfügen. Speichern Sie dann Ihre Änderungen und schließen Sie die Datei style.css.

Schritt 3: Der HTML-Code aufteilen

Jede Datei, die wir in diesem Tutorial erstellen, dient dazu, WordPress mitzuteilen, welche Inhalte an welcher Stelle angezeigt werden sollen. Um dies zu erreichen, müssen Sie der vorhandene HTML-Code Ihrer Website aufteilen und in die verschiedenen Dateien einfügen, die wir zuvor erstellt haben. 

Öffnen Sie zunächst die Datei index.html Ihrer HTML-Site. Wir müssen bestimmte Abschnitte der Datei index.html kopieren und sie in Ihre lokalen Themendateien einfügen:

  1. Kopieren Sie alles vom Anfang der Datei index.php bis hin zum ersten Tag div class="main".
  2. Öffnen Sie die Datei header.php, und fügen Sie den kopierten Text in diese Datei ein. Speichern Sie Ihre Änderungen, und schließen Sie die Datei header.php.
  3. Wechseln Sie nun zurück zur Datei index.html Ihrer Website. Kopieren Sie dieses Mal das Element aside class="sidebar".
  4. Öffnen Sie die Datei sidebar.php.
  5. Fügen Sie den kopierten Text in die Datei sidebar.php ein. Speichern Sie Ihre Änderungen und schließen Sie sidebar.php.
  6. Kopieren Sie in die Datei index.php alles, was nach der Seitenleiste kommt.
  7. Öffnen Sie die lokale Datei footer.php, und fügen Sie den kopierten Text in diese Datei ein. Speichern Sie Ihre Änderungen, und schließen Sie footer.php.
  8. Kopieren Sie in die Datei index.html den Hauptbereich. Im Grunde alles, was übrig geblieben ist!
  9. Fügen Sie den gesamten Text in Ihre lokale index.php-Datei ein.
  10. Zum Schluss müssen wir sicherstellen, dass index.php mit allen anderen Dateien interagieren kann, aus denen Ihre neue WordPress-Website bestehen wird. Fügen Sie ganz oben in Ihrer lokalen index.php-Datei den folgenden PHP-Code ein:
1
<?php get_header(); ?>

11. Ganz unten in der Datei index.php fügen Sie Folgendes ein:

1
<?php get_sidebar(); ?><?php get_footer(); ?>

Sie können Ihre Änderungen nun speichern, aber schließen Sie die Datei index.html noch nicht! Wir müssen noch ein Code hinzufügen.

Schritt 4: Content-Loop erstellen

Die Schleife ist der primäre PHP-Code, den WordPress verwendet, um den Besuchern Ihre Inhalte anzuzeigen.

    Fügen Sie in Ihrer lokalen index.php-Datei den folgenden Code in den Inhaltsbereich ein:

    1
    <?php if ( have_posts() ) : ?>
    
    2
    <?php while ( have_posts() ) : the_post(); ?>
    
    3
      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    4
        <div class="post-header">
    
    5
           <div class="date"><?php the_time( 'M j y' ); ?></div>
    
    6
           <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    
    7
           <div class="author"><?php the_author(); ?></div>
    
    8
        </div><!--end post header-->
    
    9
        <div class="entry clear">
    
    10
           <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
    
    11
           <?php the_content(); ?>
    
    12
           <?php edit_post_link(); ?>
    
    13
           <?php wp_link_pages(); ?> </div>
    
    14
        <!--end entry-->
    
    15
        <div class="post-footer">
    
    16
           <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    
    17
        </div><!--end post footer-->
    
    18
        </div><!--end post-->
    
    19
    <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    
    20
        <div class="navigation index">
    
    21
           <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
    
    22
           <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    
    23
        </div><!--end navigation-->
    
    24
    <?php else : ?>
    
    25
    <?php endif; ?>
    

    Jetzt können Sie die Datei index.php speichern und schließen. Ihr Theme ist nun fertig, und Sie können es auf Ihre WordPress-Website hochladen.

    Schritt 5: Eigenes Theme hochladen

    Verbinden Sie sich zunächst mit einem FTP-Client (File Transfer Protocol) mit Ihrer WordPress-Website. Ich verwende FileZilla, aber die Schritte sollten für die meisten FTP-Clients gleich sein.

    Navigieren Sie im Client zum Ordner /wp-content/themes auf Ihrer Website.

    The FileZilla FTP client.The FileZilla FTP client.The FileZilla FTP client.

    Ziehen Sie nun Ihren lokalen Theme-Ordner in das Verzeichnis /wp-content/themes und legen Sie ihn dort ab. FileZilla lädt nun dieses Theme auf Ihre WordPress-Website hoch.

    Converting HTML to a WordPress template, using FileZilla.Converting HTML to a WordPress template, using FileZilla.Converting HTML to a WordPress template, using FileZilla.

    Als letzte Aufgabe müssen Sie Ihr benutzerdefiniertes Theme aktivieren. Navigieren Sie im WordPress-Dashboard zu Design > Themes.

    The WordPress Theme dashboard.The WordPress Theme dashboard.The WordPress Theme dashboard.

    Jetzt können Sie Ihr Theme aktivieren. Herzlichen Glückwunsch—Sie haben gerade Ihre statische HTML-Website in eine dynamische WordPress-Website umgewandelt. Sie können nun damit beginnen, Ihre neue WordPress-Site mit dem Inhalt Ihrer alten Site zu füllen.

    Ein Child-Theme erstellen

    Alternativ können Sie Ihre HTML-Seite auch in WordPress konvertieren, indem Sie ein Child-Theme erstellen. Auf diese Weise haben Sie mehr Freiheit, das Design Ihrer neuen Website so anzupassen, dass es genau Ihrer alten HTML-Website entspricht. Außerdem sind dafür nicht so viele technische Kenntnisse erforderlich wie bei der vorherigen Methode.

    Zunächst müssen Sie ein Theme auswählen, das als übergeordnetes Theme dienen soll. Ihr Child-Theme übernimmt die Kernfunktionen und den Stil des Parent-Theme. Um Ihnen das Leben leichter zu machen, ist es hilfreich, ein Parent-Theme zu wählen, das der WordPress-Website, die Sie erstellen möchten, sehr ähnlich ist.

    Nachdem Sie das gewählte Parent-Theme installiert und aktiviert haben, verbinden Sie sich mit einem FTP-Client wie FileZilla mit Ihrer Website. Wechseln Sie dann in das Verzeichnis wp-content/themes Ihrer Website.

    Klicken Sie nun mit der rechten Maustaste auf eine beliebige Stelle in diesem Verzeichnis und wählen Sie Verzeichnis erstellen.

    Creating a new directory via an FTP client. Creating a new directory via an FTP client. Creating a new directory via an FTP client.

    Wenn Sie dazu aufgefordert werden, geben Sie diesem Ordner denselben Namen wie Ihrem übergeordneten Thema, jedoch mit dem Zusatz -child am Ende. Wenn Sie zum Beispiel twentytwentyone als übergeordnetes Theme verwenden, nennen Sie dieses Verzeichnis twentytwentyone-child.

    A child theme, in a File Transfer Protocol (FTP) client.A child theme, in a File Transfer Protocol (FTP) client.A child theme, in a File Transfer Protocol (FTP) client.

    Als nächstes öffnen Sie dieses Verzeichnis und erstellen eine style.css-Datei. Dieses Child-Theme muss alle seine Funktionen und Stile vom Parent-Theme übernehmen. Um diese Beziehung herzustellen, fügen Sie Folgendes in Ihre style.css-Datei ein:

    1
    /*
    
    2
     Theme Name:   TwentyTwenty One Child
    
    3
     Theme URI:    https://example.com/twentytwentyone-child/
    
    4
     Description:  TwentyTwenty One Child Theme
    
    5
     Author:   	Jessica Thornsby
    
    6
     Author URI:   http://example.com
    
    7
     Template: 	twentytwentyone
    
    8
     Version:  	1.0.0
    
    9
     License:  	GNU General Public License v2 or later
    
    10
     License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    
    11
     Tags:     	light, dark, responsive-layout, accessibility-ready
    
    12
     Text Domain:  twentytwentyonechild
    
    13
    */
    

    Stellen Sie sicher, dass Sie den obigen Code mit Ihren eigenen Informationen aktualisieren. Stellen Sie insbesondere sicher, dass Template den genauen Namen des Verzeichnisses Ihres übergeordneten Themes angibt. So identifiziert WordPress Ihr übergeordnetes Theme, daher ist es wichtig, dass es keine Diskrepanzen zwischen diesen Namen gibt.

    Wenn Sie unsicher sind, können Sie den Namen des übergeordneten Verzeichnisses überprüfen, indem Sie in Ihrem FTP-Client zu wp-content/themes navigieren.

    Nachdem Sie den gesamten Code hinzugefügt haben, speichern Sie Ihre Änderungen und schließen Sie die Datei style.css.

    Im nächsten Schritt müssen Sie WordPress mitteilen, dass Ihr Child-Theme vom CSS des Parent-Theme abhängig ist. Öffnen Sie in Ihrem FTP-Client das Verzeichnis Ihres Child-Themes und erstellen Sie eine functions.php-Datei. In dieser Datei definieren Sie die Abhängigkeiten und die Hierarchie Ihres Themes, indem Sie den PHP-Aufruf wp_enqueue_style() verwenden.

    Im Idealfall lädt das Elternthema die Stylesheets des Eltern- und des Kindthemas gleichzeitig. Leider sind nicht alle Themes mit Blick auf Multitasking kodiert. Um herauszufinden, was genau mit Ihrem eigenen Theme passiert, öffnen Sie den Ordner des Eltern-Themes in Ihrem FTP-Client. Öffnen Sie dann die Datei functions.php und suchen Sie den Aufruf wp_enqueue_style().

    An example functions.php file.An example functions.php file.An example functions.php file.

    Wenn das Theme seinen Stil mit einer Funktion lädt, die mit get_stylesheet beginnt, dann muss Ihr Child-Theme sowohl das Eltern- als auch das Child-Stylesheet laden. Im obigen TwentyTwentyOne-Snippet sehen wir zum Beispiel, dass das Theme get_stylesheet_directory() verwendet, also müssen wir beide Stylesheets laden.

    Beim Schreiben dieses Codes ist es wichtig, dass Sie dasselbe Handle wie das des übergeordneten Themes verwenden. Dieses Handle ist der erste Parameter des Aufrufs wp_enqueue_style(). In unserem Beispiel TwentyTwentyOne sehen wir, dass es sich um twenty-twenty-one style handelt.

    The WordPress wp_enqueue_style() call.The WordPress wp_enqueue_style() call.The WordPress wp_enqueue_style() call.

    Da Sie nun alle diese Informationen haben, wechseln Sie zurück zur Datei functions.php Ihres Child-Themes. Fügen Sie dann Folgendes hinzu, wobei Sie twenty-twenty-one-style durch den Parameter Ihres gewählten Eltern-Themes ersetzen müssen.

    1
    <?php
    
    2
    ...
    
    3
    ....
    
    4
    ...
    
    5
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    
    6
    function my_theme_enqueue_styles() {
    
    7
        wp_enqueue_style( 
    
    8
    		'child-style', 
    
    9
    		get_stylesheet_uri(),
    
    10
    		array( 'twenty-twenty-one-style' ),
    
    11
    		wp_get_theme()->get( 'Version' ) 
    
    12
    	);
    
    13
    }
    
    14
    15
     
    
    16
    }
    

    Wie bereits erwähnt, laden nicht alle Eltern-Themes Stylesheets auf dieselbe Weise. Wenn Ihr Eltern-Theme seinen Stil mit einer Funktion lädt, die mit get_template beginnt, dann müssen Sie nur den untergeordneten Stil laden. Das bedeutet, dass Sie Folgendes in die Datei functions.php Ihres Child-Themes einfügen müssen:

    1
    <?php
    
    2
    ...
    
    3
    ....
    
    4
    ...
    
    5
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    
    6
    function my_theme_enqueue_styles() {
    
    7
        wp_enqueue_style( 'child-style', get_stylesheet_uri(),
    
    8
            array( 'parenthandle' ),
    
    9
            wp_get_theme()->get('Version') 
    
    10
        );
    
    11
    }
    

    Ersetzen Sie wie zuvor parenthandle durch den Parameter Ihres Eltern-Themes.

    Das ist alles, was Sie brauchen, um ein einfaches Child-Theme zu erstellen! Sie können nun mit der Arbeit an diesem Theme fortfahren, um sicherzustellen, dass es dem Design Ihrer vorherigen HTML-Website entspricht.

    Wenn Sie mit dem Ergebnis zufrieden sind, speichern Sie Ihre Änderungen und schließen Sie alle Dateien des Child-Themes. Wechseln Sie dann zu Ihrem WordPress-Dashboard und navigieren Sie zu Design > Themes. Ihr Child-Theme sollte auf Sie warten, und Sie können es wie jedes andere WordPress-Theme aktivieren.

    Wenn dieser Schritt abgeschlossen ist, können Sie damit beginnen, Ihre alte HTML-Seite in Ihre neue WordPress-Website zu kopieren.

    Fazit

    In diesem Beitrag habe ich zwei verschiedene Möglichkeiten vorgestellt, wie Sie eine HTML-Website in ein WordPress-Theme umwandeln können. Wenn Sie mir gefolgt sind, können Sie jetzt Ihre Webseiten über das benutzerfreundliche Dashboard von WordPress erstellen, bearbeiten und löschen, ohne HTML-Code schreiben zu müssen.

    WordPress ist als intuitive und einsteigerfreundliche Plattform konzipiert. Dennoch können Sie von einem Expertenrat profitieren! Schauen Sie sich doch einige unserer WordPress-Tutorials an, um weitere Tipps, Tricks und Best Practices zu erhalten.

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.