Der Block-Editor von WordPress entfernt gerne mal überflüssige Absätze und du siehst dann nur einen Absatz im Frontend. Je nach Aufbau deines Inhaltes, ist es auch möglich, dass dein Browser, mit dem du die Website betrachtest, kleine Fehler und unsaubere Syntax automatisch korrigiert.

Mit diesem Wissen verstehen wir nun, warum mehrere Absätze nicht die erste Wahl sein sollten, wenn es darum geht Abstand in deinen Inhalt zu bringen. Schauen wir uns deshalb die Alternativen mal näher an.

Lösung #1 – Der Abstandshalter-Block

Die erste und wohl einfachste Lösung wäre, du nutzt den Gutenberg-Block „Abstandshalter“. Hier kannst du die gewünschte Höhe deines Abstandes eingeben und schon bist du fertig. Die Blöcke kannst du dann zwischen deinem Inhalt einfügen und so für den gewünschten Abstand sorgen.

Kleiner Wermutstropfen, dein Inhalt im Backend kann irgendwann sehr gespickt wirken, von vielen zusätzlichen Blöcken. Deutlich wird dies in der Listenansicht, welche mit vielen Abstandshalter-Blöcken deutlich länger wird.

Lösung #2 – eigenes CSS

Wenn sich die in Lösung #1 erwähnten Abstandsblöcke mit deinem Inhalt umständlich anfühlen und du sehr viele davon nutzen musst, würde ich empfehlen zur nächsten Alternative zu greifen und mittels CSS nachsteuern.

Da die leeren Absätze nicht (mehr wie im früheren Editor, dem TinyMCE) weggekürzt, sondern auf Grund des fehlenden Inhaltes, lediglich optisch zusammengezogen werden, kannst du mit ein wenig CSS nachsteuern.

Eine Möglichkeit wäre, den bestehenden (leeren) Absätzen eine Mindesthöhe mitzugeben und schon erscheinen sie wie gewünscht mit mehreren Zeilen Abstand. Im Beispiel nutzen wir 20px Abstand. Passe diese Zahl gerne nach deinen Wünschen an. Der CSS-Code dafür sieht wie folgt aus. Füge diese Zeilen in deinem Customizer unter „individuelles CSS“ hinzu oder ergänze es in deinem Child-Theme.

p:empty {
  min-height: 20px;
}

Mit dieser Variante und einer Mindesthöhe aller leeren p-Tags bekommst du die globale Lösung für dein Abstandsproblem bei mehreren Absätzen. Semantisch nicht die beste Lösung, aber praktisch, wenn du ein schnelles Ergebnis möchtest.

Neben der Mindesthöhe können wir im Beispiel mit CSS auch kurz darauf eingehen, das Abstände mit CSS in Außenabstände (margin) und Innenabstände (padding) unterteilt werden. Das bedeutet, dass du deinen Absätzen oder Überschriften einfach einen oberen (margin-top) oder unteren (margin-bottom) Außenabstand geben kannst. Das CSS kann für die Überschrift (H2) wie folgt aussehen.

h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}

Zusätzlich kannst du natürlich auch eine eigene Klasse mit entsprechendem Abstand erstellen und diese dann an deinen Blöcken hinterlegen. Gerade bei individuellen Designs und Abständen teils sinnvoll, aber behalte den Aufwand für das eintragen der Klasse im Auge, damit du keinen wesentlichen Mehraufwand bei vielen Blöcken bekommst.

Lösung #3 – Gutenberg-Erweiterungen (z.B. GenerateBlocks)

Solange der WordPress-eigene Blockeditor noch nicht alle nötigen Design-Elemente am individuellen Block mit sich bringt, lohnt sich der Blick in diverse Erweiterungen für diesen. Eine beliebte und praktische Pluginwahl fällt für mich auf GenerateBlocks. Mit diesem Plugin bekommst du vielseitige Gestaltungsmöglichkeiten direkt und an den eigens mitgebrachten Blöcken für deinen Inhalt. Diese ermöglichen dir neben vielen weiteren Details auch die Abstände individuell einzustellen.

Grundsätzlich praktisch für individuelle Designs und Gestaltung deiner Inhalte. Für Vielschreiber empfehle ich dennoch die globale Variante via CSS, da keine manuelle Nachbesserung erfolgen muss. Neben GenerateBlocks gibt es natürlich noch andere Plugin-Erweiterungen wie Kadence Blocks, Ultimate Blocks usw. Wichtigster Punkt hierbei ist jedoch, dass wenn die Plugins mal deaktiviert sind, werden auch die getroffenen Einstellungen nicht mehr angezeigt.

(keine wirkliche) Lösung #4 – Pagebuilder

