5
(2)

Eingebaute Font Awesome Icons in WordPress suchen – Snippets aus der Praxis

Erstellt / aktualisiert

wichtige Informationen...

Affiliate - Offenlegung

Auf meiner Seite verwende ich sogenannte Affiliate-Links, diese sind mit einem gekennzeichnet, damit du diese auch direkt erkennen kannst.
Sobald du über so einen Link das Produkt kaufen würdest, erhalte ich möglicherweise eine Provision vom jeweiligen Anbieter. Außerdem entstehen für Dich natürlich keine zusätzlichen Kosten!
Mich unterstützt du damit aber enorm und trägst dazu bei, dass es auch in Zukunft weitere Guides und Vorstellungen von mir hier geben wird.

Ich empfehle nur Tools / PlugIns / Anbieter / Produkte, hinter denen ich auch wirklich stehe, bzw. bei denen ich auch einen Mehrwert sehe.

DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramms, das zur Bereitstellung eines Mediums für Webseiten konzipiert wurde, mittels dessen durch die Platzierung von Partner-Links zu Amazon.de Entgelte verdient werden können.


ACHTUNG! Bitte lesen!

Du benutzt das hier Gezeigte natürlich, wie immer, auf eigenes Risiko!
Ich habe alles selbst durchgeführt und mir mein System nicht zerschossen oder sonst irgendwelche negativen Auffälligkeiten bemerkt.

Aber dennoch… Backups sind immer gut….
Für WordPress-Backups am besten mit UpdraftPlus

Ich übernehme keine Haftung für Schäden jeglicher Art am System, der Hardware oder der Katze…. :-P


DarkWolfCave.de

Snippets aus der Praxis – Font Awesome Icons in WordPress suchen

In meiner Blog-Reihe »Snippets aus der Praxis« nehme ich dich mit in meinen Alltag und zeige dir, wie ich bestimmte Herausforderungen angehe und löse.

Heutiges Thema: Wie kann ich alle benutzten Font Awesome Icons in WordPress finden

Manchmal sind es nur Kleinigkeiten, die über ein quick and dirty Script gelöst werden, manchmal sind es auch komplexere Themen und Vorgänge. Alles auf jeden Fall aus meinem direkten Umfeld. Du darfst hier allerdings keine top professionelle Lösungen, die dazu auch noch super sicher sind, erwarten. Hier geht es meistens nur um eine schnelle Lösungsfindung und sollte daher als Anregung gedacht sein und keinesfalls irgendwo außerhalb in seinem privaten Umfeld angewendet werden.

DarkWolfCave.de

Snippets aus der Praxis – Was dich heute hier erwartet

Ausgangslage: In meinem Artikel SPEED UP FONT AWESOME erkläre ich, wie du dank GenerateBlocks und dem direkten Einfügen von SVG-Code, komplett auf das Einbinden von Font Awesome Files (JavaScript, CSS und vor allem die WebFonts) verzichten kannst.

Problemchen: Sobald du die Webfonts aus dem Header herauswirfst, werden alle deine genutzten Icons unbrauchbar. Denn in der Regel wirst du diese mit zum Beispiel <i class=”fa fa-discord”> eingebaut haben. Und dieses »fa-discord« ist in den Dateien verankert, die wir jetzt nicht mehr möchten. Daher wirst du alle deine Icons manuell anpassen müssen. (Bei der SVG-Methode – in dem Artikel zeige ich dir aber auch noch eine andere Lösung)

Gedanken: Ich habe nicht so viele Icons eingebaut, also ist das manuelle Bearbeiten schon ok. Vor allem, weil ich dann so ganz auf die WebFonts, sowie CSS und JavaScript Dateien von Font Awesome verzichten kann. Nur möchte ich wirklich nicht alle Beiträge und Seiten einzeln durchlesen, bis ich die mit den Icons gefunden habe.

Was ich will: Eine Möglichkeit, mir alle Seiten und Beiträge anzeigen zu lassen, in denen ich etwas mit »fa-« eingebunden habe. Aus dieser Übersicht heraus möchte ich direkt in den Editor gelangen.

Font Awesome Icons in WordPress suchen – über ein Snippet

Für den genannten Einsatz reicht uns ein kleines Snippet, denn wir benötigen es auch nur kurz und würden es nach erfolgter Arbeit wieder deaktivieren.

Daher gibt es keine große Aufmerksamkeit auf Absicherung, Code-Injektion usw.
Bitte beachte dies, wenn du dieses Snippet bei dir verwenden möchtest!

