Mulischaf

Ein kleines WordPress-Template

25. April 2021

Photo by Malek Dridi

Ich mag ja Webseiten, wenn sie extrem schlicht und einfach sind. So quasi reduzierter Bauhaus-Stil und ohne Schnickschnack, langen Ladezeiten und Tonnen an Bildern, Javascript und dergleichen, die unnötig Ressourcen verschlingen und sowieso kaum was zum Lesen und Schreiben beitragen. Also habe ich eine ruhige Minute genutzt und mir gefühlt nach Jahren wieder ein WordPress-Template zusammengestoppelt, auch wenn ich merkbar aus der Übung gekommen bin. Man baut ja doch im Alter geistig langsam ab und tut sich immer schwerer mit der heutigen Vielfalt und vermutlich wird jeder Profi bei dem Beitrag hier sich an den Kopf greifen, aber so ist es eben im digitalen Netz… das Leben findet einen Weg.

Das Template

Also schauen wir uns mal dieses kleine Template an, das nur notwendige Funktionen für meinen Alltagsgebrauch abdecken soll: Mulischaf V1.

header.php

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title><?php if(is_front_page() || is_home()){ echo get_bloginfo('name'); } else { echo wp_title('') . " / " . get_bloginfo('name'); }?>
</title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?ver=4">
<?php if ( is_single() ) { ?>
<link href="<?php echo get_template_directory_uri().'/styles/gruvbox-dark.css'; ?>" rel="stylesheet" type="text/css" media="all">
<?php } ?>
</head>
<body>
<header>
<h1><a href="/">Blogtitel</a></h1>
</header>
<nav>
<?php if ( is_active_sidebar( 'sidebar_left' ) ) : ?>
<?php dynamic_sidebar( 'sidebar_left' ); ?>
<?php endif; ?>
</nav>
<main>

Wie man sieht, verzichte ich auf wp_head, was eigentlich gegen die heutigen, modernen Konventionen spricht, aber für dieses Design hier einfach nicht notwendig ist und da ich sowieso auch keine Plugins einbinde. Das erspart eine lange Liste an WordPress-Zusätzen, die hier keinen Sinn machen.

footer.php

</main>
<aside id="news">
<?php if ( is_active_sidebar( 'sidebar_right' ) ) : ?>
<div>
<?php dynamic_sidebar( 'sidebar_right' ); ?>
</div>
<?php endif; ?>
</aside>
<footer>Fußzeile</footer>
</body>
</html>

So wie bei der Header-Datei inkludiere ich die beiden Seitenleisten gleich, da ich hier keine großen Änderungen mehr vornehmen werde. Zudem dienen sie nur zur Einbindung der Standard-Widgets wie dem Menü links und der Kategorie-Liste rechts. Unkompliziert, leicht zu bearbeiten und übersichtlich.

index.php

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_date('','<strong>','</strong>'); ?>
<?php the_excerpt(); ?>
<hr>
<?php endwhile; else : _e( 'Keine Texte vorhanden!', 'textdomain' ); endif; ?>
<?php previous_posts_link( 'Neuere Einträge' ); ?>
<?php next_posts_link( 'Ältere Einträge' ); ?>
<?php get_footer(); ?>

Wie man sieht, ist es eine schlichte Zusammenstellung der einzelnen Standard-Komponenten. Wie das geübte Augen auch sieht, könnte man hier einige Vereinfachungen vornehmen und einzelne Fragmente in einem Code-Segment zusammenfügen, aber ich behalte mir hier die Flexibilität vor, vielleicht die Reihenfolge und dergleichen jederzeit erneut anzupassen. Es ist leichter, hier die Blöcken mal eben zu kopieren und umzuschlichten, wenn sie eigenständig sind. Nachdem ich zudem weiß, was ich hier schreibe und publiziere, muss ich nicht alle Content-Fehler abfangen, wie beispielsweise gibt es denn überhaupt Beiträge und so weiter. Eine kleine, rudimentäre Pagination am Ende rundet die Seite ab.

single.php

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_date('','<strong>','</strong>'); ?>
<?php the_content(); ?>
<?php the_category(' '); ?> / 
<?php $posttags = get_the_tags(); if ($posttags) { $output = array(); foreach($posttags as $tag) $output[] = $tag->name; echo implode(' / ', $output); } endwhile; ?>
<hr>
<?php else : _e( 'Keine Texte vorhanden!', 'textdomain' ); endif; ?>
<?php previous_post_link('%link', '< %title'); ?>
<?php next_post_link('%link', '%title >'); ?>
<?php get_footer(); ?>

Wie man sofort bemerkt, ist der Code recht ident zu index.php, mit dem Unterschied, dass wir hier auch noch zusätzlich neben dem Datum auch noch die Kategorie und Schlagwörter anzeigen. Auf Kommentare verzichte ich vorläufig noch. Außerdem ist eine Blätter-Funktion am Ende, damit man leicht zwischen Beiträgen wechseln kann.

category.php

<?php get_header(); ?>
<p><strong>Kategorie:</strong> <?php single_cat_title(''); ?></p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile; else : _e( 'Keine Texte vorhanden!', '' ); endif;?>
<?php previous_posts_link( 'Neuere Einträge' ); ?>
<?php next_posts_link( 'Ältere Einträge' ); ?>
<?php get_footer(); ?>