Wie du am Titel bereits erkennen kannst, ist dies keine Empfehlung und dennoch eine Möglichkeit die Abstände von Absätzen anzupassen. Denn die genannten Optionen in der Lösung zuvor setzen auf ähnliche Möglichkeiten, wie sie durch Pagebuildern bekannt geworden ist. Soll heißen du hast in den meisten Fällen eines Pagebuilders die Möglichkeit an deinem Inhalt zusätzliche Einstellungen für Abstände (padding und margin) vorzunehmen. Mal versteckt es sich etwas in den Tiefen der Einstellungen und mal hast du eine hübsche optische Darstellung der Abstandsbereiche für alle vier Seiten. Zu den bekanntesten Pagebuildern zählen Elementor, Divi, Visual Composer, Beaver Builder usw. All diese genannten Pagebuilder gehen allerdings einen gänzlich anderen Weg als der Block-Editor von WordPress auch wenn sie teils bequeme Lösungen mit sich bringen. Solltest du also gerade eine neue Website aufbauen, empfehlen wir dir den tieferen Blick in den Block-Editor.

Lösung #5 – eigene Erweiterung für bestehende Blöcke

Wenn du nun etwas ganz bestimmtes und individuelles benötigst, kannst du auch deine ganz eigene Erweiterung für die bestehenden Blöcke schreiben. Natürlich nur, wenn du die entsprechenden Kenntnisse mitbringst. Da es in diesem Beitrag den Rahmen sprengen würde, verlinken wir dir einen externen Beitrag bei crafted.at, wie du am besten vorgehst.

Die weitere Entwicklung

Es gibt bei der Weiterentwicklung des Gutenberg-Editors diverse Diskussionen darüber, ob ein „Abstandshalter“ ab drei Umbrüchen automatisch erfolgen sollte. Derzeit ist das noch nicht so, aber die Entwicklung und Community nimmt sich dem Problem in jedem Fall an. Dies dauert erfahrungsgemäß etwas und bis dahin hast du nun eine Alternative Lösung für dich. 🙂

Update 03.08.2023 – weitere Lösungen (#3-5) ergänzt, Ausbau CSS & Korrekturen

Der Beitrag Mehrere Absätze (Leerzeilen) sichtbar machen erschien zuerst auf deinWP.de.

Getestete Version: 6.0.1

Viele Wege führen dich zu deinem idealen Menü innerhalb von WordPress. Du kannst Unterpunkte angeben, nicht klickbare Menüpunkte anlegen und Icons zur Darstellung verwenden.

Menü anlegen

Über deine Menüpunkte tauchen deine Nutzer tiefer in deine Website ein. Anlegen kannst du dieses über den Punkt „Design“ –> „Menüs“ oder über den Customizer.

Mittels Drag & Drop kannst du dabei einzelne Menüpunkte zu Eltern- bzw. Kindereinträgen verwandeln. Auch Kinder-Kinder-Elemente sind möglich. Bedenke dabei, dass ein Menü funktional bleiben soll.

Ein Menüeintrag soll nicht klickbar sein.

Die meisten Menüs verfügen über einen Elterneintrag samt Unterseiten. Je nach Theme kommt es in dieser Konstellation zu zwei Möglichkeiten:

• Der Elterneintrag ist klickbar und der Nutzer landet auf der entsprechenden Seite
• Der Elterneintrag ist nicht klickbar

Soll der Elterneintrag keine Funktion besitzen, also lediglich im Menü vorhanden sein, nicht aber als konkrete Seite angelegt werden, müssen wir uns mit einem Trick behelfen. Zunächst legst du im Menü einen individuellen Link für die Hauptkategorie „Blog“ an. Damit dies gelingt, gibst du im URL-Feld ein „#“ ein, wodurch du in dem Fall einen nicht aktiven Anker-Link erzeugst. Dadurch könnten deine Besucher den Menüpunkt klicken, es passiert allerdings keine Weiterleitung. Sichtbar ist der „Anker“ dennoch.

Ungünstig an dieser Lösung ist, dass der Fake-Menüpunkt ebenfalls den Cursor ändert, da es sich technisch um einen Link handelt. Du kannst nun auch den „#“ als URL entfernen. Diesen Zwischenweg brauchten wir nur, damit wir den Eintrag anlegen durften. Im Anschluss fungiert der Menüpunkt nicht mehr als Link und der Mauszeiger ändert sich nicht.

In Kurzform: Menüpunkt nicht klickbar machen

• Menü als individuellen Link anlegen
• mit # als Link versehen
• Untermenüs einsortieren
• # wieder entfernen
• fertig

Den Fake-Link nicht mehr zu besitzen ist super, denn es könnte deine Nutzer irritieren. Allerdings ist der Cursor-Bereich sehr klein. Nur im Bereich des Submenü-Icons ist ein Cursor zu erkennen, sobald über Schrift gehovert wird, erscheint der Text-Cursor.

Diese Unstimmigkeit ist schnell behoben.

Aussehen des Mauszeigers anpassen

Damit dieser ungewollte Effekt ansprechender gestaltet ist, passt du das Aussehen des Mauszeigers an. Das ist im WordPress sehr einfach mittels CSS möglich. Eventuell bringt dich dies auch auf andere Ideen. Im konkreten Fall konzentrieren wir uns auf die Verbesserung der Menü-Funktionalität.

Hierzu trägst du folgende Zeilen in deine Stylesheet-Datei (style.css)oder dem Customizer ein:

/* eng.: non click cursor deactivate */
/* dt: Cursor deaktivieren, wenn kein Link vorhanden */
.nonclick > a:hover {
    cursor: default;
}

In der ersten Zeile beschreiben wir die Funktionalität der folgenden Codezeilen, .nonclick definiert die Klasse, a:hover bezeichnet das Hover mit der Maus und cursor: default; gibt die Anweisung, dass sich der Mauszeiger nicht ändert.

Damit dem Menüpunkt die CSS-Klasse zugeteilt werden kann, müssen wir sicherstellen, dass die Funktionalität vorhanden ist. Rufe hierzu den Customizer auf und navigiere zum Menü. Mit dem Zahnrad-Symbol kannst du die erweiterten Menüeigenschaften aufrufen. Hier einen Haken bei CSS-Klassen setzen

Jetzt trägst du den verwendeten Klassen-Namen ein, auf den wir uns innerhalb der CSS-Anweisung beziehen, beispielsweise „nonclick“.

Ab sofort ändert sich der Mauszeiger nicht mehr, wenn deine Leser über den Menüpunkt fahren.

In Kurzform:

• Mauscursor per CSS anpassen 😉

Mega Menü einfügen

Je verschachtelter eine Website, desto sinnvoller kann ein alternativer Menüaufbau sein. Wenn du beispielsweise mehrere Ebenen deiner Navigationselemente auf einmal anzeigen möchtest, erhältst du eine tiefere Gruppierung und eine höhere Navigationstiefe. Mit GeneratePress ist die Erstellung sehr simpel möglich.^[1]Dokumentation von GeneratePress: Ein simples Mega Menü aufbauen
. Zugriff: 20.03.2023

Zunächst fügst du in deine Style.css folgende Zeilen ein, damit die Funktion für das Mega Menü aktiviert wird:

@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
    }

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex;
        flex-wrap: wrap;
    }

    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
    }

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}

