Hier zeige ich euch, wie ihr euer eigenes WordPress Template von der ersten Datei, bis hin zum fertigen Template erstellt.
1.) Template.zip erstellen
2.) Template Dateien erstellen
Je nachdem, wie weit man bereits mit seinem Design ist, kann es durchaus praktisch sein, gleich am Anfang seine fertige Zip-Datei zu erstellen, die man gleich in WordPress hochladen und installieren kann.
Fangen wir mit den wichtigsten Dateien an, damit ein Theme überhaupt als solches erkannt wird:
Im großen und ganzen reichen diese 2 Dateien eigentlich auch schon, um ein funktionierendes Template zu erstellen. Fangen wir gleich damit an, wir werden Schritt für Schritt unser Template erweitern – alles der Reihe nach, nur Geduld.
/*
Theme Name: Unser erstes Template
Theme URI: https://mein-the.me
Author: Snik von 9PX
Author URI: https://9px.eu
Description: Dies ist mein allererstes WordPress Template
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erstestemplate
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready
*/Fügen wir diese Zeilen in unsere style.css Datei ein, erkennt WordPress unser Template als solches. Mehr ist eigentlich auch noch nicht nötig!
<h1>Hallo Welt, dies ist mein erstes Template!</h1>Es gibt nun 2 Möglichkeiten, unser Template in WordPress zu installieren. Nummer 1, wir kopieren unsere Dateien manuell in einen neuen Unterordner unter wordpress/wp-content/themes/demotheme, oder wir packen unsere style.css und index.php in einen Ordner, erstellen daraus eine .zip-Datei, und können diese in unserem Wordpress-Backend unter Design -> Hinzufügen -> Theme hochladen automatisch installieren.
Unter “Live-Vorschau” können wir unser Template das erste mal bewundern. Nun gut, allzu viel können wir noch nicht sehen, nur statischen Text.
Für die kurze Zeit, die wir bis jetzt gebraucht haben, sind wir jedoch schon einen riesigen Schritt weiter.
Inhalt, wie Beiträge, Seiten und Anhänge, werden in WordPress mit Hilfe des Loops ausgegeben.
Anbei der Code für eine simple Ausgabe von Inhalt. Diesen einfach in die index.php statt dem vorherigen Code packen, abspeichern und testen!
<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>Und TADAAAA! – Wir haben unser funktionierendes Template. Nicht gerade hübsch. Aber es funktioniert!
Im nächsten Schritt kümmern wir uns unter anderem um die oben eingebundenen Header, Footer und Sidebar Dateien.
Dazu erstellen wir einfach folgende Dateien in unserem Template Ordner:
– header.php
– footer.php
– sidebar.php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php if ( is_singular() && pings_open() ) { ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php }
wp_head(); ?>
</head>In der Header Datei werden alle wichtigen Meta-Attribute wie Titel, Sprache, Zeichensatz oder Skalierung angegeben.
Aber auch die Verlinkungen der CSS und JavaScript Dateien.
Wir erstellen eine eigene Header-Datei, damit wir diese Daten nur einmal angeben müssen, und nicht bei jeder Template-Datei die selben Zeilen einfügen müssen.
Wichtig ist außerdem die wp_head(); Funktion, damit alle WordPress Module einwandfrei geladen und aufgerufen werden können.
Solltest du dein Theme mit einem Framework wie z.B.: Bootstrap oder UIKit aufbauen wollen, kannst du die nötigen Dateien gleich hier bzw. im Footer miteinbauen.
Natürlich kann auch hier Bespielsweise das Menü eingefügt werden, will man dieses auf allen Seiten gleich darstellen.
<!-- footer -->
<footer class="footer" role="contentinfo">
<!-- copyright -->
<p class="copyright">
© <?php echo date('Y'); ?> Copyright <?php bloginfo('name'); ?>
</p>
<!-- /copyright -->
</footer>
<!-- /footer -->
<?php wp_footer(); ?>
</body>
</html>Im Footer hinterlegen wir, wie der Name schon sagt, alle Elemente die wir am Ende angeben bzw. einbinden wollen.
Dies ist der Footer selbst, aber auch JavaScript-Einbindungen.
Wichtig ist außerdem die WordPress Funktion: wp_footer(); – ähnlich wie auch bereits die wp_head(); im Header.
Willst du auf deiner Webseite eine Sidebar nutzen, musst du natürlich auch die sidebar.php erstellen.
Hier einfach alles einfügen, das Angezeigt werden soll. Dies kann nur ein statischer Text über dich oder deine Seite sein, oder auch dynamischer Inhalt wie die neuesten Beiträge etc.
Anbei ein kurzes Beispiel:
<h3>Über mich</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<h3>Kategorien</h3>
<ul>
<?php wp_list_categories('orderby=name&order=ASC&title_li='); ?>
</ul>
<h3>Archiv</h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h3>Blogroll</h3>
<ul>
<?php wp_list_bookmarks(); ?>
</ul>Eine vollständige Liste mit alles Template Tags, die eingefügt werden können findest du hier!