Wer regelmäßig Internetseiten erstellt wird sich früher oder später ein CSS Framework suchen, dass zu einer Arbeitsweise passt. In unserem Fall ist das Automatic.css (ACSS) welches sich hervorragend in die Pagebuilder Oxygen und Bricks Builder integriert.
Dank der extrem Flexibilität der beiden Builder bietet es sich an ein Hybrides Setup aus Page Builder und Gutenberg zu nutzen. So kann man aufwendige Seiten in Bricks oder Oxygen gestalten und “einfache” Blog-Posts direkt in Gutenberg umsetzen. So sind die Inhalte auch für die kommenden Jahre noch kompatibel mit dem neusten Editor.
ACSS für alle Post Types und nicht nur Seiten aktivieren
Nach der Installation von automatic.css kann es direkt im Builder genutzt werden. Seit einiger Zeit gibt es auch eine Gutenberg Integration, welche für das hybride Setup perfekt wäre.
Leider integriert sich ACSS im Standard nur in den Post Typ “Seiten”. Häufig reicht das nicht aus, und man möchte das Framework in noch weitere Typen wie “Posts” integrieren.
Unser Codesnippet schafft abhilfe
Unser Codesnippet übernimmt genau das. Es erweitert die Nutzung von ACSS auf alle Post-Typen, die eine Benutzeroberfläche haben und REST-API-Unterstützung bieten, was für die Kompatibilität mit dem Gutenberg-Editor entscheidend ist. Der Code durchläuft alle registrierten Post-Typen und prüft, ob sie den Gutenberg-Editor verwenden. Post-Typen, die nicht mit Gutenberg arbeiten, werden aus der Liste entfernt. Anschließend wird mit add_filter eine Anpassung vorgenommen, die diese gefilterten Post-Typen für ACSS zugänglich macht. Dies bedeutet, dass ACSS nun über die Standardintegration in “Seiten” hinaus auch für andere Post-Typen wie “Posts” verfügbar ist.
Um dieses Snippet in WordPress zu integrieren, gehen Sie wie folgt vor:
- Öffnen Sie die
functions.php-Datei Ihres aktiven WordPress-Themes. - Fügen Sie das Code-Snippet am Ende der Datei ein.
- Speichern Sie die Änderungen und laden Sie die Datei gegebenenfalls auf Ihren Server hoch.
Durch diese einfache Erweiterung wird Automatic.css zu einem noch leistungsfähigeren Werkzeug in Ihrem Entwicklungsprozess, da es jetzt die Flexibilität bietet, über verschiedene Post-Typen hinweg konsistente und ansprechende Designs zu erstellen. Dies ist besonders nützlich für Websites, die ein hybrides Setup aus Page Buildern wie Oxygen oder Bricks und dem Gutenberg-Editor verwenden.
/**
* Add ACSS Support to more post types.
*/
add_action('init', function () {
// Retrieve all post types with UI and REST support
$queried_post_types = get_post_types([
'show_ui' => true, // Only include post types with a UI
'show_in_rest' => true, // Ensure REST support for Gutenberg compatibility
]);
foreach ($queried_post_types as $type) {
// Remove post types not using Gutenberg editor
if (!use_block_editor_for_post_type($type)) {
unset($queried_post_types[$type]);
}
}
// Extend allowed post types for ACSS with Gutenberg-enabled post types
add_filter('acss/gutenberg/allowed_post_types', function ($post_types) use ($queried_post_types) {
return array_merge($post_types, $queried_post_types);
}, 10); // Priority 10 to potentially exclude some post types
}, 99); // Hooked at priority 99 to ensure all CPTs are registered