Jetzt musst du in den Menüeinstellungen die gewünschte Struktur aufbauen. Du brauchst typischerweise drei Ebenen:

• Hauptmenüpunkt: Also die Bezeichnung, die im Menü direkt angezeigt wird
• Kinderelement: Die Ebene zur Strukturierung (muss kein klickbares Element sein)
• Enkelelement: Die klickbaren Menüpunkte

Der Hauptmenüpunkt benötigt die CSS-Klasse mega-menu. Dann wird hier die alternative Darstellung aktiviert.

Als Ergebnis solltest du folgendes sehen:

Derzeit ist diese Darstellung auf deinwp.de noch nicht sinnvoll, aber wir wollten die Funktionsweise testen und werden zukünftig eventuell eine derartige Darstellung planen.

Standardmäßig sind 4 Spalten beim Mega-Menü angelegt. Du hast allerdings die Wahl zwischen 2 und 5 Spalten. Hierzu gibst du innerhalb des Elternelementes eine weitere Klasse an:

mega-menu-col-2
mega-menu-col-3
mega-menu-col-4
mega-menu-col-5

Im CSS-Feld deines Elements steht dann also: mega-menu mega-menu-col-2

Der Beitrag WordPress Menü bearbeiten erschien zuerst auf deinWP.de.

Was macht die Datei?

Die Cascading Style Sheets (CSS) sind eine deklarative Sprache zur Gestaltung von Websites. Die Anweisungen innerhalb der Datei orientiert sich dabei am HTML-Aufbau deiner Website und gibt ihr ein Gesicht. Also beispielsweise welche Farbe zu sehen sind, an welcher Stelle sich dein Logo befindet, wie groß die Abstände zum Menü sind und welche Schriftart verwendet wird. In der Syntax spricht man von Selektoren, welche wiederum gezielt HTML-Elemente ansprechen. Mit den Deklarationen des Selektors kannst du nun die vorhandenen HTML-Elemente optisch verändern und so deine Seite beliebig gestalten. Den Aufbau und Beispiele zu CSS, zeigen wir weiter unten.

Die CSS-Kaskade sagt, die zuletzt genannte Regel, gewinnt das Layout. Dadurch werden auftretende Konflikte effektiv umgangen, die Suche nach dem passenden Selektor – der beispielsweise die Farbe dieses Feldes änder – allerdings ebenso verkompliziert. Einzelne Eigenschaften dürfen sich gegenseitig überschreiben, wodurch der Name stilecht verwendet wird: Cascading Stylesheet!

Zudem ist das Stylesheet nicht auf ein Dokument beschränkt, denn mittels HTML-Link-Elementen und via Import-Regel kannst du weitere CSS-Dateien einbinden. Vor dem HTTP2 Protokoll war es schneller, wenn nur CS-Sheet geladen wurde, denn jede zusätzliche Datei verursachte einen HTTP-Request. Dieser Nachteil fiel oder fällt mit HTTP/2 weg und die Trennung in mehrere Stylesheets kann der Übersicht helfen. Der HTTP/1.1-Standard erlaubt deinem Browser nur 6 gleichzeitige Verbindungen pro Host. Diese Reglementierung wird im HTTP-Standard 2.0 gelockert und die Verbindungen können für zudem für mehr als eine Ressource genutzt werden. Anweisungen inline zu geben, bleibt weiterhin unpraktisch, weil es deinen Code unflexibel und unüberschaubar und unleserlich werden lässt. Weiter sparst du Ladezeit, wenn in einer Datei alle Style-Angaben abgespeichert sind.

