Dieser Artikel ist eine lokalisierte Fassung des japanischen Originals. Japanisches Original lesen
Blocksy ist ein kostenloses, funktionsreiches WordPress-Theme. Die meisten Einstellungen nehmen Sie unter „Design“ → „Anpassen“ (Appearance → Customize, dem Customizer) mit Live-Vorschau vor, und Header und Footer lassen sich per Drag & Drop zusammenbauen. Dieser Artikel erklärt in der Reihenfolge der Einstellungen: Installation des Themes und des Hilfs-Plugins „Blocksy Companion“, Farben und Schriften, die Sie zuerst festlegen sollten, den Aufbau des Headers, die Darstellung von Blog-Übersicht und Beitragsseite sowie das Anlegen eines Child-Themes.
Den Aufbau von Blocksy verstehen
Blocksy besteht aus drei Teilen.
- Blocksy (das Theme selbst): Kostenlos von WordPress.org erhältlich. Bietet Design-Einstellungen im Customizer sowie Header- und Footer-Builder
- Blocksy Companion (kostenloses Plugin): Lädt Starter-Sites (Demodaten) und fügt Erweiterungen hinzu
- Blocksy Pro (kostenpflichtig): Ergänzt zusätzliche Header-Elemente, bedingte Anzeige, feinere Layout-Funktionen und mehr
Sinnvoll ist es, zunächst mit der Kombination aus Theme und Companion zu beginnen und Pro erst in Betracht zu ziehen, wenn sich zeigt, dass die kostenlosen Funktionen nicht reichen (Funktionsumfang und Preise können sich ändern; prüfen Sie sie auf der offiziellen Website, Stand Oktober 2026).
Außerdem ist Blocksy eher als klassisches Theme aufgebaut und unterstützt auch den Block-Editor. Die Bedienung unterscheidet sich von Block-Themes, bei denen Sie das Gesamtdesign im Website-Editor („Design“ → „Editor“) zusammenstellen. Merken Sie sich deshalb: „Das Gesamtdesign im Customizer, die Inhalte von Beiträgen und Seiten im Block-Editor.“
Installation und Einrichtung von Companion
- Suchen Sie unter „Design“ → „Themes“ → „Neues Theme hinzufügen“ (Appearance → Themes → Add New Theme) nach „Blocksy“, installieren Sie es und aktivieren Sie es
- Installieren und aktivieren Sie Blocksy Companion über den Hinweis, der nach der Aktivierung erscheint, oder über das Blocksy-Dashboard, das im Admin-Bereich hinzukommt
Mit WP-CLI geht die Installation so.
wp theme install blocksy --activate
wp plugin install blocksy-companion --activateWenn Sie das Theme einer bestehenden Website wechseln, legen Sie vorher eine Sicherung der gesamten Website an. Beim Wechsel des Themes werden Shortcodes, Widgets und die Menüpositionen des bisherigen Themes unter Umständen nicht übernommen.
Entscheiden, ob Sie eine Starter-Site verwenden
Mit Companion können Sie im Blocksy-Dashboard „Starter-Sites“ laden. Fertig gestaltete Seiten, Customizer-Einstellungen und benötigte Plugins werden gemeinsam installiert, sodass Sie bei einer neuen Website schnell eine Vorstellung vom fertigen Ergebnis bekommen.
Bei einer Website mit vorhandenen Beiträgen sollten Sie das Laden aber besser vermeiden. Demo-Seiten, Bilder und Menüs werden hinzugefügt und die Customizer-Einstellungen überschrieben, sodass Sie nicht mehr erkennen, was ursprünglich eingestellt war. Wenn Sie sie verwenden, dann am Anfang einer neuen Website oder zunächst in einer Staging-Umgebung, aus der Sie nur die benötigten Einstellungen nachbauen.
Globale Einstellungen, die Sie zuerst festlegen
Öffnen Sie „Design“ → „Anpassen“, dann sehen Sie die Einstellungspunkte von Blocksy. Die Bezeichnungen sind oft ins Deutsche übersetzt, können sich aber je nach Version unterscheiden. Beginnen Sie mit den folgenden zwei Punkten, die sich auf die gesamte Website auswirken.
Farben (Farbpalette)
In den Farbeinstellungen unter den globalen Einstellungen legen Sie die Palette der Grundfarben der Website fest. Bei Blocksy beziehen sich Textfarbe, Linkfarbe, Buttonfarbe usw. auf die Farben dieser Palette, sodass sich beim Ändern der Palette die Farbgebung der gesamten Website auf einmal umstellt.
Wenn Sie Farben an einzelnen Stellen direkt festlegen, müssen Sie sie bei einer späteren Änderung der Farbgebung einzeln korrigieren. Es lässt sich besser verwalten, die Farben grundsätzlich über die Palette zu bestimmen und nur dort einzeln anzugeben, wo es unbedingt eine andere Farbe sein soll.
Schriften (Typografie)
In den Typografie-Einstellungen legen Sie Schriftart, Schriftgröße und Zeilenabstand für Fließtext und Überschriften fest. Bei einer japanischen Website ist zu beachten, dass eine gewählte lateinische Schrift nicht auf japanische Zeichen angewendet wird. Japanische Textteile werden mit den Schriften auf dem Gerät des Besuchers dargestellt. Belassen Sie die Schrift für den Fließtext daher bei der Voreinstellung wie „Systemschrift“ oder geben Sie eine Schrift an, die Japanisch unterstützt.
Wenn Sie japanische Schriften als Webfonts laden, sind die Dateien groß und können die Anzeigegeschwindigkeit beeinträchtigen. Schränken Sie in diesem Fall die Schriftschnitte ein und prüfen Sie die Auswirkung auf die Ladezeit z. B. mit PageSpeed Insights.
Den Header zusammenbauen
Öffnen Sie im Customizer den Punkt „Header“, dann erscheint unten im Bildschirm der Header-Builder. Der Header ist in eine obere, mittlere und untere Zeile unterteilt. Elemente wie Logo (Website-Titel), Menü, Suche und Buttons ziehen Sie per Drag & Drop nach links, in die Mitte oder nach rechts in der jeweiligen Zeile.
Stolperfalle: Die Header für Desktop und Smartphone werden getrennt eingestellt. Wenn Sie die Ansicht des Builders auf Smartphone umschalten, wird eine andere Anordnung angezeigt. Beim Smartphone besteht der Grundaufbau darin, das Menü in ein „Off-Canvas“ zu legen, das sich über ein Hamburger-Symbol (Trigger) öffnet. Wenn Sie nur den Desktop-Header einrichten und veröffentlichen, kann es passieren, dass auf dem Smartphone kein Menü erscheint. Prüfen Sie deshalb beide Ansichten.
Wenn Sie auf ein Element klicken, werden links dessen Einstellungen (Schriftgröße, Farbe, Abstände usw.) angezeigt. Die Menüeinträge selbst legen Sie unter „Design“ → „Menüs“ (Appearance → Menus) an und weisen sie dem Menü-Element des Headers zu.
Der Footer wird nach demselben Prinzip mit dem Footer-Builder aufgebaut. Wenn Sie die Anordnung von Widget-Bereichen oder Copyright-Hinweis ändern möchten, bearbeiten Sie sie im Punkt „Footer“.
Blog-Übersicht und Beitragsseite darstellen
Der Customizer bietet Einstellungspunkte für jeden Seitentyp, etwa Beitragsübersicht (Blog), einzelne Beiträge und Seiten.
- Beitragsübersicht: Anordnung als Karten oder Liste, Anzahl der Spalten pro Zeile, Seitenverhältnis des Beitragsbilds, Länge des Textauszugs, angezeigte Beitragsinformationen (Veröffentlichungsdatum, Kategorien usw.)
- Einzelne Beiträge: Breite des Inhaltsbereichs, Seitenleiste ja/nein und Position, Darstellung des Titelbereichs, Anzeige verwandter Artikel und Autoreninformationen
- Seiten: Wie bei einzelnen Beiträgen stellen Sie Breite und Seitenleiste ein
Für die Lesbarkeit der Beitragsseite ist vor allem die Breite des Fließtexts entscheidend. Bei langen japanischen Texten wird es schwer lesbar, wenn die Zeile zu lang ist. Stellen Sie daher ohne Seitenleiste die Textbreite eher schmal ein und prüfen Sie, dass die Schrift auch auf dem Smartphone nicht zu klein wird.
Wenn Sie das Layout nur für einen bestimmten Beitrag ändern möchten, können Sie über die Blocksy-Einstellungen in der Seitenleiste des Bearbeitungsbildschirms z. B. die Seitenleiste nur für diesen Beitrag entfernen.
Ein Child-Theme einrichten
Wenn Sie Theme-Dateien direkt bearbeiten, gehen die Änderungen beim Theme-Update verloren. Für ein wenig zusätzliches CSS genügt „Zusätzliches CSS“ im Customizer. Wenn Sie PHP anpassen oder Templates überschreiben müssen, legen Sie ein Child-Theme an.
Auf der offiziellen Blocksy-Website wird eine Vorlage für ein Child-Theme angeboten. Wenn Sie es selbst erstellen, legen Sie unter wp-content/themes/blocksy-child/ die folgende style.css ab,
/*
Theme Name: Blocksy Child
Template: blocksy
*/und laden die Styles des Child-Themes über die functions.php im selben Ordner.
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'blocksy-child-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}, 20 );Wenn Sie zum Child-Theme wechseln, werden die Customizer-Einstellungen getrennt vom übergeordneten Theme gespeichert, sodass die Einstellungen des übergeordneten Themes unter Umständen nicht mehr sichtbar sind. Die Customizer-Einstellungen lassen sich mit Companion über die Export- und Importfunktion übertragen; wenn Sie sie vor dem Wechsel zum Child-Theme exportieren, vermeiden Sie Nacharbeit.
Hinweise zu Updates und Betrieb
Blocksy und Companion werden häufig aktualisiert. Legen Sie vor einem Update eine Sicherung an und prüfen Sie danach Header, Beitragsseite und Smartphone-Ansicht. Wenn die Darstellung kaputt ist, leeren Sie zuerst den Cache von Cache-Plugins und CDN und prüfen dann erneut. Verwenden Sie ein Beschleunigungs-Plugin, das CSS zusammenfasst und komprimiert, kann altes CSS bestehen bleiben und die Darstellung zerstört wirken.
Fazit
- Beginnen Sie mit Blocksy aus Theme und Blocksy Companion und ziehen Sie Pro erst in Betracht, wenn Sie wissen, welche Funktionen fehlen
- Verwenden Sie Starter-Sites bei einer neuen Website oder in einer Staging-Umgebung und achten Sie bei bestehenden Websites auf das Überschreiben von Einstellungen
- Legen Sie Farben über die Farbpalette und Schriften über die Typografie global fest. Beachten Sie, dass lateinische Schriften bei Japanisch nicht wirken
- Der Header-Builder ist für Desktop und Smartphone getrennt. Prüfen Sie beide Ansichten und verwenden Sie ein Child-Theme, wenn Sie PHP anfassen
Fragen zu WordPress? Der Betreiber dieser Seite sitzt in Japan und antwortet auf Japanisch. Kontakt (Japanisch)