Deutsch
Deutsch
WordPress Gutenberg Block ist eine Editor -Funktion, die von WordPress Version 5.0 eingeführt wurde, um die Bearbeitung von Inhalten modular und effizient zu machen. Für Entwickler ist der Gutenberg -Block nicht nur einfach zu bedienen, sondern unterstützt auch die Anpassung des Aussehens und der Interaktionseffekte des Blocks durch benutzerdefinierte Stile und Skripte. In diesem Artikel führen Sie Schritt für Schritt, wie Sie personalisierte Stile für Gutenberg -Blöcke erstellen, um die Professionalität und die Benutzererfahrung der Website zu verbessern.
Stellen Sie vor Beginn sicher, dass Sie WordPress 5.0 oder höher verwenden und über grundlegende CSS- und JavaScript -Kenntnisse verfügen, die Ihnen helfen, benutzerdefinierte Stile besser zu verstehen und anzuwenden.
Der Schlüssel zu benutzerdefinierten Stilen ist die Änderung der Funktionen des Themas.Php -Datei und lädt die neue CSS -Datei in den Editor. Öffnen Sie Funktionen.php und fügen Sie den folgenden Code am Ende der Datei hinzu:
function my_custom_block_style() {
wp_enqueue_style(
'my-custom-block-style', // Stilname
get_stylesheet_directory_uri() . '/css/my-block-style.css', // Stildateipfad
array( 'wp-blocks' ),
filemtime( get_stylesheet_directory() . '/css/my-block-style.css' ) // Aktualisieren Sie den Cache automatisch
);
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );Unter ihnen ist "My-Custom-Block-Stil" der Logo-Name des Stils, den Sie bei Bedarf ändern können. In der Style-Datei wird davon ausgegangen, dass sie im CSS-Ordner unter dem Themenverzeichnis platziert ist, und der Dateiname ist my-blockstil.css. Die fileMtime -Funktion stellt sicher, dass der Browser die neueste Version jedes Mal automatisch lädt, wenn die Stildatei aktualisiert wird, um Cache -Probleme zu vermeiden.
Erstellen Sie als nächstes "My-Block-Stil.css" im CSS-Ordner des Themas, und alle benutzerdefinierten Stile werden in die Datei geschrieben.
Öffnen Sie nach Abschluss der Style -Datei den WordPress -Editor und fügen Sie den Block hinzu oder wählen Sie aus, den Sie anpassen möchten. Suchen Sie die Funktion "Custom Style -Funktion hinzufügen" in den Blockeinstellungen und geben Sie den CSS -Selektor für den entsprechenden Block ein.
Um beispielsweise die Textfarbe eines Absatzblocks zu ändern, können Sie schreiben:
.wp-block-paragraph {
color: red;
}".WP-Block-Absatz" ist der Standard-CSS-Klassenname für Absatzblöcke. Um mehrere Blöcke zu stylen, geben Sie mehrere Selektoren gleichzeitig in das Selektorfeld ein, und der Stil wird auf alle entsprechenden Blöcke angewendet.
Klicken Sie nach Abschluss der Style -Eingabe auf die Schaltfläche "Stil hinzufügen", um sie zu speichern. Aktualisieren Sie den Editor und Sie werden feststellen, dass der ausgewählte Block einen benutzerdefinierten Stil hat, der auf das Erscheinungsbild der Website angewendet wird.
Die Anpassung von WordPress Gutenberg -Blöcken wird flexibel und leistungsfähig, indem benutzerdefinierte CSS in Themendateien und Styling für bestimmte Blöcke eingeführt werden. Durch die Beherrschung der oben genannten Fähigkeiten können Sie problemlos einzigartige Inhaltsmodule erstellen, um die Professionalität und die Benutzererfahrung der Website zu verbessern. Ich hoffe, dieser Artikel wird für Sie hilfreich sein, um den Stil von Gutenberg -Blöcken zu entwerfen.