p {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    color: #333;
}

p {
    background-color: red;
}

img {
    border: 1px solid #ddd;
    margin: 10px;
}

4 Wege bestreitet CSS

Auf folgenden Wegen kommt CSS in dein WordPress. Alle Methoden kannst und darfst du gleichzeitig verwenden, allerdings ist aus unserer Sicht eine zentrale Stelle und die externe Datei zu bevorzugen.

• CSS wird als externe Datei mittels link-Tag im Head der entsprechenden HTML-Datei eingebunden
• Über ein „style-Tag“ (<style>) im Head des HTML-Dokuments, damit können insbesondere Sonderlösungen für einzelne Seiten erzeugt werden
• Eine externe CSS-Datei wird innerhalb des style-Tags oder in eine andere CSS-Datei importiert (href=“deine-style-datei.css“)
• Wird ein style-Attribut direkt im HTML-Tag verwendet, handelt es sich um Inline-CSS

Der Customizer

Nun, da du weißt, wofür CSS zuständig ist, wollen wir es nicht verpassen, dir auch die bestehenden Mittel deines WordPress näherzubringen, ohne zwingend eigenes CSS schreiben zu müssen. Du kannst sowohl mit Einstellungen im Customizer als auch eigenem CSS (ebenfalls im Customizer möglich), nahezu alle optischen Punkte nach deinem Gusto anpassen und individualisieren. Hierzu gibt es mehrere Möglichkeiten.

Über die Einstellungen des WordPress Customizer – Design -> Customizer – kannst du grundlegende Dinge innerhalb deines gewählten Themes einstellen.

Technisch streng genommen hat der Customzier nichts mit der style.css gemein, da die Anweisungen nicht in dieser Datei gespeichert werden. Die Darstellung wirkt sich allerdings genauso auf deine Seite aus, wie eine eigene style.css oder andere Stylesheets, von z.B. Plugins. Damit du die Zusammenhänge verstehst, ist dieses Wissen wichtig. Je nach gewählten Theme kannst du über den Customizer bereits viele Dinge nach deinem Geschmack einstellen: Layout, Typografie und Farben sind sicherlich die Bereiche, an denen die meiste Magie geschieht. Besonders innerhalb der Typografie lässt sich die Anmutung der Seite, wie die Größe von Überschriften und die Verwendung der generellen Schriftart anpassen. Auch responsive Optionen (für verschiedene Geräte wie Smartphone, Tablet oder Desktop) sind sicher sehr hilfreich, wenn es um grundlegende Einstellungen deiner Seite geht. Mittels jeder kleinen Veränderung von Farben wirst du das Standard-Theme langsam in Richtung deines ganz eigenen Themes umbauen oder gar entwickeln.

Wenn du an den Punkt kommt, wo die passende Einstellung für deine gewünschte optische Anpassung nicht gegeben ist, kommst du um das Verständnis für CSS nicht mehr herum und musst sicher ein paar eigene Zeilen schreiben. Doch keine Angst, das ist garnicht schwer. Die erste Möglichkeit dein eigenes CSS zu hinterlegen besteht direkt im Customizer unter dem Punkt Zusätzliches CSS. Hier kannst du in einem kleinen Code-Editor schnelle Änderungen vornehmen. Sollte es umfangreicher werden, solltest du dir das Konzept der eigenen style.css im Child-Theme näher anschauen.

Custom CSS

Viele Plugins bieten dir ebenfalls die Möglichkeit, eigene CSS-Anweisungen anzugeben. Meist gibt es dafür eigene Eingabefelder innerhalb der Backend-Oberfläche des Plugins. Diese ähneln sich oft und zeigen dir bestenfalls auch die Syntax-Formatierung in Farben an, damit du mögliche Fehler schnell entdeckst und beheben kannst.

Deine eigene style.css

Die Formatierungen, welche du mit dem Customizer oder zuätzlichen Plugins vorgenommen hast, kannst du auch in der Datei mit dem Namen style.css vornehmen. Diese Datei liegt auf deinem Server und bestenfalls in deinem Child-Theme – z.B. unter /wp-content/themes/dein-childtheme/style.css.

Der Hauptvorteil dabei liegt in der einfachen Pflege und Findbarkeit. Du hast einen zentralen Ort, eine Datei, in der deine individuellen Anpassungen getätigt werden. Du musst nicht im Customizer oder Plugins-Feldern suchen, sondern hast eine zentrale Anlaufstelle für alle zuätzlichen, optischen Anpassungen deiner Seite.

Den grundlegenden Aufbau der style.css haben wir bereits beim Child-Theme besprochen. Schauen wir uns nun näher an, wie du die gewünschten Anpassungen mit CSS sinnvoll angehen kannst. Wenn es darum geht, das CSS deiner Website anzupassen, kommen wir um ein paar technisch und möglicherweise kompliziert anmutende Dinge nicht herum. Lass dich davon nicht beeindrucken und uns kurz eintauchen.

