WordPress: Eigenes Theme erstellen

In diesem Beitrag wird erklärt, wie du dein eigenes WordPress-Theme erstellen kannst. Dafür gibt es einige Voraussetzungen:

  • Grundkenntnisse in der Auszeichnungssprache HTML/XHTML, in der Stylesheetsprache CSS und in der Skriptsprache PHP.
  • WordPress sollte entweder auf einen Server oder auf einer lokalen Laufzeitumgebung (z.B. Xampp) installiert werden.

Nach Erfüllung dieser Bedingungen, sind folgende Schritte auszuführen:

 

1. Erstelle ein HTML-Template

Dieses Template stellt das Grundgerüst des Themes dar. Speichere diese Datei als index.html und sie wird bei Eingabe deiner Website-Adresse im Browser zuerst geöffnet.

<!DOCTYPE html>
<html>
<head>
  <meta charset =“utf-8″ />
  <title> Grundgeruest einer HTML-Seite </title>
</head>
<body>
  <div class=“header“>
  </div>
  <div class=“Navi“>
  </div>
  <div class=“sidebar“>
  </div>
  <div class=“content“>
  </div>
  <div class=“footer“>
  </div>
</body>
</html>

Nur die Bereiche innerhalb der <body> Tags wirst du später im Web sehen. Diese Bereiche solltest du mit Klassenname kennzeichnen, um ihnen später in der CSS-Datei eindeutige Stile zuzuweisen. Zudem lege alle Bestandteile deines Themes in Div-Containern ab.

 

2. Erstelle die CSS-Datei für das Design

Hier werden die Designregeln für Layout festgelegt: Höhe, Farbe, Breite, Position, usw.

.header {
   background-color: rgb( 245, 220, 192 );
   position: absolute;
   left: -7px;
   top: 0px;
   width: 1031px;
   height: 131px;
   z-index: 11;
}

Damit die Style.css-Datei in deinem Theme-Manager in WordPress angezeigt wird, füge folgenden Beispiel-Code ganz oben in dieser Datei ein (Ändere den Theme-Namen und Autor in deinen eigenen Vorgaben um):

/*
Theme Name: Eigenes
Theme URI: https://wordpress.eigenes.de
Description: Eigenes Template
Author: Christian Djombissi Wameni
Author URI: https://kleewald.eu
*/

Speichere die Datei als style.css. Für die Verlinkung füge folgenden Eintrag innerhalb der beiden <head>-Tags in der index.html Datei ein:

<link rel=“stylesheet“ href=“style.css“ type=“text/css“ media=“screen“ />

Den Wert hinter „href=“ musst du entsprechend anpassen.

 

3. Lege die Templates für das Basis-Theme an

Ein WordPress-Theme besteht aus einer Reihe von Templates mit unterschiedlichen Funktionen in der Skriptsprache PHP. Die Dateien index.php und style.css bilden die Basis. Daneben existiert noch eine Reihe weiterer Dateien, die für die umfangreichen Funktionen notwendig sind. Schaue dir am besten einmal die bereits vorhandenen Themes deiner WordPress-Installation und deren Aufbaustruktur an.

Aus den einzelnen Bereichen der bereits vorhandenen HTML-Datei erstelle nun eine index.php, eine header.php, eine sidebar.php und eine footer.php. Baue jede PHP-Datei auf der Basis des HTML-Grundgerüstes auf, jedoch mit .php-Dateiende. Damit deine Website beim Aufruf alle Elemente anzeigt, binde diese durch Template Tags in die index.php ein.

<?php get_header(); ?>
<div class=“content“>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Um später einzelne Artikel eines Blogs anzuzeigen, baue eine Loop ein. Für die Ausgaben der WordPress-Seiten oder einzelner Blog-Artikel lege eine page.php und eine single.php an.

get_header(); ?>

<div id="primary" class="site-content">
    <div id="content" role="main">
        <?php if ( have_posts() ) : ?>
        <?php
        
        // Start the loop.
        while ( have_posts() ) : the_post();

            // Include the page content template.
            get_template_part( 'content', get_post_format() );

            // End of the loop.
        endwhile;
        ?>
        <?php twentytwelve_content_nav('nav-below'); ?>
        <?php else: ?>

Der WordPress-Loop am Beispiel des Themes TwentyTwelve.

Die index.php kann später als Vorlage für viele andere Dateien verwendet werden. Danach folgen die header.php, die sidebar.php und die footer.php. Schreibe in die header.php innerhalb der <head>-Tags wichtige Metadaten sowie die Verknüpfung zu deiner style.css hinein. Außerdem enthält sie in der Regel die Hauptnavigation, ein Headerbild und/oder eine Überschrift. Die footer.php kann beispielsweise eine Subnavigation, Links zu anderen Websites, dem Impressum  enthalten.

 

Hinterlasse einen Kommentar

Benachrichtige mich zu:
avatar
wpDiscuz