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

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.

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.