Teste in der Entwickler-Konsole

Mittels Browser und der dazugehörigen Konsole (rechte Maustaste -> Untersuchen – kannst du Veränderungen zunächst temporär testen.

Hierzu öffnest du deine Website sowie die Konsole (F12) und veränderst im CSS-Bereich die entsprechenden Stile deiner gewünschten Selektoren. Standardmäßig befinden sich auf der Linken Seite der HTML-Aufbau und die gesuchten CSS-Einstellungen an der rechten Seite. Wenn du direkt bei einem Element auf deiner Seite die rechte Maustatse drückst und auf Untersuchen gehst, führt dich die Konsole zum entsprechenden Quelltext. Im nachfolgenden Screenshot deutlich zu erkennen.

Gefallen dir deine Veränderungen, musst du diese Zeilen in dein Stylesheet übertragen. Dazu kannst du in den meisten Fällen einfach deine Anpassungen markieren und in deiner style.css hinterlegen.

Warum nur in den meisten Fällen fragst du dich nun?

So passt du dein Stylesheet an

Du kannst deine style.css über das WordPress-Backend – Design -> Theme-Datei-Editor – oder per FTP bearbeiten. Als Erstes vergewisserst du dich, dass dein WordPress über ein Child-Theme verfügt. Denn Änderungen am Haupttheme sind mit dem nächsten Update wieder weg. Dein Child-Theme besitzt eine eigene style.css-Datei, die du bedenkenlos füllen und editieren kannst. Die Formatierungen des Child-Themes werden als letztes -beim Laden einer Seite- aufgerufen und überschreiben alle vorherigen Deklarationen.

Das geschieht entweder über dein Backend mittels Theme-Editor (siehe Screenshot) oder per FTP und einem Code-Editor deiner Wahl. Im Gegensatz zu Arbeiten an der functions.php, kann beim Editieren der style.css nicht so viel schiefgehen. Lediglich die Optik der Website kann ungewollt aussehen, nicht aber komplett funktionsgestört sein. Solltest du dich also mal wundern, warum deine Anpassungen plötzlich nicht greifen, prüfe, ob du auch alle Formatierungen sauber geöffnet und geschlossen hast. Dies erfolgt mittels der geschweiften Klammern.

Update 15.08.2023 – Info-Snack (CSS-Grundlagen) ergänzt

Der Beitrag style.css – Wie du dein WordPress mit CSS optisch veränderst erschien zuerst auf deinWP.de.

Zukünftig widmen wir uns an dieser Stelle auch der Theorie des Neuromarketings, möchten aber zunächst mit einem Praxisbeispiel starten.

MailPoet – Text neben dem Schließen-Button einfügen

MailPoet 3 (New) Version 3.9.3.0

Zwar lässt sich der Stil des Schließen-Buttons bei MailPoet in den Einstellungen anpassen – die Auswahl bietet insgesamt sechs Designs – aber ein Text lässt sich nicht platzieren. Das ist schade, denn für die erwähnte Abwandlung möchten wir genau dies.

Der Nutzer soll die Anmeldung zum Newsletter nicht intuitiv wegklicken, sondern die Entscheidung bewusster treffen. Hierzu möchten wir den Button, um den Text „später“ ergänzen.

„Später eintragen“, „später anmelden“ oder ähnliche Aussagen können ebenfalls getestet werden. Wichtig ist vor allem, dass der Nutzer beim „Klicken“ kurz gedanklich gefordert wird.

Um dies zu gewährleisten, wurde folgender CSS-Code in die style.css des Child-Themes eingefügt (Alternativ kannst du auch das CSS-Feld im Customizer nutzen):

/* Newsletter Anmeldung Close-Text */
#mp_form_slide_in1::before {
  content: "später";
  display: block;
  position: absolute;
  right: 40px;
  top: 7px;
}

Die erste Zeile kommentiert den folgenden Abschnitt. Im Anschluss wird das „before“ Element in der jeweiligen Formular-Platzierung ausgewählt. MailPoet bietet derzeit 5 Positionen an, die einen unterschiedlichen CSS-Code erfordern.

Den Text nach „content:“ kannst du individuell anpassen und prüfen.

Die restlichen vier Zeilen geben die Position des Textes an. Hier kann es sein, dass du eigene Angaben treffen musst, damit die Abstände passend sind.

Wie effektiv die Veränderung ist und ob die Anzahl an Abonnenten gesteigert werden konnte, wird zu gegebener Zeit evaluiert. Die Änderung wurde erst am 1. August 2022 getätigt.

Der Beitrag Newsletter Anmeldungen steigern | MailPoet Schließen-Text (Button) erschien zuerst auf deinWP.de.

Lösung auf Basis von GeneratePress

GeneratePress Version 3.1.3

add_filter( 'generate_excerpt_more_output', function( $more ) {
    if ( in_category('slug') ) {
        return sprintf( ' ... <a class="read-more" title="%1$s" href="%2$s">%3$s</a>',
            the_title_attribute( 'echo=0' ),
            esc_url( get_permalink( get_the_ID() ) ),
            __( 'Custom Text', 'generatepress' )
        );
	}
    return $more;
}, 50 );

