Ein WordPress-Block-Theme für Entwickler, auf Basis von theme.json
Canvas ist ein WordPress-Theme mit einem Begleitplugin und durchgehend ein Block-Theme. Die Templates sind Block-Templates, die Stile stammen aus der theme.json, und was der Editor in der Datenbank speichert, ist dasselbe Block-Markup, das jedes andere Block-Theme liest. Nichts davon hängt von einem Page Builder ab.
Zuletzt aktualisiert am
Ein Block-Theme, bearbeitet dort, wo WordPress es ablegt
Das Theme enthält die Templates, die Template-Teile und die Stilvarianten; das Plugin enthält die Block-Bibliothek, die Builder, die Formulare, die SEO- und Performance-Ebenen sowie den Demo-Importer. Templates und globale Stile bleiben im Website-Editor, sodass nichts an Ihrer Website in einem unserer Einstellungspanels versteckt ist.
- 173 Block-Templates und 5 Template-Teile, alle im Website-Editor bearbeitbar
- 4 Stilvarianten, darunter Dunkel und Mitternacht, im Website-Editor umschaltbar
- Farben und Typografie werden über theme.json übernommen, sodass der Editor dieselbe Typografie wie das Frontend zeigt
- 183 Block-Muster, eingefügt als einmalige Kopie des Markups
- Eine Seite öffnet sich mit ihrem vollständigen Template, das den Inhalt umgibt, den Sie gerade bearbeiten
Was in der Datenbank landet, ist Block-Markup
Der Grund, ein Block-Theme vorzuziehen, liegt nicht in einer Funktionsliste. Entscheidend ist, womit Sie in fünf Jahren dastehen.
Kein proprietäres Format
Canvas bearbeitet standardmäßige WordPress-Blöcke und hat kein eigenes Format, daher bleiben Beiträge und Seiten erhalten, falls Sie das Theme jemals wechseln. Es gibt keine Shortcodes, die Sie sich merken müssen, und keine Code-Ansicht, die Sie öffnen müssen.
Einstellungen statt Code-Snippets
Alles, was Besucher sehen, lässt sich über die Block-Einstellungen erreichen. Wenn eine Demo etwas benötigte, das ein Block nicht abbilden konnte, erhielt der Block die Einstellung, und die Seite erhielt nie rohes HTML.
Panel „Erweitert“ bei jedem Block
Animationen, Anzeigebedingungen, benutzerdefinierte Klassen, benutzerdefinierte Attribute und blockspezifisches benutzerdefiniertes CSS werden jedem Block im Editor hinzugefügt, einschließlich der Core-Blöcke und der Blöcke von Drittanbietern.
Assets folgen der Seite
Eine Seite lädt nur das CSS und JavaScript der Blöcke, die sie enthält, sodass eine Preisseite niemals das Slider-Skript lädt. 35 weitere Optimierungen sind Schalter, für die kein Plugin installiert werden muss.
Kommen Sie von einem anderen Theme? Elementor und Divi erstellen Seiten in eigenen Editoren, sodass das Layout verloren geht, sobald der Builder wegfällt. Lesen Sie , was eine Elementor-Website beim Umzug behält und , wie sich der Divi Builder im Vergleich schlägt. Kadence und GeneratePress bauen ebenfalls im Blockeditor, und ihre Blöcke stecken in kostenlosen Plugins (Canvas im Vergleich mit Kadence, Canvas im Vergleich mit GeneratePress). Blocksy belässt seinen Header-Builder im Customizer.
Die Header- und Footer-Builder werden als Template-Teile ausgegeben
Header, Footer, Topbars, Mega-Menüs, Seitenpanels und Seitentitel sind aus Blöcken aufgebaute Datensätze, die über die eigenen Template-Teile des Themes im Frontend ausgegeben werden. Der Header-Teil gibt den Header aus, der der Seite zugewiesen ist; der Footer-Teil gibt den zugewiesenen Footer-Datensatz aus. So kann der Website-Editor sie weiterhin sehen, und die Block-Einstellungen bleiben überall identisch.
- 22 Header-Blöcke und 94 Header-Optionen hinter dem Header-Builder
- Weisen Sie einen Header global zu oder überschreiben Sie ihn auf einzelnen Seiten, und verfahren Sie ebenso mit Footern, Topbars, Mega-Menüs, Seitenpanels und Seitentiteln
- Heroes und Slider sind ebenfalls Datensätze, die ein Slot-Block im Template platziert.
- Beide Slot-Blöcke werden in der Bearbeitungsfläche dargestellt, sodass eine Seite mit dem Abschnitt geöffnet wird, den ein Besucher zu sehen bekommt
24 Shop-Blöcke und 18 Shop-Templates
WooCommerce ist optional. Wenn es installiert ist, wird es über Blöcke und Templates ausgeliefert, ohne Template-Überschreibungen, die synchron gehalten werden müssen.
Shop-Blöcke
Blöcke für die Produktseite, das Shop-Raster, den Warenkorb und den Checkout sowie Farbauswahlen und das Hinzufügen zum Warenkorb ohne Neuladen der Seite.
Shop-Templates
Templates für die Shop-, Produkt-, Warenkorb-, Checkout- und Kontoseiten, die wie jedes andere Template im Website-Editor bearbeitet werden.
Demo-Shops
21 der 88 Demo-Websites werden als vollständige Shops importiert, mit Produkten, Kategorien, Attributen und eingerichtetem Checkout.
Zwei der 21 Demo-Shops, die mit den Shop-Blöcken und Templates laufen.
Der Einrichtungsassistent erstellt ein Child-Theme, falls Sie eines möchten
Erstellen Sie das Child-Theme nur, wenn Sie die Template-Dateien von Canvas direkt bearbeiten möchten, denn genau das sorgt dafür, dass solche Änderungen bei einem Update erhalten bleiben. Der Einrichtungsassistent bietet es in einem eigenen Schritt vor dem Demo-Import an, legt es in Ihrem Themes-Ordner ab und aktiviert es, und Ihre Website sieht danach unverändert aus. Die meisten Websites brauchen es nie, weil die üblichen Gründe heute Einstellungen sind.
- Benutzerdefiniertes CSS für die gesamte Website sowie benutzerdefiniertes JavaScript für den Head- und den Footer-Bereich im Bereich Sonstiges der Theme-Optionen
- Blockbezogenes Custom CSS, als Paare aus Eigenschaft und Wert geschrieben, ohne Selektor drumherum
- Blockbezogene benutzerdefinierte Attribute, je Zeile ein Schlüssel und ein Wert, mit Unterstützung für data- und aria-Attribute
- Benutzerdefinierte Typografie-Regeln für jeden beliebigen Selektor, den Sie angeben, im Bereich Typografie
- Registrieren Sie ein eigenes Icon-Pack über dieselbe Oberfläche wie die 4 eingebauten Icon-Packs
- Exportieren Sie eine vollständige Theme-Optionen-Konfiguration als Datei und importieren Sie sie auf der nächsten Website.
Was Canvas voraussetzt und was es beim Einrichten tut
Die Mindestvoraussetzungen sind echte Vorgaben, keine Vorschläge. Canvas prüft sie selbst auf Ihrem Hosting-Server, sodass Sie von einem fehlgeschlagenen Import nie als Erstes erfahren.
- Canvas Core wird nie separat heruntergeladen: Es wird direkt in WordPress installiert, sobald Ihre Lizenz aktiv ist, sodass keine Versionen aufeinander abgestimmt werden müssen
- Updates erscheinen auf der WordPress-Updateseite, mit Wartungsmodus, einem temporären Backup und einem Rollback direkt aus WordPress heraus
- Automatische Updates gelten nur für Patch-Releases, sind standardmäßig aktiviert, lassen sich mit einem Schalter deaktivieren, und ein Release, das ein von Ihnen angepasstes Template ändert, benennt es.
- Ein Bildschirm „Health Check“ prüft die Serveranforderungen auf Ihrem tatsächlichen Host und meldet, was Aufmerksamkeit benötigt. Dieselben Prüfungen erscheinen im Bereich Website-Zustand von WordPress.
- Jeder String ist übersetzbar, Übersetzungsvorlagen für Theme und Plugin werden mit jedem Release neu erzeugt, und das Plugin enthält eine WPML-Konfigurationsdatei
- Technische SEO, eine XML-Sitemap sowie 16 Schema-Typen werden beim Rendern aus Ihren Inhalten abgeleitet
388 Dokumentationsartikel, generiert aus dem ausgelieferten Code
Die technischen Fragen, beantwortet
Fünf Punkte, die Entwickler prüfen, bevor sie sich für ein Projekt entscheiden, darunter den Punkt, den Canvas nicht übernimmt.
Ist Canvas ein Block-Theme oder ein Page-Builder-Theme?
Canvas ist ein WordPress-Theme, das vollständig aus Blöcken besteht, was WordPress als Block-Theme bezeichnet. Templates sind WordPress-Block-Templates, Template-Teile bleiben Template-Teile, Farben und Typografie werden über theme.json gesteuert, und alles wird im Block-Editor und im Website-Editor bearbeitet, die mit WordPress ausgeliefert werden. Es ist kein separater Builder zu installieren, kein zweiter Editor zu lernen und kein Builder-Abo zu verlängern.
Was passiert mit dem Markup, wenn Sie das Theme später wechseln?
Es bleibt standardmäßiges WordPress-Blockmarkup, denn genau das speichert Canvas. Ein Canvas-Block, den ein anderes Theme nicht erkennt, stellt sein Design nicht mehr dar, doch Überschriften, Absätze, Bilder und Listen sind Core-Blöcke und werden überall problemlos gelesen. Nichts wird als Shortcode oder in einem proprietären Layoutformat gespeichert.
Wo werden Header und Footer tatsächlich ausgegeben?
Über die Template-Teile, die Canvas registriert, gibt es 5: Header, Footer, Seitentitel, Sidebar und Sidebar Alt. Der Header-Teil rendert den Header-Datensatz, der der Seite zugewiesen ist, der Footer-Teil rendert den zugewiesenen Footer-Datensatz, und der Seitentitel-Teil rendert, was die Seitentitel-Einstellungen der Seite ergeben. Die Teile sind die Infrastruktur; das Design ist der Datensatz, den Sie aus 22 Header-Blöcken aufbauen.
Benötige ich ein Child-Theme?
Nur wenn Sie Canvas-Template-Dateien direkt bearbeiten möchten, wovor ein Child-Theme Sie bei Updates schützt. Der Einrichtungsassistent legt im optionalen Schritt Child Theme eines für Sie an und aktiviert es für die Website, oder Sie kopieren den Child-Theme-Ordner, der in Canvas enthalten ist, selbst in Ihren Themes-Ordner. Die meisten Websites brauchen das nie: Die Theme-Optionen enthalten websiteweite Einstellungen, Custom CSS und Custom Attributes je Block regeln die Blockebene, und die websiteweiten Felder für Custom CSS und JavaScript befinden sich im Abschnitt Sonstiges der Theme-Optionen.
Ist Canvas ein Theme für Rechts-nach-links-Schrift?
Ja, jede Canvas-Stylesheet-Datei hat eine gespiegelte Rechts-nach-links-Version, und WordPress lädt sie automatisch, wenn die Website auf Arabisch, Hebräisch, Persisch oder einer anderen Rechts-nach-links-Sprache läuft. 88 von den 88 Demos wurden vor der Auslieferung in Rechts-nach-links-Darstellung geprüft, sodass Menüs, Raster und Formulare auf der richtigen Seite stehen. Die Übersetzung ist ein eigenes Thema und ebenfalls vollständig: Beide Teile des Produkts liefern Übersetzungsvorlagen, und eine WPML-Konfigurationsdatei wird mit dem Plugin ausgeliefert.
Ein Block-Theme, das Sie jedem weitergeben können
Canvas baut auf dem Editor auf, den WordPress mitliefert, speichert Standard-Blockmarkup und verwaltet Templates im Website-Editor. Arbeiten Sie für Kunden? Lesen Sie die Seiten für Agenturen und Freelancer.