Auch diese Datei ist fast ident zur index.php und single.php und ergibt sich schon fast von selbst. Beigefügt wurde nur der kleine Hinweis am Anfang, in welcher Kategorie man sich gerade befindet. Damit haben wir schon fast die gesamte Seite fertig.

page.php

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php the_category(' '); ?>
<?php endwhile; else :_e( 'Keine Texte vorhanden!', 'textdomain' ); endif;?>
<?php printf( __( 'Zuletzt bearbeitet: %s', '' ), get_the_modified_date() ); ?>
<?php get_footer(); ?>

Auch hier erneut… praktisch kein Unterschied zur single.php, nur dass wir hier keine Kategorien oder Schlagwörter benötigen. Das reduziert den Code und würde anbieten, einiges an der Anordnung zu entschlacken oder zusammenzufassen, aber hier zählt für mich ebenso die Flexibilität für eine etwaige Zukunft.

Um das Template auch noch Widget-fähig zu machen, müssen wir sie auch noch aktivieren: functions.php

<?php
function arphabet_widgets_init() {
register_sidebar( array(
'name'          => 'Sidebar right',
'id'            => 'sidebar_right',
'before_widget' => '<div>',
'after_widget'  => '</div>',
'before_title'  => '<h3>',
'after_title'   => '</h3>',
) );
register_sidebar( array(
'name'          => 'Sidebar left',
'id'            => 'sidebar_left',
'before_widget' => '<div>',
'after_widget'  => '</div>',
'before_title'  => '<h3>',
'after_title'   => '</h3>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

Und damit haben wir es geschafft. Nun müssen wir dem Ganzen nur mehr eine visuelle Optik geben. Hier eine simple Version der style.css-Datei.

/*
Theme Name: Mulischaf
Theme URI: https://mulischaf.com
Author: Emanuel Sprosec
Author URI: https://emanuel-s.com
Description: Personal WordPress template
Version: 1.0
*/

/* Variablen-Definiton */
:root {
	--background_topsidebottom: #f1f1f1;
	--background_middle: #FFFFFF;
	--font_color: #333333;
	--link_color: #9a0026;
	--link_hover_color: #084B8A;
	--border_color: #CCCCCC;
}

body {
	display: grid;
	gap: 0.5em;
}

@media (min-width: 45em) {
	body {
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-rows: auto 1fr 100px;
	}
}

header {
	border: 1px solid;
    padding: 2% 3%;
}

nav,
main,
article,
section,
aside,
footer {
	border: 1px solid;
    padding: 2% 7%;
}

header,
footer {
	grid-column: 1 / -1;
}

header {
	background: var(--background_topsidebottom);
	border-color: var(--border_color);
	display: grid;
}

nav {
	background: var(--background_topsidebottom);
	border-color: var(--border_color);
}

main {
	background: #FFF;
	border-color: var(--border_color);
	padding-bottom: 10%;
}

aside {
	background: var(--background_topsidebottom);
	border-color: var(--border_color);
}

footer {
	background: var(--background_topsidebottom);
	border-color: var(--border_color);
}

footer * {
	float: right;
	clear: right;
	margin: 0 0 1em;
}

body {
	margin: 0 auto;
	max-width: 60em;
	color: var(--font_color);
	font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
	font-size: 19px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
	background-color: #e0e0e0;
	word-wrap: break-word;
}

a {
	color: var(--link_color);
	text-decoration: none;}

a:hover {
	color: var(--link_hover_color);}

figure {
	padding: 0px;
	margin: 0px;
}

figure img {
	max-width: 100%;
	height: auto;
}

code {
	word-break: break-all;
	white-space: pre-wrap;
	font-size: 14px;
	line-height: 25px;
	padding: 8%;
	background: var(--background_topsidebottom);
	max-width: 95%;
}

hr {
	border: 0px;
	height: 1px;
	background-color: var(--border_color);
}

Wie man sieht, ist das ein etwas unschönes, zusammengestoppeltes Grid-Layout, das aber recht gut in den Standard-Browsern funktioniert. Über die Anordnung kann man streiten, aber es funktioniert für mich.

Damit ist unser Template für diese Seite mal fertig und wir sind bei 8 Dateien mit gerade mal 5.5 KiloByte gelandet. Was will man mehr? Ein paar Anpassungen am Stylesheet kann oder sollte man noch vornehmen, eventuell füge ich noch die Kommentare bei Gelegenheit hinzu, aber das war es dann. Zusätzliche Ansichten wie Schlagwörter-Filter oder Such-Ergebnisse würden sich leicht durch Adaptionen der category.php erstellen lassen, wenn man sie denn wirklich bräuchte im Alltag.

Keine Perfektion, aber es reicht aus, um mich glücklich zu machen und zudem mag ich den minimalen Auftritt. Fokus auf das Wesentliche einer Webseite… so soll es sein! (Titelbild: Photo by Malek Dridi)

Technik / Template

Eine Antwort zu “Ein kleines WordPress-Template”

  1. emanuel sagt:

    Das ist ein Test-Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

·
Nach oben