Du musst noch bei „Slug“ im Bereich if ( in_category(‚slug‚) den Namen deiner Wunsch-Kategorie angeben und den Platzhalter „Custom Text“ mit deiner eigenen Idee befüllen. Schon erstrahlt je nach Kategorie ein anderer Text auf deinem Weiterlesen-Button.

Ideen für deinen Weiterlesen-Text

• weiterlesen
• mehr
• Mehr erfahren
• Mehr lesen
• Tiefer eintauchen

Der Beitrag WordPress Weiterlesen Button – individueller Text je nach Kategorie erschien zuerst auf deinWP.de.

Kurzgesagt: Wenn WordPress deine Lieblingsschriftart lokal bezieht, freuen sich deine Nutzer. Auch Webfonts kannst du als Datei lokal einbinden!

Warum lokale Schriftarten sinnvoll sind

Nutzt du auf deiner Webseite eine Webschrift, wird diese über einen externen Server bereitgestellt. Daher werden diese Bibliotheken auch Drittanbieter genannt. Typischerweise verwenden WordPress-Themes an dieser Stelle Google Fonts. Daher kommuniziert deine Webseite zunächst mit einem Server von Google, um die Schrift anzuzeigen. Diesen Prozess musst du in deiner Datenschutzerklärung angeben!

Das lokale Bereitstellen der Fonts ist daher schon aus Datensparsamkeit angebracht. Zudem musst du dich nicht auf die Dienste der Drittanbieter verlassen, zumeist erhöht sich die Geschwindigkeit deiner Seite und du kannst die Schriften cachen.

Der schwerwiegendste Nachteil hängt an der Formatvielfalt. Es ist wichtig, zumindest alle fünf Formate bereitzustellen, damit keine ungewollten Darstellungen entstehen. Zwar sind WOFF bzw. WOFF2 weit verbreitet, aber in den eigenen Test zeigte sich häufiger, dass die anderen Formate (EOT, TTF, SVG) wichtig sind. Gerade beim Prüfen mit verschiedenen Browsern bin ich als Autor und Tester bald wahnsinnig geworden 😉

Woher bekommst du deine Schriftart?

Je nachdem, welche Schriftart du lokal einbinden möchtest, einer deiner ersten Schritte sollte dich auf den Google Webfonts Helper von Herokuapp.com führen. Wenn du deine Wunsch-Schrift hier findest, sind die folgenden Schritte deutlich einfacher. Wir zeigen dir diese anhand der Schriftart Roboto.

Suche nun auf der linken Seite die Schrift, die du herunterladen möchtest.

Im nächsten Schritt kannst du dir deine Varianten aussuchen. Zügel dich an dieser Stelle, zumindest etwas! Je mehr Schriftschnitte und Varianten du verwendest, desto mehr Last erzeugt deine Webseite. Also verwende nur Schriften, die du auch einsetzen wirst und setze nur eine begrenzte Anzahl ein.

Den dritten Schritt, also die CSS-Angaben, benötigen wir nachher noch einmal. Lass das Browserfenster daher geöffnet! Für den Moment genügt es uns, wenn wir die Daten herunterladen. Du lädst dir einen als ZIP komprimierten Ordner herunter und wir werden diesen in den nächsten Schritten weiterverarbeiten.

Wie fügst du eine lokale Schriftart in dein WordPress?

Grundsätzlich existieren zwei unterschiedliche Varianten. Die Schriftarten via CSS hinzufügen oder mittels Plugin. Letztere Methode erscheint besonders einfach und reizvoll. Aber halte bitte Abstand davon und spare ein unnötiges Plugin ein! Versuche die bessere Methode! Wir helfen dir dabei!

Schriftarten via FTP hochladen

Zunächst erstellen wir uns im Ordner des Child-Themes eine passende Verzeichnisstruktur. Lass dich hier von der Struktur deines Eltern-Themes leiten. Häufig existiert der Ordner „assets“ mit dem Unterordner „fonts“. Diese nutzen wir hier ebenfalls. Die Verzeichnisstruktur schaut nun wie folgt aus: wp-content/themes/generatepress_child/assets/fonts/

Anstatt „generatepress_child“ wird bei dir der Name deines Child-Themes stehen.

In dieses Verzeichnis lädst du die gewünschten lokalen Schriftarten hoch, also den entpackten Ordner. Oder du lässt den Ordner über deinen FTP-Manager automatisch entpacken. Nun haben wir eine URL-Struktur, die wir weiter verwenden können. Ob die Schriften funktionieren kannst du testen, indem du die URL aufrufst: https://deinwp.de/wp-content/themes/generatepress_child/assets/fonts/roboto-v29-latin-regular.svg

Anstatt https://deinwp.de musst du selbstverständlich deine Domain einsetzen und den Pfad deines Uploads anpassen! 😉

Schriften via WordPress hochladen

Wenn du keinen direkten Zugriff auf deinen Server hast oder du die Schriften via WordPress hochladen möchtest, geht dies auch. Allerdings musst du hierzu das Hochladen dieser Daten erlauben.

Egal wie du deine Fonts auf deinen Server bekommst, nun müssen wir @font-face nutzen. Damit dein WordPress die neuen Schriftarten kennenlernt, musst du beide miteinander bekannt machen. Hierzu wird ein CSS-Eintrag benötigt, der folgende Code-Informationen enthält:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Bei „..“ musst du deine Webseite und die jeweilige Verzeichnisstruktur eintragen. Also in unserem Fall, lautet die komplette URL wie folgt: https://deinwp.de/wp-content/themes/generatepress_child/assets/fonts/Brandon_reg.woff2

Um den Pfad dynamisch zu halten, kannst du „./assets/fonts/roboto-v29-latin-regular" verwenden, dann wird automatisch im verwendeten Child-Theme nach dem Ordner und der Schriftart gesucht.

Hast du noch den besagten Tab geöffnet? Dann kannst du im Schritt 3 den erwähnten Ordner-Präfix angeben:

Durch diesen Schritt entfällt die lästige Arbeit die CSS-Informationen händisch aufzubauen. Du kannst alle Zeilen kopieren und in die style.css einfügen. Also dem Stylesheet deiner Website.

Schriften über dein Theme hinzufügen

Einige Themes, wie Divi, Elementor oder Generatepress bringen eigene Font-Manager mit. Hier kannst du in den Einstellungen eine „Typography“ (Typografie) hinzufügen und innerhalb von bestimmten Bereichen verwenden.

Bei GeneratePress lassen sich zwar die Schriften an dieser Stellet einstellen, aber nicht hochladen. Das notierte Prozedere entfällt somit nicht. Du kannst hier allerdings benutzerdefinierte Einstellungen einfacher vornehmen, als dies üblicherweise der Fall war. Beispielsweise lassen sich so unterschiedliche Schriftarten, Größen, Zeilenabstände, Laufweite usw. je nach Verwendung (Überschrift, Zitate, Fließtext) einstellen.

Exkurs: GeneratePress

Mit dem Theme GeneratePress erhältst du die Option, deine Text-Blöcke im Stil zu verändern und auch unterschiedliche Schriften zu verwenden. Vorher legst du jedoch zentral deine Schriftarten über den Customizer fest. Dort sind allerdings unzählige Google-Fonts hinterlegt, welche wir nicht nutzen wollen. Warum fragst du dich?

Du hast sicherlich schon einmal gelesen, dass die Verwendung von Google Fonts datenschutzrechtlich schwierig sein kann. „Keiner“ weiß genau, welche Daten über die Autobahn nach Amerika gesendet werden, wodurch eine Deaktivierung dieser Schriften sinnvoll ist. Zum Glück ist dies schnell zu bewerkstelligen! Folgende Zeilen Code müssen in deine functions.php eingefügt werden und schon verwendet GeneratePress (ab Version 3.2.0) keine externen Schriftarten mehr von Google.

# GeneratePress - Deactivate Google Fonts loading
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-google-fonts' );
}, 99 );

