Jak dodać Font Awesome do WordPress FSE? Prosty poradnik z kodem

Wprowadzenie

Ikony to nie tylko ozdoba strony internetowej. To przede wszystkim czytelne i szybkie przekazywanie informacji wizualnej. Jednym z najpopularniejszych rozwiązań w tym zakresie jest biblioteka Font Awesome. W tym artykule pokażę Ci krok po kroku, jak dodać Font Awesome do WordPressa w wersji FSE (Full Site Editing), nawet jeśli nie masz dużego doświadczenia z kodowaniem. Po prostu skopiuj i wklej gotowe rozwiązania.

Co to jest Font Awesome i po co go dodawać?

Font Awesome to biblioteka ikon, które można łatwo dodać do strony internetowej. Umożliwia dodawanie ikon takich jak:

ikony mediów społecznościowych (Facebook, Instagram)
strzałki, przyciski, oznaczenia
ikony funkcjonalne (np. koszyk, telefon, lokalizacja)

Dodanie ikon Font Awesome do WordPressa pozwala:

uatrakcyjnić wygląd strony
poprawić użyteczność (UX)
przyspieszyć odbiór treści

Jak dodać Font Awesome do WordPressa FSE?

Aby dodać Font Awesome do motywu opartego o FSE, musimy edytować plik functions.php naszego motywu (lub motywu podrzędnego). Oto instrukcja krok po kroku:

Zaloguj się do kokpitu WordPressa.
Przejdź do Wygląd > Edytor plików motywu lub uzyskaj dostęp przez FTP lub panel hostingowy.
Odszukaj plik functions.php.
Skopiuj i wklej odpowiedni kod z poniższych opcji (wybierz ten, który pasuje do Twojego przypadku).

Gdzie chcesz, aby ikony się pojawiały?

To bardzo ważne pytanie, ponieważ od tego zależy, jak bardzo Twoja strona zostanie obciążona dodatkowymi zasobami. Możesz:

Wczytać Font Awesome na wszystkich stronach (najprostsze, ale najmniej optymalne)
Wczytać Font Awesome tylko na konkretnych stronach (bardziej wydajne)
Wczytać Font Awesome tylko na wpisach lub tylko na stronach (dobry kompromis)

1. Kod ładujący Font Awesome na całej stronie WordPress

function load_font_awesome_globally() {
        wp_enqueue_style(
            'font-awesome',
            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
            array(),
            '6.5.0'
        );
    }
    add_action('wp_enqueue_scripts', 'load_font_awesome_globally');

2. Kod ładujący Font Awesome tylko na jednej, konkretnej stronie

function load_font_awesome_on_specific_page() {
        if (is_page('twoja-nazwa-strony')) {
            wp_enqueue_style(
                'font-awesome',
                'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
                array(),
                '6.5.0'
            );
        }
    }
    add_action('wp_enqueue_scripts', 'load_font_awesome_on_specific_page');

Uwaga: nazwa-wpisu to slug wpisu, np. dla https://mojastrona.pl/jak-zaczac slug to jak-zaczac.

3. Kod ładujący Font Awesome tylko na konkretnym wpisie

function load_font_awesome_on_specific_post() {
        if (is_single('nazwa-wpisu')) {
            wp_enqueue_style(
                'font-awesome',
                'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
                array(),
                '6.5.0'
            );
        }
    }
    add_action('wp_enqueue_scripts', 'load_font_awesome_on_specific_post');

Uwaga: nazwa-wpisu to slug wpisu, np. dla https://mojastrona.pl/jak-zaczac slug to jak-zaczac.

4. Kod ładujący Font Awesome tylko na stronach (nie wpisach)

function load_font_awesome_on_pages_only() {
        if (is_page()) {
            wp_enqueue_style(
                'font-awesome',
                'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
                array(),
                '6.5.0'
            );
        }
    }
    add_action('wp_enqueue_scripts', 'load_font_awesome_on_pages_only');

5. Kod ładujący Font Awesome tylko na wpisach (nie stronach)

function load_font_awesome_on_posts_only() {
        if (is_single()) {
            wp_enqueue_style(
                'font-awesome',
                'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
                array(),
                '6.5.0'
            );
        }
    }
    add_action('wp_enqueue_scripts', 'load_font_awesome_on_posts_only');

Dlaczego warto ładować tylko tam, gdzie trzeba?

Każdy dodatkowy styl lub skrypt ładowany na stronie:

wydłuża czas jej wczytywania,
obciąża użytkowników na słabszych łączach,
może wpłynąć na ocenę Core Web Vitals i SEO.

Dlatego zawsze warto dodać Font Awesome tylko tam, gdzie będzie rzeczywiście potrzebny.

Podsumowanie

Dodanie ikon Font Awesome do WordPressa FSE to łatwa i szybka operacja, jeśli wiesz, gdzie wkleić kod. W tym artykule pokazałem Ci:

jak działa Font Awesome,
gdzie wkleić kod,
jak go dopasować do swoich potrzeb.

Jeśli chcesz, możesz ten kod modyfikować, łączyć funkcje, albo dodać warunki sprawdzające konkretne szablony czy taksonomie.

Do działania!

Sebastian Bogdański
Twórca. Przedsiębiorca. Człowiek z pasją.
https://sebastianbogdanski.com

„Miałem pomysł, w który wierzyłem. Reszta przyszła z czasem i ciężką pracą.”