Circles - mein Block Theme für WordPress

Block Theme Circles WP – Entwicklung und Anpassung

Autor:

Kategorien: , , ,
Beitragsdatum: 14.11.2024 | Letztes Update: 03.12.2024

Entwicklung und Anpassungsmöglichkeiten bei Circles WP

Vor ca. 8 Wochen habe ich die Entwicklung des Block Themes gestartet. Auslöser war die Idee, bei den Templates eine Hintergrundgrafik zu verwenden. Hier auf haurand.com seht ihr das Ergebnis – denn wir haben den Relaunch von GeneratePress auf Circles WP schon erledigt. So viel kann ich sagen: Es hat riesig viel Spaß gemacht und ich habe wieder viel dabei gelernt. Das Theme wurde bereits im WordPress Repository veröffentlicht und kann kostenfrei runtergeladen werden.

Click here for the English version of this post.

Das Theme ist leichtgewichtig und dadurch enorm schnell. Circles WP ist so weit auch bereits für eine barrierefreie Website vorbereitet (accessibility-ready). Verwendet wird als Standard die Schriftart Lexend – eine barrierefreie Schriftart. Alternativ steht auch die Schrift Atkinson Hyperlegible Font – Braille Institute (ebenfalls barrierefrei) oder „System Font“ zur Verfügung. Circles WP ist bewusst ohne irgendwelches zusätzliches CSS entwickelt worden, d. h. ich verwende ausschließlich die Einstellungen des Block Editors.

Test des Themes Circles WP

Auf der folgenden Test-Website siehst du das Circles WP mit dem Standard-Style und ohne irgendwelche Anpassungen.

Hier die Darstellung mit den verschiedenden Styles:

Wenn du das Theme selbst testen möchtest, ohne dass du dazu eine eigene Website erstellst, bietet sich Playground an. Hier der Link zu einem Blueprint mit Playground, das dann auch die Testdaten enthält, die man oben sieht.

Circles WP: Accessiblity Ready (Barrierefreiheit) – Erweiterungen

Leider hätte die Veröffentlichung noch Wochen, wenn nicht Monate gedauert bis das Theme auf das Schlagwort (tag) „accessibility-ready“ geprüft worden wäre. Aus dem Grund habe ich mich nach Rücksprache mit dem Reviewer des Theme-Teams entschlossen, das Tag „accessibility-ready“ zunächst zu entfernen. Dieses Tag sorgt dafür, dass man im WordPress Reporitory nach barrierefreien Themes filtern kann.

Denkbar sind natürlich zusätzliche Dinge wie z. B.

Circles WP enthält 10 Stile (Styles) mit verschiedenen Farbmustern und sollte weitestgehend barrierefrei sein.

Das Plugin Theme Check meldet nur zwei Warnungen, die aber vernachlässigt werden können. Die Theme Unit Tests wurden ebenfalls durchlaufen.

Weitere Infos in englischer Sprache

Weitere Infos zu dem Theme findet ihr auf der folgenden Seite. In diesem Beitrag hier werden in erster Linie Hinweise zur Anpassung des Themes veröffentlicht.

Achtung-Symbol

Achtung

Haftungsausschluss:

Das bereitgestellte Block Theme Circles WP wird ohne jegliche ausdrückliche oder implizierte Gewährleistung zur Verfügung gestellt. Wir übernehmen keine Haftung für Schäden oder Probleme, die durch die Nutzung des Themes entstehen. Die Verwendung des Themes erfolgt auf eigene Gefahr. Es wird keine Garantie für die Funktionalität, Sicherheit oder Kompatibilität mit anderen Plugins oder Themes übernommen. Vor der Installation und Nutzung wird empfohlen, eine Sicherung der Website durchzuführen. Das Theme kann kostenfrei aus dem WordPress Repository runtergeladen werden.
Übrigens muss ein WordPress Theme wie Circles WP erst ein Review (Überprüfung, also eine Art Qualitätsprüfung) „überstehen“, um im WordPress Repository gelistet zu werden. Das ist bei vielen anderen Portalen mit WordPress Themes nicht der Fall.

Anpassungen des Themes

Bitte vor allen nachfolgend genannten Änderungen unbedingt eine Sicherung erstellen. Sinnvoll ist in dem Fall auch die Erstellung eines Child Themes z. B. mit dem Plugin „Create Block Theme„, weil ansonsten die folgenden Änderungen z. B. bei einem Update des Themes verloren gehen.