# GeneratePress - Remove Google Fonts from Customizer / Block-Editor
add_filter( 'generate_font_manager_show_google_fonts', '__return_false' );

Im Nachgang können wir die eigene Schriftart hinzufügen. Hierfür klickst du im Menüpunkt Design –> auf den Customizer –> und dann auf Typographie –> und wählst „Add Font“ aus. Im Feld „font family name“ den genauen Namen angeben. Gut möglich, dass du nicht nach der Schriftart suchen kannst, da der Customizer diese nicht automatisch erkennt und findet.

Um eine lokale Schriftart hinzuzufügen, muss diese allerdings vorher hochgeladen werden. Und hier hilft uns das Wissen aus dem ersten Abschnitt!

Eine gute Methode um deine Schriftart auch im Theme-Customizer von GeneratePress auf deiner Webseite auszuwählen, sind folgende Zeilen. Füge diese zur functions.php deines GeneratePress Child-Themes hinzu und schon erscheint die Schriftart wie von Zauberhand im Dropdown der Einstellungen. Achte erneut darauf den Namen korrekt zu schreiben, da es sonst zu unerwünschten Fehlern kommen kann.

# GeneratePress - typography default font
add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'Roboto';
    return $fonts;
}

Diese Zeilen kannst du in deine functions.php einfügen, ist aber keine Bedingung.

Exkurs: Elementor

Die standardisiert verwendeten Google Fonts lassen sich ebenfalls zügig deaktivieren. Hierzu direkt am Anfang der functions.php folgende Zeile einfügen:

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Exkurs: Plugins

Einzelne Plugins benötigen Informationen zu unserer Standard-Schriftart. Meist gibt es dazu passende Anleitungen:

• Slider Revolution

Schriften via Plugin hinzufügen

Diese Methode ist einfach, jedoch grundsätzlich unnütz 😉 Jedes Plugin „belastet“ dein System. Jedes Fremd-Plugin birgt ein Risiko für Inkompatibilitäten oder im Bereich der Sicherheit. Ausführlich haben wir uns der Thematik hier gewidmet.

Plugin suchen (beispielsweise „Use Any Font“), installieren und den Anweisungen folgen. Zumeist lädst du deine Schriftart hoch.

