Jalara Studio

veröffentlicht am

In WordPress Social Links Icon ändern

# # #

Der Artikel zeigt wie du mit Hilfe von CSS das Favicon oder Logo der Website für Social Link Icons verwenden kannst:

Zunächst benötigst du das Favicon oder Logo der gewünschten Website.

Am einfachsten geht dies mit dem Base64 Image String.

Wo finde ich den Base64 Image String?

Den findest du in der Suchanzeige, wenn du die gewünschte Website in Google suchst. Klicke anschließend mit der rechten Maustaste auf das Logo und im Kontext-Menü auf "Untersuchen":

Daraufhin öffnen sich der Tab Elements aus den DevTools des Browsers (hier Chrome).

Im günstigsten Fall wird dir direkt das Attribut src des Images zum kopieren angezeigt:

Sollte dies nicht der Fall sein, kannst du mit dem Tastaturkürzel Ctrl + Shift + C oder mit Hilfe des Zeigers oben links innerhalb des Tabs Element die Auswahl starten:

Wähle anschließend das gewünschte Icon neben der Suchanzeige aus, um den Base64 Image String direkt im Tab Elements in den DevTools angezeigt zu bekommen:

Kopiere die Link-Adresse aus dem Tab Elements anschließend. Klicke hierfür mit der rechten Maustaste auf den Base64 Image String und wähle im Kontext-Menü den Menüpunkt Copy link adress.

Im Fall von Wikipedia wäre nun folgender Base64 Image String in deinem Zwischenspeicher:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD+/v41NTUBAQEAAABZWVknJycWFhaZmZmIiIjp6ellZWXMzMzX19eurq54eHhHR0dExXFyAAAAAXRSTlMAQObYZgAAAPtJREFUeAG8kAWOBDAMA9d1Sin+/7XXbpZZdBaURlMrhx28ycGCD/n0bvkBwJf8C+AoIvRAWGtMyHGtCWkfxW+DRopuuIjUtTQJDStevNoXWaRjRSllLd1O8FFhgEZx2BmkAmHC8HwpOUyxSA50VqOjXgAl50URvNWPBRcAnmwnhbcduthqQCO9KYTFBG7eDWoK1T47AZX9DuiUYT/TuhX3MGpnD51kPprSA9Dl+BCKl7jWHHEHmHsLWhNZZMxPQCLTEuy+cYF6D9i8Q5e2Lcyz4AGwKdJbX0p7AegC2qnvxAsAxQRAYH8J6Dg1a/lvpKRJinMW4cxLMPsDAJjSCaG8cPmnAAAAAElFTkSuQmCC

Wo füge ich den Base64 Image String ein?

Diese Base64-Zeichenkette kannst du im CSS-Befehl content: url() wie folgt nutzen:

content: url(data:image/png;base64,iVBORw…)

Um den Befehl dem gewünschten Link a zuzuweisen, kannst du hierfür die URL nutzen:

a[href*="https://de.wikipedia.org"]

Anschließend kannst du das CSS nach deinen Wünschen (z.B. Höhe, Rand, Grayscale u.s.w) anpassen:

a[href*="wikipedia.org"] {
 content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD+/v41NTUBAQEAAABZWVknJycWFhaZmZmIiIjp6ellZWXMzMzX19eurq54eHhHR0dExXFyAAAAAXRSTlMAQObYZgAAAPtJREFUeAG8kAWOBDAMA9d1Sin+/7XXbpZZdBaURlMrhx28ycGCD/n0bvkBwJf8C+AoIvRAWGtMyHGtCWkfxW+DRopuuIjUtTQJDStevNoXWaRjRSllLd1O8FFhgEZx2BmkAmHC8HwpOUyxSA50VqOjXgAl50URvNWPBRcAnmwnhbcduthqQCO9KYTFBG7eDWoK1T47AZX9DuiUYT/TuhX3MGpnD51kPprSA9Dl+BCKl7jWHHEHmHsLWhNZZMxPQCLTEuy+cYF6D9i8Q5e2Lcyz4AGwKdJbX0p7AegC2qnvxAsAxQRAYH8J6Dg1a/lvpKRJinMW4cxLMPsDAJjSCaG8cPmnAAAAAElFTkSuQmCC);
 height: 18px;
 border-radius:50%;
 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
 filter: grayscale(100%);
}

Möchtest du das Social Link Icon nicht komplett den Text oder Icon ersetzen lassen, so kannst du das Pseudo-Element ::after verwenden:

a[href*="wikipedia.org"]::after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD+/v41NTUBAQEAAABZWVknJycWFhaZmZmIiIjp6ellZWXMzMzX19eurq54eHhHR0dExXFyAAAAAXRSTlMAQObYZgAAAPtJREFUeAG8kAWOBDAMA9d1Sin+/7XXbpZZdBaURlMrhx28ycGCD/n0bvkBwJf8C+AoIvRAWGtMyHGtCWkfxW+DRopuuIjUtTQJDStevNoXWaRjRSllLd1O8FFhgEZx2BmkAmHC8HwpOUyxSA50VqOjXgAl50URvNWPBRcAnmwnhbcduthqQCO9KYTFBG7eDWoK1T47AZX9DuiUYT/TuhX3MGpnD51kPprSA9Dl+BCKl7jWHHEHmHsLWhNZZMxPQCLTEuy+cYF6D9i8Q5e2Lcyz4AGwKdJbX0p7AegC2qnvxAsAxQRAYH8J6Dg1a/lvpKRJinMW4cxLMPsDAJjSCaG8cPmnAAAAAElFTkSuQmCC);
    background-size: 14px 14px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 0 -3px 5px;
    width: 18px;
    height: 18px;
    content: "";
    border: 2px solid white;
    opacity: 0.5;
}

Für einen Hover-Effekt wird das Pseudo-Element :over vor dem ::after-Selector gestellt:

a[href*="wikipedia.org"]:hover::after {
    opacity: 1;
}

Wo füge ich das CSS in WordPress ein?

In WordPress empfiehlt sich u.a. das Plugin Simple Custom CSS1, wenn dir der Editor im Customizer zu klein ist. Die Admin-Page von Simple Custom CSS findest du nach der Aktivierung unter dem Admin-Menü-Punkt Design:

Warum sehe ich keine Veränderung?

In einigen Fällen wird die Angabe !important nötig sein, um den CSS-Befehl zu priorisieren.

Achte auch darauf, den Cache zu erneuern, falls du ein Cache-Plugin wie WP Fastest Cache o.ä. nutzt, denn auch wenn du die Veränderung im eingeloggten Zustand siehst, wird diese dem User nicht angezeigt, wenn keine neue HTML-Pages aus den PHP-Files erzeugt wurde.

Links