Child Theme mit dem Plugin Create Block Theme

Info-Symbol

Info

Die Hintergrundgrafik ist bei den Stilen (styles) schon so eingerichtet, dass in den meisten Fällen das beste Ergebnis für alle Stile hinsichtlich Barrierefreiheit erreicht wird. Wenn man beispielsweise den grauen Kreis verwendet, wird das bei einigen Stilen (z. B. den hellen Stilen) nicht passen, weil die Schriftfarbe (dunkel) auf der grauen Hintergrundfarbe sehr schlecht zu sehen ist. Das sollte man also auf jeden Fall im voraus bedenken. Daher die vorherige Sicherung.

Dazu installiert man zunächst das Plugin „Create Block Theme„. Danach kann man über Design > Website-Editor ein Child Theme erstellen.

Wie das funktioniert, zeige ich in dem folgenden kurzen Video:

Ein Child Theme zu Circles erstellen
Ein Child Theme zu Circles WP erstellen

Bei der Erstellung des Child Themes kann man – falls gewünscht – auch noch die Metadaten zum Theme angeben: „Additional Theme MetaData“. Die Option befindet sich unter dem Feld, in dem man den Namen des Themes eingibt.
Empfehlung: Vorher aber nicht auf „Save Changes to theme“ (oben in dem Menü, das erscheint, wenn man auf den „Schraubenschlüssel“ klickt) klicken.

Höhe des Circles ändern

Wenn dir die Höhe des Circles im Template (100vh)zu hoch ist, dann kannst du einfach über Design > Website-Editor bei dem entsprechenden Template an der gekennzeichneten Stelle die Höhe ändern z. B. auf 50vh:

Änderung der Höhe des Circles
Änderung der Höhe des Circles

Hintergrundgrafik über den Code-Editor ändern

Wenn man die Hintergrundgrafik (circle_light_orange.svg) durch eine andere Hintergrundgrafik ersetzen möchte, kann man das aktuell im jeweiligen Template nur über den Code-Editor ändern.

Möglich sind die folgenden „eingebauten“ Grafiken:

  • circle_light_yellow.svg
  • circle_light_orange.svg
  • circle_blue.svg
  • circle_light_blue.svg
  • circle_green.svg
  • circle_red.svg
  • circle_white.svg
  • circle_grey.svg
  • circle_very_light_grey.svg
  • circle_very_dark_grey.svg

Zum Screenshot 1: In der Listenansicht (1) befindet sich die Grafik in der eingebundenen Gruppe (2). Rechts in den Eigenschaften des Gruppen-Blocks sieht man das Hintergrundbild circle_light_orange.

Wenn man nur die Position ändern möchte, dann kann man das an der Stelle machen.

Zum Screenshot 2: Wenn die Grafik ersetzt werden soll, dann muss man den Code-Editor über das Kebap-Menü (drei Punkte senkrecht) öffnen (1). Anschließend klickt man auf den Link zum Code-Editor.

Screenshot 1: Die Grafik im Gruppen-Block bei Circles
Screenshot 1: Die Grafik im Gruppen-Block
Screenshot 2: Der Code-Editor wird geöffnet
Screenshot 2: Der Code-Editor wird geöffnet

In dem folgenden kurzen Video zeige ich, wie man bei dem Template für die Einzelbeiträge den orangen Kreis (Circle) durch einen hellblauen Kreis ersetzt. Durch die Einstellungen für die Transparenz wirkt der Kreis bedingt durch die Hintergrundfarbe (in dem Fall fast schwarz) eher braun als orange. Bei anderen Styles (z. B. bei grünem Hintergrund) ergibt sich ein anderer Farbton für den Kreis.

Angenommen, der orange Kreis soll durch einen hellblauen Kreis ersetzt werden. In dem Fall wirkt das hellblau eher wie ein grau. Hier zeige ich, wie man im Code-Editor die SVG-Grafik ersetzt:

Template für single Posts bei Circles WP: Ersetzen der SVG-Grafik mit dem orangen Kreis durch den hellblauen Kreis
Ersetzen der SVG-Grafik mit dem orangen Kreis durch den hellblauen Kreis

Original mit circle_light_orange.svg:

