WP – Mi­ni­a­tur­bild statt Aufzählungszeichen;
und so auch im Menü?

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Advanced Editor Tools – ist so klasse!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
“Advanced Editor Tools – ist das ausgezeichnete!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Advanced Editor Tools – ist so sehr gut !”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Advanced Editor Tools – und tut sehr gut!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
“Advanced Editor Tools – ist so fabelhaft!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Advanced Editor Tools – ist de luxe!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Advanced Editor Tools – ist so fein!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Der Aufzählungszeichen von Punkten ein Mi­ni­a­tur­bild. Das erfolgt erst mal der Erstellung von kleinem Bild in ‘fixer Größe’. So Bild PNG oder SVG ab etwa 15px mal 15px. Dessen ist dann der Bearbeitung bspw. mit Boxy SVG in fixer Größe (also nicht Responsive) abzuspeichern. Denn so des Workflows ist im Nachhinein da die Bildgröße nicht anpassbar. So weiter ist die Definition einer Class und die HTML-Auszeichnung. So bspw dann geht das auch als Menüpunkt mit Image.

Mi­ni­a­tur­bild statt Aufzählungszeichen

Als erstes ist für das “List-Style-Image” im Customizer oder Childs Theme eine Class zu erstellen. Bspw. die Class listbild:

CSS

/* Class für List-Style-Image */
.listbild {list-style-image:url(https://..classicpress.svg)
}

Im Editor / Text ist das dann mit dem Attributname und dem Eigenschaftswert, also die Class mit class="listbild".

HTML

<ul class="listbild">
 	<li>Die Aufzählungszeichen erhalten somit das definierte Bild</li>
 	<li>Anmerkung: Das Bild ist im Editor nicht sichtbar</li>

</ul>
  • Die Aufzählungszeichen erhalten das Bild
  • Anmerkung: Das Bild ist im Editor nicht sichtbar

Und Weiteres zu Aufzählungszeichen im Titel Aufzählungszeichen Abstände und Farbe per HTML.

Zum Beispiel

Für die Menüpunkte ist erst mal eine Class von bspw menuepunkt zu erstellen.

CSS

/* Menüpunkt, Class "menuepunkt" */
.menuepunkt {list-style-image:url( https://..OpenClipart-Vectors_baum2.svg
);
padding-right: 5px;}

Oder das Image so nach dem Text sein soll:

CSS

/* Menüpunkt, Class "menuepunkt" */
.menuepunkt:after { content:url(https://..classicpress.svg);
padding-right: 5px;
}

Mit :before ist das Bild vor dem Text  und mit :after  ist das Bild nach dem Text.

Das Aufzählungszeichen im WP-Menü

Dashboard / Design / Menüs, evtl. erst mal oben Ansicht anpassen anklicken und ‘CSS-Klassen’ anhaken.

  • Je nach die Menüpunkte mit der CSS-Klasse.

Hier im bspw die “CSS-Klassen (optional)” funktionieren nicht mit Umlauten:

Also Beispiels richtig für CSS-Klassen ist so “menuepunkt”.

Nach dem Abspeichern des Menüs sind die Menüpunkte mit Image.

Das Menü dann direkt im Beitrag?

Das Menü ist hier direkt im Beitrag. So bedarf es eines PHP-Codes in der functions.php.

[menu name="Home Footer"] … so zeigt sich:

In praxi

… ist das zu sehen im Titel Das Inhaltsverzeichnis in der Form von Sitemap. … Dort dem bspw sind die Kategorien mit Image.

Nachlese

CSS list-style für ul und ol


Aktualisiert im Jahr 2023-Januar