Simples Theme erstellen

  • Neuen Ordner im theme-Verzeichnis erstellen  simples-theme 
    Bei lokaler Installation:  C:\xampp\htdocs\wp-workshop\wp-content\themes\simples-theme

  • leere index.php im Ordner simples-theme
  • leere style.css im Ordner simples-theme

 

 

style.css
Zu Beginn einige Informationen als Kommentar. Diese Informationen werden später im Backend angezeigt. 

/*
Theme Name: Simples Theme
Theme URI: http://localhost/wp-workshop/themes/simples-theme
Author: Reiner Neuhoff
Author URI: http://localhost/wp-workshop
Description: Ein simples Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: simples theme
Text Domain: simples-theme

Dieses WordPress-Theme ist unter GPL lizenziert.
*/

Weitere Informationen für die ersten Zeilen einer style.css Datei. 
Mehr Inhalt benötigt die style.css für das einfache Theme nicht

 

 

Theme aus diesen 2 Dateien aufrufen
Design / Themes / Simples Theme

 



Aufruf des Themes
Die als Kommentar eingegebenen Daten werden angezeigt


Frontend
Die Angaben aus der index.php sind jetzt sichtbar, allerdings noch ohne Formatierung

 

 


index.php
Folgenden Inhalt als Grundstruktur



Code style.css

<!DOCTYPE html>
<html>
<head>
<title>
Titel des simplen Themes
</title>
</head>

<body>

<header>
<h1>LOGO</h1>
<p>Zweite Zeile für den Slogan</p>

<nav>
Hier erscheint die Navigation
</nav>
</header>

<main>
<article>
Der Inhalt, die Beiträge
</article>

<aside>
Hier kommt die Sidebar hin
</aside>

</main>

<footer>
<p>
Im Footer steht das Copyright
</p>
</footer>

</body>
</html>

 

 

Theme-Datei header.php

Wenn sich auf jeder Seite Bereiche wiederholen, wie zum Beispiel der <header> und <footer> Bereich,
so werden diese der index.php entnommen und jeweils zwei Datein header.php und footer.php erstellt.
Diese beiden Dateien werden dann aus der index.php aufgerufen.


Der markierte Bereich wird kopiert

 

Code in die neue header.php einfügen