Ich schwöre, wer einmal angefangen hat, seinen Blog optisch aufzuhübschen, hört nie wieder auf. Es ist wie beim Umräumen im Wohnzimmer: Erst willst du nur das Sofa verrücken, am Ende streichst du die ganze Wand. Heute geht’s genau darum – um schicke Beitragsraster und Karussells in WordPress, ganz ohne Plugin, dafür mit ein bisschen Köpfchen und Code-Zauber. Und ja, es klingt wilder, als es ist. Ich zeig dir, wie’s läuft.
Warum ich keine Plugins mehr für jeden Kleinkram nutze
Ich hab irgendwann gemerkt, dass Plugins wie Chips sind. Du installierst eines, denkst dir „nur dieses eine“, und plötzlich hast du 45 davon. Nicht gut für die Performance, nicht gut für die Übersicht. Manche machen Dinge, die du mit ein paar Zeilen Code selbst schöner hinbekommst. Ein sauberes Beitragsraster oder ein Karussell gehört dazu.
Und bevor du denkst, das braucht Raketenwissenschaft, atme durch. Wir machen das Schritt für Schritt. Kein unnötiges Gefummel, nur das Nötige plus ein bisschen Style. Wenn du dich generell für Performance und Struktur interessierst, lies dir auch A/B Tests ohne Kopfschmerzen: So knackst du endlich deine Conversion Rate durch – das ergänzt das Thema perfekt.
Schritt 1: Das Ziel im Kopf behalten
Ein Beitragsraster ist im Grunde nur eine hübsch angeordnete Darstellung deiner Beiträge, meist mit Bild, Titel, vielleicht Auszug. Ein Karussell ist das Gleiche in Bewegung. Beides sorgt für Struktur und zieht Blicke. Ich will, dass du danach frei bist: keine Abhängigkeit von einem Plugin, das dich bei jedem Update nervös macht.
Ich erinnere mich an den Tag, als ein Carousel-Plugin bei mir das komplette Layout zerschossen hat. Danach war Schluss mit „mal schnell was testen“. Ich wollte verstehen, wie ich die Kontrolle behalte. Spoiler: Einmal gelernt, willst du nie wieder anders arbeiten.
Schritt 2: Das Beitragsraster im Template anlegen
Wenn du ein Theme mit einem Child-Theme nutzt (und das solltest du), leg im Child-Theme-Ordner eine neue Datei an. Zum Beispiel content-post-grid.php. Hier baust du die Logik.
Ich ziehe mir meist die neuesten Beiträge so rein:
- Öffne
functions.phpund registriere deinen neuen Template-Part. - Baue in
content-post-grid.phpdeine Schleife mitWP_Query. - Füge deine HTML-Struktur ein, z. B. ein Container-Div mit
class="post-grid".
Das Ganze könnte dann so aussehen (in Kurzfassung):
<div class="post-grid">
<?php
$args = array( 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="post-item">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
Damit hast du dein Grundgerüst. Sieht noch nach Baustelle aus, wird aber gleich hübsch. Versprochen.
Schritt 3: Styling mit CSS
Jetzt kommt der spaßige Teil, wo du siehst, wie aus Code tatsächlich Design wird. Öffne deine style.css und füge Folgendes hinzu:
.post-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 40px 0;
}
.post-item img {
width: 100%;
border-radius: 6px;
transition: transform 0.3s ease;
}
.post-item:hover img {
transform: scale(1.05);
}
Ein einfacher Trick mit großer Wirkung. Ich liebe solche kleinen CSS-Momente, bei denen man kurz denkt, man hätte Zauberhände. Wenn dir das Thema Barrierefreiheit dabei wichtig ist, lies auch WCAG in WordPress und Elementor meistern – mein ehrlicher Praxisguide, damit dein Design nicht nur schön, sondern auch zugänglich bleibt.
Schritt 4: Dein Grid in eine Template-Datei einfügen
Ruf dein neues Grid da auf, wo du es willst – im Blog-Archiv, auf der Startseite oder einer Sonderseite. Zum Beispiel in page-home.php:
<?php get_template_part('content', 'post-grid'); ?>Das war’s. Wenn du jetzt deine Seite lädst, siehst du deine Beiträge ordentlich sortiert, wie Soldaten in schicken Uniformen. Nur mit mehr Persönlichkeit.
Schritt 5: Ein einfaches Karussell basteln
Ein Karussell ohne Plugin klingt zuerst wie ein kleiner Albtraum, ist in Wahrheit aber einfacher, als du denkst. Ähnlich wie das Raster, nur mit zusätzlichem JavaScript. Ich hab damals mit einer Handvoll Zeilen angefangen und plötzlich war das Ding smooth wie Butter.
Lege eine Datei content-carousel.php an und baue wieder eine WP_Query-Schleife. Der Unterschied: Du gibst den Container mit einer spezifischen Klasse aus, die du später mit JavaScript ansprichst.
<div class="carousel-container">
<?php
$args = array( 'posts_per_page' => 5 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="carousel-item">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a>
<h3><?php the_title(); ?></h3>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
Speichere das, dann ziehen wir JavaScript nach.
Schritt 6: Bewegung reinbringen mit JavaScript
Ich nutze am liebsten ein bisschen Vanilla JS. Dafür legst du in deinem Theme-Ordner eine neue Datei an, zum Beispiel carousel.js. Füge Folgendes hinzu:
const container = document.querySelector('.carousel-container');
let scrollAmount = 0;
setInterval(() => {
if (container) {
container.scrollBy({ left: 300, behavior: 'smooth' });
scrollAmount += 300;
if (scrollAmount >= container.scrollWidth - container.clientWidth) {
scrollAmount = 0;
container.scrollTo({ left: 0, behavior: 'smooth' });
}
}
}, 3000);
Dann noch fix in die functions.php einfügen:
function custom_scripts() {
wp_enqueue_script('carousel-js', get_stylesheet_directory_uri() . '/carousel.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');
Das Ergebnis: Deine Beiträge gleiten von rechts nach links, ganz smooth. Und du? Du bekommst dieses kleine Entwickler-Grinsen, das man sonst selten sieht. Glaub mir, das lohnt sich.
Schritt 7: Mobile Anpassung
Ich bin ein Fan davon, alles auf dem Handy zu prüfen. Viele vergessen das. Ein Raster, das auf dem Desktop schön ist, kann auf dem Handy aussehen wie ein umgekippter Kartenstapel. Teste also immer auf mehreren Geräten.
Pack noch ein paar Zeilen Media Queries in dein CSS:
@media (max-width: 600px) {
.post-grid {
grid-template-columns: 1fr;
}
}
Das rettet dir oft den Tag. Und deinen Lesern den Augenkomfort.
Schritt 8: Performance prüfen
Das Schöne ohne Plugin: Dein Code bleibt schlank. Keine unnötigen Libs, keine Abhängigkeiten. Ladezeiten? Kürzer. Kontrolle? Vollständig.
Für mich war das ein Befreiungsschlag. Ich will selbst wissen, was in meiner Seite steckt. Keine schwarzen Boxen mehr, die heimlich Code laden. Ich hab’s gern sauber – fast schon meditativ. Wenn du darüber hinaus deine Dienstleistungen professioneller strukturieren möchtest, lies Service-Pakete bauen, die jeden Monat Geld bringen.
Schritt 9: Extras, wenn du magst
Wenn du willst, kannst du Pagination oder Hover-Effekte hinzufügen. Oder einen kleinen CTA im Carousel. Hauptsache, es bleibt deins. Individualität ist sowieso das halbe Branding.
Und da wir über Webauftritte reden, schau dir ruhig mal neu-protec an. Die Jungs machen genau das, was ich meine: durchdacht, funktional, aber mit Charakter. Kein unnötiger Schnickschnack, alles sitzt.
Schritt 10: Spaß an der Sache behalten
Ich sag’s ehrlich, der Reiz liegt nicht nur im Ergebnis. Es ist das Tüfteln, das Basteln, das Scheitern und dann doch wieder Laufenlernen. Die ersten Male wird’s sicher nicht perfekt. Aber du lernst, worauf’s ankommt. Und das ist mehr wert als jedes gekaufte Plugin.
Ich erinnere mich, wie ich beim ersten Versuch mein gesamtes Grid zertrümmert hab, weil ein Div zu viel offen war. Lächeln, Kopf schütteln, neu laden. Wenn du das kennst, weißt du, dass du auf dem richtigen Weg bist.
Fazit
Wenn du deine eigenen Beitragsraster und Karussells baust, lernst du nicht nur, wie WordPress tickt. Du schaffst dir echte Freiheit. Und das Beste: Du brauchst kein einziges Plugin dafür.
Das Ergebnis spricht für sich. Deine Seite sieht professioneller aus, lädt schneller und du weißt, was im Hintergrund passiert. Genau so soll’s sein.
Also, Code an, Musik an, Kaffee daneben und los. Es gibt nichts Befriedigenderes, als zu sagen: Das hab ich selbst gebaut. Und wenn du einmal damit angefangen hast, lässt dich der Stolz nicht mehr los.
