✅ Wordpress Template erstellen

WordPress Template erstellen

1. Template.zip

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.

1.1 Dateien vorbereiten

Fangen wir mit den wichtigsten Dateien an, damit ein Theme überhaupt als solches erkannt wird:

style.css
index.php

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.

Screenshot

Für ein Vorschaubild im Backend einfach eine Datei erstellen und diese in screenshot.png umbenennen und in den Template Ordner kopieren. Die Optimale Größe ist 1200×900 Pixel.

style.css

/*
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!

index.php

<h1>Hallo Welt, dies ist mein erstes Template!</h1>

1.2 Inhalt ausgeben – der Loop

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(); 
?>

2.) Template Dateien erstellen

Im nächsten Schritt kümmern wir uns unter anderem um die oben eingebundenen Header und Footer.
Dazu erstellen wir einfach folgende Dateien in unserem Template Ordner:
– header.php
– footer.php

header.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>

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.php

			<!-- 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.

Eine vollständige Liste mit alles Template Tags, die eingefügt werden können findest du hier!