und stellst im zweiten Schritt ein, wann welche Schriftart verwendet werden soll.

Exkurs: Schriftarten

Schriftarten unterscheiden sich in der Benutzung von Serifen. Dementsprechend existieren serifenlose und Schriften mit Serifen. Dieser kleine Querstrich am Ende der Buchstabenbalken kann auf unterschiedliche Arten ausgebiltet sein.

• Times New Roman ist sicherlich die bekannteste Serifen-Schriftart.
• Arial ist eine serifenlose Schrift, die durch große Mittellängen und einfache Formen charakterisiert wird.

Nicht alle, aber sehr viele Schriften aus dem Printbereich, besitzen bereite ein Webschriften-Äquivalent. Dies hängt unter anderen daran, dass Printtexte häufig aus Serifen-Schriften formuliert werden. Durch diese Querverbindungen erhalten unsere Augen eine imaginäre Linie und gleiten von Wort zu Wort. Aufgrund der Pixel eines Monitors werden Serifen eventuell verpixelt dargestellt, was bei Fließtexten für dein Auge unscharf wirken kann. Daher solltest du eine serifenlose Schrift verwenden. Bei höheren Schriftgrößen ist dier Effekt nicht so drastisch:

• Für Web-Fließtexte und Schriften in geringer Größe: serifenlose Variante
• Für Auszeichnungen und hohe Schriftgrößen, können Serifen verwendet werden

Zur Prüfung gibst du den Namen deiner Schriftart in Zusammenhang mit „Webfont“ an. Und schon landen wir bei den Dateiformaten, denn „woff“ oder „woff2“ sind typische Webformate.

Folgende fünf Formate solltest du für eine maximale Kompatibilität bereithalten.

• eot = embedded-opentype = IE6-IE8
• woff2 = Super Modern Browsers
• woff = Modern Browsers
• ttf = truetype = Safari, Android, iOS
• svg = Legacy iOS

Schriftart umwandeln

Eventuell ist deine Schriftart nicht in jedem benötigten Format verfügbar. Dann kannst du sie online ganz einfach umwandeln. Wichtig zu beachten ist hier, dass du auf die Lizenzierung achtest und nur Schriften umwandelst, welche du auch besitzt und die Erlaubnis dafür hast. Du kannst z.B. mit Font Squirrel Schriften, welche im TrueType- oder OpenType-Format (*.ttf, *.otf) vorliegen, mit wenigen Klicks umwandeln. Lade dazu einfach deine Datei hoch und folge den Einstellungen.

Du kannst deine Schriftart auch mit anderen Tools vorher konvertieren, konvertieren und konvertieren. Je nach Website, Konverter sowie auch Anzahl von Schriftschnitten musst du für die Umwandlung bezahlen, mehrere Konverter nutzen oder Geduld mitbringen.

Hat das Einbinden deiner Schriften funktioniert oder sind Fragen offen geblieben?

Der Beitrag Schriftart hinzufügen erschien zuerst auf deinWP.de.

Hier kommt die einfache aber sichere Lösung für dich: Wir geben einfach jedem Block per CSS einen kleinen Rahmen. Sobald du dann mit der Maus darüber fährst, erscheint dieser Rahmen und so siehst du beim Bearbeiten genau wo du dich befindest und welchen Block du im Gutenberg anwählst. Keine umständliche Suche mehr, nach dem richtigen Element, durch mehr Sichtbarkeit des gewünschten Block.

Doch was ist dafür nötig? Das erfährst du nun!

Zu aller erst erstellen wir die Grundlage, damit wir unser eigenes CSS für das Backend im Gutenberg auch sehen. Dazu fügst du in deiner „functions.php“ des (Child-)Themes folgendem Code-Schnipsel hinzu.

/* Gutenberg Stylings im Backend */
function dwp_gutenberg_styles() {
	wp_enqueue_style( 'gutenberg-css', get_theme_file_uri( '/gutenberg.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'dwp_gutenberg_styles' );

Dieser Code lädt den Inhalt der Datei „gutenberg.css„, welche wir nutzen, um deinen Gutenberg-Editor um eigene Stylings zu erweitern. Nun erstellst du im Ordner deines Child-Themes eine weitere Datei und nennst diese „gutenberg.css„. Für die angesprochene Problematik fügst du nun folgenden Zeilen ein.

/* Rahmen für Gutenberg-Blöcke */
.wp-block:hover {
    box-shadow: 0 0 0 1.5px #d7d7d7;
}

Mit diesen Zeilen erhältst du beim hovern über deine Blöcke einen kleinen Rahmen, damit du besser siehst wo du dich befindest. Hier ein kleines Beispiel, wie es bei dir aussehen kann:

Von nun an kannst du mit der gutenberg.css auch weitere Anpassungen für dein Backend-Editor erstellen. Von der Breite des Editors selbst bis hin zu eigenen Klassen, die z.B. deine Schrift in der Darstellung anpassen, damit du diese schon beim bearbeiten im gleichen Stil, wie auch im Frontend siehst. Doch dazu später mehr.

Der Beitrag Gutenberg – Blöcke besser erkennen erschien zuerst auf deinWP.de.