Um nicht immer umständlich, und unnötig, an der function.php herumwerkeln zu müssen, nutze ich für solche Zwecke das wirklich geniale Plugin CodeSnippets. Wie schon mehrmals auf meiner Website erwähnt, kann ich es wirklich jedem ans Herz legen, auch wenn du nur gelegentlich mal etwas ändern oder testen willst. Wie etwas in den Header laden oder einfache eigene Shortcodes erstellen usw.
Pro-Tipp: Sollten sie mal wieder eine Lifetime-Lizenz anbieten, dann greif zu! Die kommen selten vor und sind immer wieder weg. 😉

Fangen wir an und bauen uns ein Snippet

Über dein Admin-Menü kommst du zu »Snippets« »Add New« und erstellst dir eine neue Function.
Namen vergeben, den Sourcecode einfügen und das Ganze speichern.

darkwolfcave - Font Awesome Icons Search Script
function search_font_awesome_icons() {
    global $wpdb;

    // Suche nach dem Klassenattribut "i class" in allen Beiträgen und Seiten
    $results = $wpdb->get_results("
        SELECT ID, post_title
        FROM {$wpdb->prefix}posts
        WHERE post_type IN ('post', 'page')
        AND post_status = 'publish'
        AND post_content LIKE '%<i class=\"%fa-%>%'
    ");

    // HTML-Liste der gefundenen Beiträge erstellen
    $output = '<h2>Beiträge und Seiten mit Font Awesome Icons:</h2>';
    if ($results) {
        $output .= '<ul>';
        foreach ($results as $result) {
            $post_id = $result->ID;
            $post_title = $result->post_title;
            $edit_link = get_edit_post_link($post_id);
            $output .= '<li><a href="' . esc_url($edit_link) . '" target="_blank">' . esc_html($post_title) . '</a></li>';
        }
        $output .= '</ul>';
    } else {
        $output .= '<p>Keine Beiträge oder Seiten mit Font Awesome Icons gefunden.</p>';
    }

    // Ausgabe der Liste
    echo $output;
}

// Funktion zum Hinzufügen einer benutzerdefinierten Seite in das WordPress-Dashboard-Menü
function add_font_awesome_icon_page() {
    add_menu_page(
        'Font Awesome Icons Suche',
        'Font Awesome Icons Suche',
        'manage_options',
        'font-awesome-icons-search',
        'search_font_awesome_icons'
    );
}
add_action('admin_menu', 'add_font_awesome_icon_page');

Nach dem Speichern und Reload des Admin-Bereichs, siehst du einen neuen Menüeintrag mit dem Namen “Font Awesome Icons Suche”.
Einen Klick weiter, werden dir alle Seiten und Beiträge angezeigt, in denen du ein fa-ICON mit <i class> eingebaut aus.
Solltest du <span class> oder anderes benutzen, dann bitte an der entsprechenden Stelle im SourceCode einfach ändern. In der Regel nehmen wohl die meisten die <i class> Variante, weil diese auch von Font Awesome erwähnt wird.

Von hier aus kannst du ganz einfach deine betroffenen Seiten und Beiträge bearbeiten. Ich öffne mir die Links immer schrittweise in einem neuen TAB, bearbeite sie dort und nehme den nächsten Punkt auf der Liste. Nachdem ich alle Änderungen durchgeführt habe (also ein SVG-Icon an der Stelle eingebaut habe), entferne ich final alle Font Awesome WebFonts, CSS und JavaScript Dateien und erfreue mich darüber, dass WordPress weniger laden muss!
Sobald du final mit allen Anpassungen fertig bist, kannst und solltest du das Snippet wieder deaktivieren oder löschen.

darkwolfcave - Font Awesome Icons Search Ergebnis
Avatar-Foto

Ich bin ein 1977 geborener Technik-Nerd. Mein erster Gefährte in der digitalen Welt war ein C64, der den Grundstein für meine Leidenschaft für Technologie legte. So wurde mein Hobby zum Beruf, und ich begann eine Ausbildung zum IT-Systemelektroniker. Selbst in meiner knappen Freizeit widme ich mich weiterhin meiner Leidenschaft fürs Gaming, verschiedene Programmiersprachen und andere IT-bezogene Themen. Ansonsten mag ich Hunde und bin fasziniert von Wölfen!

Gefällt dir der Beitrag?
Hinterlasse gerne ein paar Sterne!

Wie hilfreich war dieser Beitrag für Dich?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 2

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Abonnieren
Benachrichtige mich bei
guest
0 Kommentare
Inline Feedbacks
Alle Kommentare anzeigen

GitHub - Sourcecode

Den gesamten und aktuellen Sourcecode meiner Scripte, Snippets und Tools findest du ab jetzt auch in meinem GitHub Account!
Inhalt