<!-- wp:group {"align":"full","style":{"background":{"backgroundImage":{"url":"http://ganzneu.test/wp-content/themes/circles-wp/assets/images/circle_light_orange.svg","id":6935,"source":"file","title":"circle_light_orange"},"backgroundPosition":"35% 42%"},"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"dimensions":{"minHeight":"100vh"}},"layout":{"type":"constrained"}} -->

Nach Änderung mit circle_light_blue.svg:

<!-- wp:group {"align":"full","style":{"background":{"backgroundImage":{"url":"http://ganzneu.test/wp-content/themes/circles-wp/assets/images/circle_light_blue.svg","id":6935,"source":"file","title":"circle_light_blue"},"backgroundPosition":"35% 42%"},"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"dimensions":{"minHeight":"100vh"}},"layout":{"type":"constrained"}} -->

Soll diese Änderung auch bei anderen Templates (z. B. bei Seiten) durchgeführt werden, muss man in ähnlicher Form vorgehen.

Ein weiteres Beispiel für Ersetzung durch grauen Kreis (grey Circle)

Im Code-Editor sucht man bei dem gewünschten Template am besten die Stellen, wo sich die Grafik befindet. Dazu kann man im Browser mit STRG F auch die Suchfunktion des Browsers verwenden. Es werden zwei Stellen gefunden. Hier gibt man exakt den Namen der gewünschten Grafik z. B. in grauer Farbe ein: Es wird also der Name circle_light_orange.svg durch circle_grey.svg an beiden Stellen ersetzt.

Danach kann man auf den Link „Code-Editor verlassen“ klicken. Abschließend muss das geänderte Template noch über den Button „Speichern“ oben rechts gespeichert werden.

Code-Editor mit der Hintergrundgrafik von Circles
Code-Editor mit der Hintergrundgrafik von Circles

Hintergrundgrafik löschen

Möchte man keine Hintergrundgrafik haben, dann braucht man in der Gruppe lediglich über das Kebap-Menü (drei senkrechten Punkte) bei „Hintergrundbild“ in dem folgenden Menü auf „Zurücksetzen“ klicken.

Hintergrundgrafik (Background Image) löschen durch Zurücksetzen
Hintergrundgrafik (Background Image) löschen durch Zurücksetzen

Hintergrundgrafik über den Block Editor ändern

Eine Änderung über den Block Editor ist ebenfalls möglich. Allerdings muss man dazu die SVG-Grafiken auf den eigenen Rechner runterladen und dann in die Mediathek hochladen. Wenn man die ZIP-Datei auf einem lokalen Rechner entpackt hat, kann man die Dateien wie gewohnt in die Mediathek hochladen und verwenden. Das ist allerdings nur dann möglich, wenn man ein entsprechendes Plugin wie z. B. Easy SVG Support oder ein Codeschnipsel verwendet, weil sonst SVG-Grafiken nicht in die Mediathek hochgeladen werden können.

Wenn man die SVG-Grafik hochgeladen hat, dann muss man beim jeweiligen Template (z. B. einzelner Beitrag oder Seite) im Gruppen-Block die Hintergrundgrafik zunächst löschen, indem man die Hintergrundgrafik zurücksetzt (siehe auch oberer Screenshot). Danach kann man die gewünschte Hintergrundgrafik aus der Mediathek auswählen.

Hintergrundgrafik einstellen
Hintergrundgrafik einstellen

Position der Hintergrundgrafik ändern

Durch Ändern der Position (siehe nachfolgenden Screenshot) kann man auch eine Verschiebung des Circles erreichen. Das kann man individuell ändern und damit einen anderen Effekt erreichen:

Position des Circles ändern

Hintergrundgrafiken verwenden – Alternativen

Natürlich besteht auch die Möglichkeit, eigene Hintergrundgrafiken zu verwenden. PNG- oder JPG-Dateien sind allerdings wesentlich größer als SVG-Dateien. Aus diesem Grund werden die Circles als SVG-Dateien verwendet.

Grundsätzlich sollte man bei Hintergrundgrafiken bedenken, dass wegen der Lesbarkeit und Barrierefreiheit einerseits nur einfarbige Muster bzw. Grafiken verwendet werden und andererseits auch die Kontraste von Hintergrundfarbe und Schriftfarbe beachtet werden. Um Kontraste zu prüfen eignet sich z. B. die kostenlose App Colour Contrast Analyser.

Änderungen rückgängig machen

Wenn dir die Änderungen am Template nicht gefallen, dann besteht die einfachste Möglichkeit darin, die Änderung über Design > Website-Editor beim jeweiligen Template zurückzusetzen:

Änderungen am Template zurücksetzen oder auf eine Revision umstellen
Änderungen am Template zurücksetzen oder auf eine Revision umstellen

Möchte man nur die letzte Änderung zurücksetzen, kann man auch über die „Revisionen anzeigen“ auf die letzte Revision, die ok war, umstellen.

Weitere Patterns

Wenn euch die Patterns, die mit Circles WP mitgeliefert werden, nicht reichen, dann möchte ich auf eine große Bibliothek mit Patterns hinweisen. Diese Bibliothek enthält eine Menge sehr interessanter Patterns, die man kostenlos verwenden kann. Dazu werde ich noch einen separaten Beitrag schreiben.

Fazit

Ich muss gestehen, dass die Entwicklung sehr viel Zeit gekostet hat. Hilfreich für mich war insbesondere der Aufbau von Twenty Twenty-Four. Immer wieder gab es irgendwelche Dinge, die nicht so liefen, wie ich mir das vorstellte. Ganz so einfach ist die Entwicklung letztendlich dann eben doch nicht. Aber es hat sich gelohnt, weil ich die Strukturen und den Code von Block Themes besser durchblicke und alles zunächst für mich gut dokumentiert habe. Ich freue mich sehr über Hinweise zu Fehlern, Anregungen und Rückmeldungen zu Circles WP. 🙂

Solltet ihr Fragen zu dem Theme bzw. zu den Anpassungen haben, könnt ihr diese Fragen gerne im Supportbereich des Themes stellen. Ich werde dann so schnell wie möglich antworten.

Du hast mit Circles WP eine Website erstellt? – Schreibe den Link gerne in den Kommentar. Ich bin gespannt auf deine Website. 🙂

Wenn ihr die Anpassungen nicht selbst machen möchtet oder individuelle Änderungen benötigt, schreibt uns gerne eine Mail oder ruft uns an. Wir können dann gerne ein Angebot unterbreiten.

Weitere Beiträge zum Thema

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

13 Antworten zu „Block Theme Circles WP – Entwicklung und Anpassung“

  1. Avatar von Hans-Gerd Gerhards

    @hgg@haurand.com
    In dem Beitrag gehe ich auf verschiedene Optionen ein, wie man Anpassungen bei Circles WP vornehmen kann. Zum Beispiel beschreibe ich, wie man Kreise mit anderen Farben verwenden kann.

  2. Avatar von Silvio Endruhn

    Super Ergebnis, danke für die Veröffentlichung.

    Etwas ist mir aufgefallen. der backToTop-Button hat ein höheren z-index als das Menü, somit kann man im mobilen Modus nicht alle Links erreichen 😞

    Viele Grüße
    Silvio von Update Heroes

    1. Avatar von hgg
      hgg

      Hallo Silvio,
      danke für den netten Kommentar.
      Vermutlich bezieht sich dein Hinweis auf haurand.com und nicht auf das Theme in der Standardversion.
      Hier auf haurand.com setze ich für BackToTop ein zusätzliches Plugin ein und habe das Problem gerade nicht feststellen können.
      Es wäre super, wenn du das noch mal verdeutlichen könntest. Danke schon mal im Voraus.
      Viele Grüße
      Hans-Gerd

      1. Avatar von Silvio Endruhn

        Hallo Hans-Gerg,

        ich habe dir ne Mail, mit einen Screenshot geschickt 🙂

        Viele Grüße
        Silvio

  3. Avatar von Ursula

    Ich hätte eine Frage zu den Theme Files . Wo soll ich die stellen ?
    Mir gefällt das Theme sehr gut ! Besonders die Schrift und der Hintergrund 😃

    1. Avatar von hgg
      hgg

      Freut mich sehr, dass dir das Theme gefällt. 🙂
      Du kannst die Fragen gerne auch als Kommentar zu dem Beitrag stellen.

      1. Avatar von Ursula

        Du hast eine simple-footer.html Datei. Dort steht nur drinnen: , im Ordner : Parts. Und dann ein Ordner : Patterns, wo dann eine simple-footer.php Datei drinnen ist, mit dem Code Inhalt.
        In der footer.html Datei ist allerdings der Code drinnen, und dann hast du eine footer.php Datei, die am Anfang mit php auskommentiert ist.
        Jetzt stellt sich für mich die Frage, warum ? Ist das nicht so, das Block Themes eigentlich nur .html Dateien in Templates und Template Parts brauchen.
        Und das die Patterns zuerst in der functions.php Datei registriert werden müssen. Aber bei CirclesWP ist die functions.php Datei leer.

        Hat das eine besondere Bedeutung , dass du das so gelöst hast ?
        liebe Grüße Uschi

        1. Avatar von hgg
          hgg

          Hallo,
          das ist eine schwierige Frage, die ich leider kaum in diesem Rahmen beantworten kann.
          Ich habe mich dabei an die entsprechenden Informationen gehalten, die ich zur Erstellung von Block Themes gefunden habe, z. B. das Theme Handbook.
          Patterns können in der functions.php registriert werden, aber es gibt eben auch die Möglichkeit, Pattern wahlweise im patterns zu speichern.
          In dem folgenden Beitrag findest du viele weitere Links zum Thema. Den Beitrag habe ich im Zusammenhang mit Vorträgen bei WordPress Meetups erstellt.
          Liebe Grüße
          Hans-Gerd

  4. Avatar von Ursula

    Ah, ich seh grad du hast da Kategorien erstellt,
    Ich glaube, da hab ich was versäumt ?

    1. Avatar von hgg
      hgg

      Richtig, ich weiß allerdings nicht, seit welcher Version von WordPress das Feature bereits implementiert ist.

  5. Avatar von Ursula

    Ich glaube , ich habe die Antwort gefunden. Normalerweise sind Parts schon HTML Dateien. Wenn aber ein Part dynamischen PHP Inhalt enthält, dann wird halt daraus eine PHP Datei, im Ordner Patterns. Und in der dazugehörigen HTML Datei im Ordner Parts liegt nur der dazugehörige Verweis halt.

    Draufgekommen bin ich eigentlich nur durch das Create Block Theme Plugin. Dieses hat beim Export aus den Parts/HTML Dateien PHP Dateien gemacht und diese in den Patterns Ordner gelegt.

    Grund dafür war, das es die Hintergrundbilder der Template Parts : Header als PHP eingebunden hat.

    Was ja eh net schlecht ist. 😂
    Vielleicht hilft das ja jemand. Ich dachte nämlich zuerst, das Plugin hat einen Bug 😅

    Was meinst du, ist ja eigentlich egal, oder, im Patterns Ordner sind ja sowieso auch lauter PHP Dateien. Weil ich dachte zuerst, sollte alles nur HTML sein in einem Block Theme. Zumindest die Parts auch.

    1. Avatar von hgg
      hgg

      Wie gesagt: Ich habe auch einige Zeit gebraucht, bis mir klar war, wie ich das Block Theme erstelle.
      Teilweise habe ich die PHP-Scripte im Ordner /parts auch manuell bearbeitet.
      Aber wir entfernen uns jetzt doch etwas von dem Inhalt dieses Beitrags, der eher darauf abzielt, wie man das Theme Circles WP anpasst.
      Das liegt aber sicherlich auch an dem Titel des Beitrags. Da wäre wohl eher „Circles WP – Anpassungen des Block Themes“ als Titel geeigneter gewesen. Daher habe ich den Titel jetzt auch etwas geändert.
      Sorry, mein Fehler. 🤔
      Ich denke, es macht mehr Sinn, solche Dinge im deutschen Slack Channel #themes zu diskutieren, zumal sich dann auch andere Entwicklerinnen oder Entwickler dazu äußern können.
      Aber herzlichen Dank für deine Beiträge.

  6. Avatar von Ursula

    Aber trotzdem, die Bilder waren so eingebunden, mit background-image: url und dann der Pfad halt. Und das Create Block Theme Plugin macht daraus eine PHP Anweisung und ändert die Inhalte und Ordner. Also er macht daraus: get stylesheet. Dadurch bleibt das Bild ja im Theme, beim nächsten Upload. Das ist aja eh gut. Vorher musste man es tauschen oder neu hochladen, weil der Pfad ja nicht gestimmt hat.
    Aber nur beim Export. Beim Clonen macht es das nicht.

Schreibe einen Kommentar

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