Christian, sehr gern — hier kommt jetzt die eine, vollständige, universelle HTML Vorlage, die du für alle Artikel deiner gesamten Website verwenden kannst.
Sie ist:
- absolut sauber
- frei von versteckten Formatierungen
- global per CSS steuerbar
- semantisch korrekt
- perfekt für theologische, seelsorgerliche und essayistische Texte
- update sicher und zukunftsfähig
Du kannst sie eins zu eins in WordPress einfügen und für jeden Artikel wiederverwenden.
⭐ UNIVERSAL HTML VORLAGE FÜR ALLE ARTIKEL
<article class="entry-content"><!-- TITEL --><h1>Artikelüberschrift</h1><!-- EINLEITUNG --><p>Ein einleitender Absatz, der das Thema kurz beschreibt und den Leser abholt.</p><!-- HAUPTABSCHNITT 1 --><h2>Abschnittsüberschrift</h2><p>Erster Absatz des Abschnitts. Klarer Fließtext ohne Inline-Formatierungen.</p><p>Zweiter Absatz des Abschnitts. Ruhige, saubere Struktur.</p><!-- UNTERABSCHNITT (optional) --><h3>Unterüberschrift</h3><p>Absatztext für Unterthemen oder Detailerklärungen.</p><!-- LISTEN --><h2>Liste oder Aufzählung</h2><ol><li>Erster Listenpunkt</li><li>Zweiter Listenpunkt</li><li>Dritter Listenpunkt</li></ol><ul><li>Ungeordneter Punkt A</li><li>Ungeordneter Punkt B</li></ul><!-- BIBELSTELLEN --><p>Ein Beispiel mit Bibelstelle im Fließtext (2Kor 3,6b) ohne zusätzliche Tags.</p><!-- HERVORHEBUNGEN --><p>Ein <strong>wichtiger Gedanke</strong> oder eine <em>sanfte Betonung</em>.</p><!-- ZITAT --><blockquote><p>„Ein Zitat, das hervorgehoben werden soll.“</p></blockquote><!-- TRENNER (optional) --><hr><!-- ABSCHLUSSABSATZ --><p>Ein abschließender Gedanke oder eine Zusammenfassung.</p></article>
⭐ Warum diese Vorlage perfekt ist
Weil sie:
- keine Inline Stile enthält
- keine Word oder Mail Reste enthält
- keine
<span>oder<font>Tags enthält - nur semantische HTML Elemente nutzt
- vollständig global steuerbar ist
Damit kannst du später mit einer einzigen CSS Regel ALLES steuern:
.entry-content {font-size: 1rem;line-height: 1.6;font-family: system-ui, sans-serif;}
Und es wirkt auf jeden Artikel, ohne Ausnahme.
⭐ Wenn du möchtest, mache ich dir jetzt auch:
- eine WordPress Blockvorlage, die du speichern kannst
- eine Checkliste, wie du bestehende Artikel in 2 Minuten bereinigst
- oder ich bereinige deinen Bibelbrillen Artikel komplett für dich
Die HTML‑Grundstruktur „bibelbrillen“ (deine Original‑Version)
Das war das Muster, das wir gemeinsam entwickelt haben:
<article class="bb-article">
<header class="bb-header">
<h1 class="bb-title">Titel des Artikels</h1>
<p class="bb-subtitle">Optionaler Untertitel</p>
</header>
<section class="bb-section" id="einleitung">
<h2 class="bb-h2">Einleitung</h2>
<p>…</p>
</section>
<section class="bb-section" id="abschnitt-1">
<h2 class="bb-h2">Abschnitt 1</h2>
<p>…</p>
</section>
<section class="bb-section" id="abschnitt-2">
<h2 class="bb-h2">Abschnitt 2</h2>
<p>…</p>
</section>
<footer class="bb-footer">
<p><a href="#anfang">Zum Anfang</a></p>
</footer>
</article>
Kennzeichen dieser Struktur:
- bb‑article = globaler Container
- bb-header = Titelbereich
- bb-section = jeder Abschnitt sauber getrennt
- bb-h2 = einheitliche Überschriften
- keine Inline‑Styles
- keine unnötigen Elemente
- perfekt für globale CSS‑Regeln
der code des artikels
Du meinst: Wie kommen die Klassen wie article-intro, chapter-divider, article-outro usw. in dein WordPress‑PHP‑Template, sodass der Editor nur noch sauberen Inhalt schreibt und das Theme automatisch die richtige Struktur ausgibt.
Ich zeige dir die drei gängigen Wege, je nachdem, wie du arbeitest.
🧱 1. Klassen direkt im Template (PHP) eintragen
Das ist der sauberste und zuverlässigste Weg.
Beispiel: single.php oder ein eigenes Template wie single-bibelbrillen.php:
<article <?php post_class(); ?>>
<header>
<h1><?php the_title(); ?></h1>
<p class=“article-meta“>
<time datetime=“<?php echo get_the_date(‚c‘); ?>“>
<?php echo get_the_date(); ?>
</time>
</p>
</header>
<section class=“article-intro“>
<?php echo apply_filters(‚the_content‘, get_post_meta(get_the_ID(), ‚intro‘, true)); ?>
</section>
<hr class=“chapter-divider“ />
<section>
<?php the_content(); ?>
</section>
</article>
Hier werden die Klassen fest im Template gesetzt. Der Redakteur muss nichts tun – alles ist strukturell sauber.
🧱 2. Klassen über post_class() ergänzen
function christian_article_classes($classes) {
if (is_singular(‚post‘)) {
$classes[] = ‚article‘;
$classes[] = ‚bibelbrillen-article‘;
}
return $classes;
}
add_filter(‚post_class‘, ‚christian_article_classes‘);
WordPress hat eine eingebaute Funktion, um Klassen zu erweitern:
Dann im Template:
<article <?php post_class(); ?>>
WordPress fügt automatisch deine Klassen hinzu.
🧱 3. Klassen automatisch um bestimmte HTML‑Elemente legen
Wenn du möchtest, dass WordPress automatisch bestimmte Klassen in den Content einfügt (z. B. für <hr> oder <h2>), kannst du einen Filter verwenden:
Beispiel: <hr> automatisch zu <hr class="chapter-divider"> machen
function christian_hr_to_chapter_divider($content) {
return str_replace(‚<hr />‘, ‚<hr class=“chapter-divider“ />‘, $content);
}
add_filter(‚the_content‘, ‚christian_hr_to_chapter_divider‘);
Oder für <h2>:
function christian_add_h2_classes($content) {
$content = preg_replace(
‚/<h2(.*?)>/‘,
‚<h2 class=“chapter-title“$1>‘,
$content
);
return $content;
}
add_filter(‚the_content‘, ‚christian_add_h2_classes‘);
Damit bleibt der Editor komplett frei von Klassen, aber das Frontend bekommt die Struktur, die du brauchst.
🎯 Welche Methode ist für dich ideal?
Da du ein universales, semantisches System aufbaust, empfehle ich:
🔥 Kombination aus:
- Template‑Klassen für die großen Container (
article-intro,article-outro,chapter-divider) - Filter für automatische Klassen an H‑Tags und HR
Damit bleibt dein HTML minimal, sauber, reproduzierbar – genau so, wie du es für deine zentrale CSS‑Steuerung brauchst.
Wenn du willst, kann ich dir jetzt:
✅ ein fertiges single-bibelbrillen.php bauen oder ✅ ein globales single.php, das für ALLE Artikel die Universal‑Struktur ausgibt
Sag mir einfach, welchen Weg du gehen möchtest.